diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts
index e3c36b653a0..3b36f18b9b0 100644
--- a/public/app/features/templating/all.ts
+++ b/public/app/features/templating/all.ts
@@ -1,5 +1,5 @@
import './templateSrv';
-import './editorCtrl';
+import './editor_ctrl';
import {VariableSrv} from './variable_srv';
import {IntervalVariable} from './interval_variable';
diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts
index ea66b4a0af2..f76d2c04818 100644
--- a/public/app/features/templating/constant_variable.ts
+++ b/public/app/features/templating/constant_variable.ts
@@ -11,9 +11,9 @@ export class ConstantVariable implements Variable {
defaults = {
type: 'constant',
name: '',
- query: '',
hide: 2,
- refresh: 0,
+ label: '',
+ query: '',
};
/** @ngInject */
@@ -33,6 +33,7 @@ export class ConstantVariable implements Variable {
updateOptions() {
this.options = [{text: this.query.trim(), value: this.query.trim()}];
this.setValue(this.options[0]);
+ return Promise.resolve();
}
dependsOn(variable) {
diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts
index 6b119d0947c..bfd42f61eff 100644
--- a/public/app/features/templating/custom_variable.ts
+++ b/public/app/features/templating/custom_variable.ts
@@ -2,23 +2,41 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
-import {Variable} from './variable';
+import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class CustomVariable implements Variable {
query: string;
options: any;
includeAll: boolean;
+ multi: boolean;
+
+ defaults = {
+ type: 'custom',
+ name: '',
+ label: '',
+ hide: 0,
+ options: [],
+ current: {text: '', value: ''},
+ query: '',
+ includeAll: false,
+ multi: false,
+ };
/** @ngInject */
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
- _.extend(this, model);
+ assignModelProperties(this, model, this.defaults);
}
setValue(option) {
this.variableSrv.setOptionAsCurrent(this, option);
}
+ getModel() {
+ assignModelProperties(this.model, this, this.defaults);
+ return this.model;
+ }
+
updateOptions() {
// extract options in comma separated string
this.options = _.map(this.query.split(/[,]+/), function(text) {
@@ -28,6 +46,8 @@ export class CustomVariable implements Variable {
if (this.includeAll) {
this.addAllOption();
}
+
+ return Promise.resolve();
}
addAllOption() {
diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts
index ff89152dbc0..e8612379c5f 100644
--- a/public/app/features/templating/datasource_variable.ts
+++ b/public/app/features/templating/datasource_variable.ts
@@ -2,7 +2,7 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
-import {Variable} from './variable';
+import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class DatasourceVariable implements Variable {
@@ -10,9 +10,25 @@ export class DatasourceVariable implements Variable {
query: string;
options: any;
+ defaults = {
+ type: 'datasource',
+ name: '',
+ hide: 0,
+ label: '',
+ current: {text: '', value: ''}
+ regex: '',
+ options: [],
+ query: '',
+ };
+
/** @ngInject */
constructor(private model, private datasourceSrv, private variableSrv) {
- _.extend(this, model);
+ assignModelProperties(this, model, this.defaults);
+ }
+
+ getModel() {
+ assignModelProperties(this.model, this, this.defaults);
+ return this.model;
}
setValue(option) {
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editor_ctrl.ts
similarity index 63%
rename from public/app/features/templating/editorCtrl.js
rename to public/app/features/templating/editor_ctrl.ts
index 5383eb2f178..04cf082d9c9 100644
--- a/public/app/features/templating/editorCtrl.js
+++ b/public/app/features/templating/editor_ctrl.ts
@@ -1,26 +1,16 @@
-define([
- 'angular',
- 'lodash',
-],
-function (angular, _) {
- 'use strict';
+///
- var module = angular.module('grafana.controllers');
+import angular from 'angular';
+import _ from 'lodash';
+import $ from 'jquery';
+import kbn from 'app/core/utils/kbn';
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
- module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, variableSrv) {
-
- var replacementDefaults = {
- type: 'query',
- datasource: null,
- refresh: 0,
- sort: 0,
- name: '',
- hide: 0,
- options: [],
- includeAll: false,
- multi: false,
- };
+export class VariableEditorCtrl {
+ /** @ngInject */
+ constructor(private $scope, private datasourceSrv, private variableSrv) {
$scope.variableTypes = [
{value: "query", text: "Query"},
{value: "adhoc", text: "Ad hoc filters"},
@@ -53,15 +43,13 @@ function (angular, _) {
$scope.init = function() {
$scope.mode = 'list';
- $scope.datasourceTypes = {};
$scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
- $scope.datasourceTypes[ds.meta.id] = {text: ds.meta.name, value: ds.meta.id};
return !ds.meta.builtIn && ds.value !== null;
});
- $scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) {
- return value;
- });
+ $scope.datasourceTypes = _($scope.datasources).uniqBy('meta.id').map(function(ds) {
+ return {text: ds.meta.name, value: ds.meta.id};
+ }).value();
$scope.variables = variableSrv.variables;
$scope.reset();
@@ -71,17 +59,6 @@ function (angular, _) {
$scope.reset();
}
});
-
- $scope.$watch('current.datasource', function(val) {
- if ($scope.mode === 'new') {
- datasourceSrv.get(val).then(function(ds) {
- if (ds.meta.defaultMatchFormat) {
- $scope.current.allFormat = ds.meta.defaultMatchFormat;
- $scope.current.multiFormat = ds.meta.defaultMatchFormat;
- }
- });
- }
- });
};
$scope.add = function() {
@@ -123,17 +100,11 @@ function (angular, _) {
$scope.current = variable;
$scope.currentIsNew = false;
$scope.mode = 'edit';
-
- $scope.current.sort = $scope.current.sort || replacementDefaults.sort;
- if ($scope.current.datasource === void 0) {
- $scope.current.datasource = null;
- $scope.current.type = 'query';
- $scope.current.allFormat = 'glob';
- }
};
$scope.duplicate = function(variable) {
- $scope.current = angular.copy(variable);
+ var clone = _.cloneDeep(variable.getModel());
+ $scope.current = variableSrv.createVariableFromModel(clone);
$scope.variables.push($scope.current);
$scope.current.name = 'copy_of_'+variable.name;
$scope.updateSubmenuVisibility();
@@ -150,7 +121,7 @@ function (angular, _) {
$scope.reset = function() {
$scope.currentIsNew = true;
- $scope.current = angular.copy(replacementDefaults);
+ $scope.current = variableSrv.createVariableFromModel({type: 'query'});
};
$scope.showSelectionOptions = function() {
@@ -165,27 +136,38 @@ function (angular, _) {
return false;
};
- $scope.typeChanged = function () {
- if ($scope.current.type === 'interval') {
- $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
- $scope.current.refresh = 0;
+ $scope.typeChanged = function() {
+ var old = $scope.current;
+ $scope.current = variableSrv.createVariableFromModel({type: $scope.current.type});
+ $scope.current.name = old.name;
+ $scope.current.hide = old.hide;
+ $scope.current.label = old.label;
+
+ var oldIndex = _.indexOf(this.variables, old);
+ if (oldIndex !== -1) {
+ this.variables[oldIndex] = $scope.current;
}
- if ($scope.current.type === 'query') {
- $scope.current.query = '';
- }
-
- if ($scope.current.type === 'constant') {
- $scope.current.query = '';
- $scope.current.refresh = 0;
- $scope.current.hide = 2;
- }
-
- if ($scope.current.type === 'datasource') {
- $scope.current.query = $scope.datasourceTypes[0].value;
- $scope.current.regex = '';
- $scope.current.refresh = 1;
- }
+ // if ($scope.current.type === 'interval') {
+ // $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
+ // $scope.current.refresh = 0;
+ // }
+ //
+ // if ($scope.current.type === 'query') {
+ // $scope.current.query = '';
+ // }
+ //
+ // if ($scope.current.type === 'constant') {
+ // $scope.current.query = '';
+ // $scope.current.refresh = 0;
+ // $scope.current.hide = 2;
+ // }
+ //
+ // if ($scope.current.type === 'datasource') {
+ // $scope.current.query = $scope.datasourceTypes[0].value;
+ // $scope.current.regex = '';
+ // $scope.current.refresh = 1;
+ // }
};
$scope.removeVariable = function(variable) {
@@ -194,6 +176,8 @@ function (angular, _) {
$scope.updateSubmenuVisibility();
};
- });
+ }
+}
+
+coreModule.controller('VariableEditorCtrl', VariableEditorCtrl);
-});
diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts
index f2366da8163..260a8b9bb8e 100644
--- a/public/app/features/templating/interval_variable.ts
+++ b/public/app/features/templating/interval_variable.ts
@@ -2,7 +2,7 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
-import {Variable} from './variable';
+import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class IntervalVariable implements Variable {
@@ -12,9 +12,27 @@ export class IntervalVariable implements Variable {
auto: boolean;
query: string;
+ defaults = {
+ type: 'interval',
+ name: '',
+ hide: 0,
+ label: '',
+ options: [],
+ current: {text: '', value: ''},
+ query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
+ auto: false,
+ auto_min: '10s',
+ auto_count: 30,
+ };
+
/** @ngInject */
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
- _.extend(this, model);
+ assignModelProperties(this, model, this.defaults);
+ }
+
+ getModel() {
+ assignModelProperties(this.model, this, this.defaults);
+ return this.model;
}
setValue(option) {
diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html
index a35deb0aaf5..37d21a6e495 100644
--- a/public/app/features/templating/partials/editor.html
+++ b/public/app/features/templating/partials/editor.html
@@ -1,4 +1,4 @@
-