From 7ea0fab6065f2b6cdf604cd83ee03da0c9237cdf Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Sun, 30 Mar 2025 18:24:53 +0100 Subject: [PATCH] Prometheus: Enable Combobox metric select by default (#101045) * Prometheus: enable prometheusUsesCombobox toggle by default * bold Combobox --- .../feature-toggles/index.md | 4 ++-- .../various-suite/prometheus-config.spec.ts | 4 ++-- .../various-suite/prometheus-editor.spec.ts | 11 +++------- .../prometheus-variable-editor.spec.ts | 2 +- .../src/types/featureToggles.gen.ts | 5 +++-- .../components/MetricCombobox.tsx | 2 ++ .../src/components/Combobox/Combobox.tsx | 4 ++++ .../src/components/Input/AutoSizeInput.tsx | 2 +- pkg/services/featuremgmt/registry.go | 7 ++++--- pkg/services/featuremgmt/toggles_gen.csv | 2 +- pkg/services/featuremgmt/toggles_gen.go | 4 ++-- pkg/services/featuremgmt/toggles_gen.json | 20 +++++++++++-------- 12 files changed, 37 insertions(+), 30 deletions(-) diff --git a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md index eed352e9df4..1f7b6158896 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md @@ -75,6 +75,7 @@ Most [generally available](https://grafana.com/docs/release-life-cycle/#general- | `alertingQueryAndExpressionsStepMode` | Enables step mode for alerting queries and expressions | Yes | | `useSessionStorageForRedirection` | Use session storage for handling the redirection after login | Yes | | `pluginsSriChecks` | Enables SRI checks for plugin assets | | +| `prometheusUsesCombobox` | Use new **Combobox** component for Prometheus query editor | Yes | | `azureMonitorDisableLogLimit` | Disables the log limit restriction for Azure Monitor when true. The limit is enabled by default. | | | `preinstallAutoUpdate` | Enables automatic updates for pre-installed plugins | Yes | | `reportingUseRawTimeRange` | Uses the original report or dashboard time range instead of making an absolute transformation | Yes | @@ -204,7 +205,6 @@ Experimental features might be changed or removed without prior notice. | `rolePickerDrawer` | Enables the new role picker drawer design | | `unifiedStorageBigObjectsSupport` | Enables to save big objects in blob storage | | `timeRangeProvider` | Enables time pickers sync | -| `prometheusUsesCombobox` | Use new combobox component for Prometheus query editor | | `playlistsReconciler` | Enables experimental reconciler for playlists | | `exploreMetricsRelatedLogs` | Display Related Logs in Grafana Metrics Drilldown | | `prometheusSpecialCharsInLabelValues` | Adds support for quotes and special characters in label values for Prometheus queries | @@ -216,7 +216,7 @@ Experimental features might be changed or removed without prior notice. | `investigationsBackend` | Enable the investigations backend API | | `k8SFolderCounts` | Enable folder's api server counts | | `k8SFolderMove` | Enable folder's api server move | -| `templateVariablesUsesCombobox` | Use new combobox component for template variables | +| `templateVariablesUsesCombobox` | Use new **Combobox** component for template variables | | `grafanaAdvisor` | Enables Advisor app | | `elasticsearchImprovedParsing` | Enables less memory intensive Elasticsearch result parsing | | `newLogsPanel` | Enables the new logs panel in Explore | diff --git a/e2e/old-arch/various-suite/prometheus-config.spec.ts b/e2e/old-arch/various-suite/prometheus-config.spec.ts index 641cad7b22b..3dd6aa868c7 100644 --- a/e2e/old-arch/various-suite/prometheus-config.spec.ts +++ b/e2e/old-arch/various-suite/prometheus-config.spec.ts @@ -106,6 +106,6 @@ describe('Prometheus config', () => { // exemplars tested in exemplar.spec }); -export function selectOption(option: string) { - e2e.components.Select.option().contains(option).should('be.visible').click(); +function selectOption(option: string) { + cy.get('[role="option"]').filter(`:contains("${option}")`).should('be.visible').click(); } diff --git a/e2e/old-arch/various-suite/prometheus-editor.spec.ts b/e2e/old-arch/various-suite/prometheus-editor.spec.ts index 64993979a9a..a4f480b9f5d 100644 --- a/e2e/old-arch/various-suite/prometheus-editor.spec.ts +++ b/e2e/old-arch/various-suite/prometheus-editor.spec.ts @@ -141,8 +141,7 @@ describe('Prometheus query editor', () => { getResources(); - e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click(); - + e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click().type('metric1'); selectOption('metric1'); e2e.components.DataSource.Prometheus.queryEditor.builder.hints().contains('hint: add rate'); @@ -153,15 +152,11 @@ describe('Prometheus query editor', () => { getResources(); - e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click(); - - selectOption('Metrics explorer'); - - e2e.components.DataSource.Prometheus.queryEditor.builder.metricsExplorer().should('exist'); + cy.get(`[aria-label="Open metrics explorer"]`).should('exist'); }); }); }); function selectOption(option: string) { - e2e.components.Select.option().contains(option).should('be.visible').click(); + cy.get('[role="option"]').filter(`:contains("${option}")`).should('be.visible').click(); } diff --git a/e2e/old-arch/various-suite/prometheus-variable-editor.spec.ts b/e2e/old-arch/various-suite/prometheus-variable-editor.spec.ts index 8e91ce8c283..680499246f1 100644 --- a/e2e/old-arch/various-suite/prometheus-variable-editor.spec.ts +++ b/e2e/old-arch/various-suite/prometheus-variable-editor.spec.ts @@ -118,5 +118,5 @@ describe('Prometheus variable query editor', () => { }); function selectOption(option: string) { - e2e.components.Select.option().contains(option).should('be.visible').click(); + cy.get('[role="option"]').filter(`:contains("${option}")`).should('be.visible').click(); } diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 2b19dd128ac..ca5ec946364 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -836,7 +836,8 @@ export interface FeatureToggles { */ timeRangeProvider?: boolean; /** - * Use new combobox component for Prometheus query editor + * Use new **Combobox** component for Prometheus query editor + * @default true */ prometheusUsesCombobox?: boolean; /** @@ -951,7 +952,7 @@ export interface FeatureToggles { */ ABTestFeatureToggleA?: boolean; /** - * Use new combobox component for template variables + * Use new **Combobox** component for template variables */ templateVariablesUsesCombobox?: boolean; /** diff --git a/packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx b/packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx index b939c6b8aa1..413970aea82 100644 --- a/packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx +++ b/packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx @@ -1,6 +1,7 @@ import { useCallback, useState } from 'react'; import { SelectableValue } from '@grafana/data'; +import { selectors } from '@grafana/e2e-selectors'; import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/plugin-ui'; import { Button, InlineField, InlineFieldRow, Combobox, ComboboxOption } from '@grafana/ui'; @@ -93,6 +94,7 @@ export function MetricCombobox({ value={query.metric} onChange={onComboboxChange} createCustomValue + data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.metricSelect} />