Merge pull request #1654 from RoadieHQ/multiple-datadog-graphs

add ability to specify multiple graphs
RoadieHQ · Oct 4, 2024 · 654ebbb · 654ebbb
2 parents ebd6e35 + 85c480f
commit 654ebbb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/.changeset/nine-weeks-sparkle.md b/.changeset/nine-weeks-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@roadiehq/backstage-plugin-datadog': minor
+---
+
+Allow use of multiple Datadog graphs for a single entity.
diff --git a/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx b/plugins/frontend/backstage-plugin-datadog/src/components/DatadogDashboardPage.tsx
@@ -24,7 +24,7 @@ import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
 
 export const DatadogDashboardPage = ({ entity }: { entity: Entity }) => {
   const { dashboardUrl } = useDatadogAppData({ entity });
-  const allDashboardUrls: string[] = dashboardUrl.split(',');
+  const allDashboardUrls = dashboardUrl.split(',');
   return (
     <Grid container spacing={3}>
       {allDashboardUrls.map((value, index) => (

diff --git a/plugins/frontend/backstage-plugin-datadog/src/components/GraphWidget.tsx b/plugins/frontend/backstage-plugin-datadog/src/components/GraphWidget.tsx
@@ -19,7 +19,13 @@ import {
   MissingAnnotationEmptyState,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Typography,
+} from '@material-ui/core';
 import React from 'react';
 import { isDatadogGraphAvailable } from '../plugin';
 import ErrorBoundary from './ErrorBoundary';
@@ -45,19 +51,35 @@ const mapGraphSizeToDimensions = (graphSize: GraphSize) => {
 };
 
 const DatadogGraph = ({ entity }: { entity: Entity }) => {
-  const { graphToken, graphSize, site } = useDatadogAppData({ entity });
+  const {
+    graphToken: graphTokensString,
+    graphSize,
+    site,
+  } = useDatadogAppData({ entity });
   const { width, height } = mapGraphSizeToDimensions(graphSize);
+  const graphTokens = graphTokensString.split(',');
   return (
     <Card>
       <CardHeader title={<Typography variant="h5">Datadog Graph</Typography>} />
       <CardContent>
-        <iframe
-          title="graph"
-          src={`https://app.${site}/graph/embed?token=${graphToken}&height=${height}&width=${width}&legend=true`}
-          width={width}
-          height={height}
-          frameBorder="0"
-        />
+        <Grid container spacing={3}>
+          {graphTokens.map((graphToken, index) => (
+            <Grid
+              item
+              data-testid={`Datadog graph ${index}`}
+              key={`Datadog graph ${index}`}
+              md={12}
+            >
+              <iframe
+                title="graph"
+                src={`https://app.${site}/graph/embed?token=${graphToken}&height=${height}&width=${width}&legend=true`}
+                width={width}
+                height={height}
+                frameBorder="0"
+              />
+            </Grid>
+          ))}
+        </Grid>
       </CardContent>
     </Card>
   );