enhance metric form UI

Author: Mazen050

internal/webui/src/containers/MetricFormDialog/MetricFormDialog.consts.ts

@@ -14,21 +14,16 @@ export const getMetricInitialValues = (data?: MetricGridRow): MetricFormValues =
     Gauges: convertGauges(data?.Metric.Gauges ?? [""]),
     InitSQL: data?.Metric.InitSQL ?? "",
     IsInstanceLevel: data?.Metric.IsInstanceLevel ?? false,
-    SQLs: yaml.stringify(data?.Metric.SQLs) ?? "",
+    SQLs: (data?.Metric.SQLs) ?? "",
   };
 };
 
 export const createMetricRequest = (values: MetricFormValues): MetricRequestBody => {
-  const sqls: Record<number, string> = {};
-  yaml.parse(values.SQLs, (key, value) => {
-    if (key) {
-      const version = Number(key);
-      if (Number.isNaN(version)) {
-        throw new Error("Version is not a valid number");
-      }
-      sqls[Number(key)] = String(value);
-    }
-  });
+  const formattedSQLs = values.SQLs.reduce((acc, current) => {
+    // Key = Version, Value = SQL
+    acc[current.Version] = current.SQL; 
+    return acc;
+  }, {} as Record<string, string>);
 
   return {
     Name: values.Name,
@@ -39,7 +34,7 @@ export const createMetricRequest = (values: MetricFormValues): MetricRequestBody
       Gauges: values.Gauges?.split("\n"),
       InitSQL: values.InitSQL,
       IsInstanceLevel: values.IsInstanceLevel,
-      SQLs: sqls,
+      SQLs: formattedSQLs,
     },
   };
 };

internal/webui/src/containers/MetricFormDialog/MetricFormDialog.tsx

@@ -20,7 +20,17 @@ export const MetricFormDialog = () => {
 
   useEffect(() => {
     const initialValues = getMetricInitialValues(data);
-    reset(initialValues);
+    // Convert SQLs object to array format for the form
+    const formattedValues = {
+      ...initialValues,
+      SQLs: initialValues?.SQLs && !Array.isArray(initialValues.SQLs)
+        ? Object.entries(initialValues.SQLs).map(([key, value]) => ({
+            Version: key, 
+            SQL: value as string
+          }))
+        : [] 
+    };
+    reset(formattedValues);
   }, [data, open, reset]);
 
   const submitTitle = useMemo(

internal/webui/src/containers/MetricFormDialog/components/MetricForm/MetricForm.consts.ts

@@ -14,5 +14,5 @@ export const metricFormValuesValidationSchema = Yup.object({
   Gauges: Yup.string().optional().nullable(),
   InitSQL: Yup.string().optional().nullable(),
   IsInstanceLevel: Yup.bool().required(),
-  SQLs: Yup.string().trim().required("SQLs is required"),
+  SQLs: Yup.array().of(Yup.object().shape({Version: Yup.string().required("Version is required"),SQL: Yup.string().required("SQL value is required"),})),
 });

internal/webui/src/containers/MetricFormDialog/components/MetricForm/MetricForm.types.ts

@@ -16,7 +16,7 @@ type MetricFormSettings = {
 };
 
 type MetricFormSQL = {
-  SQLs: string;
+  SQLs: Record<string, string>;
 };
 
 export type MetricFormValues = MetricFormGeneral & MetricFormSettings & MetricFormSQL;

internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx

@@ -1,11 +1,16 @@
 import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { useFormStyles } from "styles/form";
 import { MetricFormValues } from "../MetricForm.types";
+import { Button, FormControl, FormHelperText, IconButton, InputLabel, OutlinedInput } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { Autocomplete } from "components/Autocomplete/Autocomplete";
+import { useMemo } from "react";
 
 export const MetricFormStepSQL = () => {
-  const { register, formState: { errors } } = useFormContext<MetricFormValues>();
+  const { control, register, formState: { errors } , clearErrors} = useFormContext<MetricFormValues>();
   const { classes, cx } = useFormStyles();
+  const SqlFields = useFieldArray({ control, name: "SQLs" });
 
   const hasError = (field: keyof MetricFormValues) => !!errors[field];
 
@@ -16,31 +21,91 @@ export const MetricFormStepSQL = () => {
     }
     return undefined;
   };
+  const handleSqlAppend = () => {
+    SqlFields.append({ Version: "", SQL: "" });
+    clearErrors("PresetMetrics");
+  };
+
+  const VersionOptions = useMemo(() => [
+      "15",
+      "14",
+      "13",
+      "12",
+      "11",
+      "10",
+    ].map((key) => ({ label: key })), 
+    []
+  );
+  
+  const getArrayError = (
+  index: number,
+  field: "Version" | "SQL"
+  ) => errors.SQLs?.[index]?.[field]?.message;
 
   return (
     <div className={classes.form}>
-      <FormControl
-        className={cx(classes.formControlInput, classes.widthFull)}
-        error={hasError("SQLs")}
-        variant="outlined"
-      >
-        <InputLabel htmlFor="SQLs">SQLs</InputLabel>
-        <OutlinedInput
-          {...register("SQLs")}
-          id="SQLs"
-          label="SQLs"
-          aria-describedby="SQLs-error"
-          multiline
-          rows={15}
-          inputProps={{
-            style: {
-              font: "revert",
-              fontSize: "0.7rem",
-            }
-          }}
-        />
+        {SqlFields.fields.map(({ id }, index) => (
+                  <div className={classes.row} key={id}>
+                    <FormControl
+                      className={cx(classes.formControlInput, classes.widthQuarter)}
+                      variant="outlined"
+                      error={!!getArrayError(index, "Version")}
+                    >
+                      <Controller
+                        name={`SQLs.${index}.Version`}
+                        control={control}
+                        render={({ field }) => (
+                          <Autocomplete
+                            {...field}
+                            id={`SQLs.${index}.Version`}
+                            label="Version"
+                            options={VersionOptions}
+                            freeSolo
+                            value={field.value}
+                            onInputChange={(_, value) => field.onChange(value)}
+                            // TDDO: Restrict input to numbers and dots only, but allow free solo for custom versions
+
+                          />
+                        )}
+                      />
+                      <FormHelperText>{getArrayError(index, "Version")}</FormHelperText>
+                    </FormControl>
+                    <FormControl
+                      className={cx(classes.formControlInput, classes.widthThreeQuarter)}
+                      variant="outlined"
+                      error={hasError("SQLs")}
+                    >
+                      <InputLabel htmlFor={`SQLs.${index}.SQL`}>SQL</InputLabel>
+                      <OutlinedInput
+                        {...register(`SQLs.${index}.SQL`)}
+                        id={`SQLs.${index}.SQL`}
+                        label="SQL"
+                        multiline
+                        minRows={3}
+                        maxRows={12}
+                        endAdornment={
+                          <IconButton
+                            key={`SQLs.${index}.Delete`}
+                            title="Delete SQL"
+                            onClick={() => SqlFields.remove(index)}
+                          >
+                            <DeleteIcon />
+                          </IconButton>
+                        }
+                      />
+                      <FormHelperText>{getArrayError(index, "SQL")}</FormHelperText>
+                    </FormControl>
+                  </div>
+                ))}
+          <div className={cx(classes.row, classes.addButton)}>
+          <Button
+            variant="contained"
+            onClick={handleSqlAppend}
+          >
+            Add SQLs
+          </Button>
+        </div>
         <FormHelperText id="SQLs-error">{getError("SQLs")}</FormHelperText>
-      </FormControl>
     </div>
   );
 };

internal/webui/src/styles/form.ts

@@ -57,6 +57,14 @@ export const useFormStyles = makeStyles()(
       maxWidth: "100%",
       width: "100%",
     },
+    widthQuarter: {
+      flex: "0 0 20%",
+      maxWidth: "25%",
+    },
+    widthThreeQuarter: {
+      flex: "0 0 75%",
+      maxWidth: "75%",
+    },
     hidden: {
       display: "none",
     }