opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-03 04:04:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

FeatureToggle - new filters UI feature toggle (#92189)

Browse Source 
* add newFiltersUI experimental feature toggle

* adjust Ad hoc filter varibale layout property based on feature toggle

* restore file

* bump to latest scenes
This commit is contained in:
Sergej-Vlasov
2024-08-30 15:48:13 +03:00
committed by GitHub
parent 3262f0256e
commit 00ae49a61a
12 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
View File

@ -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 |

2
package.json
View File

@ -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:*",

1
packages/grafana-data/src/types/featureToggles.gen.ts
View File

@ -202,6 +202,7 @@ export interface FeatureToggles {
backgroundPluginInstaller?: boolean;
dataplaneAggregator?: boolean;
adhocFilterOneOf?: boolean;
newFiltersUI?: boolean;
lokiSendDashboardPanelNames?: boolean;
singleTopNav?: boolean;
exploreLogsShardSplitting?: boolean;

6
pkg/services/featuremgmt/registry.go
View File

@ -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",

1
pkg/services/featuremgmt/toggles_gen.csv
View File

@ -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

1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
183 backgroundPluginInstaller experimental @grafana/plugins-platform-backend false true false
184 dataplaneAggregator experimental @grafana/grafana-app-platform-squad false true false
185 adhocFilterOneOf experimental @grafana/dashboards-squad false false false
186 newFiltersUI experimental @grafana/dashboards-squad false false false
187 lokiSendDashboardPanelNames experimental @grafana/observability-logs false false false
188 singleTopNav experimental @grafana/grafana-frontend-platform false false true
189 exploreLogsShardSplitting experimental @grafana/observability-logs false false true

4
pkg/services/featuremgmt/toggles_gen.go
View File

@ -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"

12
pkg/services/featuremgmt/toggles_gen.json
View File

@ -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",

3
public/app/features/dashboard-scene/scene/setDashboardPanelContext.ts
View File

@ -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

5
public/app/features/dashboard-scene/settings/variables/utils.ts
View File

@ -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':

2
public/app/features/dashboard-scene/utils/variables.ts
View File

@ -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
),

4
public/app/features/trails/DataTrail.tsx
View File

@ -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

30
yarn.lock
View File

@ -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"