diff --git a/public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap b/public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap index f43d073b626..ec93f464003 100644 --- a/public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap +++ b/public/app/features/dashboard-scene/serialization/__snapshots__/transformSceneToSaveModel.test.ts.snap @@ -474,6 +474,58 @@ exports[`transformSceneToSaveModel Given a simple scene with custom settings Sho "value": "1m", }, "name": "intervalVar", + "options": [ + { + "selected": true, + "text": "1m", + "value": "1m", + }, + { + "selected": false, + "text": "10m", + "value": "10m", + }, + { + "selected": false, + "text": "30m", + "value": "30m", + }, + { + "selected": false, + "text": "1h", + "value": "1h", + }, + { + "selected": false, + "text": "6h", + "value": "6h", + }, + { + "selected": false, + "text": "12h", + "value": "12h", + }, + { + "selected": false, + "text": "1d", + "value": "1d", + }, + { + "selected": false, + "text": "7d", + "value": "7d", + }, + { + "selected": false, + "text": "14d", + "value": "14d", + }, + { + "selected": false, + "text": "30d", + "value": "30d", + }, + ], "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d", "refresh": 2, "type": "interval", @@ -778,6 +830,58 @@ exports[`transformSceneToSaveModel Given a simple scene with variables Should tr "value": "1m", }, "name": "intervalVar", + "options": [ + { + "selected": true, + "text": "1m", + "value": "1m", + }, + { + "selected": false, + "text": "10m", + "value": "10m", + }, + { + "selected": false, + "text": "30m", + "value": "30m", + }, + { + "selected": false, + "text": "1h", + "value": "1h", + }, + { + "selected": false, + "text": "6h", + "value": "6h", + }, + { + "selected": false, + "text": "12h", + "value": "12h", + }, + { + "selected": false, + "text": "1d", + "value": "1d", + }, + { + "selected": false, + "text": "7d", + "value": "7d", + }, + { + "selected": false, + "text": "14d", + "value": "14d", + }, + { + "selected": false, + "text": "30d", + "value": "30d", + }, + ], "query": "1m,10m,30m,1h,6h,12h,1d,7d,14d,30d", "refresh": 2, "type": "interval", diff --git a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts index 1d3c6c2b333..454b7721a06 100644 --- a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts +++ b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.test.ts @@ -18,11 +18,12 @@ import { CustomVariable, DataSourceVariable, GroupByVariable, + IntervalVariable, QueryVariable, SceneVariableSet, TextBoxVariable, } from '@grafana/scenes'; -import { DataSourceRef } from '@grafana/schema'; +import { DataSourceRef, VariableRefresh } from '@grafana/schema'; import { sceneVariablesSetToVariables } from './sceneVariablesSetToVariables'; @@ -277,7 +278,23 @@ describe('sceneVariablesSetToVariables', () => { "label": "test-label", "multi": true, "name": "test", - "options": [], + "options": [ + { + "selected": true, + "text": "test", + "value": "test", + }, + { + "selected": false, + "text": "test1", + "value": "test1", + }, + { + "selected": true, + "text": "test2", + "value": "test2", + }, + ], "query": "test,test1,test2", "type": "custom", } @@ -340,6 +357,13 @@ describe('sceneVariablesSetToVariables', () => { "description": "test-desc", "label": "test-label", "name": "test", + "options": [ + { + "selected": true, + "text": "text value", + "value": "text value", + }, + ], "query": "text value", "skipUrlSync": true, "type": "textbox", @@ -347,6 +371,64 @@ describe('sceneVariablesSetToVariables', () => { `); }); + it('should handle IntervalVariable', () => { + const variable = new IntervalVariable({ + intervals: ['1m', '2m', '3m', '1h', '1d'], + value: '1m', + refresh: VariableRefresh.onDashboardLoad, + }); + const set = new SceneVariableSet({ + variables: [variable], + }); + + const result = sceneVariablesSetToVariables(set); + + expect(result[0]).toMatchInlineSnapshot(` + { + "auto": false, + "auto_count": 30, + "auto_min": "10s", + "current": { + "text": "1m", + "value": "1m", + }, + "description": undefined, + "label": undefined, + "name": "", + "options": [ + { + "selected": true, + "text": "1m", + "value": "1m", + }, + { + "selected": false, + "text": "2m", + "value": "2m", + }, + { + "selected": false, + "text": "3m", + "value": "3m", + }, + { + "selected": false, + "text": "1h", + "value": "1h", + }, + { + "selected": false, + "text": "1d", + "value": "1d", + }, + ], + "query": "1m,2m,3m,1h,1d", + "refresh": 1, + "type": "interval", + } + `); + }); + it('should handle AdHocFiltersVariable', () => { const variable = new AdHocFiltersVariable({ name: 'test', diff --git a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts index 5f3813c2705..1ad5608a47a 100644 --- a/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts +++ b/public/app/features/dashboard-scene/serialization/sceneVariablesSetToVariables.ts @@ -1,6 +1,6 @@ import { config } from '@grafana/runtime'; -import { SceneVariables, sceneUtils } from '@grafana/scenes'; -import { VariableHide, VariableModel, VariableRefresh, VariableSort } from '@grafana/schema'; +import { MultiValueVariable, SceneVariables, sceneUtils } from '@grafana/scenes'; +import { VariableHide, VariableModel, VariableOption, VariableRefresh, VariableSort } from '@grafana/schema'; import { getIntervalsQueryFromNewIntervalModel } from '../utils/utils'; @@ -16,6 +16,12 @@ export function sceneVariablesSetToVariables(set: SceneVariables) { type: variable.state.type, }; if (sceneUtils.isQueryVariable(variable)) { + let options: VariableOption[] = []; + // Not sure if we actually have to still support this option given + // that it's not exposed in the UI + if (variable.state.refresh === VariableRefresh.never) { + options = variableValueOptionsToVariableOptions(variable.state); + } variables.push({ ...commonProperties, current: { @@ -24,7 +30,7 @@ export function sceneVariablesSetToVariables(set: SceneVariables) { // @ts-expect-error text: variable.state.text, }, - options: [], + options, query: variable.state.query, definition: variable.state.definition, datasource: variable.state.datasource, @@ -45,7 +51,7 @@ export function sceneVariablesSetToVariables(set: SceneVariables) { // @ts-expect-error value: variable.state.value, }, - options: [], + options: variableValueOptionsToVariableOptions(variable.state), query: variable.state.query, multi: variable.state.isMulti, allValue: variable.state.allValue, @@ -91,18 +97,26 @@ export function sceneVariablesSetToVariables(set: SceneVariables) { }, query: intervals, refresh: variable.state.refresh, + options: variable.state.intervals.map((interval) => ({ + value: interval, + text: interval, + selected: interval === variable.state.value, + })), // @ts-expect-error ?? how to fix this without adding the ts-expect-error auto: variable.state.autoEnabled, auto_min: variable.state.autoMinInterval, auto_count: variable.state.autoStepCount, }); } else if (sceneUtils.isTextBoxVariable(variable)) { + const current = { + text: variable.state.value, + value: variable.state.value, + }; + variables.push({ ...commonProperties, - current: { - text: variable.state.value, - value: variable.state.value, - }, + current, + options: [{ ...current, selected: true }], query: variable.state.value, }); } else if (sceneUtils.isGroupByVariable(variable) && config.featureToggles.groupByVariable) { @@ -162,3 +176,11 @@ export function sceneVariablesSetToVariables(set: SceneVariables) { return variables; } + +function variableValueOptionsToVariableOptions(varState: MultiValueVariable['state']): VariableOption[] { + return varState.options.map((o) => ({ + value: String(o.value), + text: o.label, + selected: Array.isArray(varState.value) ? varState.value.includes(o.value) : varState.value === o.value, + })); +}