GroupBy: add new groupby variable type and optional groupByKeys (#81717)

* add new groupby type

* rename to groupByKeys + introduce GroupByVariableModel

* fix unit test

* update scenes package

* update interface

* update fixture

* update unit test

* bump to scenes 2.6.2

* remove baseFilters for now

public/app/features/dashboard-scene/settings/variables/editors/GroupByVariableEditor.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { GroupByVariable } from '@grafana/scenes';
+
+interface GroupByVariableEditorProps {
+  variable: GroupByVariable;
+  onChange: (variable: GroupByVariable) => void;
+}
+
+export function GroupByVariableEditor(props: GroupByVariableEditorProps) {
+  return <div>GroupByVariableEditor</div>;
+}

public/app/features/dashboard-scene/settings/variables/utils.test.ts

@@ -7,6 +7,7 @@ import {
   QueryVariable,
   DataSourceVariable,
   AdHocFiltersVariable,
+  GroupByVariable,
   TextBoxVariable,
   SceneVariableSet,
 } from '@grafana/scenes';
@@ -18,6 +19,7 @@ import { AdHocFiltersVariableEditor } from './editors/AdHocFiltersVariableEditor
 import { ConstantVariableEditor } from './editors/ConstantVariableEditor';
 import { CustomVariableEditor } from './editors/CustomVariableEditor';
 import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
+import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
 import { IntervalVariableEditor } from './editors/IntervalVariableEditor';
 import { QueryVariableEditor } from './editors/QueryVariableEditor';
 import { TextBoxVariableEditor } from './editors/TextBoxVariableEditor';
@@ -73,7 +75,16 @@ jest.mock('@grafana/runtime', () => ({
 
 describe('isEditableVariableType', () => {
   it('should return true for editable variable types', () => {
-    const editableTypes: VariableType[] = ['custom', 'query', 'constant', 'interval', 'datasource', 'adhoc', 'textbox'];
+    const editableTypes: VariableType[] = [
+      'custom',
+      'query',
+      'constant',
+      'interval',
+      'datasource',
+      'adhoc',
+      'groupby',
+      'textbox',
+    ];
     editableTypes.forEach((type) => {
       expect(isEditableVariableType(type)).toBe(true);
     });
@@ -99,7 +110,7 @@ describe('getVariableTypeSelectOptions', () => {
 
   it('should return an array of selectable values for editable variable types', () => {
     const options = getVariableTypeSelectOptions();
-    expect(options).toHaveLength(7);
+    expect(options).toHaveLength(8);
 
     options.forEach((option, index) => {
       const editableType = EDITABLE_VARIABLES_SELECT_ORDER[index];
@@ -132,6 +143,7 @@ describe('getVariableEditor', () => {
     ['interval', IntervalVariableEditor],
     ['datasource', DataSourceVariableEditor],
     ['adhoc', AdHocFiltersVariableEditor],
+    ['groupby', GroupByVariableEditor],
     ['textbox', TextBoxVariableEditor],
   ])('should return the correct editor for variable type "%s"', (type, ExpectedVariableEditor) => {
     expect(getVariableEditor(type as EditableVariableType)).toBe(ExpectedVariableEditor);
@@ -158,6 +170,7 @@ describe('getVariableScene', () => {
     ['interval', IntervalVariable],
     ['datasource', DataSourceVariable],
     ['adhoc', AdHocFiltersVariable],
+    ['groupby', GroupByVariable],
     ['textbox', TextBoxVariable],
   ])('should return the scene variable instance for the given editable variable type', () => {
     const initialState = { name: 'MyVariable' };

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

@@ -10,6 +10,7 @@ import {
   TextBoxVariable,
   QueryVariable,
   AdHocFilterSet,
+  GroupByVariable,
   SceneVariable,
   MultiValueVariable,
   SceneVariableState,
@@ -22,6 +23,7 @@ import { AdHocFiltersVariableEditor } from './editors/AdHocFiltersVariableEditor
 import { ConstantVariableEditor } from './editors/ConstantVariableEditor';
 import { CustomVariableEditor } from './editors/CustomVariableEditor';
 import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
+import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
 import { IntervalVariableEditor } from './editors/IntervalVariableEditor';
 import { QueryVariableEditor } from './editors/QueryVariableEditor';
 import { TextBoxVariableEditor } from './editors/TextBoxVariableEditor';
@@ -69,6 +71,11 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
     description: 'Add key/value filters on the fly',
     editor: AdHocFiltersVariableEditor,
   },
+  groupby: {
+    name: 'Group by',
+    description: 'Add keys to group by on the fly',
+    editor: GroupByVariableEditor,
+  },
   textbox: {
     name: 'Textbox',
     description: 'Define a textbox variable, where users can enter any arbitrary string',
@@ -84,6 +91,7 @@ export const EDITABLE_VARIABLES_SELECT_ORDER: EditableVariableType[] = [
   'datasource',
   'interval',
   'adhoc',
+  'groupby',
 ];
 
 export function getVariableTypeSelectOptions(): Array<SelectableValue<EditableVariableType>> {
@@ -118,6 +126,8 @@ export function getVariableScene(type: EditableVariableType, initialState: Commo
     case 'adhoc':
       // TODO: Initialize properly AdHocFilterSet with initialState
       return new AdHocFilterSet({ name: initialState.name });
+    case 'groupby':
+      return new GroupByVariable(initialState);
     case 'textbox':
       return new TextBoxVariable(initialState);
   }

public/app/features/variables/guard.test.ts

@@ -19,6 +19,7 @@ import {
   createCustomVariable,
   createDashboardVariable,
   createDatasourceVariable,
+  createGroupByVariable,
   createIntervalVariable,
   createOrgVariable,
   createQueryVariable,
@@ -164,6 +165,7 @@ describe('type guards', () => {
   const variableFactsObj: Record<VariableType | ExtraVariableTypes, VariableFacts> = {
     query:      { variable: createQueryVariable(),      isMulti: true,  hasOptions: true,  hasCurrent: true },
     adhoc:      { variable: createAdhocVariable(),      isMulti: false, hasOptions: false, hasCurrent: false },
+    groupby:    { variable: createGroupByVariable(),    isMulti: true,  hasOptions: false, hasCurrent: false },
     constant:   { variable: createConstantVariable(),   isMulti: false, hasOptions: true,  hasCurrent: true },
     datasource: { variable: createDatasourceVariable(), isMulti: true,  hasOptions: true,  hasCurrent: true },
     interval:   { variable: createIntervalVariable(),   isMulti: false, hasOptions: true,  hasCurrent: true },

public/app/features/variables/state/__tests__/fixtures.ts

@@ -5,6 +5,7 @@ import {
   CustomVariableModel,
   DashboardVariableModel,
   DataSourceVariableModel,
+  GroupByVariableModel,
   IntervalVariableModel,
   LoadingState,
   OrgVariableModel,
@@ -78,6 +79,19 @@ export function createAdhocVariable(input?: Partial<AdHocVariableModel>): AdHocV
   };
 }
 
+export function createGroupByVariable(input?: Partial<GroupByVariableModel>): GroupByVariableModel {
+  return {
+    ...createBaseVariableModel('groupby'),
+    datasource: {
+      uid: 'abc-123',
+      type: 'prometheus',
+    },
+    groupByKeys: [],
+    multi: true,
+    ...input,
+  };
+}
+
 export function createConstantVariable(input: Partial<ConstantVariableModel> = {}): ConstantVariableModel {
   return {
     ...createBaseVariableModel('constant'),