From 26c402928e66e8fb62153bf62709e9f8337979fc Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Mon, 30 Mar 2026 13:45:59 +0100
Subject: [PATCH] feat: add warning and critical threshold inputs to
 MetricGraphConfig and update MetricQueryConfigData interface

---
 .../Components/Metrics/MetricQueryConfig.tsx  | 69 +++++++++++++++----
 .../DashboardChartComponent.ts                |  8 ---
 Common/Types/Metrics/MetricQueryConfigData.ts |  2 +
 .../Components/DashboardChartComponent.ts     | 28 --------
 4 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/App/FeatureSet/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx b/App/FeatureSet/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
index b8036c7c0f..3eb988ab54 100644
--- a/App/FeatureSet/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
+++ b/App/FeatureSet/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
@@ -11,6 +11,7 @@ import MetricAliasData from "Common/Types/Metrics/MetricAliasData";
 import MetricQueryData from "Common/Types/Metrics/MetricQueryData";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 import MetricType from "Common/Models/DatabaseModels/MetricType";
+import Input, { InputType } from "Common/UI/Components/Input/Input";
 
 export interface ComponentProps {
   data: MetricQueryConfigData;
@@ -34,22 +35,28 @@ export interface ComponentProps {
 const MetricGraphConfig: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const defaultAliasData: MetricAliasData = {
+    metricVariable: undefined,
+    title: undefined,
+    description: undefined,
+    legend: undefined,
+    legendUnit: undefined,
+  };
+
   const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <div>
-        {props.data?.metricAliasData && (
-          <MetricAlias
-            data={props.data?.metricAliasData || {}}
-            onDataChanged={(data: MetricAliasData) => {
-              props.onBlur?.();
-              props.onFocus?.();
-              if (props.onChange) {
-                props.onChange({ ...props.data, metricAliasData: data });
-              }
-            }}
-            isFormula={false}
-          />
-        )}
+        <MetricAlias
+          data={props.data?.metricAliasData || defaultAliasData}
+          onDataChanged={(data: MetricAliasData) => {
+            props.onBlur?.();
+            props.onFocus?.();
+            if (props.onChange) {
+              props.onChange({ ...props.data, metricAliasData: data });
+            }
+          }}
+          isFormula={false}
+        />
         {props.data?.metricQueryData && (
           <MetricQuery
             data={props.data?.metricQueryData || {}}
@@ -68,6 +75,42 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
             onAttributesRetry={props.onAttributesRetry}
           />
         )}
+        <div className="flex space-x-3 mt-2">
+          <div className="w-1/2">
+            <Input
+              value={props.data?.warningThreshold?.toString() || ""}
+              type={InputType.NUMBER}
+              onChange={(value: string) => {
+                props.onBlur?.();
+                props.onFocus?.();
+                if (props.onChange) {
+                  props.onChange({
+                    ...props.data,
+                    warningThreshold: value ? Number(value) : undefined,
+                  });
+                }
+              }}
+              placeholder="Warning Threshold"
+            />
+          </div>
+          <div className="w-1/2">
+            <Input
+              value={props.data?.criticalThreshold?.toString() || ""}
+              type={InputType.NUMBER}
+              onChange={(value: string) => {
+                props.onBlur?.();
+                props.onFocus?.();
+                if (props.onChange) {
+                  props.onChange({
+                    ...props.data,
+                    criticalThreshold: value ? Number(value) : undefined,
+                  });
+                }
+              }}
+              placeholder="Critical Threshold"
+            />
+          </div>
+        </div>
         {props.onRemove && (
           <div className="-ml-3">
             <Button
diff --git a/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts b/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts
index b3b9127a1a..2f88f6afc1 100644
--- a/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts
+++ b/Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts
@@ -4,12 +4,6 @@ import DashboardComponentType from "../DashboardComponentType";
 import DashboardChartType from "../Chart/ChartType";
 import BaseComponent from "./DashboardBaseComponent";
 
-export interface ChartThreshold {
-  value: number;
-  label?: string | undefined;
-  color?: string | undefined;
-}
-
 export default interface DashboardChartComponent extends BaseComponent {
   componentType: DashboardComponentType.Chart;
   componentId: ObjectID;
@@ -19,7 +13,5 @@ export default interface DashboardChartComponent extends BaseComponent {
     chartTitle?: string | undefined;
     chartDescription?: string | undefined;
     chartType?: DashboardChartType | undefined;
-    warningThreshold?: number | undefined;
-    criticalThreshold?: number | undefined;
   };
 }
diff --git a/Common/Types/Metrics/MetricQueryConfigData.ts b/Common/Types/Metrics/MetricQueryConfigData.ts
index 7fc33c92f8..d62c4b9fe2 100644
--- a/Common/Types/Metrics/MetricQueryConfigData.ts
+++ b/Common/Types/Metrics/MetricQueryConfigData.ts
@@ -18,4 +18,6 @@ export default interface MetricQueryConfigData {
   getSeries?: ((data: AggregatedModel) => ChartSeries) | undefined;
   chartType?: MetricChartType | undefined;
   yAxisValueFormatter?: ((value: number) => string) | undefined;
+  warningThreshold?: number | undefined;
+  criticalThreshold?: number | undefined;
 }
diff --git a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
index ac9c3bdcee..0f99436855 100644
--- a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
+++ b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
@@ -23,13 +23,6 @@ const DisplaySection: ComponentArgumentSection = {
   defaultCollapsed: true,
 };
 
-const ThresholdsSection: ComponentArgumentSection = {
-  name: "Thresholds",
-  description: "Set warning and critical threshold lines",
-  order: 3,
-  defaultCollapsed: true,
-};
-
 export default class DashboardChartComponentUtil extends DashboardBaseComponentUtil {
   public static override getDefaultComponent(): DashboardChartComponent {
     return {
@@ -136,27 +129,6 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       section: DisplaySection,
     });
 
-
-    componentArguments.push({
-      name: "Warning Threshold",
-      description: "Yellow horizontal line at this value",
-      required: false,
-      type: ComponentInputType.Number,
-      id: "warningThreshold",
-      isAdvanced: true,
-      section: ThresholdsSection,
-    });
-
-    componentArguments.push({
-      name: "Critical Threshold",
-      description: "Red horizontal line at this value",
-      required: false,
-      type: ComponentInputType.Number,
-      id: "criticalThreshold",
-      isAdvanced: true,
-      section: ThresholdsSection,
-    });
-
     return componentArguments;
   }
 }