Relations Plugin

Welcome to the relations plugin.

This plugin improves the experience when using the relations processor plugin by:

- Providing a custom component for visualizing relations
- Provide catalog graph wrappers for
- Better defaults
- Add new relations to filter als options


Setup

Install this plugin:

``bash


From your Backstage root directory


yarn --cwd packages/app add @dweber019/backstage-plugin-relations
`

$3

You need to have the relations processor plugin configured.

Additionally, make sure to use at least Backstage version 1.27.0.

$3

As you introduced new relations you either have to manually add the relation to the EntityCatalogGraphCard or the replacement
EntityRelationsCatalogGraphCard. This new card will add all newly configured relation pairs and enable arrows as default.

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

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

const groupPage = (



{entityWarningContent}
...



...



);
`

Additionally, there is a custom card called EntityRelationsCard to show additional relations.

`tsx
const userPage = (



{entityWarningContent}
...






);
`

You can define a list of relations incl. labels to show like above with relationLabels, which look like

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

If you don't define this, only the custom relations (e.g. no owner) will be displayed.

$3

The catalog graph at /catalog-graph can be changed to by using the RelationsCatalogGraphPage like

`tsx
// packages/app/src/App.tsx

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

const routes = (

...
} />

);
``