关系插件

欢迎使用关系插件 .

此插件在使用时会改进体验 关系处理器插件 通过:

• 为可视化关系提供自定义组件
• 提供 目录图 包装
  • 更好的默认
  • 添加新关系过滤 Als 选项

设置

安装此插件 :

# From your Backstage root directory
yarn --cwd packages/app add @dweber019/backstage-plugin-relations

配置

你需要拥有 关系处理器插件 已配置 .

此外,确保至少使用后台版本 1.27.0。 。 。 .

实体页

在您引入新关系时, 您必须手动添加关系 EntityCatalogGraphCard 或替换 EntityRelationsCatalogGraphCard。此新卡将添加所有新配置的关系对并启用箭头作为默认值.

// packages/app/src/components/catalog/EntityPage.tsx

import { EntityRelationsCatalogGraphCard } from '@dweber019/backstage-plugin-relations';

const groupPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        ...
        <Grid item md={6} xs={12}>
          <EntityRelationsCatalogGraphCard variant="gridItem" height={400} />
        </Grid>
        ...
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);

此外,还有一张名片叫 EntityRelationsCard 以显示额外的关系.

const userPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        ...
        <Grid item md={6} xs={12}>
          <EntityRelationsCard relations={relationLabels} />
        </Grid>
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);

您可以定义包含的关系列表。 要显示的标签如上 relationLabels,看起来像

export const relationLabels = [
  {
    name: 'applicationOwnerOf',
    label: 'Application owner of',
  },
  {
    name: 'applicationOwnerBy',
    label: 'Application owner',
  },
];

如果不定义,则只显示自定义关系(如无所有者).

根目录图

目录图 /catalog-graph 可以通过使用 RelationsCatalogGraphPage 喜欢

// packages/app/src/App.tsx

import { RelationsCatalogGraphPage } from '@dweber019/backstage-plugin-relations';

const routes = (
  <FlatRoutes>
    ...
    <Route path="/catalog-graph" element={<RelationsCatalogGraphPage />} />
  </FlatRoutes>
);