feat(templating): progress on variable system refactoring, #6048

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';

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) {

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() {

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) {

public/app/features/templating/editorCtrl.js → public/app/features/templating/editor_ctrl.ts

@@ -1,26 +1,16 @@
-define([
-  'angular',
-  'lodash',
-],
-function (angular, _) {
-  'use strict';
-
-  var module = angular.module('grafana.controllers');
-
-  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,
-    };
+///<reference path="../../headers/common.d.ts" />
+
+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';
 
+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;
 
-      if ($scope.current.type === 'query') {
-        $scope.current.query = '';
+      var oldIndex = _.indexOf(this.variables, old);
+      if (oldIndex !== -1) {
+        this.variables[oldIndex] = $scope.current;
       }
 
-      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);
 
-});

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) {

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

@@ -1,4 +1,4 @@
-<div ng-controller="TemplateEditorCtrl" ng-init="init()">
+<div ng-controller="VariableEditorCtrl" ng-init="init()">
 	<div class="tabbed-view-header">
 		<h2 class="tabbed-view-title">
 			Templating

public/app/features/templating/query_variable.ts

@@ -26,7 +26,7 @@ export class QueryVariable implements Variable {
     type: 'query',
     query: '',
     regex: '',
-    sort: 1,
+    sort: 0,
     datasource: null,
     refresh: 0,
     hide: 0,

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

@@ -10,7 +10,7 @@ describe('QueryVariable', function() {
       var variable = new QueryVariable({}, null, null, null, null);
       expect(variable.datasource).to.be(null);
       expect(variable.refresh).to.be(0);
-      expect(variable.sort).to.be(1);
+      expect(variable.sort).to.be(0);
       expect(variable.name).to.be('');
       expect(variable.hide).to.be(0);
       expect(variable.options.length).to.be(0);

public/app/features/templating/variable_srv.ts

@@ -2,10 +2,7 @@
 
 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';
 import {Variable} from './variable';
 
 export var variableConstructorMap: any = {};