From cebe24ef1d60fe83a981f8b49354b65f2f3a3a7f Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Wed, 11 Jan 2023 15:07:33 +0000 Subject: [PATCH 1/8] add entity labels card Signed-off-by: Brian Fletcher --- .changeset/many-books-refuse.md | 5 ++ .../app/src/components/catalog/EntityPage.tsx | 5 ++ .../components/shuffle-api-component.yaml | 3 + .../EntityLabelsCard/EntityLabelsCard.tsx | 86 +++++++++++++++++++ .../EntityLabelsEmptyState.tsx | 68 +++++++++++++++ .../src/components/EntityLabelsCard/index.ts | 17 ++++ plugins/catalog/src/index.ts | 1 + plugins/catalog/src/plugin.ts | 11 +++ 8 files changed, 196 insertions(+) create mode 100644 .changeset/many-books-refuse.md create mode 100644 plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx create mode 100644 plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx create mode 100644 plugins/catalog/src/components/EntityLabelsCard/index.ts diff --git a/.changeset/many-books-refuse.md b/.changeset/many-books-refuse.md new file mode 100644 index 0000000000..8455254439 --- /dev/null +++ b/.changeset/many-books-refuse.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Add `EntityLabelsCard` to show the labels for an entity. diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 02b00f038c..447183298a 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -52,6 +52,7 @@ import { EntityHasSystemsCard, EntityLayout, EntityLinksCard, + EntityLabelsCard, EntityOrphanWarning, EntityProcessingErrorsPanel, EntitySwitch, @@ -364,6 +365,10 @@ const overviewContent = ( + + + + {cicdCard} diff --git a/packages/catalog-model/examples/components/shuffle-api-component.yaml b/packages/catalog-model/examples/components/shuffle-api-component.yaml index 6328ebdf3b..afac3d472d 100644 --- a/packages/catalog-model/examples/components/shuffle-api-component.yaml +++ b/packages/catalog-model/examples/components/shuffle-api-component.yaml @@ -3,6 +3,9 @@ kind: Component metadata: name: shuffle-api description: Shuffle API + labels: + goVersion: go1.15.3 + category: music tags: - go spec: diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx new file mode 100644 index 0000000000..e3bee02c43 --- /dev/null +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx @@ -0,0 +1,86 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { useEntity } from '@backstage/plugin-catalog-react'; +import React from 'react'; +import { + InfoCard, + InfoCardVariants, + Table, + TableColumn, +} from '@backstage/core-components'; +import { EntityLabelsEmptyState } from './EntityLabelsEmptyState'; +import { makeStyles, Typography } from '@material-ui/core'; + +/** @public */ +export interface EntityLabelsCardProps { + variant?: InfoCardVariants; +} + +const useStyles = makeStyles(_ => ({ + key: { + fontWeight: 'bold', + }, +})); + +export const EntityLabelsCard = (props: EntityLabelsCardProps) => { + const { variant } = props; + const { entity } = useEntity(); + const classes = useStyles(); + + const columns: TableColumn<{ key: string; value: string }>[] = [ + { + render: row => { + return ( + + {row.key} + + ); + }, + }, + { + field: 'value', + }, + ]; + + const labels = entity?.metadata?.labels; + + return ( + + {!labels || Object.keys(labels).length === 0 ? ( + + ) : ( + ({ + key: labelKey, + value: labels[labelKey], + }))} + options={{ + search: false, + showTitle: true, + loadingType: 'linear', + header: false, + padding: 'dense', + pageSize: 5, + toolbar: false, + paging: Object.keys(labels).length > 5, + }} + /> + )} + + ); +}; diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx new file mode 100644 index 0000000000..9fd9f1d3d0 --- /dev/null +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -0,0 +1,68 @@ +/* + * Copyright 2020 The Backstage Authors + * + * 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 { BackstageTheme } from '@backstage/theme'; +import { Button, makeStyles, Typography } from '@material-ui/core'; +import React from 'react'; +import { CodeSnippet } from '@backstage/core-components'; + +const ENTITY_YAML = `metadata: + name: example + labels: + javaVersion: 1.2.3`; +/** @public */ +export type EntityLabelsEmptyStateClassKey = 'code'; + +const useStyles = makeStyles( + theme => ({ + code: { + borderRadius: 6, + margin: `${theme.spacing(2)}px 0px`, + background: theme.palette.type === 'dark' ? '#444' : '#fff', + }, + }), + { name: 'PluginCatalogEntityLabelsEmptyState' }, +); + +export function EntityLabelsEmptyState() { + const classes = useStyles(); + + return ( + <> + + No labels defined for this entity. You can add links to your entity YAML + as shown in the highlighted example below: + +
+ +
+ + + ); +} diff --git a/plugins/catalog/src/components/EntityLabelsCard/index.ts b/plugins/catalog/src/components/EntityLabelsCard/index.ts new file mode 100644 index 0000000000..f7629a766d --- /dev/null +++ b/plugins/catalog/src/components/EntityLabelsCard/index.ts @@ -0,0 +1,17 @@ +/* + * Copyright 2022 The Backstage Authors + * + * 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 { EntityLabelsCard } from './EntityLabelsCard'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 886039e329..8d32de9a06 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -50,6 +50,7 @@ export { EntityHasSubcomponentsCard, EntityHasSystemsCard, EntityLinksCard, + EntityLabelsCard, RelatedEntitiesCard, } from './plugin'; diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts index 5419854cb6..c83657b85a 100644 --- a/plugins/catalog/src/plugin.ts +++ b/plugins/catalog/src/plugin.ts @@ -126,6 +126,17 @@ export const EntityLinksCard = catalogPlugin.provide( }), ); +/** @public */ +export const EntityLabelsCard = catalogPlugin.provide( + createComponentExtension({ + name: 'EntityLabelsCard', + component: { + lazy: () => + import('./components/EntityLabelsCard').then(m => m.EntityLabelsCard), + }, + }), +); + /** @public */ export const EntityHasSystemsCard: (props: HasSystemsCardProps) => JSX.Element = catalogPlugin.provide( From 9fc65bbc38283f3310e4f22e7f3f695bf68db9f6 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 07:45:25 +0000 Subject: [PATCH 2/8] add entity switch case Signed-off-by: Brian Fletcher --- .../app/src/components/catalog/EntityPage.tsx | 11 +++++-- .../components/EntityLabelsCard/conditions.ts | 29 +++++++++++++++++++ .../src/components/EntityLabelsCard/index.ts | 1 + plugins/catalog/src/index.ts | 1 + 4 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 plugins/catalog/src/components/EntityLabelsCard/conditions.ts diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx index 447183298a..3566800f0b 100644 --- a/packages/app/src/components/catalog/EntityPage.tsx +++ b/packages/app/src/components/catalog/EntityPage.tsx @@ -60,6 +60,7 @@ import { isComponentType, isKind, isOrphan, + hasLabels, } from '@internal/plugin-catalog-customized'; import { Direction, @@ -365,9 +366,13 @@ const overviewContent = ( - - - + + + + + + + {cicdCard} diff --git a/plugins/catalog/src/components/EntityLabelsCard/conditions.ts b/plugins/catalog/src/components/EntityLabelsCard/conditions.ts new file mode 100644 index 0000000000..fb4678cded --- /dev/null +++ b/plugins/catalog/src/components/EntityLabelsCard/conditions.ts @@ -0,0 +1,29 @@ +/* + * Copyright 2023 The Backstage Authors + * + * 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'; + +/** + * Returns true if the given entity has labels annotation given by the + * catalog. For use by EntitySwitch + * + * @public + */ +export function hasLabels(entity: Entity) { + return entity?.metadata?.labels + ? Object.keys(entity?.metadata?.labels).some(Boolean) + : false; +} diff --git a/plugins/catalog/src/components/EntityLabelsCard/index.ts b/plugins/catalog/src/components/EntityLabelsCard/index.ts index f7629a766d..bb8570d67c 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/index.ts +++ b/plugins/catalog/src/components/EntityLabelsCard/index.ts @@ -15,3 +15,4 @@ */ export { EntityLabelsCard } from './EntityLabelsCard'; +export * from './conditions'; diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts index 8d32de9a06..7de332cf51 100644 --- a/plugins/catalog/src/index.ts +++ b/plugins/catalog/src/index.ts @@ -37,6 +37,7 @@ export * from './components/EntityProcessingErrorsPanel'; export * from './components/EntitySwitch'; export * from './components/FilteredEntityLayout'; export * from './overridableComponents'; +export * from './components/EntityLabelsCard'; export { CatalogEntityPage, CatalogIndexPage, From bd382f2bc2aa2460cc6a9e53c245107825105386 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 07:59:25 +0000 Subject: [PATCH 3/8] api reports and changeset Signed-off-by: Brian Fletcher --- .changeset/forty-ligers-teach.md | 5 +++++ plugins/catalog/api-report.md | 12 ++++++++++++ .../catalog/src/components/EntityLabelsCard/index.ts | 1 + 3 files changed, 18 insertions(+) create mode 100644 .changeset/forty-ligers-teach.md diff --git a/.changeset/forty-ligers-teach.md b/.changeset/forty-ligers-teach.md new file mode 100644 index 0000000000..31abd1895d --- /dev/null +++ b/.changeset/forty-ligers-teach.md @@ -0,0 +1,5 @@ +--- +'@backstage/catalog-model': patch +--- + +Add labels to one of the example entities. diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 74f64882a8..ada173fd5d 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -277,6 +277,15 @@ export const EntityHasSubcomponentsCard: ( // @public (undocumented) export const EntityHasSystemsCard: (props: HasSystemsCardProps) => JSX.Element; +// @public (undocumented) +export const EntityLabelsCard: (props: EntityLabelsCardProps) => JSX.Element; + +// @public (undocumented) +export interface EntityLabelsCardProps { + // (undocumented) + variant?: InfoCardVariants; +} + // @public export const EntityLayout: { (props: EntityLayoutProps): JSX.Element; @@ -385,6 +394,9 @@ export interface HasComponentsCardProps { variant?: InfoCardVariants; } +// @public +export function hasLabels(entity: Entity): boolean; + // @public (undocumented) export interface HasResourcesCardProps { // (undocumented) diff --git a/plugins/catalog/src/components/EntityLabelsCard/index.ts b/plugins/catalog/src/components/EntityLabelsCard/index.ts index bb8570d67c..870819f9a7 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/index.ts +++ b/plugins/catalog/src/components/EntityLabelsCard/index.ts @@ -16,3 +16,4 @@ export { EntityLabelsCard } from './EntityLabelsCard'; export * from './conditions'; +export type { EntityLabelsCardProps } from './EntityLabelsCard'; From 9ef778c4b55582a5f9fd0c2bb66e2ba66f24edb3 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 08:13:06 +0000 Subject: [PATCH 4/8] fix missing message Signed-off-by: Brian Fletcher --- .../components/EntityLabelsCard/EntityLabelsEmptyState.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx index 9fd9f1d3d0..a0d78acb11 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -43,8 +43,8 @@ export function EntityLabelsEmptyState() { return ( <> - No labels defined for this entity. You can add links to your entity YAML - as shown in the highlighted example below: + No labels defined for this entity. You can add labels to your entity + YAML as shown in the highlighted example below:
Date: Thu, 12 Jan 2023 09:16:19 +0000 Subject: [PATCH 5/8] customization of labels title & defualt to Labels Signed-off-by: Brian Fletcher --- plugins/catalog/api-report.md | 2 ++ .../src/components/EntityLabelsCard/EntityLabelsCard.tsx | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index ada173fd5d..82df851239 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -282,6 +282,8 @@ export const EntityLabelsCard: (props: EntityLabelsCardProps) => JSX.Element; // @public (undocumented) export interface EntityLabelsCardProps { + // (undocumented) + title?: string; // (undocumented) variant?: InfoCardVariants; } diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx index e3bee02c43..500c651cc0 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsCard.tsx @@ -28,6 +28,7 @@ import { makeStyles, Typography } from '@material-ui/core'; /** @public */ export interface EntityLabelsCardProps { variant?: InfoCardVariants; + title?: string; } const useStyles = makeStyles(_ => ({ @@ -37,7 +38,7 @@ const useStyles = makeStyles(_ => ({ })); export const EntityLabelsCard = (props: EntityLabelsCardProps) => { - const { variant } = props; + const { variant, title } = props; const { entity } = useEntity(); const classes = useStyles(); @@ -59,7 +60,7 @@ export const EntityLabelsCard = (props: EntityLabelsCardProps) => { const labels = entity?.metadata?.labels; return ( - + {!labels || Object.keys(labels).length === 0 ? ( ) : ( From a2cf82088d9b974a9251a0b8d27792e26913656b Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 12:37:07 +0000 Subject: [PATCH 6/8] remove changeset not needed Signed-off-by: Brian Fletcher --- .changeset/forty-ligers-teach.md | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .changeset/forty-ligers-teach.md diff --git a/.changeset/forty-ligers-teach.md b/.changeset/forty-ligers-teach.md deleted file mode 100644 index 31abd1895d..0000000000 --- a/.changeset/forty-ligers-teach.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/catalog-model': patch ---- - -Add labels to one of the example entities. From fe81e32a4cd9263fe83433f40c3bc75f9d299ed2 Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 13:14:55 +0000 Subject: [PATCH 7/8] remove unused export Signed-off-by: Brian Fletcher --- .../src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx index a0d78acb11..e702d0dfda 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -24,7 +24,6 @@ const ENTITY_YAML = `metadata: labels: javaVersion: 1.2.3`; /** @public */ -export type EntityLabelsEmptyStateClassKey = 'code'; const useStyles = makeStyles( theme => ({ From 7ab34830d8e7b64e136e662fb14db27218bce87a Mon Sep 17 00:00:00 2001 From: Brian Fletcher Date: Thu, 12 Jan 2023 13:21:48 +0000 Subject: [PATCH 8/8] remove comment Signed-off-by: Brian Fletcher --- .../src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx index e702d0dfda..a875f542a7 100644 --- a/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx +++ b/plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx @@ -23,7 +23,6 @@ const ENTITY_YAML = `metadata: name: example labels: javaVersion: 1.2.3`; -/** @public */ const useStyles = makeStyles( theme => ({