[*] sort webui preset selection list and add descriptions, fixes #1050 (#1172)

Sort presets in logical order (minimal → exhaustive → cloud → special)
and display descriptions to help users choose the right preset. Remove
outdated presets `prometheus-async` and `unprivileged`.

Author: pashagolub

internal/metrics/metrics.yaml

@@ -4391,24 +4391,6 @@ presets:
             reco_partial_index_candidates: 79200
             reco_sprocs_wo_search_path: 86400
             reco_superusers: 93600
-    prometheus-async:
-        description: Tuned for the Prometheus async scrapping
-        metrics:
-            backends: 30
-            bgwriter: 60
-            checkpointer: 60
-            db_size: 300
-            db_stats: 30
-            locks_mode: 30
-            replication: 120
-            replication_slots: 120
-            settings: 300
-            sproc_stats: 180
-            stat_statements_calls: 60
-            table_io_stats: 300
-            table_stats: 300
-            wait_events: 60
-            wal: 60
     rds:
         description: similar to 'exhaustive' with stuff that's not accessible on AWS RDS removed
         metrics:
@@ -4480,29 +4462,6 @@ presets:
             wal: 60
             wal_receiver: 120
             wal_size: 300
-    unprivileged:
-        description: no wrappers + only pg_stat_statements extension expected (developer mode)
-        metrics:
-            archiver: 60
-            archiver_pending_count: 120
-            bgwriter: 60
-            checkpointer: 60
-            change_events: 300
-            db_size: 300
-            db_stats: 60
-            index_stats: 900
-            instance_up: 60
-            locks: 60
-            locks_mode: 60
-            replication: 120
-            replication_slots: 120
-            sequence_health: 3600
-            settings: 7200
-            sproc_stats: 180
-            stat_statements_calls: 60
-            table_io_stats: 600
-            table_stats: 300
-            wal: 60
     debug:
         description: all available metrics with 30 second intervals for debugging and development
         metrics:

internal/webui/src/components/Autocomplete/Autocomplete.tsx

@@ -1,10 +1,15 @@
-import { AutocompleteRenderInputParams, Autocomplete as MuiAutocomplete, TextField } from "@mui/material";
+import { AutocompleteRenderInputParams, Autocomplete as MuiAutocomplete, TextField, Box, Typography } from "@mui/material";
 import { ControllerRenderProps } from "react-hook-form";
 
+type AutocompleteOption = {
+  label: string;
+  description?: string;
+};
+
 type Props = {
   id?: string;
   label: string;
-  options: { label: string }[];
+  options: AutocompleteOption[];
   loading?: boolean;
   error?: boolean;
 } & ControllerRenderProps;
@@ -26,6 +31,19 @@ export const Autocomplete = (props: Props) => {
       id={id}
       options={options}
       renderInput={customInput}
+      getOptionLabel={(option) => typeof option === "string" ? option : option.label}
+      renderOption={(props, option) => (
+        <Box component="li" {...props}>
+          <Box>
+            <Typography variant="body1">{option.label}</Typography>
+            {option.description && (
+              <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.875rem' }}>
+                {option.description}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+      )}
       onChange={(_, value) => field.onChange(value ? value.label : "")}
       loading={loading}
       componentsProps={{

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

@@ -35,8 +35,52 @@ export const SourceFormStepMetrics = () => {
   const presets = usePresets();
   const metrics = useMetrics();
 
+  // Define the logical order for presets
+  const sortPresets = (presetKeys: string[]) => {
+    const order = [
+      'minimal',
+      'basic',
+      'standard',
+      'exhaustive',
+      'full',
+      'exhaustive_no_python',
+      // Cloud providers (alphabetically)
+      'aiven',
+      'azure',
+      'gce',
+      'rds',
+      // Special presets (alphabetically)
+      'debug',
+      'pgbouncer',
+      'pgpool',
+      'recommendations',
+    ];
+
+    return presetKeys.sort((a, b) => {
+      const indexA = order.indexOf(a);
+      const indexB = order.indexOf(b);
+
+      // If both are in the order array, sort by their position
+      if (indexA !== -1 && indexB !== -1) {
+        return indexA - indexB;
+      }
+
+      // If only one is in the order array, it comes first
+      if (indexA !== -1) return -1;
+      if (indexB !== -1) return 1;
+
+      // If neither is in the order array, sort alphabetically
+      return a.localeCompare(b);
+    });
+  };
+
   const presetsOptions = useMemo(
-    () => presets.data ? Object.keys(presets.data).sort((a, b) => a.localeCompare(b)).map((key) => ({ label: key })) : [],
+    () => presets.data
+      ? sortPresets(Object.keys(presets.data)).map((key) => ({
+        label: key,
+        description: presets.data[key].Description
+      }))
+      : [],
     [presets.data],
   );
 
@@ -230,7 +274,7 @@ export const SourceFormStepMetrics = () => {
             <Checkbox
               {...onlyIfMasterField}
               size="medium"
-              checked={onlyIfMasterField.value} 
+              checked={onlyIfMasterField.value}
             />
           }
         />