diff --git a/internal/webui/src/constants/presets.ts b/internal/webui/src/constants/presets.ts new file mode 100644 index 0000000000..a01ff8ba76 --- /dev/null +++ b/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", +]; diff --git a/internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/SourceFormStepMetrics.tsx b/internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/SourceFormStepMetrics.tsx index c9890ad6ee..0fd6bc7be8 100644 --- a/internal/webui/src/containers/SourceFormDialog/components/SourceForm/components/SourceFormStepMetrics.tsx +++ b/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(); const metricsFields = useFieldArray({ control, name: "Metrics" }); @@ -34,11 +44,36 @@ export const SourceFormStepMetrics = () => { const presets = usePresets(); const metrics = useMetrics(); +const presetsOptions = useMemo(() => { + + 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")} /> + )} /> {getError("PresetMetrics")} @@ -162,6 +198,7 @@ export const SourceFormStepMetrics = () => { options={presetsOptions} loading={presets.isLoading} /> + )} /> diff --git a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx b/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx index 2dcccac76b..a4b058861a 100644 --- a/internal/webui/src/pages/PresetsPage/components/PresetsGrid/PresetsGrid.tsx +++ b/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 (