diff --git a/.changeset/silly-pillows-yell.md b/.changeset/silly-pillows-yell.md new file mode 100644 index 000000000..1d7626d26 --- /dev/null +++ b/.changeset/silly-pillows-yell.md @@ -0,0 +1,5 @@ +--- +'@roadiehq/backstage-plugin-datadog': patch +--- + +Modify DatadogDashboardPage to allow for multiple comma-separated urls to be provided and rendered for a given component. diff --git a/plugins/frontend/backstage-plugin-datadog/README.md b/plugins/frontend/backstage-plugin-datadog/README.md index d34ce5656..d3e299201 100644 --- a/plugins/frontend/backstage-plugin-datadog/README.md +++ b/plugins/frontend/backstage-plugin-datadog/README.md @@ -103,7 +103,11 @@ metadata: ![dashboard share](./docs/dd-dashboard-share.png?raw=true) -### Adding the annotations and the values from Datadog to your component's metadata file. +- **Note**: You can also add multiple dashboards by creating a list of URLs in the annotation file (Each URL must be separated by a comma - `,` ) + +### Adding the annotations and the values from Datadog to your component's metadata file + +#### Embedding a single dashboard ```yaml apiVersion: backstage.io/v1alpha1 @@ -116,6 +120,19 @@ metadata: datadoghq.com/dashboard-url: datadoghq.com ``` +#### Embedding multiple dashboards + +```yaml +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + name: sample-service + description: | + A sample service + annotations: + datadoghq.com/dashboard-url: datadoghq.com,datadoghq.com/dashboard2 +``` + ## Embed a datadog graph in Backstage - Login to your Datadog account. diff --git a/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx b/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx index a4c96a27a..bbe67cf1a 100644 --- a/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx +++ b/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx @@ -17,33 +17,41 @@ import React from 'react'; import { Entity } from '@backstage/catalog-model'; import { InfoCard } from '@backstage/core-components'; +import { Grid } from '@material-ui/core'; import { useDatadogAppData } from './useDatadogAppData'; import { Resizable } from 're-resizable'; import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap'; export const DatadogDashboardPage = ({ entity }: { entity: Entity }) => { const { dashboardUrl } = useDatadogAppData({ entity }); + const allDashboardUrls: string[] = dashboardUrl.split(','); return ( - - }} - > -