From 718adde162d8a9791414200ceb27103ed2b833ab Mon Sep 17 00:00:00 2001 From: jbosca Date: Tue, 7 Mar 2023 18:54:52 +0100 Subject: [PATCH 1/2] Improved dashboard component extensibility. --- .../DashboardsCard/DashboardsCard.test.tsx | 16 +---------- .../DashboardsCard/DashboardsCard.tsx | 28 +++++++++---------- 2 files changed, 15 insertions(+), 29 deletions(-) diff --git a/src/components/DashboardsCard/DashboardsCard.test.tsx b/src/components/DashboardsCard/DashboardsCard.test.tsx index 26031981a..8de4e2134 100644 --- a/src/components/DashboardsCard/DashboardsCard.test.tsx +++ b/src/components/DashboardsCard/DashboardsCard.test.tsx @@ -19,23 +19,9 @@ import { render } from '@testing-library/react'; import { DashboardsTable } from './DashboardsCard'; describe('DashboardsTable', () => { - const entityMock = { - metadata: { - namespace: 'default', - annotations: {}, - name: 'mocked-service', - }, - apiVersion: 'backstage.io/v1alpha1', - kind: 'Component', - spec: { - type: 'service', - owner: 'John Doe', - lifecycle: 'experimental', - }, - } it('should render even with no dashboards', async () => { - const rendered = render(); + const rendered = render(); expect(await rendered.findByText('No records to display')).toBeInTheDocument(); }); diff --git a/src/components/DashboardsCard/DashboardsCard.tsx b/src/components/DashboardsCard/DashboardsCard.tsx index 99351630e..19806ad58 100644 --- a/src/components/DashboardsCard/DashboardsCard.tsx +++ b/src/components/DashboardsCard/DashboardsCard.tsx @@ -16,7 +16,6 @@ import React from 'react'; import { Progress, TableColumn, Table, MissingAnnotationEmptyState, Link } from '@backstage/core-components'; -import { Entity } from '@backstage/catalog-model'; import { useEntity } from '@backstage/plugin-catalog-react'; import { useApi } from '@backstage/core-plugin-api'; import { grafanaApiRef } from '../../api'; @@ -26,7 +25,7 @@ import { Tooltip } from '@material-ui/core'; import { Dashboard } from '../../types'; import { GRAFANA_ANNOTATION_TAG_SELECTOR, isDashboardSelectorAvailable, tagSelectorFromEntity } from '../grafanaData'; -export const DashboardsTable = ({entity, dashboards, opts}: {entity: Entity, dashboards: Dashboard[], opts: DashboardCardOpts}) => { +export const DashboardsTable = ({tags, dashboards, opts}: {tags: string, dashboards: Dashboard[], opts: DashboardCardOpts}) => { const columns: TableColumn[] = [ { title: 'Title', @@ -41,7 +40,7 @@ export const DashboardsTable = ({entity, dashboards, opts}: {entity: Entity, das ]; const titleElm = ( - + {opts.title || 'Dashboards'} ); @@ -64,9 +63,9 @@ export const DashboardsTable = ({entity, dashboards, opts}: {entity: Entity, das ); }; -const Dashboards = ({entity, opts}: {entity: Entity, opts: DashboardCardOpts}) => { +const Dashboards = ({tags, opts}: {tags: string, opts: DashboardCardOpts}) => { const grafanaApi = useApi(grafanaApiRef); - const { value, loading, error } = useAsync(async () => await grafanaApi.dashboardsByTag(tagSelectorFromEntity(entity))); + const { value, loading, error } = useAsync(async () => await grafanaApi.dashboardsByTag(tags)); if (loading) { return ; @@ -75,7 +74,7 @@ const Dashboards = ({entity, opts}: {entity: Entity, opts: DashboardCardOpts}) = } return ( - + ); }; @@ -87,12 +86,13 @@ export type DashboardCardOpts = { title?: string; }; -export const DashboardsCard = (opts?: DashboardCardOpts) => { - const { entity } = useEntity(); - - return !isDashboardSelectorAvailable(entity) ? ( - - ) : ( - - ); +export const DashboardsCard = ({tags, opts}: {tags?: string, opts?: DashboardCardOpts}) => { + if(!tags){ + const { entity } = useEntity(); + if(!isDashboardSelectorAvailable(entity)){ + return ; + } + tags = tagSelectorFromEntity(entity); + } + return ; }; From 05cbdc59da72215f8eb0edce3ad91adae313e890 Mon Sep 17 00:00:00 2001 From: jbosca Date: Mon, 3 Apr 2023 14:08:26 +0200 Subject: [PATCH 2/2] Merge branch 'main' into feature/more_extensible # Conflicts: # src/components/DashboardsCard/DashboardsCard.tsx --- src/components/DashboardsCard/DashboardsCard.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/DashboardsCard/DashboardsCard.tsx b/src/components/DashboardsCard/DashboardsCard.tsx index 19806ad58..fbf75a8a1 100644 --- a/src/components/DashboardsCard/DashboardsCard.tsx +++ b/src/components/DashboardsCard/DashboardsCard.tsx @@ -23,7 +23,7 @@ import { useAsync } from 'react-use'; import { Alert } from '@material-ui/lab'; import { Tooltip } from '@material-ui/core'; import { Dashboard } from '../../types'; -import { GRAFANA_ANNOTATION_TAG_SELECTOR, isDashboardSelectorAvailable, tagSelectorFromEntity } from '../grafanaData'; +import { dashboardSelectorFromEntity, GRAFANA_ANNOTATION_DASHBOARD_SELECTOR, isDashboardSelectorAvailable } from '../grafanaData'; export const DashboardsTable = ({tags, dashboards, opts}: {tags: string, dashboards: Dashboard[], opts: DashboardCardOpts}) => { const columns: TableColumn[] = [ @@ -65,7 +65,7 @@ export const DashboardsTable = ({tags, dashboards, opts}: {tags: string, dashboa const Dashboards = ({tags, opts}: {tags: string, opts: DashboardCardOpts}) => { const grafanaApi = useApi(grafanaApiRef); - const { value, loading, error } = useAsync(async () => await grafanaApi.dashboardsByTag(tags)); + const { value, loading, error } = useAsync(async () => await grafanaApi.listDashboards(tags)); if (loading) { return ; @@ -87,12 +87,16 @@ export type DashboardCardOpts = { }; export const DashboardsCard = ({tags, opts}: {tags?: string, opts?: DashboardCardOpts}) => { - if(!tags){ + if(isAbsent(tags)){ const { entity } = useEntity(); if(!isDashboardSelectorAvailable(entity)){ - return ; + return ; } - tags = tagSelectorFromEntity(entity); + tags = dashboardSelectorFromEntity(entity); } - return ; + return ; }; + +function isAbsent(tags? : string) : boolean { + return (tags === null || tags === undefined); +}