Skip to content

Commit 7a6fb70

Browse files
torkelotorkelo
committed
feat(templating): progress on variable system refactoring, grafana#6048 
1 parent 9d6ecc6 commit 7a6fb70

File tree

9 files changed

+109
-112
lines changed

9 files changed

+109
-112
lines changed

‎public/app/features/templating/constant_variable.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
///<reference path="../../headers/common.d.ts" />
22

33
import _ from 'lodash';
4-
import {Variable, assignModelProperties} from './variable';
5-
import {VariableSrv, variableConstructorMap} from './variable_srv';
4+
import {Variable, assignModelProperties, variableTypes} from './variable';
5+
import {VariableSrv} from './variable_srv';
66

77
export class ConstantVariable implements Variable {
88
query: string;
@@ -45,4 +45,8 @@ export class ConstantVariable implements Variable {
4545
}
4646
}
4747

48-
variableConstructorMap['constant'] = ConstantVariable;
48+
variableTypes['constant'] = {
49+
name: 'Constant',
50+
ctor: ConstantVariable,
51+
description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share' ,
52+
};

‎public/app/features/templating/custom_variable.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import _ from 'lodash';
44
import kbn from 'app/core/utils/kbn';
5-
import {Variable, assignModelProperties} from './variable';
6-
import {VariableSrv, variableConstructorMap} from './variable_srv';
5+
import {Variable, assignModelProperties, variableTypes} from './variable';
6+
import {VariableSrv} from './variable_srv';
77

88
export class CustomVariable implements Variable {
99
query: string;
@@ -23,9 +23,7 @@ export class CustomVariable implements Variable {
2323
multi: false,
2424
};
2525

26-
supportsMulti = true;
27-
28-
/** @ngInject */
26+
/** @ngInject **/
2927
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
3028
assignModelProperties(this, model, this.defaults);
3129
}
@@ -65,4 +63,9 @@ export class CustomVariable implements Variable {
6563
}
6664
}
6765

68-
variableConstructorMap['custom'] = CustomVariable;
66+
variableTypes['custom'] = {
67+
name: 'Custom',
68+
ctor: CustomVariable,
69+
description: 'Define variable values manually' ,
70+
supportsMulti: true,
71+
};

‎public/app/features/templating/datasource_variable.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import _ from 'lodash';
44
import kbn from 'app/core/utils/kbn';
5-
import {Variable, assignModelProperties} from './variable';
6-
import {VariableSrv, variableConstructorMap} from './variable_srv';
5+
import {Variable, assignModelProperties, variableTypes} from './variable';
6+
import {VariableSrv} from './variable_srv';
77

88
export class DatasourceVariable implements Variable {
99
regex: any;
@@ -75,4 +75,8 @@ export class DatasourceVariable implements Variable {
7575
}
7676
}
7777

78-
variableConstructorMap['datasource'] = DatasourceVariable;
78+
variableTypes['datasource'] = {
79+
name: 'Datasource',
80+
ctor: DatasourceVariable,
81+
description: 'Enabled you to dynamically switch the datasource for multiple panels',
82+
};

‎public/app/features/templating/editor_ctrl.ts

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,14 @@
11
///<reference path="../../headers/common.d.ts" />
22

3-
import angular from 'angular';
43
import _ from 'lodash';
5-
import $ from 'jquery';
6-
import kbn from 'app/core/utils/kbn';
74
import coreModule from 'app/core/core_module';
8-
import appEvents from 'app/core/app_events';
5+
import {variableTypes} from './variable';
96

107
export class VariableEditorCtrl {
118

129
/** @ngInject */
1310
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
14-
$scope.variableTypes = [
15-
{value: "query", text: "Query"},
16-
{value: "adhoc", text: "Ad hoc filters"},
17-
{value: "interval", text: "Interval"},
18-
{value: "datasource", text: "Data source"},
19-
{value: "custom", text: "Custom"},
20-
{value: "constant", text: "Constant"},
21-
];
11+
$scope.variableTypes = variableTypes;
2212

2313
$scope.refreshOptions = [
2414
{value: 0, text: "Never"},

‎public/app/features/templating/interval_variable.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import _ from 'lodash';
44
import kbn from 'app/core/utils/kbn';
5-
import {Variable, assignModelProperties} from './variable';
6-
import {VariableSrv, variableConstructorMap} from './variable_srv';
5+
import {Variable, assignModelProperties, variableTypes} from './variable';
6+
import {VariableSrv} from './variable_srv';
77

88
export class IntervalVariable implements Variable {
99
auto_count: number;
@@ -77,4 +77,8 @@ export class IntervalVariable implements Variable {
7777
}
7878
}
7979

80-
variableConstructorMap['interval'] = IntervalVariable;
80+
variableTypes['interval'] = {
81+
name: 'Interval',
82+
ctor: IntervalVariable,
83+
description: 'Define a timespan interval (ex 1m, 1h, 1d)',
84+
};

‎public/app/features/templating/partials/editor.html

Lines changed: 66 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -82,21 +82,11 @@ <h5 class="section-heading">Variable</h5>
8282
<span class="gf-form-label width-6">
8383
Type
8484
<info-popover mode="right-normal">
85-
<dl>
86-
<dt>Query</dt>
87-
<dd>Variable values are fetched from a metric names query to a data source</dd>
88-
<dt>Interval</dt>
89-
<dd>Timespan variable type</dd>
90-
<dt>Datasource</dt>
91-
<dd>Dynamically switch data sources using this type of variable</dd>
92-
<dt>Custom</dt>
93-
<dd>Define variable values manually</dd>
94-
</dl>
95-
<a href="http://docs.grafana.org/reference/templating" target="_blank">Templating docs</a>
85+
{{variableTypes[current.type].description}}
9686
</info-popover>
9787
</span>
9888
<div class="gf-form-select-wrapper max-width-17">
99-
<select class="gf-form-input" ng-model="current.type" ng-options="f.value as f.text for f in variableTypes" ng-change="typeChanged()"></select>
89+
<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
10090
</div>
10191
</div>
10292
</div>
@@ -215,85 +205,85 @@ <h5 class="section-heading">Data source options</h5>
215205
<label class="gf-form-label width-12">Type</label>
216206
<div class="gf-form-select-wrapper max-width-18">
217207
<select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
218-
</div>
219-
</div>
208+
</div>
209+
</div>
220210

221-
<div class="gf-form">
222-
<label class="gf-form-label width-12">
223-
Instance name filter
224-
<info-popover mode="right-normal">
225-
Regex filter for which data source instances to choose from in
226-
the variable value dropdown. Leave empty for all.
227-
<br><br>
228-
Example: <code>/^prod/</code>
211+
<div class="gf-form">
212+
<label class="gf-form-label width-12">
213+
Instance name filter
214+
<info-popover mode="right-normal">
215+
Regex filter for which data source instances to choose from in
216+
the variable value dropdown. Leave empty for all.
217+
<br><br>
218+
Example: <code>/^prod/</code>
229219

230-
</info-popover>
231-
</label>
232-
<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
233-
</div>
234-
</div>
220+
</info-popover>
221+
</label>
222+
<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
223+
</div>
224+
</div>
235225

236226
<div ng-show="current.type === 'adhoc'" class="gf-form-group">
237-
<h5 class="section-heading">Options</h5>
227+
<h5 class="section-heading">Options</h5>
238228

239229
<div class="gf-form max-width-21">
240230
<span class="gf-form-label width-8">Data source</span>
241231
<div class="gf-form-select-wrapper max-width-14">
242232
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
243233
</div>
244234
</div>
245-
</div>
235+
</div>
246236

247-
<div class="section gf-form-group" ng-show="current.supportsMulti">
248-
<h5 class="section-heading">Selection Options</h5>
249-
<div class="section">
250-
<gf-form-switch class="gf-form"
251-
label="Multi-value"
252-
label-class="width-10"
253-
tooltip="Enables multiple values to be selected at the same time"
254-
checked="current.multi"
255-
on-change="runQuery()">
256-
</gf-form-switch>
257-
<gf-form-switch class="gf-form"
258-
label="Include All option"
259-
label-class="width-10"
260-
checked="current.includeAll"
261-
on-change="runQuery()">
262-
</gf-form-switch>
263-
</div>
264-
<div class="gf-form" ng-if="current.includeAll">
265-
<span class="gf-form-label width-10">Custom all value</span>
266-
<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
267-
</div>
268-
</div>
237+
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
238+
<h5 class="section-heading">Selection Options</h5>
239+
<div class="section">
240+
<gf-form-switch class="gf-form"
241+
label="Multi-value"
242+
label-class="width-10"
243+
tooltip="Enables multiple values to be selected at the same time"
244+
checked="current.multi"
245+
on-change="runQuery()">
246+
</gf-form-switch>
247+
<gf-form-switch class="gf-form"
248+
label="Include All option"
249+
label-class="width-10"
250+
checked="current.includeAll"
251+
on-change="runQuery()">
252+
</gf-form-switch>
253+
</div>
254+
<div class="gf-form" ng-if="current.includeAll">
255+
<span class="gf-form-label width-10">Custom all value</span>
256+
<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
257+
</div>
258+
</div>
269259

270-
<div class="gf-form-group" ng-if="current.type === 'query'">
271-
<h5>Value groups/tags (Experimental feature)</h5>
272-
<div class="gf-form">
273-
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
274-
</div>
275-
<div class="gf-form last" ng-if="current.useTags">
276-
<span class="gf-form-label width-10">Tags query</span>
277-
<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
278-
</div>
279-
<div class="gf-form" ng-if="current.useTags">
280-
<li class="gf-form-label width-10">Tag values query</li>
281-
<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
282-
</div>
283-
</div>
260+
<div class="gf-form-group" ng-if="current.type === 'query'">
261+
<h5>Value groups/tags (Experimental feature)</h5>
262+
<div class="gf-form">
263+
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
264+
</div>
265+
<div class="gf-form last" ng-if="current.useTags">
266+
<span class="gf-form-label width-10">Tags query</span>
267+
<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
268+
</div>
269+
<div class="gf-form" ng-if="current.useTags">
270+
<li class="gf-form-label width-10">Tag values query</li>
271+
<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
272+
</div>
273+
</div>
284274

285-
<div class="gf-form-group">
286-
<h5>Preview of values (shows max 20)</h5>
287-
<div class="gf-form-inline">
288-
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
289-
<span class="gf-form-label">{{option.text}}</span>
290-
</div>
291-
</div>
292-
</div>
293-
</div>
275+
<div class="gf-form-group">
276+
<h5>Preview of values (shows max 20)</h5>
277+
<div class="gf-form-inline">
278+
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
279+
<span class="gf-form-label">{{option.text}}</span>
280+
</div>
281+
</div>
282+
</div>
283+
</div>
294284

295-
<div class="gf-form-button-row p-y-0">
296-
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
285+
<div class="gf-form-button-row p-y-0">
286+
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
297287
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
298288
</div>
299289
</div>

‎public/app/features/templating/query_variable.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
import _ from 'lodash';
44
import kbn from 'app/core/utils/kbn';
5-
import {Variable, containsVariable, assignModelProperties} from './variable';
6-
import {VariableSrv, variableConstructorMap} from './variable_srv';
5+
import {Variable, containsVariable, assignModelProperties, variableTypes} from './variable';
6+
import {VariableSrv} from './variable_srv';
77

88
function getNoneOption() {
99
return { text: 'None', value: '', isNone: true };
@@ -37,8 +37,6 @@ export class QueryVariable implements Variable {
3737
current: {text: '', value: ''},
3838
};
3939

40-
supportsMulti = true;
41-
4240
constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) {
4341
// copy model properties to this instance
4442
assignModelProperties(this, model, this.defaults);
@@ -151,4 +149,9 @@ export class QueryVariable implements Variable {
151149
}
152150
}
153151

154-
variableConstructorMap['query'] = QueryVariable;
152+
variableTypes['query'] = {
153+
name: 'Query',
154+
ctor: QueryVariable,
155+
description: 'Variable values are fetched from a datasource query',
156+
supportsMulti: true,
157+
};

‎public/app/features/templating/variable.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface Variable {
1111
getModel();
1212
}
1313

14+
export var variableTypes = {};
1415

1516
export function assignModelProperties(target, source, defaults) {
1617
_.forEach(defaults, function(value, key) {

‎public/app/features/templating/variable_srv.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
import angular from 'angular';
44
import _ from 'lodash';
55
import coreModule from 'app/core/core_module';
6-
import {Variable} from './variable';
7-
8-
export var variableConstructorMap: any = {};
6+
import {Variable, variableTypes} from './variable';
97

108
export class VariableSrv {
119
dashboard: any;
@@ -85,7 +83,7 @@ export class VariableSrv {
8583
}
8684

8785
createVariableFromModel(model) {
88-
var ctor = variableConstructorMap[model.type];
86+
var ctor = variableTypes[model.type].ctor;
8987
if (!ctor) {
9088
throw "Unable to find variable constructor for " + model.type;
9189
}

0 commit comments

Comments
 (0)