public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prometheus: Enable Combobox metric select by default (#101045)

Browse Source 
* Prometheus: enable prometheusUsesCombobox toggle by default

* bold Combobox
This commit is contained in:
Josh Hunt
2025-03-30 20:24:53 +03:00
committed by GitHub
parent 88e51d549c
commit 7ea0fab606
12 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
+2 -2
View File
@@ -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 | | `alertingQueryAndExpressionsStepMode` | Enables step mode for alerting queries and expressions | Yes |
| `useSessionStorageForRedirection` | Use session storage for handling the redirection after login | Yes | | `useSessionStorageForRedirection` | Use session storage for handling the redirection after login | Yes |
| `pluginsSriChecks` | Enables SRI checks for plugin assets | | | `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. | | | `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 | | `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 | | `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 | | `rolePickerDrawer` | Enables the new role picker drawer design |
| `unifiedStorageBigObjectsSupport` | Enables to save big objects in blob storage | | `unifiedStorageBigObjectsSupport` | Enables to save big objects in blob storage |
| `timeRangeProvider` | Enables time pickers sync | | `timeRangeProvider` | Enables time pickers sync |
| `prometheusUsesCombobox` | Use new combobox component for Prometheus query editor |
| `playlistsReconciler` | Enables experimental reconciler for playlists | | `playlistsReconciler` | Enables experimental reconciler for playlists |
| `exploreMetricsRelatedLogs` | Display Related Logs in Grafana Metrics Drilldown | | `exploreMetricsRelatedLogs` | Display Related Logs in Grafana Metrics Drilldown |
| `prometheusSpecialCharsInLabelValues` | Adds support for quotes and special characters in label values for Prometheus queries | | `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 | | `investigationsBackend` | Enable the investigations backend API |
| `k8SFolderCounts` | Enable folder's api server counts | | `k8SFolderCounts` | Enable folder's api server counts |
| `k8SFolderMove` | Enable folder's api server move | | `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 | | `grafanaAdvisor` | Enables Advisor app |
| `elasticsearchImprovedParsing` | Enables less memory intensive Elasticsearch result parsing | | `elasticsearchImprovedParsing` | Enables less memory intensive Elasticsearch result parsing |
| `newLogsPanel` | Enables the new logs panel in Explore | | `newLogsPanel` | Enables the new logs panel in Explore |
e2e/old-arch/various-suite/prometheus-config.spec.ts
+2 -2
View File
@@ -106,6 +106,6 @@ describe('Prometheus config', () => {
// exemplars tested in exemplar.spec // exemplars tested in exemplar.spec
}); });
export function selectOption(option: string) { 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();
} }
e2e/old-arch/various-suite/prometheus-editor.spec.ts
+3 -8
View File
@@ -141,8 +141,7 @@ describe('Prometheus query editor', () => {
getResources(); 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'); selectOption('metric1');
e2e.components.DataSource.Prometheus.queryEditor.builder.hints().contains('hint: add rate'); e2e.components.DataSource.Prometheus.queryEditor.builder.hints().contains('hint: add rate');
@@ -153,15 +152,11 @@ describe('Prometheus query editor', () => {
getResources(); getResources();
e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click(); cy.get(`[aria-label="Open metrics explorer"]`).should('exist');
selectOption('Metrics explorer');
e2e.components.DataSource.Prometheus.queryEditor.builder.metricsExplorer().should('exist');
}); });
}); });
}); });
function selectOption(option: string) { 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();
} }
e2e/old-arch/various-suite/prometheus-variable-editor.spec.ts
+1 -1
View File
@@ -118,5 +118,5 @@ describe('Prometheus variable query editor', () => {
}); });
function selectOption(option: string) { 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();
} }
packages/grafana-data/src/types/featureToggles.gen.ts
+3 -2
View File
@@ -836,7 +836,8 @@ export interface FeatureToggles {
*/ */
timeRangeProvider?: boolean; timeRangeProvider?: boolean;
/** /**
* Use new combobox component for Prometheus query editor * Use new **Combobox** component for Prometheus query editor
* @default true
*/ */
prometheusUsesCombobox?: boolean; prometheusUsesCombobox?: boolean;
/** /**
@@ -951,7 +952,7 @@ export interface FeatureToggles {
*/ */
ABTestFeatureToggleA?: boolean; ABTestFeatureToggleA?: boolean;
/** /**
* Use new combobox component for template variables * Use new **Combobox** component for template variables
*/ */
templateVariablesUsesCombobox?: boolean; templateVariablesUsesCombobox?: boolean;
/** /**
packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx
+2
View File
@@ -1,6 +1,7 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/plugin-ui'; import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/plugin-ui';
import { Button, InlineField, InlineFieldRow, Combobox, ComboboxOption } from '@grafana/ui'; import { Button, InlineField, InlineFieldRow, Combobox, ComboboxOption } from '@grafana/ui';
@@ -93,6 +94,7 @@ export function MetricCombobox({
value={query.metric} value={query.metric}
onChange={onComboboxChange} onChange={onComboboxChange}
createCustomValue createCustomValue
data-testid={selectors.components.DataSource.Prometheus.queryEditor.builder.metricSelect}
/> />
<Button <Button
tooltip="Open metrics explorer" tooltip="Open metrics explorer"
packages/grafana-ui/src/components/Combobox/Combobox.tsx
+4
View File
@@ -57,6 +57,8 @@ export interface ComboboxBaseProps<T extends string | number>
* */ * */
width?: number | 'auto'; width?: number | 'auto';
['data-testid']?: string;
/** /**
* Called when the input loses focus. * Called when the input loses focus.
*/ */
@@ -120,6 +122,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
minWidth, minWidth,
maxWidth, maxWidth,
'aria-labelledby': ariaLabelledBy, 'aria-labelledby': ariaLabelledBy,
'data-testid': dataTestId,
autoFocus, autoFocus,
onBlur, onBlur,
disabled, disabled,
@@ -359,6 +362,7 @@ export const Combobox = <T extends string | number>(props: ComboboxProps<T>) =>
onChange: noop, // Empty onCall to avoid TS error https://github.com/downshift-js/downshift/issues/718 onChange: noop, // Empty onCall to avoid TS error https://github.com/downshift-js/downshift/issues/718
'aria-labelledby': ariaLabelledBy, // Label should be handled with the Field component 'aria-labelledby': ariaLabelledBy, // Label should be handled with the Field component
placeholder, placeholder,
'data-testid': dataTestId,
})} })}
/> />
<Portal> <Portal>
packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
+1 -1
View File
@@ -50,6 +50,7 @@ export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, r
return ( return (
<AutoSizeInputContext.Provider value={true}> <AutoSizeInputContext.Provider value={true}>
<Input <Input
data-testid="autosize-input" // consumer should override default testid
{...restProps} {...restProps}
placeholder={placeholder} placeholder={placeholder}
ref={ref} ref={ref}
@@ -76,7 +77,6 @@ export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, r
onCommitChange(event); onCommitChange(event);
} }
}} }}
data-testid="autosize-input"
/> />
</AutoSizeInputContext.Provider> </AutoSizeInputContext.Provider>
); );
pkg/services/featuremgmt/registry.go
+4 -3
View File
@@ -1434,9 +1434,10 @@ var (
}, },
{ {
Name: "prometheusUsesCombobox", Name: "prometheusUsesCombobox",
Description: "Use new combobox component for Prometheus query editor", Description: "Use new **Combobox** component for Prometheus query editor",
Stage: FeatureStageExperimental, Stage: FeatureStageGeneralAvailability,
Owner: grafanaOSSBigTent, Owner: grafanaOSSBigTent,
Expression: "true", // enabled by default
}, },
{ {
Name: "azureMonitorDisableLogLimit", Name: "azureMonitorDisableLogLimit",
@@ -1620,7 +1621,7 @@ var (
}, },
{ {
Name: "templateVariablesUsesCombobox", Name: "templateVariablesUsesCombobox",
Description: "Use new combobox component for template variables", Description: "Use new **Combobox** component for template variables",
Stage: FeatureStageExperimental, Stage: FeatureStageExperimental,
Owner: grafanaFrontendPlatformSquad, Owner: grafanaFrontendPlatformSquad,
FrontendOnly: true, FrontendOnly: true,
pkg/services/featuremgmt/toggles_gen.csv
+1 -1
View File
@@ -188,7 +188,7 @@ managedDualWriter,experimental,@grafana/search-and-storage,false,false,false
pluginsSriChecks,GA,@grafana/plugins-platform-backend,false,false,false pluginsSriChecks,GA,@grafana/plugins-platform-backend,false,false,false
unifiedStorageBigObjectsSupport,experimental,@grafana/search-and-storage,false,false,false unifiedStorageBigObjectsSupport,experimental,@grafana/search-and-storage,false,false,false
timeRangeProvider,experimental,@grafana/grafana-frontend-platform,false,false,false timeRangeProvider,experimental,@grafana/grafana-frontend-platform,false,false,false
prometheusUsesCombobox,experimental,@grafana/oss-big-tent,false,false,false prometheusUsesCombobox,GA,@grafana/oss-big-tent,false,false,false
azureMonitorDisableLogLimit,GA,@grafana/partner-datasources,false,false,false azureMonitorDisableLogLimit,GA,@grafana/partner-datasources,false,false,false
preinstallAutoUpdate,GA,@grafana/plugins-platform-backend,false,false,false preinstallAutoUpdate,GA,@grafana/plugins-platform-backend,false,false,false
playlistsReconciler,experimental,@grafana/grafana-app-platform-squad,false,true,false playlistsReconciler,experimental,@grafana/grafana-app-platform-squad,false,true,false
1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
188 pluginsSriChecks GA @grafana/plugins-platform-backend false false false
189 unifiedStorageBigObjectsSupport experimental @grafana/search-and-storage false false false
190 timeRangeProvider experimental @grafana/grafana-frontend-platform false false false
191 prometheusUsesCombobox experimental GA @grafana/oss-big-tent false false false
192 azureMonitorDisableLogLimit GA @grafana/partner-datasources false false false
193 preinstallAutoUpdate GA @grafana/plugins-platform-backend false false false
194 playlistsReconciler experimental @grafana/grafana-app-platform-squad false true false
pkg/services/featuremgmt/toggles_gen.go
+2 -2
View File
@@ -764,7 +764,7 @@ const (
FlagTimeRangeProvider = "timeRangeProvider" FlagTimeRangeProvider = "timeRangeProvider"
// FlagPrometheusUsesCombobox // FlagPrometheusUsesCombobox
// Use new combobox component for Prometheus query editor // Use new **Combobox** component for Prometheus query editor
FlagPrometheusUsesCombobox = "prometheusUsesCombobox" FlagPrometheusUsesCombobox = "prometheusUsesCombobox"
// FlagAzureMonitorDisableLogLimit // FlagAzureMonitorDisableLogLimit
@@ -868,7 +868,7 @@ const (
FlagABTestFeatureToggleA = "ABTestFeatureToggleA" FlagABTestFeatureToggleA = "ABTestFeatureToggleA"
// FlagTemplateVariablesUsesCombobox // FlagTemplateVariablesUsesCombobox
// Use new combobox component for template variables // Use new **Combobox** component for template variables
FlagTemplateVariablesUsesCombobox = "templateVariablesUsesCombobox" FlagTemplateVariablesUsesCombobox = "templateVariablesUsesCombobox"
// FlagABTestFeatureToggleB // FlagABTestFeatureToggleB
pkg/services/featuremgmt/toggles_gen.json
+12 -8
View File
@@ -3493,16 +3493,17 @@
{ {
"metadata": { "metadata": {
"name": "prometheusUsesCombobox", "name": "prometheusUsesCombobox",
"resourceVersion": "1735845919509", "resourceVersion": "1740072685161",
"creationTimestamp": "2024-10-23T11:18:33Z", "creationTimestamp": "2024-10-23T11:18:33Z",
"annotations": { "annotations": {
"grafana.app/updatedTimestamp": "2025-01-02 19:25:19.509884 +0000 UTC" "grafana.app/updatedTimestamp": "2025-02-20 17:31:25.161842198 +0000 UTC"
} }
}, },
"spec": { "spec": {
"description": "Use new combobox component for Prometheus query editor", "description": "Use new **Combobox** component for Prometheus query editor",
"stage": "experimental", "stage": "GA",
"codeowner": "@grafana/oss-big-tent" "codeowner": "@grafana/oss-big-tent",
"expression": "true"
} }
}, },
{ {
@@ -4076,11 +4077,14 @@
{ {
"metadata": { "metadata": {
"name": "templateVariablesUsesCombobox", "name": "templateVariablesUsesCombobox",
"resourceVersion": "1738141787383", "resourceVersion": "1740072685161",
"creationTimestamp": "2025-01-29T09:09:47Z" "creationTimestamp": "2025-01-29T09:09:47Z",
"annotations": {
"grafana.app/updatedTimestamp": "2025-02-20 17:31:25.161842198 +0000 UTC"
}
}, },
"spec": { "spec": {
"description": "Use new combobox component for template variables", "description": "Use new **Combobox** component for template variables",
"stage": "experimental", "stage": "experimental",
"codeowner": "@grafana/grafana-frontend-platform", "codeowner": "@grafana/grafana-frontend-platform",
"frontend": true "frontend": true