webui: fix preset sorting order and ESLint issues

internal/webui/src/constants/presets.ts

@@ -0,0 +1,18 @@
+export const PRESET_ORDER = [
+  "minimal",
+  "basic",
+  "standard",
+  "exhaustive",
+  "full",
+  "aiven",
+  "azure",
+  "gce",
+  "rds",
+  "pgbouncer",
+  "pgpool",
+  "unprivileged",
+  "recommendations",
+  "prometheus-async",
+  "exhaustive_no_python",
+  "debug",
+];

internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/SourceFormStepMetrics.tsx

@@ -1,3 +1,4 @@
+import { PRESET_ORDER } from "constants/presets";
 import { useEffect, useMemo } from "react";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Button, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, InputLabel, OutlinedInput } from "@mui/material";
@@ -8,6 +9,15 @@ import { useMetrics } from "queries/Metric";
 import { usePresets } from "queries/Preset";
 import { SourceFormValues } from "../SourceForm.types";
 
+type PresetOption = {
+  label: string;
+  description?: string;
+};
+
+type PresetMeta = {
+  Description?: string;
+};
+
 export const SourceFormStepMetrics = () => {
   const { control, register, watch, formState: { errors }, clearErrors } = useFormContext<SourceFormValues>();
   const metricsFields = useFieldArray({ control, name: "Metrics" });
@@ -34,11 +44,36 @@ export const SourceFormStepMetrics = () => {
 
   const presets = usePresets();
   const metrics = useMetrics();
+const presetsOptions = useMemo<PresetOption[]>(() => {
+
+  if (!presets.data) {
+    return [];
+  }
 
-  const presetsOptions = useMemo(
-    () => presets.data ? Object.keys(presets.data).map((key) => ({ label: key })) : [],
-    [presets.data],
-  );
+  return Object.entries(presets.data)
+    .sort(([a], [b]) => {
+      const ia = PRESET_ORDER.indexOf(a);
+      const ib = PRESET_ORDER.indexOf(b);
+
+      if (ia === -1 && ib === -1) {
+        return a.localeCompare(b);
+      }
+      if (ia === -1) {
+        return 1;
+      }
+      if (ib === -1) {
+        return -1;
+      }
+      return ia - ib;
+    })
+    .map(([key, preset]) => {
+      const p = preset as PresetMeta;
+      return {
+        label: key,
+        description: p.Description ?? "",
+      };
+    });
+}, [presets.data]);
 
   const metricsOptions = useMemo(
     () => metrics.data ? Object.keys(metrics.data).map((key) => ({ label: key })) : [],
@@ -83,6 +118,7 @@ export const SourceFormStepMetrics = () => {
                 loading={presets.isLoading}
                 error={hasError("PresetMetrics")}
               />
+
             )}
           />
           <FormHelperText>{getError("PresetMetrics")}</FormHelperText>
@@ -162,6 +198,7 @@ export const SourceFormStepMetrics = () => {
                 options={presetsOptions}
                 loading={presets.isLoading}
               />
+
             )}
           />
         </FormControl>

internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx

@@ -1,3 +1,4 @@
+import { PRESET_ORDER } from "constants/presets";
 import { useMemo } from "react";
 import { DataGrid } from "@mui/x-data-grid";
 import { Error } from "components/Error/Error";
@@ -24,18 +25,26 @@ export const PresetsGrid = () => {
     onColumnResize
   } = useGridState('PRESETS_GRID', columns);
 
-  const rows: PresetGridRow[] | [] = useMemo(() => {
-    if (data) {
-      return Object.keys(data).map((key) => {
-        const preset = data[key];
-        return {
-          Key: key,
-          Preset: preset,
-        };
-      });
-    }
+  const rows: PresetGridRow[] = useMemo(() => {
+  if (!data) {
     return [];
-  }, [data]);
+  }
+  const orderMap = new Map(
+    PRESET_ORDER.map((name, index) => [name, index])
+  );
+
+  return Object.keys(data)
+    .sort((a, b) => {
+      const aOrder = orderMap.get(a) ?? Number.MAX_SAFE_INTEGER;
+      const bOrder = orderMap.get(b) ?? Number.MAX_SAFE_INTEGER;
+      return aOrder - bOrder;
+    })
+    .map((key) => ({
+      Key: key,
+      Preset: data[key],
+    }));
+}, [data]);
+
 
   if (isLoading) {
     return (