Skip to main content

纳入软件目录

这是一个高级用例，目前是一项试验性功能。 预计 > 应用程序接口会随着时间的推移而改变。

步骤​

  1. 创建插件 2. 从插件中读取实体 3. 导入插件并嵌入实体页面

创建一个插件​

按照同一流程您应该在一个文件夹中创建一个单独的软件包，代表您的插件。

例如

$ yarn new --select plugin
> ? Enter an ID for the plugin [required] my-plugin
> ? Enter the owner(s) of the plugin. If specified, this will be added to CODEOWNERS for the plugin path. [optional]

Creating the plugin...

从插件中读取实体​

您可以使用Backstage应用程序访问当前选定的实体使用实体例如

import { useEntity } from '@backstage/plugin-catalog-react';

export const MyPluginEntityContent = () => {
  const entity = useEntity();

  // Do something with the entity data...
};

内部useEntity利用React实体上下文由嵌入插件的实体页面提供。

导入插件并嵌入实体页面​

首先，您需要在实体页面导入您的插件。 位于packages/app/src/components/Catalog/EntityPage.tsx从Backstage应用程序的根软件包中获取。

import { MyPluginEntityContent } from '@backstage/plugin-my-plugin;

要将组件添加到实体视图中，需要修改packages/app/src/components/Catalog/EntityPage.tsx根据插件的需要，您可能只关心某些类型的实体，每个都有自己的内容该功能由EntitySwitch组件：

export const entityPage = (
  <EntitySwitch>
    <EntitySwitch.Case if={isKind('component')} children={componentPage} />
    <EntitySwitch.Case if={isKind('api')} children={apiPage} />
    <EntitySwitch.Case if={isKind('group')} children={groupPage} />
    <EntitySwitch.Case if={isKind('user')} children={userPage} />
    <EntitySwitch.Case if={isKind('system')} children={systemPage} />
    <EntitySwitch.Case if={isKind('domain')} children={domainPage} />

    <EntitySwitch.Case>{defaultEntityPage}</EntitySwitch.Case>
  </EntitySwitch>
);

此时，您需要修改希望组件出现的特定页面。 如果要扩展软件目录模型，您需要在EntitySwitch在现有组件类型中添加插件时，需要修改现有页面。 例如，如果您想将插件添加到systemPage，您可以通过添加一个EntityLayout.Route如下所示：

const systemPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3} alignItems="stretch">
        <Grid item md={6}>
          <EntityAboutCard variant="gridItem" />
        </Grid>
        <Grid item md={6}>
          <EntityHasComponentsCard variant="gridItem" />
        </Grid>
        <Grid item md={6}>
          <EntityHasApisCard variant="gridItem" />
        </Grid>
        <Grid item md={6}>
          <EntityHasResourcesCard variant="gridItem" />
        </Grid>
      </Grid>
    </EntityLayout.Route>
    <EntityLayout.Route path="/diagram" title="Diagram">
      <EntityCatalogGraphCard variant="gridItem" height={400} />
    </EntityLayout.Route>

    {/* Adding a new tab to the system view */}
    <EntityLayout.Route path="/your-custom-route" title="CustomTitle">
      <MyPluginEntityContent />
    </EntityLayout.Route>
  </EntityLayout>
);