From 35888c814c94e82f27a2f239c4f890ee108bca01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 19 Mar 2015 23:09:50 -0400 Subject: [PATCH] more work on multi select --- src/app/directives/templateParamSelector.js | 77 +++++++- .../partials/variableValueSelect.html | 7 +- src/app/features/dashboard/submenuCtrl.js | 6 +- src/app/features/templating/editorCtrl.js | 4 +- src/app/features/templating/templateSrv.js | 14 +- .../features/templating/templateValuesSrv.js | 5 + src/app/partials/submenu.html | 3 +- src/app/partials/templating_editor.html | 176 ++++++++++-------- src/css/less/forms.less | 5 + src/css/less/submenu.less | 6 +- src/test/specs/templateSrv-specs.js | 28 +++ 11 files changed, 238 insertions(+), 93 deletions(-) diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index a7ae67e363c..8a21f75ef54 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -91,25 +91,84 @@ function (angular, app, _, $) { return { scope: { variable: "=", + onUpdated: "&" }, templateUrl: 'app/features/dashboard/partials/variableValueSelect.html', link: function(scope, elem) { var bodyEl = angular.element($window.document.body); + var variable = scope.variable; scope.show = function() { scope.selectorOpen = true; scope.giveFocus = 1; + scope.oldCurrentText = variable.current.text; + + var currentValues = variable.current.value; + + if (_.isString(currentValues)) { + currentValues = [currentValues]; + } + + scope.options = _.map(variable.options, function(option) { + var op = {text: option.text, value: option.value}; + if (_.indexOf(currentValues, option.value) >= 0) { + op.selected = true; + } + return op; + }); $timeout(function() { bodyEl.on('click', scope.bodyOnClick); }, 0, false); }; - scope.hide = function() { - scope.selectorOpen = false; - bodyEl.off('click', scope.bodyOnClick); + scope.optionSelected = function(option) { + if (!variable.multi) { + _.each(scope.options, function(other) { + if (option !== other) { + other.selected = false; + } + }); + } + + var selected = _.filter(scope.options, {selected: true}); + + if (selected.length === 0) { + // encode the first selected if no option is selected + scope.options[0].selected = true; + $timeout(function() { + scope.optionSelected(scope.options[0]); + }); + return; + } + + if (selected.length > 1) { + if (selected[0].text === 'All') { + selected = selected.slice(1, selected.length); + } + } + + variable.current = { + text: _.pluck(selected, 'text').join(', '), + value: _.pluck(selected, 'value'), + }; + + // only single value + if (variable.current.value.length === 1) { + variable.current.value = selected[0].value; + } + + scope.updateLinkText(); }; + scope.hide = function() { + scope.selectorOpen = false; + if (scope.oldCurrentText !== variable.current.text) { + scope.onUpdated(); + } + + bodyEl.off('click', scope.bodyOnClick); + }; scope.bodyOnClick = function(e) { var dropdown = elem.find('.variable-value-dropdown'); @@ -118,7 +177,17 @@ function (angular, app, _, $) { } }; - scope.$on('$destroy', function() { + scope.updateLinkText = function() { + scope.linkText = ""; + if (!variable.hideLabel) { + scope.linkText = (variable.label || variable.name) + ': '; + } + + scope.linkText += variable.current.text; + }; + + scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label'], function() { + scope.updateLinkText(); }); }, }; diff --git a/src/app/features/dashboard/partials/variableValueSelect.html b/src/app/features/dashboard/partials/variableValueSelect.html index 2a923f14ab6..cc9d3b08f1b 100644 --- a/src/app/features/dashboard/partials/variableValueSelect.html +++ b/src/app/features/dashboard/partials/variableValueSelect.html @@ -1,5 +1,6 @@ - {{variable.name}}: {{variable.current.text}} + {{linkText}} +
@@ -11,9 +12,9 @@
-
- +
diff --git a/src/app/features/dashboard/submenuCtrl.js b/src/app/features/dashboard/submenuCtrl.js index 456cc1b76c1..5099147fd53 100644 --- a/src/app/features/dashboard/submenuCtrl.js +++ b/src/app/features/dashboard/submenuCtrl.js @@ -26,8 +26,10 @@ function (angular, _) { $rootScope.$broadcast('refresh'); }; - $scope.setVariableValue = function(param, option) { - templateValuesSrv.setVariableValue(param, option); + $scope.variableUpdated = function(variable) { + templateValuesSrv.variableUpdated(variable).then(function() { + $rootScope.$broadcast('refresh'); + }); }; $scope.init(); diff --git a/src/app/features/templating/editorCtrl.js b/src/app/features/templating/editorCtrl.js index f17c383155d..f48452e4569 100644 --- a/src/app/features/templating/editorCtrl.js +++ b/src/app/features/templating/editorCtrl.js @@ -17,6 +17,8 @@ function (angular, _) { options: [], includeAll: false, allFormat: 'glob', + multi: false, + multiFormat: 'glob', }; $scope.init = function() { @@ -75,7 +77,7 @@ function (angular, _) { if ($scope.current.datasource === void 0) { $scope.current.datasource = null; $scope.current.type = 'query'; - $scope.current.allFormat = 'Glob'; + $scope.current.allFormat = 'glob'; } }; diff --git a/src/app/features/templating/templateSrv.js b/src/app/features/templating/templateSrv.js index 8fc45097944..008d0653cd5 100644 --- a/src/app/features/templating/templateSrv.js +++ b/src/app/features/templating/templateSrv.js @@ -29,11 +29,23 @@ function (angular, _) { _.each(this.variables, function(variable) { if (!variable.current || !variable.current.value) { return; } - this._values[variable.name] = variable.current.value; + this._values[variable.name] = this.renderVariableValue(variable); this._texts[variable.name] = variable.current.text; }, this); }; + this.renderVariableValue = function(variable) { + var value = variable.current.value; + if (_.isString(value)) { + return value; + } else { + if (variable.multiFormat === 'regex values') { + return '(' + value.join('|') + ')'; + } + return '{' + value.join(',') + '}'; + } + }; + this.setGrafanaVariable = function (name, value) { this._grafanaVariables[name] = value; }; diff --git a/src/app/features/templating/templateValuesSrv.js b/src/app/features/templating/templateValuesSrv.js index 73bcfb662bd..7d4830d960d 100644 --- a/src/app/features/templating/templateValuesSrv.js +++ b/src/app/features/templating/templateValuesSrv.js @@ -73,6 +73,11 @@ function (angular, _, kbn) { }); }; + this.variableUpdated = function(variable) { + templateSrv.updateTemplateData(); + return this.updateOptionsInChildVariables(variable); + }; + this.updateOptionsInChildVariables = function(updatedVariable) { var promises = _.map(self.variables, function(otherVariable) { if (otherVariable === updatedVariable) { diff --git a/src/app/partials/submenu.html b/src/app/partials/submenu.html index c5e2762985e..bdd75cb50b6 100644 --- a/src/app/partials/submenu.html +++ b/src/app/partials/submenu.html @@ -1,11 +1,10 @@
-
  • - +
    • diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index c366f7e7f57..b04debd40f6 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -37,7 +37,7 @@ {{variable.query}} - + Edit @@ -56,97 +56,119 @@
-
-
-
- - -
-
- - -
-
- - -
- - -
- -
+
+
+
General
- - + +
-
-
- -
- - -
-
-
- -
-
- - + + +
+
+ + +
+
+ +
+
+
+ + +
+ +
+ + +
+
+
+ +
+
+
+ + +
+
+
+ +
+
Values Query
+
+
+ + + +
+
+ +
+
+ + + +
+
+ +
+ + + +
+ + +
+
+ + +
-
-
-
- - - +
+
+
Display options
+
+ + +
+ +
+ +
+
Multi-value selection Enables multiple values to be selected at the same time
+ +
+ +
-
- - - +
+ +
    +
  • + {{option.text}} +
    • +
+
+
-
- -
- - -
-
- - -
-
-
-
-
-
-
- -
    -
  • - {{option.text}} -
    • -
-
-
-
+ + + +
- - -
-
diff --git a/src/css/less/forms.less b/src/css/less/forms.less index 2a6512dd882..0adc2637472 100644 --- a/src/css/less/forms.less +++ b/src/css/less/forms.less @@ -11,6 +11,11 @@ input[type="checkbox"].cr1 { display: none; } +.editor-option label.cr1 { + display: inline-block; + margin: 5px 0 1px 0; +} + label.cr1 { display: inline-block; height: 19px; diff --git a/src/css/less/submenu.less b/src/css/less/submenu.less index 32820b9f051..3fe5cfffd42 100644 --- a/src/css/less/submenu.less +++ b/src/css/less/submenu.less @@ -5,7 +5,7 @@ } .submenu-controls { - margin: 20px 0px 15px 20px; + margin: 15px 0px 10px 13px; } .annotation-disabled, .annotation-disabled a { @@ -25,8 +25,8 @@ .variable-value-dropdown { position: absolute; - top: 30px; - width: 300px; + top: 43px; + min-width: 200px; height: 400px; background: @grafanaPanelBackground; box-shadow: 0px 0px 55px 0px black; diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index bb85b9a1c98..0745011414c 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -29,6 +29,34 @@ define([ }); }); + describe('render variable to string values', function() { + it('single value should return value', function() { + var result = _templateSrv.renderVariableValue({current: {value: 'test'}}); + expect(result).to.be('test'); + }); + + it('multi value and glob format should render glob string', function() { + var result = _templateSrv.renderVariableValue({ + multiFormat: 'glob', + current: { + value: ['test','test2'], + } + }); + expect(result).to.be('{test,test2}'); + }); + + it('multi value and regex format should render regex string', function() { + var result = _templateSrv.renderVariableValue({ + multiFormat: 'regex values', + current: { + value: ['test','test2'], + } + }); + expect(result).to.be('(test|test2)'); + }); + + }); + describe('can check if variable exists', function() { beforeEach(function() { _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]);