From 945b5ee3cfe4ea901f81ff0decad7531134b01b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 17:03:29 +0200 Subject: [PATCH] feat(templating): progress on variable system refactoring, #6048 --- public/app/features/templating/all.ts | 2 +- .../features/templating/constant_variable.ts | 5 +- .../features/templating/custom_variable.ts | 24 +++- .../templating/datasource_variable.ts | 20 ++- .../{editorCtrl.js => editor_ctrl.ts} | 118 ++++++++---------- .../features/templating/interval_variable.ts | 22 +++- .../features/templating/partials/editor.html | 2 +- .../app/features/templating/query_variable.ts | 2 +- .../templating/specs/query_variable_specs.ts | 2 +- .../app/features/templating/variable_srv.ts | 3 - 10 files changed, 118 insertions(+), 82 deletions(-) rename public/app/features/templating/{editorCtrl.js => editor_ctrl.ts} (63%) 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'); - - 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, - }; +/// + +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); -}); 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 @@ -
+

Templating diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 2816d0a47ed..08eaa546d4b 100644 --- a/public/app/features/templating/query_variable.ts +++ b/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, diff --git a/public/app/features/templating/specs/query_variable_specs.ts b/public/app/features/templating/specs/query_variable_specs.ts index 4040056bfe4..8a2aef65be2 100644 --- a/public/app/features/templating/specs/query_variable_specs.ts +++ b/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); diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index e093514791d..9c06e1fb361 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/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 = {};