mirror of https://github.com/grafana/grafana
Dashboard Scene: Fix snapshots not displaying variables values (#88967)
* Use new snapshot variables from scenes * Add snapshotVariable implementation * Refactor: Extract variables logic from transforSaveModelToScene file --------- Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>pull/92147/head
Alexa V
10 months ago
committed by
GitHub
parent
6f63def283
commit
cd4b7ef9db
@ -0,0 +1,33 @@ |
||||
import { SnapshotVariable } from './SnapshotVariable'; |
||||
|
||||
describe('SnapshotVariable', () => { |
||||
describe('SnapshotVariable state', () => { |
||||
it('should create a new snapshotVariable when custom variable is passed', () => { |
||||
const { multiVariable } = setupScene(); |
||||
const snapshot = new SnapshotVariable(multiVariable); |
||||
//expect snapshot to be defined
|
||||
expect(snapshot).toBeDefined(); |
||||
expect(snapshot.state).toBeDefined(); |
||||
expect(snapshot.state.type).toBe('snapshot'); |
||||
expect(snapshot.state.isReadOnly).toBe(true); |
||||
expect(snapshot.state.value).toBe(multiVariable.value); |
||||
expect(snapshot.state.text).toBe(multiVariable.text); |
||||
expect(snapshot.state.hide).toBe(multiVariable.hide); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
function setupScene() { |
||||
// create custom variable type custom
|
||||
|
||||
const multiVariable = { |
||||
name: 'Multi', |
||||
description: 'Define variable values manually', |
||||
text: 'myMultiText', |
||||
value: 'myMultiValue', |
||||
multi: true, |
||||
hide: 0, |
||||
}; |
||||
|
||||
return { multiVariable }; |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
import { Observable, map, of } from 'rxjs'; |
||||
|
||||
import { |
||||
MultiValueVariable, |
||||
MultiValueVariableState, |
||||
SceneComponentProps, |
||||
ValidateAndUpdateResult, |
||||
VariableDependencyConfig, |
||||
VariableValueOption, |
||||
renderSelectForVariable, |
||||
sceneGraph, |
||||
VariableGetOptionsArgs, |
||||
} from '@grafana/scenes'; |
||||
|
||||
export interface SnapshotVariableState extends MultiValueVariableState { |
||||
query?: string; |
||||
} |
||||
|
||||
export class SnapshotVariable extends MultiValueVariable<SnapshotVariableState> { |
||||
protected _variableDependency = new VariableDependencyConfig(this, { |
||||
statePaths: [], |
||||
}); |
||||
|
||||
public constructor(initialState: Partial<SnapshotVariableState>) { |
||||
super({ |
||||
name: '', |
||||
type: 'snapshot', |
||||
isReadOnly: true, |
||||
query: '', |
||||
value: '', |
||||
text: '', |
||||
options: [], |
||||
...initialState, |
||||
}); |
||||
} |
||||
|
||||
public getValueOptions(args: VariableGetOptionsArgs): Observable<VariableValueOption[]> { |
||||
const interpolated = sceneGraph.interpolate(this, this.state.query); |
||||
const match = interpolated.match(/(?:\\,|[^,])+/g) ?? []; |
||||
|
||||
const options = match.map((text) => { |
||||
text = text.replace(/\\,/g, ','); |
||||
const textMatch = /^(.+)\s:\s(.+)$/g.exec(text) ?? []; |
||||
if (textMatch.length === 3) { |
||||
const [, key, value] = textMatch; |
||||
return { label: key.trim(), value: value.trim() }; |
||||
} else { |
||||
return { label: text.trim(), value: text.trim() }; |
||||
} |
||||
}); |
||||
|
||||
return of(options); |
||||
} |
||||
|
||||
public validateAndUpdate(): Observable<ValidateAndUpdateResult> { |
||||
return this.getValueOptions({}).pipe( |
||||
map((options) => { |
||||
if (this.state.options !== options) { |
||||
this._updateValueGivenNewOptions(options); |
||||
} |
||||
return {}; |
||||
}) |
||||
); |
||||
} |
||||
|
||||
public static Component = ({ model }: SceneComponentProps<MultiValueVariable<SnapshotVariableState>>) => { |
||||
return renderSelectForVariable(model); |
||||
}; |
||||
// we will always preserve the current value and text for snapshots
|
||||
private _updateValueGivenNewOptions(options: VariableValueOption[]) { |
||||
const { value: currentValue, text: currentText } = this.state; |
||||
const stateUpdate: Partial<MultiValueVariableState> = { |
||||
options, |
||||
loading: false, |
||||
value: currentValue ?? [], |
||||
text: currentText ?? [], |
||||
}; |
||||
|
||||
this.setState(stateUpdate); |
||||
} |
||||
} |
||||
@ -0,0 +1,775 @@ |
||||
import { |
||||
ConstantVariableModel, |
||||
CustomVariableModel, |
||||
DataSourceVariableModel, |
||||
GroupByVariableModel, |
||||
IntervalVariableModel, |
||||
LoadingState, |
||||
QueryVariableModel, |
||||
TextBoxVariableModel, |
||||
TypedVariableModel, |
||||
} from '@grafana/data'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { |
||||
AdHocFiltersVariable, |
||||
CustomVariable, |
||||
DataSourceVariable, |
||||
GroupByVariable, |
||||
QueryVariable, |
||||
SceneVariableSet, |
||||
} from '@grafana/scenes'; |
||||
import { defaultDashboard, defaultTimePickerConfig, VariableType } from '@grafana/schema'; |
||||
import { DashboardModel } from 'app/features/dashboard/state'; |
||||
|
||||
import { SnapshotVariable } from '../serialization/custom-variables/SnapshotVariable'; |
||||
import { NEW_LINK } from '../settings/links/utils'; |
||||
|
||||
import { createSceneVariableFromVariableModel, createVariablesForSnapshot } from './variables'; |
||||
|
||||
describe('when creating variables objects', () => { |
||||
it('should migrate custom variable', () => { |
||||
const variable: CustomVariableModel = { |
||||
current: { |
||||
selected: false, |
||||
text: 'a', |
||||
value: 'a', |
||||
}, |
||||
hide: 0, |
||||
includeAll: false, |
||||
multi: false, |
||||
name: 'query0', |
||||
options: [ |
||||
{ |
||||
selected: true, |
||||
text: 'a', |
||||
value: 'a', |
||||
}, |
||||
{ |
||||
selected: false, |
||||
text: 'b', |
||||
value: 'b', |
||||
}, |
||||
{ |
||||
selected: false, |
||||
text: 'c', |
||||
value: 'c', |
||||
}, |
||||
{ |
||||
selected: false, |
||||
text: 'd', |
||||
value: 'd', |
||||
}, |
||||
], |
||||
query: 'a,b,c,d', |
||||
skipUrlSync: false, |
||||
type: 'custom', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
id: 'query0', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
description: null, |
||||
allValue: null, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(CustomVariable); |
||||
expect(rest).toEqual({ |
||||
allValue: undefined, |
||||
defaultToAll: false, |
||||
description: null, |
||||
includeAll: false, |
||||
isMulti: false, |
||||
label: undefined, |
||||
name: 'query0', |
||||
options: [], |
||||
query: 'a,b,c,d', |
||||
skipUrlSync: false, |
||||
text: 'a', |
||||
type: 'custom', |
||||
value: 'a', |
||||
hide: 0, |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate query variable with definition', () => { |
||||
const variable: QueryVariableModel = { |
||||
allValue: null, |
||||
current: { |
||||
text: 'America', |
||||
value: 'America', |
||||
selected: false, |
||||
}, |
||||
datasource: { |
||||
uid: 'P15396BDD62B2BE29', |
||||
type: 'influxdb', |
||||
}, |
||||
definition: 'SHOW TAG VALUES WITH KEY = "datacenter"', |
||||
hide: 0, |
||||
includeAll: false, |
||||
label: 'Datacenter', |
||||
multi: false, |
||||
name: 'datacenter', |
||||
options: [ |
||||
{ |
||||
text: 'America', |
||||
value: 'America', |
||||
selected: true, |
||||
}, |
||||
{ |
||||
text: 'Africa', |
||||
value: 'Africa', |
||||
selected: false, |
||||
}, |
||||
{ |
||||
text: 'Asia', |
||||
value: 'Asia', |
||||
selected: false, |
||||
}, |
||||
{ |
||||
text: 'Europe', |
||||
value: 'Europe', |
||||
selected: false, |
||||
}, |
||||
], |
||||
query: 'SHOW TAG VALUES WITH KEY = "datacenter" ', |
||||
refresh: 1, |
||||
regex: '', |
||||
skipUrlSync: false, |
||||
sort: 0, |
||||
type: 'query', |
||||
rootStateKey: '000000002', |
||||
id: 'datacenter', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
description: null, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(QueryVariable); |
||||
expect(rest).toEqual({ |
||||
allValue: undefined, |
||||
datasource: { |
||||
type: 'influxdb', |
||||
uid: 'P15396BDD62B2BE29', |
||||
}, |
||||
defaultToAll: false, |
||||
description: null, |
||||
includeAll: false, |
||||
isMulti: false, |
||||
label: 'Datacenter', |
||||
name: 'datacenter', |
||||
options: [], |
||||
query: 'SHOW TAG VALUES WITH KEY = "datacenter" ', |
||||
refresh: 1, |
||||
regex: '', |
||||
skipUrlSync: false, |
||||
sort: 0, |
||||
text: 'America', |
||||
type: 'query', |
||||
value: 'America', |
||||
hide: 0, |
||||
definition: 'SHOW TAG VALUES WITH KEY = "datacenter"', |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate datasource variable', () => { |
||||
const variable: DataSourceVariableModel = { |
||||
id: 'query1', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
name: 'query1', |
||||
type: 'datasource', |
||||
global: false, |
||||
index: 1, |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
description: null, |
||||
current: { |
||||
value: ['gdev-prometheus', 'gdev-slow-prometheus'], |
||||
text: ['gdev-prometheus', 'gdev-slow-prometheus'], |
||||
selected: true, |
||||
}, |
||||
regex: '/^gdev/', |
||||
options: [ |
||||
{ |
||||
text: 'All', |
||||
value: '$__all', |
||||
selected: false, |
||||
}, |
||||
{ |
||||
text: 'gdev-prometheus', |
||||
value: 'gdev-prometheus', |
||||
selected: true, |
||||
}, |
||||
{ |
||||
text: 'gdev-slow-prometheus', |
||||
value: 'gdev-slow-prometheus', |
||||
selected: false, |
||||
}, |
||||
], |
||||
query: 'prometheus', |
||||
multi: true, |
||||
includeAll: true, |
||||
refresh: 1, |
||||
allValue: 'Custom all', |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(DataSourceVariable); |
||||
expect(rest).toEqual({ |
||||
allValue: 'Custom all', |
||||
defaultToAll: true, |
||||
includeAll: true, |
||||
label: undefined, |
||||
name: 'query1', |
||||
options: [], |
||||
pluginId: 'prometheus', |
||||
regex: '/^gdev/', |
||||
skipUrlSync: false, |
||||
text: ['gdev-prometheus', 'gdev-slow-prometheus'], |
||||
type: 'datasource', |
||||
value: ['gdev-prometheus', 'gdev-slow-prometheus'], |
||||
isMulti: true, |
||||
description: null, |
||||
hide: 0, |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate constant variable', () => { |
||||
const variable: ConstantVariableModel = { |
||||
hide: 2, |
||||
label: 'constant', |
||||
name: 'constant', |
||||
skipUrlSync: false, |
||||
type: 'constant', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
current: { |
||||
selected: true, |
||||
text: 'test', |
||||
value: 'test', |
||||
}, |
||||
options: [ |
||||
{ |
||||
selected: true, |
||||
text: 'test', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
query: 'test', |
||||
id: 'constant', |
||||
global: false, |
||||
index: 3, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
description: null, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
|
||||
expect(rest).toEqual({ |
||||
description: null, |
||||
hide: 2, |
||||
label: 'constant', |
||||
name: 'constant', |
||||
skipUrlSync: true, |
||||
type: 'constant', |
||||
value: 'test', |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate interval variable', () => { |
||||
const variable: IntervalVariableModel = { |
||||
name: 'intervalVar', |
||||
label: 'Interval Label', |
||||
type: 'interval', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
auto: false, |
||||
refresh: 2, |
||||
auto_count: 30, |
||||
auto_min: '10s', |
||||
current: { |
||||
selected: true, |
||||
text: '1m', |
||||
value: '1m', |
||||
}, |
||||
options: [ |
||||
{ |
||||
selected: true, |
||||
text: '1m', |
||||
value: '1m', |
||||
}, |
||||
], |
||||
query: '1m, 5m, 15m, 30m, 1h, 6h, 12h, 1d, 7d, 14d, 30d', |
||||
id: 'intervalVar', |
||||
global: false, |
||||
index: 4, |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
description: null, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
expect(rest).toEqual({ |
||||
label: 'Interval Label', |
||||
autoEnabled: false, |
||||
autoMinInterval: '10s', |
||||
autoStepCount: 30, |
||||
description: null, |
||||
refresh: 2, |
||||
intervals: ['1m', '5m', '15m', '30m', '1h', '6h', '12h', '1d', '7d', '14d', '30d'], |
||||
hide: 0, |
||||
name: 'intervalVar', |
||||
skipUrlSync: false, |
||||
type: 'interval', |
||||
value: '1m', |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate textbox variable', () => { |
||||
const variable: TextBoxVariableModel = { |
||||
id: 'query0', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
name: 'textboxVar', |
||||
label: 'Textbox Label', |
||||
description: 'Textbox Description', |
||||
type: 'textbox', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
current: {}, |
||||
hide: 0, |
||||
options: [], |
||||
query: 'defaultValue', |
||||
originalQuery: 'defaultValue', |
||||
skipUrlSync: false, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
expect(rest).toEqual({ |
||||
description: 'Textbox Description', |
||||
hide: 0, |
||||
label: 'Textbox Label', |
||||
name: 'textboxVar', |
||||
skipUrlSync: false, |
||||
type: 'textbox', |
||||
value: 'defaultValue', |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate adhoc variable', () => { |
||||
const variable: TypedVariableModel = { |
||||
id: 'adhoc', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
name: 'adhoc', |
||||
label: 'Adhoc Label', |
||||
description: 'Adhoc Description', |
||||
type: 'adhoc', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
datasource: { |
||||
uid: 'gdev-prometheus', |
||||
type: 'prometheus', |
||||
}, |
||||
filters: [ |
||||
{ |
||||
key: 'filterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
baseFilters: [ |
||||
{ |
||||
key: 'baseFilterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable) as AdHocFiltersVariable; |
||||
const filterVarState = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(AdHocFiltersVariable); |
||||
expect(filterVarState).toEqual({ |
||||
key: expect.any(String), |
||||
description: 'Adhoc Description', |
||||
hide: 0, |
||||
label: 'Adhoc Label', |
||||
name: 'adhoc', |
||||
skipUrlSync: false, |
||||
type: 'adhoc', |
||||
filterExpression: 'filterTest="test"', |
||||
filters: [{ key: 'filterTest', operator: '=', value: 'test' }], |
||||
baseFilters: [{ key: 'baseFilterTest', operator: '=', value: 'test' }], |
||||
datasource: { uid: 'gdev-prometheus', type: 'prometheus' }, |
||||
applyMode: 'auto', |
||||
useQueriesAsFilterForOptions: true, |
||||
}); |
||||
}); |
||||
|
||||
it('should migrate adhoc variable with default keys', () => { |
||||
const variable: TypedVariableModel = { |
||||
id: 'adhoc', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
name: 'adhoc', |
||||
label: 'Adhoc Label', |
||||
description: 'Adhoc Description', |
||||
type: 'adhoc', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
datasource: { |
||||
uid: 'gdev-prometheus', |
||||
type: 'prometheus', |
||||
}, |
||||
filters: [ |
||||
{ |
||||
key: 'filterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
baseFilters: [ |
||||
{ |
||||
key: 'baseFilterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
defaultKeys: [ |
||||
{ |
||||
text: 'some', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
text: 'static', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
text: 'keys', |
||||
value: '3', |
||||
}, |
||||
], |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable) as AdHocFiltersVariable; |
||||
const filterVarState = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(AdHocFiltersVariable); |
||||
expect(filterVarState).toEqual({ |
||||
key: expect.any(String), |
||||
description: 'Adhoc Description', |
||||
hide: 0, |
||||
label: 'Adhoc Label', |
||||
name: 'adhoc', |
||||
skipUrlSync: false, |
||||
type: 'adhoc', |
||||
filterExpression: 'filterTest="test"', |
||||
filters: [{ key: 'filterTest', operator: '=', value: 'test' }], |
||||
baseFilters: [{ key: 'baseFilterTest', operator: '=', value: 'test' }], |
||||
datasource: { uid: 'gdev-prometheus', type: 'prometheus' }, |
||||
applyMode: 'auto', |
||||
defaultKeys: [ |
||||
{ |
||||
text: 'some', |
||||
value: '1', |
||||
}, |
||||
{ |
||||
text: 'static', |
||||
value: '2', |
||||
}, |
||||
{ |
||||
text: 'keys', |
||||
value: '3', |
||||
}, |
||||
], |
||||
useQueriesAsFilterForOptions: true, |
||||
}); |
||||
}); |
||||
|
||||
describe('when groupByVariable feature toggle is enabled', () => { |
||||
beforeAll(() => { |
||||
config.featureToggles.groupByVariable = true; |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
config.featureToggles.groupByVariable = false; |
||||
}); |
||||
|
||||
it('should migrate groupby variable', () => { |
||||
const variable: GroupByVariableModel = { |
||||
id: 'groupby', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
name: 'groupby', |
||||
label: 'GroupBy Label', |
||||
description: 'GroupBy Description', |
||||
type: 'groupby', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
datasource: { |
||||
uid: 'gdev-prometheus', |
||||
type: 'prometheus', |
||||
}, |
||||
multi: true, |
||||
options: [ |
||||
{ |
||||
selected: false, |
||||
text: 'Foo', |
||||
value: 'foo', |
||||
}, |
||||
{ |
||||
selected: false, |
||||
text: 'Bar', |
||||
value: 'bar', |
||||
}, |
||||
], |
||||
current: {}, |
||||
query: '', |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable) as GroupByVariable; |
||||
const groupbyVarState = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(GroupByVariable); |
||||
expect(groupbyVarState).toEqual({ |
||||
key: expect.any(String), |
||||
description: 'GroupBy Description', |
||||
hide: 0, |
||||
defaultOptions: [ |
||||
{ |
||||
selected: false, |
||||
text: 'Foo', |
||||
value: 'foo', |
||||
}, |
||||
{ |
||||
selected: false, |
||||
text: 'Bar', |
||||
value: 'bar', |
||||
}, |
||||
], |
||||
isMulti: true, |
||||
layout: 'horizontal', |
||||
noValueOnClear: true, |
||||
label: 'GroupBy Label', |
||||
name: 'groupby', |
||||
skipUrlSync: false, |
||||
type: 'groupby', |
||||
baseFilters: [], |
||||
options: [], |
||||
text: [], |
||||
value: [], |
||||
datasource: { uid: 'gdev-prometheus', type: 'prometheus' }, |
||||
applyMode: 'auto', |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('when groupByVariable feature toggle is disabled', () => { |
||||
it('should not migrate groupby variable and throw an error instead', () => { |
||||
const variable: GroupByVariableModel = { |
||||
id: 'groupby', |
||||
global: false, |
||||
index: 0, |
||||
state: LoadingState.Done, |
||||
error: null, |
||||
name: 'groupby', |
||||
label: 'GroupBy Label', |
||||
description: 'GroupBy Description', |
||||
type: 'groupby', |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
datasource: { |
||||
uid: 'gdev-prometheus', |
||||
type: 'prometheus', |
||||
}, |
||||
multi: true, |
||||
options: [], |
||||
current: {}, |
||||
query: '', |
||||
hide: 0, |
||||
skipUrlSync: false, |
||||
}; |
||||
|
||||
expect(() => createSceneVariableFromVariableModel(variable)).toThrow('Scenes: Unsupported variable type'); |
||||
}); |
||||
}); |
||||
|
||||
it.each(['system'])('should throw for unsupported (yet) variables', (type) => { |
||||
const variable = { |
||||
name: 'query0', |
||||
type: type as VariableType, |
||||
}; |
||||
|
||||
expect(() => createSceneVariableFromVariableModel(variable as TypedVariableModel)).toThrow(); |
||||
}); |
||||
|
||||
it('should handle variable without current', () => { |
||||
// @ts-expect-error
|
||||
const variable: TypedVariableModel = { |
||||
id: 'query1', |
||||
name: 'query1', |
||||
type: 'datasource', |
||||
global: false, |
||||
regex: '/^gdev/', |
||||
options: [], |
||||
query: 'prometheus', |
||||
multi: true, |
||||
includeAll: true, |
||||
refresh: 1, |
||||
allValue: 'Custom all', |
||||
}; |
||||
|
||||
const migrated = createSceneVariableFromVariableModel(variable); |
||||
const { key, ...rest } = migrated.state; |
||||
|
||||
expect(migrated).toBeInstanceOf(DataSourceVariable); |
||||
expect(rest).toEqual({ |
||||
allValue: 'Custom all', |
||||
defaultToAll: true, |
||||
includeAll: true, |
||||
label: undefined, |
||||
name: 'query1', |
||||
options: [], |
||||
pluginId: 'prometheus', |
||||
regex: '/^gdev/', |
||||
text: '', |
||||
type: 'datasource', |
||||
value: '', |
||||
isMulti: true, |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
describe('when creating snapshot variables from dashboard model', () => { |
||||
it('should create SnapshotVariables when required', () => { |
||||
const customVariable = { |
||||
current: { |
||||
selected: false, |
||||
text: 'a', |
||||
value: 'a', |
||||
}, |
||||
hide: 0, |
||||
includeAll: false, |
||||
multi: false, |
||||
name: 'custom0', |
||||
options: [], |
||||
query: 'a,b,c,d', |
||||
skipUrlSync: false, |
||||
type: 'custom' as VariableType, |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
}; |
||||
|
||||
const intervalVariable = { |
||||
current: { |
||||
selected: false, |
||||
text: '10s', |
||||
value: '10s', |
||||
}, |
||||
hide: 0, |
||||
includeAll: false, |
||||
multi: false, |
||||
name: 'interval0', |
||||
options: [], |
||||
query: '10s,20s,30s', |
||||
skipUrlSync: false, |
||||
type: 'interval' as VariableType, |
||||
rootStateKey: 'N4XLmH5Vz', |
||||
}; |
||||
|
||||
const adHocVariable = { |
||||
global: false, |
||||
name: 'CoolFilters', |
||||
label: 'CoolFilters Label', |
||||
type: 'adhoc' as VariableType, |
||||
datasource: { |
||||
uid: 'gdev-prometheus', |
||||
type: 'prometheus', |
||||
}, |
||||
filters: [ |
||||
{ |
||||
key: 'filterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
baseFilters: [ |
||||
{ |
||||
key: 'baseFilterTest', |
||||
operator: '=', |
||||
value: 'test', |
||||
}, |
||||
], |
||||
hide: 0, |
||||
index: 0, |
||||
}; |
||||
|
||||
const snapshot = { |
||||
...defaultDashboard, |
||||
title: 'snapshot dash', |
||||
uid: 'test-uid', |
||||
time: { from: 'now-10h', to: 'now' }, |
||||
weekStart: 'saturday', |
||||
fiscalYearStartMonth: 2, |
||||
timezone: 'America/New_York', |
||||
timepicker: { |
||||
...defaultTimePickerConfig, |
||||
hidden: true, |
||||
}, |
||||
links: [{ ...NEW_LINK, title: 'Link 1' }], |
||||
templating: { |
||||
list: [customVariable, adHocVariable, intervalVariable], |
||||
}, |
||||
}; |
||||
|
||||
const oldModel = new DashboardModel(snapshot, { isSnapshot: true }); |
||||
const variables = createVariablesForSnapshot(oldModel); |
||||
|
||||
// check variables were converted to snapshot variables
|
||||
expect(variables).toBeInstanceOf(SceneVariableSet); |
||||
expect(variables.getByName('custom0')).toBeInstanceOf(SnapshotVariable); |
||||
expect(variables?.getByName('CoolFilters')).toBeInstanceOf(AdHocFiltersVariable); |
||||
expect(variables?.getByName('interval0')).toBeInstanceOf(SnapshotVariable); |
||||
// // custom snapshot
|
||||
const customSnapshot = variables?.getByName('custom0') as SnapshotVariable; |
||||
expect(customSnapshot.state.value).toBe('a'); |
||||
expect(customSnapshot.state.text).toBe('a'); |
||||
expect(customSnapshot.state.isReadOnly).toBe(true); |
||||
// // adhoc snapshot
|
||||
const adhocSnapshot = variables?.getByName('CoolFilters') as AdHocFiltersVariable; |
||||
expect(adhocSnapshot.state.filters).toEqual(adHocVariable.filters); |
||||
expect(adhocSnapshot.state.readOnly).toBe(true); |
||||
//
|
||||
// // interval snapshot
|
||||
const intervalSnapshot = variables?.getByName('interval0') as SnapshotVariable; |
||||
expect(intervalSnapshot.state.value).toBe('10s'); |
||||
expect(intervalSnapshot.state.text).toBe('10s'); |
||||
expect(intervalSnapshot.state.isReadOnly).toBe(true); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,238 @@ |
||||
import { TypedVariableModel } from '@grafana/data'; |
||||
import { config } from '@grafana/runtime'; |
||||
import { |
||||
AdHocFiltersVariable, |
||||
ConstantVariable, |
||||
CustomVariable, |
||||
DataSourceVariable, |
||||
GroupByVariable, |
||||
IntervalVariable, |
||||
QueryVariable, |
||||
SceneVariable, |
||||
SceneVariableSet, |
||||
TextBoxVariable, |
||||
} from '@grafana/scenes'; |
||||
import { DashboardModel } from 'app/features/dashboard/state'; |
||||
|
||||
import { SnapshotVariable } from '../serialization/custom-variables/SnapshotVariable'; |
||||
|
||||
import { getCurrentValueForOldIntervalModel, getIntervalsFromQueryString } from './utils'; |
||||
|
||||
export function createVariablesForDashboard(oldModel: DashboardModel) { |
||||
const variableObjects = oldModel.templating.list |
||||
.map((v) => { |
||||
try { |
||||
return createSceneVariableFromVariableModel(v); |
||||
} catch (err) { |
||||
console.error(err); |
||||
return null; |
||||
} |
||||
}) |
||||
// TODO: Remove filter
|
||||
// Added temporarily to allow skipping non-compatible variables
|
||||
.filter((v): v is SceneVariable => Boolean(v)); |
||||
|
||||
return new SceneVariableSet({ |
||||
variables: variableObjects, |
||||
}); |
||||
} |
||||
|
||||
export function createVariablesForSnapshot(oldModel: DashboardModel) { |
||||
const variableObjects = oldModel.templating.list |
||||
.map((v) => { |
||||
try { |
||||
// for adhoc we are using the AdHocFiltersVariable from scenes becuase of its complexity
|
||||
if (v.type === 'adhoc') { |
||||
return new AdHocFiltersVariable({ |
||||
name: v.name, |
||||
label: v.label, |
||||
readOnly: true, |
||||
description: v.description, |
||||
skipUrlSync: v.skipUrlSync, |
||||
hide: v.hide, |
||||
datasource: v.datasource, |
||||
applyMode: 'auto', |
||||
filters: v.filters ?? [], |
||||
baseFilters: v.baseFilters ?? [], |
||||
defaultKeys: v.defaultKeys, |
||||
useQueriesAsFilterForOptions: true, |
||||
}); |
||||
} |
||||
// for other variable types we are using the SnapshotVariable
|
||||
return createSnapshotVariable(v); |
||||
} catch (err) { |
||||
console.error(err); |
||||
return null; |
||||
} |
||||
}) |
||||
// TODO: Remove filter
|
||||
// Added temporarily to allow skipping non-compatible variables
|
||||
.filter((v): v is SceneVariable => Boolean(v)); |
||||
|
||||
return new SceneVariableSet({ |
||||
variables: variableObjects, |
||||
}); |
||||
} |
||||
|
||||
/** Snapshots variables are read-only and should not be updated */ |
||||
export function createSnapshotVariable(variable: TypedVariableModel): SceneVariable { |
||||
let snapshotVariable: SnapshotVariable; |
||||
let current: { value: string | string[]; text: string | string[] }; |
||||
if (variable.type === 'interval') { |
||||
const intervals = getIntervalsFromQueryString(variable.query); |
||||
const currentInterval = getCurrentValueForOldIntervalModel(variable, intervals); |
||||
snapshotVariable = new SnapshotVariable({ |
||||
name: variable.name, |
||||
label: variable.label, |
||||
description: variable.description, |
||||
value: currentInterval, |
||||
text: currentInterval, |
||||
hide: variable.hide, |
||||
}); |
||||
return snapshotVariable; |
||||
} |
||||
|
||||
if (variable.type === 'system' || variable.type === 'constant' || variable.type === 'adhoc') { |
||||
current = { |
||||
value: '', |
||||
text: '', |
||||
}; |
||||
} else { |
||||
current = { |
||||
value: variable.current?.value ?? '', |
||||
text: variable.current?.text ?? '', |
||||
}; |
||||
} |
||||
|
||||
snapshotVariable = new SnapshotVariable({ |
||||
name: variable.name, |
||||
label: variable.label, |
||||
description: variable.description, |
||||
value: current?.value ?? '', |
||||
text: current?.text ?? '', |
||||
hide: variable.hide, |
||||
}); |
||||
return snapshotVariable; |
||||
} |
||||
|
||||
export function createSceneVariableFromVariableModel(variable: TypedVariableModel): SceneVariable { |
||||
const commonProperties = { |
||||
name: variable.name, |
||||
label: variable.label, |
||||
description: variable.description, |
||||
}; |
||||
if (variable.type === 'adhoc') { |
||||
return new AdHocFiltersVariable({ |
||||
...commonProperties, |
||||
description: variable.description, |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
datasource: variable.datasource, |
||||
applyMode: 'auto', |
||||
filters: variable.filters ?? [], |
||||
baseFilters: variable.baseFilters ?? [], |
||||
defaultKeys: variable.defaultKeys, |
||||
useQueriesAsFilterForOptions: true, |
||||
}); |
||||
} |
||||
if (variable.type === 'custom') { |
||||
return new CustomVariable({ |
||||
...commonProperties, |
||||
value: variable.current?.value ?? '', |
||||
text: variable.current?.text ?? '', |
||||
|
||||
query: variable.query, |
||||
isMulti: variable.multi, |
||||
allValue: variable.allValue || undefined, |
||||
includeAll: variable.includeAll, |
||||
defaultToAll: Boolean(variable.includeAll), |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
}); |
||||
} else if (variable.type === 'query') { |
||||
return new QueryVariable({ |
||||
...commonProperties, |
||||
value: variable.current?.value ?? '', |
||||
text: variable.current?.text ?? '', |
||||
|
||||
query: variable.query, |
||||
datasource: variable.datasource, |
||||
sort: variable.sort, |
||||
refresh: variable.refresh, |
||||
regex: variable.regex, |
||||
allValue: variable.allValue || undefined, |
||||
includeAll: variable.includeAll, |
||||
defaultToAll: Boolean(variable.includeAll), |
||||
isMulti: variable.multi, |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
definition: variable.definition, |
||||
}); |
||||
} else if (variable.type === 'datasource') { |
||||
return new DataSourceVariable({ |
||||
...commonProperties, |
||||
value: variable.current?.value ?? '', |
||||
text: variable.current?.text ?? '', |
||||
regex: variable.regex, |
||||
pluginId: variable.query, |
||||
allValue: variable.allValue || undefined, |
||||
includeAll: variable.includeAll, |
||||
defaultToAll: Boolean(variable.includeAll), |
||||
skipUrlSync: variable.skipUrlSync, |
||||
isMulti: variable.multi, |
||||
hide: variable.hide, |
||||
}); |
||||
} else if (variable.type === 'interval') { |
||||
const intervals = getIntervalsFromQueryString(variable.query); |
||||
const currentInterval = getCurrentValueForOldIntervalModel(variable, intervals); |
||||
return new IntervalVariable({ |
||||
...commonProperties, |
||||
value: currentInterval, |
||||
intervals: intervals, |
||||
autoEnabled: variable.auto, |
||||
autoStepCount: variable.auto_count, |
||||
autoMinInterval: variable.auto_min, |
||||
refresh: variable.refresh, |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
}); |
||||
} else if (variable.type === 'constant') { |
||||
return new ConstantVariable({ |
||||
...commonProperties, |
||||
value: variable.query, |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
}); |
||||
} else if (variable.type === 'textbox') { |
||||
let val; |
||||
if (!variable?.current?.value) { |
||||
val = variable.query; |
||||
} else { |
||||
if (typeof variable.current.value === 'string') { |
||||
val = variable.current.value; |
||||
} else { |
||||
val = variable.current.value[0]; |
||||
} |
||||
} |
||||
|
||||
return new TextBoxVariable({ |
||||
...commonProperties, |
||||
value: val, |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
}); |
||||
} else if (config.featureToggles.groupByVariable && variable.type === 'groupby') { |
||||
return new GroupByVariable({ |
||||
...commonProperties, |
||||
datasource: variable.datasource, |
||||
value: variable.current?.value || [], |
||||
text: variable.current?.text || [], |
||||
skipUrlSync: variable.skipUrlSync, |
||||
hide: variable.hide, |
||||
// @ts-expect-error
|
||||
defaultOptions: variable.options, |
||||
}); |
||||
} else { |
||||
throw new Error(`Scenes: Unsupported variable type ${variable.type}`); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue