paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 24 Packages Projects Releases Wiki Activity

Display owner and system as entity page links in the tables of the api-docs plugin

Browse Source
This commit is contained in:
Oliver Sand
2021-01-29 16:14:24 +01:00
parent 7ee15d2c5b
commit 7fc89bae29
22 changed files with 339 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+70 -12
View File
@@ -14,7 +14,13 @@
* limitations under the License.
*/
import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
import {
ApiEntityV1alpha1,
Entity,
EntityName,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import {
Table,
TableColumn,
@@ -22,24 +28,54 @@ import {
TableState,
useQueryParamState,
} from '@backstage/core';
import {
EntityRefLink,
EntityRefLinks,
formatEntityRefTitle,
getEntityRelations,
} from '@backstage/plugin-catalog-react';
import { Chip } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import React from 'react';
import { ApiTypeTitle } from '../ApiDefinitionCard';
import { EntityLink } from '../EntityLink';
const columns: TableColumn<Entity>[] = [
type EntityRow = ApiEntityV1alpha1 & {
row: {
partOfSystemRelationTitle?: string;
partOfSystemRelations: EntityName[];
ownedByRelationsTitle?: string;
ownedByRelations: EntityName[];
};
};
const columns: TableColumn<EntityRow>[] = [
{
title: 'Name',
field: 'metadata.name',
highlight: true,
render: (entity: any) => (
<EntityLink entity={entity}>{entity.metadata.name}</EntityLink>
render: entity => (
<EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
),
},
{
title: 'System',
field: 'row.partOfSystemRelationTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.partOfSystemRelations}
defaultKind="system"
/>
),
},
{
title: 'Owner',
field: 'spec.owner',
field: 'row.ownedByRelationsTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.ownedByRelations}
defaultKind="group"
/>
),
},
{
title: 'Lifecycle',
@@ -48,9 +84,7 @@ const columns: TableColumn<Entity>[] = [
{
title: 'Type',
field: 'spec.type',
render: (entity: Entity) => (
<ApiTypeTitle apiEntity={entity as ApiEntityV1alpha1} />
),
render: entity => <ApiTypeTitle apiEntity={entity} />,
},
{
title: 'Description',
@@ -62,7 +96,7 @@ const columns: TableColumn<Entity>[] = [
cellStyle: {
padding: '0px 16px 0px 20px',
},
render: (entity: Entity) => (
render: entity => (
<>
{entity.metadata.tags &&
entity.metadata.tags.map(t => (
@@ -123,8 +157,32 @@ export const ApiExplorerTable = ({
);
}
const rows = entities.map(e => {
const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
kind: 'system',
});
const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
return {
...(e as ApiEntityV1alpha1),
row: {
ownedByRelationsTitle: ownedByRelations
.map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
.join(', '),
ownedByRelations,
partOfSystemRelationTitle:
partOfSystemRelations.length > 0
? formatEntityRefTitle(partOfSystemRelations[0], {
defaultKind: 'system',
})
: undefined,
partOfSystemRelations,
},
};
});
return (
<Table
<Table<EntityRow>
isLoading={loading}
columns={columns}
options={{
@@ -134,7 +192,7 @@ export const ApiExplorerTable = ({
padding: 'dense',
showEmptyDataSourceMessage: !loading,
}}
data={entities}
data={rows}
filters={filters}
initialState={queryParamState}
onStateChange={setQueryParamState}
plugins/api-docs/src/components/ApisCards/ApisTable.tsx
+71 -10
View File
@@ -14,24 +14,59 @@
* limitations under the License.
*/
import { ApiEntity } from '@backstage/catalog-model';
import {
ApiEntity,
EntityName,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { Table, TableColumn } from '@backstage/core';
import {
EntityRefLink,
EntityRefLinks,
formatEntityRefTitle,
getEntityRelations,
} from '@backstage/plugin-catalog-react';
import React from 'react';
import { ApiTypeTitle } from '../ApiDefinitionCard';
import { EntityLink } from '../EntityLink';
const columns: TableColumn<ApiEntity>[] = [
type EntityRow = ApiEntity & {
row: {
partOfSystemRelationTitle?: string;
partOfSystemRelations: EntityName[];
ownedByRelationsTitle?: string;
ownedByRelations: EntityName[];
};
};
const columns: TableColumn<EntityRow>[] = [
{
title: 'Name',
field: 'metadata.name',
highlight: true,
render: (entity: any) => (
<EntityLink entity={entity}>{entity.metadata.name}</EntityLink>
render: entity => (
<EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
),
},
{
title: 'System',
field: 'row.partOfSystemRelationTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.partOfSystemRelations}
defaultKind="system"
/>
),
},
{
title: 'Owner',
field: 'spec.owner',
field: 'row.ownedByRelationsTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.ownedByRelations}
defaultKind="group"
/>
),
},
{
title: 'Lifecycle',
@@ -40,7 +75,7 @@ const columns: TableColumn<ApiEntity>[] = [
{
title: 'Type',
field: 'spec.type',
render: (entity: ApiEntity) => <ApiTypeTitle apiEntity={entity} />,
render: entity => <ApiTypeTitle apiEntity={entity} />,
},
{
title: 'Description',
@@ -65,8 +100,35 @@ export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
tableStyle.height = 'calc(100% - 10px)';
}
const rows = entities
// TODO: For now we skip all APIs that we can't find without a warning!
.filter(e => e !== undefined)
.map(e => {
const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
kind: 'system',
});
const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
return {
...(e as ApiEntity),
row: {
ownedByRelationsTitle: ownedByRelations
.map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
.join(', '),
ownedByRelations,
partOfSystemRelationTitle:
partOfSystemRelations.length > 0
? formatEntityRefTitle(partOfSystemRelations[0], {
defaultKind: 'system',
})
: undefined,
partOfSystemRelations,
},
};
});
return (
<Table<ApiEntity>
<Table<EntityRow>
columns={columns}
title={title}
style={tableStyle}
@@ -77,8 +139,7 @@ export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
actionsColumnIndex: -1,
padding: 'dense',
}}
// TODO: For now we skip all APIs that we can't find without a warning!
data={entities.filter(e => e !== undefined) as ApiEntity[]}
data={rows}
/>
);
};
plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+25 -2
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import { Entity, RELATION_CONSUMES_API } from '@backstage/catalog-model';
import {
Entity,
RELATION_CONSUMES_API,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
@@ -99,10 +104,27 @@ describe('<ConsumedApisCard />', () => {
},
spec: {
type: 'openapi',
owner: 'Test',
lifecycle: 'production',
definition: '...',
},
relations: [
{
type: RELATION_PART_OF,
target: {
kind: 'System',
name: 'MySystem',
namespace: 'default',
},
},
{
type: RELATION_OWNED_BY,
target: {
kind: 'Group',
name: 'Test',
namespace: 'default',
},
},
],
});
apiDocsConfig.getApiDefinitionWidget.mockReturnValue({
type: 'openapi',
@@ -121,6 +143,7 @@ describe('<ConsumedApisCard />', () => {
expect(getByText(/target-name/i)).toBeInTheDocument();
expect(getByText(/OpenAPI/)).toBeInTheDocument();
expect(getByText(/Test/i)).toBeInTheDocument();
expect(getByText(/MySystem/i)).toBeInTheDocument();
expect(getByText(/production/i)).toBeInTheDocument();
});
});
plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+25 -2
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import { Entity, RELATION_PROVIDES_API } from '@backstage/catalog-model';
import {
Entity,
RELATION_OWNED_BY,
RELATION_PART_OF,
RELATION_PROVIDES_API,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
@@ -99,10 +104,27 @@ describe('<ProvidedApisCard />', () => {
},
spec: {
type: 'openapi',
owner: 'Test',
lifecycle: 'production',
definition: '...',
},
relations: [
{
type: RELATION_PART_OF,
target: {
kind: 'System',
name: 'MySystem',
namespace: 'default',
},
},
{
type: RELATION_OWNED_BY,
target: {
kind: 'Group',
name: 'Test',
namespace: 'default',
},
},
],
});
apiDocsConfig.getApiDefinitionWidget.mockReturnValue({
type: 'openapi',
@@ -120,6 +142,7 @@ describe('<ProvidedApisCard />', () => {
expect(getByText(/Provided APIs/i)).toBeInTheDocument();
expect(getByText(/target-name/i)).toBeInTheDocument();
expect(getByText(/OpenAPI/)).toBeInTheDocument();
expect(getByText(/MySystem/)).toBeInTheDocument();
expect(getByText(/Test/i)).toBeInTheDocument();
expect(getByText(/production/i)).toBeInTheDocument();
});
plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx
+70 -9
View File
@@ -14,23 +14,58 @@
* limitations under the License.
*/
import { ComponentEntity } from '@backstage/catalog-model';
import {
ComponentEntity,
EntityName,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { Table, TableColumn } from '@backstage/core';
import {
EntityRefLink,
EntityRefLinks,
formatEntityRefTitle,
getEntityRelations,
} from '@backstage/plugin-catalog-react';
import React from 'react';
import { EntityLink } from '../EntityLink';
const columns: TableColumn<ComponentEntity>[] = [
type EntityRow = ComponentEntity & {
row: {
partOfSystemRelationTitle?: string;
partOfSystemRelations: EntityName[];
ownedByRelationsTitle?: string;
ownedByRelations: EntityName[];
};
};
const columns: TableColumn<EntityRow>[] = [
{
title: 'Name',
field: 'metadata.name',
highlight: true,
render: (entity: any) => (
<EntityLink entity={entity}>{entity.metadata.name}</EntityLink>
render: entity => (
<EntityRefLink entityRef={entity}>{entity.metadata.name}</EntityRefLink>
),
},
{
title: 'System',
field: 'row.partOfSystemRelationTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.partOfSystemRelations}
defaultKind="system"
/>
),
},
{
title: 'Owner',
field: 'spec.owner',
field: 'row.ownedByRelationsTitle',
render: entity => (
<EntityRefLinks
entityRefs={entity.row.ownedByRelations}
defaultKind="group"
/>
),
},
{
title: 'Lifecycle',
@@ -68,8 +103,35 @@ export const ComponentsTable = ({
tableStyle.height = 'calc(100% - 10px)';
}
const rows = entities
// TODO: For now we skip all Components that we can't find without a warning!
.filter(e => e !== undefined)
.map(e => {
const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
kind: 'system',
});
const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
return {
...(e as ComponentEntity),
row: {
ownedByRelationsTitle: ownedByRelations
.map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
.join(', '),
ownedByRelations,
partOfSystemRelationTitle:
partOfSystemRelations.length > 0
? formatEntityRefTitle(partOfSystemRelations[0], {
defaultKind: 'system',
})
: undefined,
partOfSystemRelations,
},
};
});
return (
<Table<ComponentEntity>
<Table<EntityRow>
columns={columns}
title={title}
style={tableStyle}
@@ -80,8 +142,7 @@ export const ComponentsTable = ({
actionsColumnIndex: -1,
padding: 'dense',
}}
// TODO: For now we skip all APIs that we can't find without a warning!
data={entities.filter(e => e !== undefined) as ComponentEntity[]}
data={rows}
/>
);
};
plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
+25 -2
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import { Entity, RELATION_API_CONSUMED_BY } from '@backstage/catalog-model';
import {
Entity,
RELATION_API_CONSUMED_BY,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
@@ -104,9 +109,26 @@ describe('<ConsumingComponentsCard />', () => {
},
spec: {
type: 'service',
owner: 'Test',
lifecycle: 'production',
},
relations: [
{
type: RELATION_PART_OF,
target: {
kind: 'System',
name: 'MySystem',
namespace: 'default',
},
},
{
type: RELATION_OWNED_BY,
target: {
kind: 'Group',
name: 'Test',
namespace: 'default',
},
},
],
});
const { getByText } = await renderInTestApp(
@@ -119,6 +141,7 @@ describe('<ConsumingComponentsCard />', () => {
expect(getByText(/Consumers/i)).toBeInTheDocument();
expect(getByText(/target-name/i)).toBeInTheDocument();
expect(getByText(/Test/i)).toBeInTheDocument();
expect(getByText(/MySystem/i)).toBeInTheDocument();
expect(getByText(/production/i)).toBeInTheDocument();
});
});
plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
+25 -2
View File
@@ -14,7 +14,12 @@
* limitations under the License.
*/
import { Entity, RELATION_API_PROVIDED_BY } from '@backstage/catalog-model';
import {
Entity,
RELATION_API_PROVIDED_BY,
RELATION_OWNED_BY,
RELATION_PART_OF,
} from '@backstage/catalog-model';
import { ApiProvider, ApiRegistry } from '@backstage/core';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
@@ -104,9 +109,26 @@ describe('<ProvidingComponentsCard />', () => {
},
spec: {
type: 'service',
owner: 'Test',
lifecycle: 'production',
},
relations: [
{
type: RELATION_PART_OF,
target: {
kind: 'System',
name: 'MySystem',
namespace: 'default',
},
},
{
type: RELATION_OWNED_BY,
target: {
kind: 'Group',
name: 'Test',
namespace: 'default',
},
},
],
});
const { getByText } = await renderInTestApp(
@@ -119,6 +141,7 @@ describe('<ProvidingComponentsCard />', () => {
expect(getByText(/Providers/i)).toBeInTheDocument();
expect(getByText(/target-name/i)).toBeInTheDocument();
expect(getByText(/Test/i)).toBeInTheDocument();
expect(getByText(/MySystem/i)).toBeInTheDocument();
expect(getByText(/production/i)).toBeInTheDocument();
});
});
plugins/api-docs/src/components/EntityLink/EntityLink.test.tsx
-41
View File
@@ -1,41 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Entity } from '@backstage/catalog-model';
import { renderInTestApp } from '@backstage/test-utils';
import React from 'react';
import { EntityLink } from './EntityLink';
describe('<EntityLink />', () => {
it('provides link to entity page', async () => {
const entity: Entity = {
apiVersion: 'v1',
kind: 'Component',
metadata: {
name: 'my-name',
namespace: 'my-namespace',
},
};
const { getByText } = await renderInTestApp(
<EntityLink entity={entity}>inner</EntityLink>,
);
expect(getByText(/inner/i)).toBeInTheDocument();
expect(getByText(/inner/i)).toHaveAttribute(
'href',
'/catalog/my-namespace/component/my-name',
);
});
});
plugins/api-docs/src/components/EntityLink/EntityLink.tsx
-43
View File
@@ -1,43 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Entity } from '@backstage/catalog-model';
import {
entityRoute,
entityRouteParams,
} from '@backstage/plugin-catalog-react';
import { Link } from '@material-ui/core';
import React, { PropsWithChildren } from 'react';
import { generatePath, Link as RouterLink } from 'react-router-dom';
type Props = {
entity: Entity;
};
// TODO: Could be useful for others too, as part of the catalog plugin
export const EntityLink = ({ entity, children }: PropsWithChildren<Props>) => {
return (
<Link
component={RouterLink}
to={generatePath(
`/catalog/${entityRoute.path}`,
entityRouteParams(entity),
)}
>
{children}
</Link>
);
};
plugins/api-docs/src/components/EntityLink/index.ts
-17
View File
@@ -1,17 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { EntityLink } from './EntityLink';