Skip to content

Commit 945b5ee

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

File tree

10 files changed

+118
-82
lines changed

10 files changed

+118
-82
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './templateSrv';
2-
import './editorCtrl';
2+
import './editor_ctrl';
33

44
import {VariableSrv} from './variable_srv';
55
import {IntervalVariable} from './interval_variable';

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ export class ConstantVariable implements Variable {
1111
defaults = {
1212
type: 'constant',
1313
name: '',
14-
query: '',
1514
hide: 2,
16-
refresh: 0,
15+
label: '',
16+
query: '',
1717
};
1818

1919
/** @ngInject */
@@ -33,6 +33,7 @@ export class ConstantVariable implements Variable {
3333
updateOptions() {
3434
this.options = [{text: this.query.trim(), value: this.query.trim()}];
3535
this.setValue(this.options[0]);
36+
return Promise.resolve();
3637
}
3738

3839
dependsOn(variable) {

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

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

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

88
export class CustomVariable implements Variable {
99
query: string;
1010
options: any;
1111
includeAll: boolean;
12+
multi: boolean;
13+
14+
defaults = {
15+
type: 'custom',
16+
name: '',
17+
label: '',
18+
hide: 0,
19+
options: [],
20+
current: {text: '', value: ''},
21+
query: '',
22+
includeAll: false,
23+
multi: false,
24+
};
1225

1326
/** @ngInject */
1427
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
15-
_.extend(this, model);
28+
assignModelProperties(this, model, this.defaults);
1629
}
1730

1831
setValue(option) {
1932
this.variableSrv.setOptionAsCurrent(this, option);
2033
}
2134

35+
getModel() {
36+
assignModelProperties(this.model, this, this.defaults);
37+
return this.model;
38+
}
39+
2240
updateOptions() {
2341
// extract options in comma separated string
2442
this.options = _.map(this.query.split(/[,]+/), function(text) {
@@ -28,6 +46,8 @@ export class CustomVariable implements Variable {
2846
if (this.includeAll) {
2947
this.addAllOption();
3048
}
49+
50+
return Promise.resolve();
3151
}
3252

3353
addAllOption() {

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,33 @@
22

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

88
export class DatasourceVariable implements Variable {
99
regex: any;
1010
query: string;
1111
options: any;
1212

13+
defaults = {
14+
type: 'datasource',
15+
name: '',
16+
hide: 0,
17+
label: '',
18+
current: {text: '', value: ''}
19+
regex: '',
20+
options: [],
21+
query: '',
22+
};
23+
1324
/** @ngInject */
1425
constructor(private model, private datasourceSrv, private variableSrv) {
15-
_.extend(this, model);
26+
assignModelProperties(this, model, this.defaults);
27+
}
28+
29+
getModel() {
30+
assignModelProperties(this.model, this, this.defaults);
31+
return this.model;
1632
}
1733

1834
setValue(option) {

‎public/app/features/templating/editorCtrl.js renamed to ‎public/app/features/templating/editor_ctrl.ts

Lines changed: 51 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
1-
define([
2-
'angular',
3-
'lodash',
4-
],
5-
function (angular, _) {
6-
'use strict';
7-
8-
var module = angular.module('grafana.controllers');
9-
10-
module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, variableSrv) {
11-
12-
var replacementDefaults = {
13-
type: 'query',
14-
datasource: null,
15-
refresh: 0,
16-
sort: 0,
17-
name: '',
18-
hide: 0,
19-
options: [],
20-
includeAll: false,
21-
multi: false,
22-
};
1+
///<reference path="../../headers/common.d.ts" />
2+
3+
import angular from 'angular';
4+
import _ from 'lodash';
5+
import $ from 'jquery';
6+
import kbn from 'app/core/utils/kbn';
7+
import coreModule from 'app/core/core_module';
8+
import appEvents from 'app/core/app_events';
239

10+
export class VariableEditorCtrl {
11+
12+
/** @ngInject */
13+
constructor(private $scope, private datasourceSrv, private variableSrv) {
2414
$scope.variableTypes = [
2515
{value: "query", text: "Query"},
2616
{value: "adhoc", text: "Ad hoc filters"},
@@ -53,15 +43,13 @@ function (angular, _) {
5343
$scope.init = function() {
5444
$scope.mode = 'list';
5545

56-
$scope.datasourceTypes = {};
5746
$scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
58-
$scope.datasourceTypes[ds.meta.id] = {text: ds.meta.name, value: ds.meta.id};
5947
return !ds.meta.builtIn && ds.value !== null;
6048
});
6149

62-
$scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) {
63-
return value;
64-
});
50+
$scope.datasourceTypes = _($scope.datasources).uniqBy('meta.id').map(function(ds) {
51+
return {text: ds.meta.name, value: ds.meta.id};
52+
}).value();
6553

6654
$scope.variables = variableSrv.variables;
6755
$scope.reset();
@@ -71,17 +59,6 @@ function (angular, _) {
7159
$scope.reset();
7260
}
7361
});
74-
75-
$scope.$watch('current.datasource', function(val) {
76-
if ($scope.mode === 'new') {
77-
datasourceSrv.get(val).then(function(ds) {
78-
if (ds.meta.defaultMatchFormat) {
79-
$scope.current.allFormat = ds.meta.defaultMatchFormat;
80-
$scope.current.multiFormat = ds.meta.defaultMatchFormat;
81-
}
82-
});
83-
}
84-
});
8562
};
8663

8764
$scope.add = function() {
@@ -123,17 +100,11 @@ function (angular, _) {
123100
$scope.current = variable;
124101
$scope.currentIsNew = false;
125102
$scope.mode = 'edit';
126-
127-
$scope.current.sort = $scope.current.sort || replacementDefaults.sort;
128-
if ($scope.current.datasource === void 0) {
129-
$scope.current.datasource = null;
130-
$scope.current.type = 'query';
131-
$scope.current.allFormat = 'glob';
132-
}
133103
};
134104

135105
$scope.duplicate = function(variable) {
136-
$scope.current = angular.copy(variable);
106+
var clone = _.cloneDeep(variable.getModel());
107+
$scope.current = variableSrv.createVariableFromModel(clone);
137108
$scope.variables.push($scope.current);
138109
$scope.current.name = 'copy_of_'+variable.name;
139110
$scope.updateSubmenuVisibility();
@@ -150,7 +121,7 @@ function (angular, _) {
150121

151122
$scope.reset = function() {
152123
$scope.currentIsNew = true;
153-
$scope.current = angular.copy(replacementDefaults);
124+
$scope.current = variableSrv.createVariableFromModel({type: 'query'});
154125
};
155126

156127
$scope.showSelectionOptions = function() {
@@ -165,27 +136,38 @@ function (angular, _) {
165136
return false;
166137
};
167138

168-
$scope.typeChanged = function () {
169-
if ($scope.current.type === 'interval') {
170-
$scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
171-
$scope.current.refresh = 0;
172-
}
139+
$scope.typeChanged = function() {
140+
var old = $scope.current;
141+
$scope.current = variableSrv.createVariableFromModel({type: $scope.current.type});
142+
$scope.current.name = old.name;
143+
$scope.current.hide = old.hide;
144+
$scope.current.label = old.label;
173145

174-
if ($scope.current.type === 'query') {
175-
$scope.current.query = '';
146+
var oldIndex = _.indexOf(this.variables, old);
147+
if (oldIndex !== -1) {
148+
this.variables[oldIndex] = $scope.current;
176149
}
177150

178-
if ($scope.current.type === 'constant') {
179-
$scope.current.query = '';
180-
$scope.current.refresh = 0;
181-
$scope.current.hide = 2;
182-
}
183-
184-
if ($scope.current.type === 'datasource') {
185-
$scope.current.query = $scope.datasourceTypes[0].value;
186-
$scope.current.regex = '';
187-
$scope.current.refresh = 1;
188-
}
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+
// }
189171
};
190172

191173
$scope.removeVariable = function(variable) {
@@ -194,6 +176,8 @@ function (angular, _) {
194176
$scope.updateSubmenuVisibility();
195177
};
196178

197-
});
179+
}
180+
}
181+
182+
coreModule.controller('VariableEditorCtrl', VariableEditorCtrl);
198183

199-
});

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

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

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

88
export class IntervalVariable implements Variable {
@@ -12,9 +12,27 @@ export class IntervalVariable implements Variable {
1212
auto: boolean;
1313
query: string;
1414

15+
defaults = {
16+
type: 'interval',
17+
name: '',
18+
hide: 0,
19+
label: '',
20+
options: [],
21+
current: {text: '', value: ''},
22+
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
23+
auto: false,
24+
auto_min: '10s',
25+
auto_count: 30,
26+
};
27+
1528
/** @ngInject */
1629
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
17-
_.extend(this, model);
30+
assignModelProperties(this, model, this.defaults);
31+
}
32+
33+
getModel() {
34+
assignModelProperties(this.model, this, this.defaults);
35+
return this.model;
1836
}
1937

2038
setValue(option) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
1+
<div ng-controller="VariableEditorCtrl" ng-init="init()">
22
<div class="tabbed-view-header">
33
<h2 class="tabbed-view-title">
44
Templating

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class QueryVariable implements Variable {
2626
type: 'query',
2727
query: '',
2828
regex: '',
29-
sort: 1,
29+
sort: 0,
3030
datasource: null,
3131
refresh: 0,
3232
hide: 0,

‎public/app/features/templating/specs/query_variable_specs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('QueryVariable', function() {
1010
var variable = new QueryVariable({}, null, null, null, null);
1111
expect(variable.datasource).to.be(null);
1212
expect(variable.refresh).to.be(0);
13-
expect(variable.sort).to.be(1);
13+
expect(variable.sort).to.be(0);
1414
expect(variable.name).to.be('');
1515
expect(variable.hide).to.be(0);
1616
expect(variable.options.length).to.be(0);

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

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

33
import angular from 'angular';
44
import _ from 'lodash';
5-
import $ from 'jquery';
6-
import kbn from 'app/core/utils/kbn';
75
import coreModule from 'app/core/core_module';
8-
import appEvents from 'app/core/app_events';
96
import {Variable} from './variable';
107

118
export var variableConstructorMap: any = {};

0 commit comments

Comments
 (0)