Merge pull request #1107 from jsidney/feature/allow-multiple-datadog-…

…dashboards Allow for multiple dashboard urls to be provided and rendered for a c…
RoadieHQ · Sep 12, 2023 · 34e0a9f · 34e0a9f
2 parents cc7985d + 39918b6
commit 34e0a9f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/.changeset/silly-pillows-yell.md 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
@@ -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
@@ -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 (
-    <InfoCard title="Datadog dashboard">
-      <Resizable
-        defaultSize={{
-          width: '100%',
-          height: 500,
-        }}
-        handleComponent={{ bottomRight: <ZoomOutMapIcon /> }}
-      >
-        <iframe
-          title="dashboard"
-          src={`${dashboardUrl}`}
-          style={{
-            border: 'none',
-            height: '100%',
-            width: '100%',
-            resize: 'both',
-            overflow: 'auto',
-          }}
-        />
-      </Resizable>
-    </InfoCard>
+    <Grid container spacing={3}>
+      {allDashboardUrls.map((value, index) => (
+        <Grid item md={12}>
+          <InfoCard title={`Datadog dashboard ${index}`} variant="gridItem">
+            <Resizable
+              defaultSize={{
+                width: 100,
+                height: 500,
+              }}
+              handleComponent={{ bottomRight: <ZoomOutMapIcon /> }}
+            >
+              <iframe
+                title="dashboard"
+                src={`${value}`}
+                style={{
+                  border: 'none',
+                  height: '100%',
+                  width: '100%',
+                  resize: 'both',
+                  overflow: 'auto',
+                }}
+              />
+            </Resizable>
+          </InfoCard>
+        </Grid>
+      ))}
+    </Grid>
   );
 };