feat: add warning and critical threshold inputs to MetricGraphConfig and update MetricQueryConfigData interface

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

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;
   };
 }

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;
 }

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;
   }
 }