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 (
-
- }}
- >
-
-
-
+
+ {allDashboardUrls.map((value, index) => (
+
+
+ }}
+ >
+
+
+
+
+ ))}
+
);
};