Skip to content

Commit 9d6ecc6

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

File tree

9 files changed

+124
-145
lines changed

9 files changed

+124
-145
lines changed

‎public/app/features/dashboard/dashboard_ctrl.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export class DashboardCtrl {
8787
};
8888

8989
$scope.templateVariableUpdated = function() {
90+
dynamicDashboardSrv.update($scope.dashboard);
9091
};
9192

9293
$scope.updateSubmenuVisibility = function() {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,15 @@ export class CustomVariable implements Variable {
2323
multi: false,
2424
};
2525

26+
supportsMulti = true;
27+
2628
/** @ngInject */
2729
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
2830
assignModelProperties(this, model, this.defaults);
2931
}
3032

3133
setValue(option) {
32-
this.variableSrv.setOptionAsCurrent(this, option);
34+
return this.variableSrv.setOptionAsCurrent(this, option);
3335
}
3436

3537
getModel() {
@@ -47,7 +49,7 @@ export class CustomVariable implements Variable {
4749
this.addAllOption();
4850
}
4951

50-
return Promise.resolve();
52+
return this.variableSrv.validateVariableSelectionState(this);
5153
}
5254

5355
addAllOption() {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class DatasourceVariable implements Variable {
1515
name: '',
1616
hide: 0,
1717
label: '',
18-
current: {text: '', value: ''}
18+
current: {text: '', value: ''},
1919
regex: '',
2020
options: [],
2121
query: '',
@@ -32,7 +32,7 @@ export class DatasourceVariable implements Variable {
3232
}
3333

3434
setValue(option) {
35-
this.variableSrv.setOptionAsCurrent(this, option);
35+
return this.variableSrv.setOptionAsCurrent(this, option);
3636
}
3737

3838
updateOptions() {
@@ -63,6 +63,7 @@ export class DatasourceVariable implements Variable {
6363
}
6464

6565
this.options = options;
66+
return this.variableSrv.validateVariableSelectionState(this);
6667
}
6768

6869
dependsOn(variable) {

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

Lines changed: 3 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import appEvents from 'app/core/app_events';
1010
export class VariableEditorCtrl {
1111

1212
/** @ngInject */
13-
constructor(private $scope, private datasourceSrv, private variableSrv) {
13+
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
1414
$scope.variableTypes = [
1515
{value: "query", text: "Query"},
1616
{value: "adhoc", text: "Ad hoc filters"},
@@ -27,7 +27,7 @@ export class VariableEditorCtrl {
2727
];
2828

2929
$scope.sortOptions = [
30-
{value: 0, text: "Query sort"},
30+
{value: 0, text: "Disabled"},
3131
{value: 1, text: "Alphabetical (asc)"},
3232
{value: 2, text: "Alphabetical (desc)"},
3333
{value: 3, text: "Numerical (asc)"},
@@ -115,6 +115,7 @@ export class VariableEditorCtrl {
115115
$scope.runQuery().then(function() {
116116
$scope.reset();
117117
$scope.mode = 'list';
118+
templateSrv.updateTemplateData();
118119
});
119120
}
120121
};
@@ -124,18 +125,6 @@ export class VariableEditorCtrl {
124125
$scope.current = variableSrv.createVariableFromModel({type: 'query'});
125126
};
126127

127-
$scope.showSelectionOptions = function() {
128-
if ($scope.current) {
129-
if ($scope.current.type === 'query') {
130-
return true;
131-
}
132-
if ($scope.current.type === 'custom') {
133-
return true;
134-
}
135-
}
136-
return false;
137-
};
138-
139128
$scope.typeChanged = function() {
140129
var old = $scope.current;
141130
$scope.current = variableSrv.createVariableFromModel({type: $scope.current.type});
@@ -147,27 +136,6 @@ export class VariableEditorCtrl {
147136
if (oldIndex !== -1) {
148137
this.variables[oldIndex] = $scope.current;
149138
}
150-
151-
// if ($scope.current.type === 'interval') {
152-
// $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
153-
// $scope.current.refresh = 0;
154-
// }
155-
//
156-
// if ($scope.current.type === 'query') {
157-
// $scope.current.query = '';
158-
// }
159-
//
160-
// if ($scope.current.type === 'constant') {
161-
// $scope.current.query = '';
162-
// $scope.current.refresh = 0;
163-
// $scope.current.hide = 2;
164-
// }
165-
//
166-
// if ($scope.current.type === 'datasource') {
167-
// $scope.current.query = $scope.datasourceTypes[0].value;
168-
// $scope.current.regex = '';
169-
// $scope.current.refresh = 1;
170-
// }
171139
};
172140

173141
$scope.removeVariable = function(variable) {

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ export class IntervalVariable implements Variable {
1111
options: any;
1212
auto: boolean;
1313
query: string;
14+
refresh: number;
1415

1516
defaults = {
1617
type: 'interval',
1718
name: '',
1819
hide: 0,
1920
label: '',
21+
refresh: 2,
2022
options: [],
2123
current: {text: '', value: ''},
2224
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
@@ -28,6 +30,7 @@ export class IntervalVariable implements Variable {
2830
/** @ngInject */
2931
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
3032
assignModelProperties(this, model, this.defaults);
33+
this.refresh = 2;
3134
}
3235

3336
getModel() {
@@ -37,7 +40,7 @@ export class IntervalVariable implements Variable {
3740

3841
setValue(option) {
3942
this.updateAutoValue();
40-
this.variableSrv.setOptionAsCurrent(this, option);
43+
return this.variableSrv.setOptionAsCurrent(this, option);
4144
}
4245

4346
updateAutoValue() {
@@ -61,6 +64,7 @@ export class IntervalVariable implements Variable {
6164
});
6265

6366
this.updateAutoValue();
67+
return this.variableSrv.validateVariableSelectionState(this);
6468
}
6569

6670
dependsOn(variable) {

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

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -181,19 +181,8 @@ <h5 class="section-heading">Query Options</h5>
181181
<select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
182182
</div>
183183
</div>
184-
<div class="gf-form max-width-21">
185-
<span class="gf-form-label width-7">
186-
Sort
187-
<info-popover mode="right-normal">
188-
How to sort the values of this variable.
189-
</info-popover>
190-
</span>
191-
<div class="gf-form-select-wrapper max-width-14">
192-
<select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
193-
</div>
194-
</div>
195-
</div>
196-
<div class="gf-form">
184+
</div>
185+
<div class="gf-form">
197186
<span class="gf-form-label width-7">Query</span>
198187
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
199188
</div>
@@ -206,94 +195,105 @@ <h5 class="section-heading">Query Options</h5>
206195
</span>
207196
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
208197
</div>
209-
</div>
198+
<div class="gf-form max-width-21">
199+
<span class="gf-form-label width-7">
200+
Sort
201+
<info-popover mode="right-normal">
202+
How to sort the values of this variable.
203+
</info-popover>
204+
</span>
205+
<div class="gf-form-select-wrapper max-width-14">
206+
<select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
207+
</div>
208+
</div>
209+
</div>
210210

211-
<div ng-show="current.type === 'datasource'" class="gf-form-group">
212-
<h5 class="section-heading">Data source options</h5>
211+
<div ng-show="current.type === 'datasource'" class="gf-form-group">
212+
<h5 class="section-heading">Data source options</h5>
213213

214-
<div class="gf-form">
215-
<label class="gf-form-label width-12">Type</label>
216-
<div class="gf-form-select-wrapper max-width-18">
217-
<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>
214+
<div class="gf-form">
215+
<label class="gf-form-label width-12">Type</label>
216+
<div class="gf-form-select-wrapper max-width-18">
217+
<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>
220220

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

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

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

239239
<div class="gf-form max-width-21">
240240
<span class="gf-form-label width-8">Data source</span>
241241
<div class="gf-form-select-wrapper max-width-14">
242242
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
243243
</div>
244244
</div>
245-
</div>
245+
</div>
246246

247-
<div class="section gf-form-group" ng-show="showSelectionOptions()">
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>
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>
269269

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

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

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>
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>
297297
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
298298
</div>
299299
</div>

0 commit comments

Comments
 (0)