From 00ae49a61adff11e5fbac3341941b35185d9e8d9 Mon Sep 17 00:00:00 2001 From: Sergej-Vlasov <37613182+Sergej-Vlasov@users.noreply.github.com> Date: Fri, 30 Aug 2024 15:48:13 +0300 Subject: [PATCH] FeatureToggle - new filters UI feature toggle (#92189) * add newFiltersUI experimental feature toggle * adjust Ad hoc filter varibale layout property based on feature toggle * restore file * bump to latest scenes --- .../feature-toggles/index.md | 1 + package.json | 2 +- .../src/types/featureToggles.gen.ts | 1 + pkg/services/featuremgmt/registry.go | 6 ++++ pkg/services/featuremgmt/toggles_gen.csv | 1 + pkg/services/featuremgmt/toggles_gen.go | 4 +++ pkg/services/featuremgmt/toggles_gen.json | 12 ++++++++ .../scene/setDashboardPanelContext.ts | 3 +- .../settings/variables/utils.ts | 5 +++- .../dashboard-scene/utils/variables.ts | 2 ++ public/app/features/trails/DataTrail.tsx | 4 +-- yarn.lock | 30 ++++++++++++++----- 12 files changed, 59 insertions(+), 12 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 66328509bd7..a0fae3e97e7 100644 --- a/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md +++ b/docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md @@ -193,6 +193,7 @@ Experimental features might be changed or removed without prior notice. | `backgroundPluginInstaller` | Enable background plugin installer | | `dataplaneAggregator` | Enable grafana dataplane aggregator | | `adhocFilterOneOf` | Exposes a new 'one of' operator for ad-hoc filters. This operator allows users to filter by multiple values in a single filter. | +| `newFiltersUI` | Enables new combobox style UI for the Ad hoc filters variable in scenes architecture | | `lokiSendDashboardPanelNames` | Send dashboard and panel names to Loki when querying | | `singleTopNav` | Unifies the top search bar and breadcrumb bar into one | | `exploreLogsShardSplitting` | Used in Explore Logs to split queries into multiple queries based on the number of shards | diff --git a/package.json b/package.json index 17adae9ed39..aa0d5e65854 100644 --- a/package.json +++ b/package.json @@ -268,7 +268,7 @@ "@grafana/prometheus": "workspace:*", "@grafana/runtime": "workspace:*", "@grafana/saga-icons": "workspace:*", - "@grafana/scenes": "^5.11.0", + "@grafana/scenes": "^5.11.1", "@grafana/schema": "workspace:*", "@grafana/sql": "workspace:*", "@grafana/ui": "workspace:*", diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index f0933f11f05..4b458ca1e3d 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -202,6 +202,7 @@ export interface FeatureToggles { backgroundPluginInstaller?: boolean; dataplaneAggregator?: boolean; adhocFilterOneOf?: boolean; + newFiltersUI?: boolean; lokiSendDashboardPanelNames?: boolean; singleTopNav?: boolean; exploreLogsShardSplitting?: boolean; diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index d6c8d621af0..a0c513ccc49 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -1391,6 +1391,12 @@ var ( Stage: FeatureStageExperimental, Owner: grafanaDashboardsSquad, }, + { + Name: "newFiltersUI", + Description: "Enables new combobox style UI for the Ad hoc filters variable in scenes architecture", + Stage: FeatureStageExperimental, + Owner: grafanaDashboardsSquad, + }, { Name: "lokiSendDashboardPanelNames", Description: "Send dashboard and panel names to Loki when querying", diff --git a/pkg/services/featuremgmt/toggles_gen.csv b/pkg/services/featuremgmt/toggles_gen.csv index 9dfc93c661f..dab6db0193c 100644 --- a/pkg/services/featuremgmt/toggles_gen.csv +++ b/pkg/services/featuremgmt/toggles_gen.csv @@ -183,6 +183,7 @@ prometheusAzureOverrideAudience,deprecated,@grafana/partner-datasources,false,fa backgroundPluginInstaller,experimental,@grafana/plugins-platform-backend,false,true,false dataplaneAggregator,experimental,@grafana/grafana-app-platform-squad,false,true,false adhocFilterOneOf,experimental,@grafana/dashboards-squad,false,false,false +newFiltersUI,experimental,@grafana/dashboards-squad,false,false,false lokiSendDashboardPanelNames,experimental,@grafana/observability-logs,false,false,false singleTopNav,experimental,@grafana/grafana-frontend-platform,false,false,true exploreLogsShardSplitting,experimental,@grafana/observability-logs,false,false,true diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index 4b5c4ac2d81..09a5c150cc6 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -743,6 +743,10 @@ const ( // Exposes a new 'one of' operator for ad-hoc filters. This operator allows users to filter by multiple values in a single filter. FlagAdhocFilterOneOf = "adhocFilterOneOf" + // FlagNewFiltersUI + // Enables new combobox style UI for the Ad hoc filters variable in scenes architecture + FlagNewFiltersUI = "newFiltersUI" + // FlagLokiSendDashboardPanelNames // Send dashboard and panel names to Loki when querying FlagLokiSendDashboardPanelNames = "lokiSendDashboardPanelNames" diff --git a/pkg/services/featuremgmt/toggles_gen.json b/pkg/services/featuremgmt/toggles_gen.json index 0178520d186..3a724d7c90b 100644 --- a/pkg/services/featuremgmt/toggles_gen.json +++ b/pkg/services/featuremgmt/toggles_gen.json @@ -1883,6 +1883,18 @@ "hideFromDocs": true } }, + { + "metadata": { + "name": "newFiltersUI", + "resourceVersion": "1724228641625", + "creationTimestamp": "2024-08-21T08:24:01Z" + }, + "spec": { + "description": "Enables new combobox style UI for the Ad hoc filters variable in scenes architecture", + "stage": "experimental", + "codeowner": "@grafana/dashboards-squad" + } + }, { "metadata": { "name": "newFolderPicker", diff --git a/public/app/features/dashboard-scene/scene/setDashboardPanelContext.ts b/public/app/features/dashboard-scene/scene/setDashboardPanelContext.ts index b40a86b3618..00150b02a0a 100644 --- a/public/app/features/dashboard-scene/scene/setDashboardPanelContext.ts +++ b/public/app/features/dashboard-scene/scene/setDashboardPanelContext.ts @@ -1,5 +1,5 @@ import { AnnotationChangeEvent, AnnotationEventUIModel, CoreApp, DataFrame } from '@grafana/data'; -import { getDataSourceSrv } from '@grafana/runtime'; +import { config, getDataSourceSrv } from '@grafana/runtime'; import { AdHocFiltersVariable, dataLayers, sceneGraph, sceneUtils, VizPanel } from '@grafana/scenes'; import { DataSourceRef } from '@grafana/schema'; import { AdHocFilterItem, PanelContext } from '@grafana/ui'; @@ -163,6 +163,7 @@ export function getAdHocFilterVariableFor(scene: DashboardScene, ds: DataSourceR datasource: ds, supportsMultiValueOperators: Boolean(getDataSourceSrv().getInstanceSettings(ds)?.meta.multiValueFilterOperators), useQueriesAsFilterForOptions: true, + layout: config.featureToggles.newFiltersUI ? 'combobox' : undefined, }); // Add it to the scene diff --git a/public/app/features/dashboard-scene/settings/variables/utils.ts b/public/app/features/dashboard-scene/settings/variables/utils.ts index ab9bfb9fe00..7ad16d5b988 100644 --- a/public/app/features/dashboard-scene/settings/variables/utils.ts +++ b/public/app/features/dashboard-scene/settings/variables/utils.ts @@ -134,7 +134,10 @@ export function getVariableScene(type: EditableVariableType, initialState: Commo case 'datasource': return new DataSourceVariable(initialState); case 'adhoc': - return new AdHocFiltersVariable(initialState); + return new AdHocFiltersVariable({ + ...initialState, + layout: config.featureToggles.newFiltersUI ? 'combobox' : undefined, + }); case 'groupby': return new GroupByVariable(initialState); case 'textbox': diff --git a/public/app/features/dashboard-scene/utils/variables.ts b/public/app/features/dashboard-scene/utils/variables.ts index 69d15d9daed..7421ce979fa 100644 --- a/public/app/features/dashboard-scene/utils/variables.ts +++ b/public/app/features/dashboard-scene/utils/variables.ts @@ -56,6 +56,7 @@ export function createVariablesForSnapshot(oldModel: DashboardModel) { baseFilters: v.baseFilters ?? [], defaultKeys: v.defaultKeys, useQueriesAsFilterForOptions: true, + layout: config.featureToggles.newFiltersUI ? 'combobox' : undefined, supportsMultiValueOperators: Boolean( getDataSourceSrv().getInstanceSettings(v.datasource)?.meta.multiValueFilterOperators ), @@ -136,6 +137,7 @@ export function createSceneVariableFromVariableModel(variable: TypedVariableMode baseFilters: variable.baseFilters ?? [], defaultKeys: variable.defaultKeys, useQueriesAsFilterForOptions: true, + layout: config.featureToggles.newFiltersUI ? 'combobox' : undefined, supportsMultiValueOperators: Boolean( getDataSourceSrv().getInstanceSettings(variable.datasource)?.meta.multiValueFilterOperators ), diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx index 76aaf11db4b..7a384684d20 100644 --- a/public/app/features/trails/DataTrail.tsx +++ b/public/app/features/trails/DataTrail.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { AdHocVariableFilter, GrafanaTheme2, PageLayoutType, VariableHide, urlUtil } from '@grafana/data'; -import { locationService, useChromeHeaderHeight } from '@grafana/runtime'; +import { config, locationService, useChromeHeaderHeight } from '@grafana/runtime'; import { AdHocFiltersVariable, DataSourceVariable, @@ -259,7 +259,7 @@ function getVariableSet(initialDS?: string, metric?: string, initialFilters?: Ad addFilterButtonText: 'Add label', datasource: trailDS, hide: VariableHide.hideLabel, - layout: 'vertical', + layout: config.featureToggles.newFiltersUI ? 'combobox' : 'vertical', filters: initialFilters ?? [], baseFilters: getBaseFiltersForMetric(metric), // since we only support prometheus datasources, this is always true diff --git a/yarn.lock b/yarn.lock index 0349b5beaa9..a5bfdfa5768 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2767,7 +2767,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:^2.1.1": +"@floating-ui/react-dom@npm:^2.1.0, @floating-ui/react-dom@npm:^2.1.1": version: 2.1.1 resolution: "@floating-ui/react-dom@npm:2.1.1" dependencies: @@ -2779,6 +2779,20 @@ __metadata: languageName: node linkType: hard +"@floating-ui/react@npm:0.26.16": + version: 0.26.16 + resolution: "@floating-ui/react@npm:0.26.16" + dependencies: + "@floating-ui/react-dom": "npm:^2.1.0" + "@floating-ui/utils": "npm:^0.2.0" + tabbable: "npm:^6.0.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10/4d5216ba10c05f08a94730c0899578ead75a6cdfa9e531461e8d7ef7fea43d6b5818869c38a3c30c36f2e557c0af58b52b2325248d19029e2a89f34bfcc8c421 + languageName: node + linkType: hard + "@floating-ui/react@npm:0.26.23": version: 0.26.23 resolution: "@floating-ui/react@npm:0.26.23" @@ -3918,12 +3932,14 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes@npm:^5.11.0": - version: 5.11.0 - resolution: "@grafana/scenes@npm:5.11.0" +"@grafana/scenes@npm:^5.11.1": + version: 5.11.1 + resolution: "@grafana/scenes@npm:5.11.1" dependencies: + "@floating-ui/react": "npm:0.26.16" "@grafana/e2e-selectors": "npm:^11.0.0" "@leeoniya/ufuzzy": "npm:^1.0.14" + "@tanstack/react-virtual": "npm:^3.9.0" react-grid-layout: "npm:1.3.4" react-use: "npm:17.5.0" react-virtualized-auto-sizer: "npm:1.0.24" @@ -3935,7 +3951,7 @@ __metadata: "@grafana/ui": ">=10.4" react: ^18.0.0 react-dom: ^18.0.0 - checksum: 10/4b56c0c831468651f75992979820541c07d3e9cfcb2547c58aed647a60ad02bd8d81b68d233c2ecc401f5b6400e7c29cbe9408f6f5e374bb30161d47ab0f08e2 + checksum: 10/15ec8bee9aa2aa8f5c64ed9fcaf4bd7c835162e0e63814556e7561e62462d5485f098131e411893e54ae3247692b348c8773a9459c30e45e936c5b0ef1a9d789 languageName: node linkType: hard @@ -8822,7 +8838,7 @@ __metadata: languageName: node linkType: hard -"@tanstack/react-virtual@npm:^3.5.1": +"@tanstack/react-virtual@npm:^3.5.1, @tanstack/react-virtual@npm:^3.9.0": version: 3.10.6 resolution: "@tanstack/react-virtual@npm:3.10.6" dependencies: @@ -18495,7 +18511,7 @@ __metadata: "@grafana/prometheus": "workspace:*" "@grafana/runtime": "workspace:*" "@grafana/saga-icons": "workspace:*" - "@grafana/scenes": "npm:^5.11.0" + "@grafana/scenes": "npm:^5.11.1" "@grafana/schema": "workspace:*" "@grafana/sql": "workspace:*" "@grafana/tsconfig": "npm:^2.0.0"