From defaa15e55a49f13a2adfd029c41e7c516c6e334 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Sun, 25 Apr 2021 23:21:55 +0200 Subject: [PATCH 1/5] Add "Organization" tab with a diagram MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kévin Gomez --- .../components/ExplorePage/ExploreTabs.tsx | 4 + .../OrganizationDiagram.tsx | 207 ++++++++++++++++++ .../OrganizationExplorerContent.tsx | 30 +++ .../OrganizationExplorerContent/index.ts | 16 ++ 4 files changed, 257 insertions(+) create mode 100644 plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx create mode 100644 plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx create mode 100644 plugins/explore/src/components/OrganizationExplorerContent/index.ts diff --git a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx index 0cf28f9f1c..24fbf0039c 100644 --- a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx +++ b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx @@ -16,6 +16,7 @@ import { TabbedLayout } from '@backstage/core'; import React from 'react'; import { DomainExplorerContent } from '../DomainExplorerContent'; +import { OrganizationExplorerContent } from '../OrganizationExplorerContent'; import { ToolExplorerContent } from '../ToolExplorerContent'; export const ExploreTabs = () => ( @@ -23,6 +24,9 @@ export const ExploreTabs = () => ( + + + diff --git a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx new file mode 100644 index 0000000000..4e0d3710f3 --- /dev/null +++ b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx @@ -0,0 +1,207 @@ +/* + * Copyright 2021 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, + RELATION_CHILD_OF, + stringifyEntityRef, + ENTITY_DEFAULT_NAMESPACE, + parseEntityRef, +} from '@backstage/catalog-model'; +import { + catalogApiRef, + entityRouteRef, + getEntityRelations, +} from '@backstage/plugin-catalog-react'; +import { + DependencyGraph, + DependencyGraphTypes, + Progress, + useApi, + ResponseErrorPanel, + Link, + useRouteRef, + configApiRef, +} from '@backstage/core'; +import { makeStyles, Typography } from '@material-ui/core'; +import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; +import React from 'react'; +import { useAsync } from 'react-use'; +import { BackstageTheme } from '@backstage/theme'; + +const useStyles = makeStyles((theme: BackstageTheme) => ({ + organizationNode: { + fill: 'coral', + stroke: theme.palette.border, + }, + groupNode: { + fill: 'yellowgreen', + stroke: theme.palette.border, + }, +})); + +// Simplifies the diagram output by hiding the default namespace and kind +function readableEntityName( + ref: + | Entity + | { + kind: string; + namespace?: string; + name: string; + }, +): string { + return stringifyEntityRef(ref) + .toLocaleLowerCase('en-US') + .replace(`:${ENTITY_DEFAULT_NAMESPACE}/`, ':') + .split(':')[1]; +} + +function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { + const classes = useStyles(); + const catalogEntityRoute = useRouteRef(entityRouteRef); + + if (props.node.id === 'root') { + return ( + + + + {props.node.name} + + + ); + } + + const ref = parseEntityRef(props.node.id); + + return ( + + + + + {props.node.name} + + + + ); +} + +/** + * Dynamically generates a diagram of an organization. + */ +export function OrganizationDiagram() { + const nodes = new Array<{ id: string; kind: string; name: string }>(); + const edges = new Array<{ from: string; to: string; label: string }>(); + + const configApi = useApi(configApiRef); + const catalogApi = useApi(catalogApiRef); + const organizationName = + configApi.getOptionalString('organization.name') ?? 'Backstage'; + const { loading, error, value: catalogResponse } = useAsync(() => { + return catalogApi.getEntities({ + filter: { + kind: ['Group'], + }, + }); + }, [catalogApi]); + + if (loading) { + return ; + } else if (error) { + return ; + } + + // the root of this diagram is the organization + nodes.push({ + id: 'root', + kind: 'Organization', + name: organizationName, + }); + + for (const catalogItem of catalogResponse?.items || []) { + const currentItemId = stringifyEntityRef(catalogItem); + + nodes.push({ + id: stringifyEntityRef(catalogItem), + kind: catalogItem.kind, + name: readableEntityName(catalogItem), + }); + + // Edge to parent + const catalogItemRelations_childOf = getEntityRelations( + catalogItem, + RELATION_CHILD_OF, + ); + + // if no parent is found, link the node to the root + if (catalogItemRelations_childOf.length === 0) { + edges.push({ + from: currentItemId, + to: 'root', + label: '', + }); + } + + catalogItemRelations_childOf.forEach(relation => { + edges.push({ + from: currentItemId, + to: stringifyEntityRef(relation), + label: '', + }); + }); + } + + return ( + <> + + + Use pinch & zoom + to move around the diagram. + + + ); +} diff --git a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx new file mode 100644 index 0000000000..4e05cc2c6c --- /dev/null +++ b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx @@ -0,0 +1,30 @@ +/* + * Copyright 2021 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 { Content, ContentHeader, SupportButton } from '@backstage/core'; +import React from 'react'; +import { OrganizationDiagram } from './OrganizationDiagram'; + +export const OrganizationExplorerContent = () => { + return ( + + + Explore your organization. + + + + + ); +}; diff --git a/plugins/explore/src/components/OrganizationExplorerContent/index.ts b/plugins/explore/src/components/OrganizationExplorerContent/index.ts new file mode 100644 index 0000000000..87b08eba52 --- /dev/null +++ b/plugins/explore/src/components/OrganizationExplorerContent/index.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2021 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 { OrganizationExplorerContent } from './OrganizationExplorerContent'; From f37cf4599c6c1e1feafd0d814104a0b2e2f75600 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Tue, 4 May 2021 23:17:45 +0200 Subject: [PATCH 2/5] Use formatEntityRefTitle to format node titles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kévin Gomez --- .../OrganizationDiagram.tsx | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx index 4e0d3710f3..e3a6826835 100644 --- a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx +++ b/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx @@ -15,16 +15,15 @@ */ import { - Entity, RELATION_CHILD_OF, stringifyEntityRef, - ENTITY_DEFAULT_NAMESPACE, parseEntityRef, } from '@backstage/catalog-model'; import { catalogApiRef, entityRouteRef, getEntityRelations, + formatEntityRefTitle, } from '@backstage/plugin-catalog-react'; import { DependencyGraph, @@ -53,22 +52,6 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ }, })); -// Simplifies the diagram output by hiding the default namespace and kind -function readableEntityName( - ref: - | Entity - | { - kind: string; - namespace?: string; - name: string; - }, -): string { - return stringifyEntityRef(ref) - .toLocaleLowerCase('en-US') - .replace(`:${ENTITY_DEFAULT_NAMESPACE}/`, ':') - .split(':')[1]; -} - function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { const classes = useStyles(); const catalogEntityRoute = useRouteRef(entityRouteRef); @@ -159,7 +142,7 @@ export function OrganizationDiagram() { nodes.push({ id: stringifyEntityRef(catalogItem), kind: catalogItem.kind, - name: readableEntityName(catalogItem), + name: formatEntityRefTitle(catalogItem, { defaultKind: 'Group' }), }); // Edge to parent From 0b033d07b7775b9cb792d7246870213ae4228d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Tue, 4 May 2021 23:19:30 +0200 Subject: [PATCH 3/5] Add changeset MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kévin Gomez --- .changeset/breezy-carrots-hunt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/breezy-carrots-hunt.md diff --git a/.changeset/breezy-carrots-hunt.md b/.changeset/breezy-carrots-hunt.md new file mode 100644 index 0000000000..0075009a2d --- /dev/null +++ b/.changeset/breezy-carrots-hunt.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-explore': patch +--- + +Add "Organization" tab with a diagram From d67645ca05676d89134af065c39dcda0a178b5c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Wed, 5 May 2021 14:22:33 +0200 Subject: [PATCH 4/5] Rename Organization diagram to Groups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kévin Gomez --- .../explore/src/components/ExplorePage/ExploreTabs.tsx | 6 +++--- .../GroupsDiagram.tsx} | 4 ++-- .../GroupsExplorerContent.tsx} | 10 +++++----- .../index.ts | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) rename plugins/explore/src/components/{OrganizationExplorerContent/OrganizationDiagram.tsx => GroupsExplorerContent/GroupsDiagram.tsx} (97%) rename plugins/explore/src/components/{OrganizationExplorerContent/OrganizationExplorerContent.tsx => GroupsExplorerContent/GroupsExplorerContent.tsx} (75%) rename plugins/explore/src/components/{OrganizationExplorerContent => GroupsExplorerContent}/index.ts (88%) diff --git a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx index 24fbf0039c..0415dd97ae 100644 --- a/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx +++ b/plugins/explore/src/components/ExplorePage/ExploreTabs.tsx @@ -16,7 +16,7 @@ import { TabbedLayout } from '@backstage/core'; import React from 'react'; import { DomainExplorerContent } from '../DomainExplorerContent'; -import { OrganizationExplorerContent } from '../OrganizationExplorerContent'; +import { GroupsExplorerContent } from '../GroupsExplorerContent'; import { ToolExplorerContent } from '../ToolExplorerContent'; export const ExploreTabs = () => ( @@ -24,8 +24,8 @@ export const ExploreTabs = () => ( - - + + diff --git a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx similarity index 97% rename from plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx rename to plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index e3a6826835..99157b878f 100644 --- a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -105,9 +105,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { } /** - * Dynamically generates a diagram of an organization. + * Dynamically generates a diagram of groups registered in the catalog. */ -export function OrganizationDiagram() { +export function GroupsDiagram() { const nodes = new Array<{ id: string; kind: string; name: string }>(); const edges = new Array<{ from: string; to: string; label: string }>(); diff --git a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx similarity index 75% rename from plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx rename to plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx index 4e05cc2c6c..c4d46206e4 100644 --- a/plugins/explore/src/components/OrganizationExplorerContent/OrganizationExplorerContent.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx @@ -15,16 +15,16 @@ */ import { Content, ContentHeader, SupportButton } from '@backstage/core'; import React from 'react'; -import { OrganizationDiagram } from './OrganizationDiagram'; +import { GroupsDiagram } from './GroupsDiagram'; -export const OrganizationExplorerContent = () => { +export const GroupsExplorerContent = () => { return ( - - Explore your organization. + + Explore your groups. - + ); }; diff --git a/plugins/explore/src/components/OrganizationExplorerContent/index.ts b/plugins/explore/src/components/GroupsExplorerContent/index.ts similarity index 88% rename from plugins/explore/src/components/OrganizationExplorerContent/index.ts rename to plugins/explore/src/components/GroupsExplorerContent/index.ts index 87b08eba52..4d88f40dde 100644 --- a/plugins/explore/src/components/OrganizationExplorerContent/index.ts +++ b/plugins/explore/src/components/GroupsExplorerContent/index.ts @@ -13,4 +13,4 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { OrganizationExplorerContent } from './OrganizationExplorerContent'; +export { GroupsExplorerContent } from './GroupsExplorerContent'; From 90ba3a3205363dec2cb1f25688263437d3c79c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A9vin=20Gomez?= Date: Wed, 5 May 2021 16:56:45 +0200 Subject: [PATCH 5/5] Test the GroupsExplorerContent and GroupsDiagram components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Kévin Gomez --- .../GroupsDiagram.test.tsx | 69 ++++++++++++ .../GroupsExplorerContent.test.tsx | 103 ++++++++++++++++++ 2 files changed, 172 insertions(+) create mode 100644 plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx create mode 100644 plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx new file mode 100644 index 0000000000..022387faca --- /dev/null +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx @@ -0,0 +1,69 @@ +/* + * 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 { ApiProvider, ApiRegistry } from '@backstage/core'; +import { + catalogApiRef, + CatalogApi, + entityRouteRef, +} from '@backstage/plugin-catalog-react'; +import { Entity } from '@backstage/catalog-model'; +import { renderInTestApp } from '@backstage/test-utils'; +import React from 'react'; +import { GroupsDiagram } from './GroupsDiagram'; + +describe('', () => { + beforeAll(() => { + Object.defineProperty(window.SVGElement.prototype, 'getBBox', { + value: () => ({ width: 100, height: 100 }), + configurable: true, + }); + }); + + it('shows groups', async () => { + const catalogApi: Partial = { + getEntities: () => + Promise.resolve({ + items: [ + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'group-a', + namespace: 'my-namespace', + }, + spec: { + type: 'organization', + }, + }, + ] as Entity[], + }), + }; + + const { getByText } = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + expect(getByText('my-namespace/group-a')).toBeInTheDocument(); + }); +}); diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx new file mode 100644 index 0000000000..38c4678d5a --- /dev/null +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx @@ -0,0 +1,103 @@ +/* + * 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 { ApiProvider, ApiRegistry } from '@backstage/core'; +import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { waitFor } from '@testing-library/react'; +import React from 'react'; +import { GroupsExplorerContent } from '../GroupsExplorerContent'; + +describe('', () => { + const catalogApi: jest.Mocked = { + addLocation: jest.fn(_a => new Promise(() => {})), + getEntities: jest.fn(), + getOriginLocationByEntity: jest.fn(), + getLocationByEntity: jest.fn(), + getLocationById: jest.fn(), + removeLocationById: jest.fn(), + removeEntityByUid: jest.fn(), + getEntityByName: jest.fn(), + }; + + const Wrapper = ({ children }: { children?: React.ReactNode }) => ( + + {children} + + ); + + beforeEach(() => { + jest.resetAllMocks(); + + Object.defineProperty(window.SVGElement.prototype, 'getBBox', { + value: () => ({ width: 100, height: 100 }), + configurable: true, + }); + }); + + it('renders a groups diagram', async () => { + const entities: Entity[] = [ + { + apiVersion: 'backstage.io/v1alpha1', + kind: 'Group', + metadata: { + name: 'group-a', + namespace: 'my-namespace', + }, + spec: { + type: 'organization', + }, + }, + ]; + catalogApi.getEntities.mockResolvedValue({ items: entities }); + + const { getByText } = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + await waitFor(() => { + expect(getByText('my-namespace/group-a')).toBeInTheDocument(); + }); + }); + + it('renders a friendly error if it cannot collect domains', async () => { + const catalogError = new Error('Network timeout'); + catalogApi.getEntities.mockRejectedValueOnce(catalogError); + + const { getByText } = await renderInTestApp( + + + , + { + mountedRoutes: { + '/catalog/:namespace/:kind/:name': entityRouteRef, + }, + }, + ); + + await waitFor(() => + expect(getByText(/Warning: Network timeout/)).toBeInTheDocument(), + ); + }); +});