Update MetricQueryConfigData to make metricAliasData optional and ref…

…actor ArgumentsForm and MetricQueryConfig components for improved type handling and conditional rendering
OneUptime · Nov 28, 2024 · 70da661 · 70da661
1 parent b307a74
commit 70da661
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/Common/Types/Metrics/MetricQueryConfigData.ts b/Common/Types/Metrics/MetricQueryConfigData.ts
@@ -7,7 +7,7 @@ export interface ChartSeries {
 }
 
 export default interface MetricQueryConfigData {
-  metricAliasData: MetricAliasData;
+  metricAliasData?: MetricAliasData | undefined;
   metricQueryData: MetricQueryData;
   getSeries?: ((data: AggregatedModel) => ChartSeries) | undefined;
 }
diff --git a/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx b/Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx
@@ -22,6 +22,7 @@ import MetricQueryConfig from "../../Metrics/MetricQueryConfig";
 import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
 import { CustomElementProps } from "Common/UI/Components/Forms/Types/Field";
 import MetricNameAndUnit from "../../Metrics/Types/MetricNameAndUnit";
+import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 
 export interface ComponentProps {
   metrics: {
@@ -60,9 +61,19 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
   const componentArguments: Array<ComponentArgument<DashboardBaseComponent>> =
     DashboardComponentsUtil.getComponentSettingsArguments(componentType);
 
-  const getMetricsQueryConfigForm = (
+  type GetMetricsQueryConfigFormFunction = (
     arg: ComponentArgument<DashboardBaseComponent>,
-  ) => {
+  ) => (
+    value: FormValues<JSONObject>,
+    componentProps: CustomElementProps,
+  ) => ReactElement;
+
+  const getMetricsQueryConfigForm: GetMetricsQueryConfigFormFunction = (
+    arg: ComponentArgument<DashboardBaseComponent>,
+  ): ((
+    value: FormValues<JSONObject>,
+    componentProps: CustomElementProps,
+  ) => ReactElement) => {
     return (
       value: FormValues<JSONObject>,
       componentProps: CustomElementProps,
@@ -78,16 +89,31 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
     };
   };
 
-  const getCustomElememnt = (
+  type GetCustomElementFunction = (
+    arg: ComponentArgument<DashboardBaseComponent>,
+  ) =>
+    | ((
+        value: FormValues<JSONObject>,
+        componentProps: CustomElementProps,
+      ) => ReactElement)
+    | undefined;
+
+  const getCustomElememnt: GetCustomElementFunction = (
     arg: ComponentArgument<DashboardBaseComponent>,
-  ) => {
+  ):
+    | ((
+        value: FormValues<JSONObject>,
+        componentProps: CustomElementProps,
+      ) => ReactElement)
+    | undefined => {
     if (arg.type === ComponentInputType.MetricsQueryConfig) {
       return getMetricsQueryConfigForm(arg);
     }
     return undefined;
   };
 
-  const getForm = (): ReactElement => {
+
+  const getForm: GetReactElementFunction = (): ReactElement => {
     return (
       <BasicForm
         hideSubmitButton={true}

diff --git a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
@@ -38,16 +38,18 @@ const MetricGraphConfig: FunctionComponent<ComponentProps> = (
   return (
     <Card>
       <div className="-mt-5" tabIndex={props.tabIndex}>
-        <MetricAlias
-          data={props.data.metricAliasData}
-          onDataChanged={(data: MetricAliasData) => {
-            props.onBlur?.();
-            props.onFocus?.();
-            props.onChange &&
-              props.onChange({ ...props.data, metricAliasData: data });
-          }}
-          isFormula={false}
-        />
+        {props.data.metricAliasData && (
+          <MetricAlias
+            data={props.data.metricAliasData}
+            onDataChanged={(data: MetricAliasData) => {
+              props.onBlur?.();
+              props.onFocus?.();
+              props.onChange &&
+                props.onChange({ ...props.data, metricAliasData: data });
+            }}
+            isFormula={false}
+          />
+        )}
         {props.data.metricQueryData && (
           <MetricQuery
             data={props.data.metricQueryData}