Merge pull request #1510 from RoadieHQ/add-title

allow adding title to prom entity page
RoadieHQ · Jul 29, 2024 · d9a7342 · d9a7342
2 parents 957041c + f4a5909
commit d9a7342
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/popular-bikes-hope.md b/.changeset/popular-bikes-hope.md
@@ -0,0 +1,5 @@
+---
+'@roadiehq/backstage-plugin-prometheus': minor
+---
+
+Allow the title to be set on the prometheus entity card.
diff --git a/...s/frontend/backstage-plugin-prometheus/src/components/PrometheusGraph/PrometheusGraph.tsx b/...s/frontend/backstage-plugin-prometheus/src/components/PrometheusGraph/PrometheusGraph.tsx
@@ -224,6 +224,7 @@ export const PrometheusGraph = ({
   step = 14,
   dimension,
   graphType = 'line',
+  title,
 }: {
   query: string;
   range?: {
@@ -233,6 +234,7 @@ export const PrometheusGraph = ({
   step?: number;
   dimension?: string;
   graphType?: 'line' | 'area';
+  title?: string;
 }) => {
   const { fetchGraph, value, loading, error } = useMetrics({
     query,
@@ -251,9 +253,9 @@ export const PrometheusGraph = ({
     return <Alert severity="error">{error.message}</Alert>;
   }
 
-  const title = (
+  const titleComponent = (
     <Grid container justifyContent="space-between" alignItems="center">
-      <Grid item>{query}</Grid>
+      <Grid item>{title || query}</Grid>
       {value?.uiUrl && (
         <Grid item>
           <Typography variant="subtitle1">
@@ -270,11 +272,11 @@ export const PrometheusGraph = ({
 
   const { data, keys, metrics } = value ?? { data: [], keys: [], metrics: {} };
   return graphType === 'line' ? (
-    <InfoCard title={title}>
+    <InfoCard title={titleComponent}>
       <LineGraph data={data} keys={keys} metrics={metrics} />
     </InfoCard>
   ) : (
-    <InfoCard title={title}>
+    <InfoCard title={titleComponent}>
       {' '}
       <AreaGraph data={data} keys={keys} metrics={metrics} />
     </InfoCard>

diff --git a/...ckstage-plugin-prometheus/src/components/PrometheusGraph/PrometheusGraphEntityWrapper.tsx b/...ckstage-plugin-prometheus/src/components/PrometheusGraph/PrometheusGraphEntityWrapper.tsx
@@ -31,12 +31,14 @@ export const PrometheusGraphEntityWrapper = ({
   graphType,
   enableQueryTemplating,
   query,
+  title,
 }: {
   step?: number;
   range?: { hours?: number; minutes?: number };
   graphType?: 'line' | 'area';
   query?: string;
   enableQueryTemplating?: boolean;
+  title?: string;
 }) => {
   const { entity } = useEntity();
 
@@ -72,6 +74,7 @@ export const PrometheusGraphEntityWrapper = ({
         range={range}
         step={step}
         graphType={graphType}
+        title={title}
       />
     );
   }