From 9dc42648cf162eec7cc2f24fa4d5d264c2cbec3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 2 Jan 2017 13:32:00 +0100 Subject: [PATCH] fix(templating): fixed issue with experimental feature template variable value groups tags, fixes #6752 --- CHANGELOG.md | 1 + .../core/directives/value_select_dropdown.js | 4 +- public/app/core/utils/model_utils.ts | 2 +- .../features/dashboard/submenu/submenu.html | 2 +- .../app/features/dashboard/submenu/submenu.ts | 4 -- .../features/templating/partials/editor.html | 49 +++++++++---------- .../app/features/templating/query_variable.ts | 48 +++++++++++++++--- .../test/specs/value_select_dropdown_specs.js | 18 +++++-- 8 files changed, 84 insertions(+), 44 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76654a22213..e3ea13b0447 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * **Server side PNG rendering**: Fixed issue with y-axis label rotation in phantomjs rendered images [#6924](https://github.com/grafana/grafana/issues/6924) * **Graph**: Fixed centering of y-axis label [#7099](https://github.com/grafana/grafana/issues/7099) * **Graph**: Fixed graph legend table mode and always visible scrollbar [#6828](https://github.com/grafana/grafana/issues/6828) +* **Templating**: Fixed template variable value groups/tags feature [#6752](https://github.com/grafana/grafana/issues/6752) # 4.1-beta1 (2016-12-21) diff --git a/public/app/core/directives/value_select_dropdown.js b/public/app/core/directives/value_select_dropdown.js index 7f3c8ccc7bb..8b1719c669d 100644 --- a/public/app/core/directives/value_select_dropdown.js +++ b/public/app/core/directives/value_select_dropdown.js @@ -75,7 +75,7 @@ function (angular, _, coreModule) { tag.selected = !tag.selected; var tagValuesPromise; if (!tag.values) { - tagValuesPromise = vm.getValuesForTag({tagKey: tag.text}); + tagValuesPromise = vm.variable.getValuesForTag(tag.text); } else { tagValuesPromise = $q.when(tag.values); } @@ -225,7 +225,7 @@ function (angular, _, coreModule) { coreModule.default.directive('valueSelectDropdown', function($compile, $window, $timeout, $rootScope) { return { - scope: { variable: "=", onUpdated: "&", getValuesForTag: "&" }, + scope: { variable: "=", onUpdated: "&"}, templateUrl: 'public/app/partials/valueSelectDropdown.html', controller: 'ValueSelectDropdownCtrl', controllerAs: 'vm', diff --git a/public/app/core/utils/model_utils.ts b/public/app/core/utils/model_utils.ts index 3040094b1e3..dd620aff53d 100644 --- a/public/app/core/utils/model_utils.ts +++ b/public/app/core/utils/model_utils.ts @@ -1,4 +1,4 @@ -export function assignModelProperties(target, source, defaults) { +export function assignModelProperties(target, source, defaults, removeDefaults?) { for (var key in defaults) { if (!defaults.hasOwnProperty(key)) { continue; diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index 4b8cd3e1e2b..3e09fe4425e 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -5,7 +5,7 @@ - + diff --git a/public/app/features/dashboard/submenu/submenu.ts b/public/app/features/dashboard/submenu/submenu.ts index 2ecb298236c..a925ba97f0d 100644 --- a/public/app/features/dashboard/submenu/submenu.ts +++ b/public/app/features/dashboard/submenu/submenu.ts @@ -21,10 +21,6 @@ export class SubmenuCtrl { this.$rootScope.$broadcast('refresh'); } - getValuesForTag(variable, tagKey) { - return this.variableSrv.getValuesForTag(variable, tagKey); - } - variableUpdated(variable) { this.variableSrv.variableUpdated(variable).then(() => { this.$rootScope.$emit('template-variable-value-updated'); diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 8006e356d85..4fc2553244c 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -111,14 +111,14 @@ Values -
- Auto option - -
+
+ + +
- Auto steps How many times should the current time range be divided to calculate the value + Step count How many times should the current time range be divided to calculate the value
@@ -257,27 +257,26 @@
Value groups/tags (Experimental feature)
-
- -
-
- Tags query - -
-
-
  • Tag values query
    • - -
    -
    + + +
    + Tags query + +
    +
    +
  • Tag values query
    • + +
    +
    -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    {{infoText}} diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index e083aa2aab5..92b150f2f15 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -21,6 +21,10 @@ export class QueryVariable implements Variable { name: string; multi: boolean; includeAll: boolean; + useTags: boolean; + tagsQuery: string; + tagValuesQuery: string; + tags: any[]; defaults = { type: 'query', @@ -37,8 +41,10 @@ export class QueryVariable implements Variable { allValue: null, options: [], current: {}, - tagsQuery: null, - tagValuesQuery: null, + tags: [], + useTags: false, + tagsQuery: "", + tagValuesQuery: "", }; /** @ngInject **/ @@ -77,9 +83,37 @@ export class QueryVariable implements Variable { updateOptions() { return this.datasourceSrv.get(this.datasource) .then(this.updateOptionsFromMetricFindQuery.bind(this)) + .then(this.updateTags.bind(this)) .then(this.variableSrv.validateVariableSelectionState.bind(this.variableSrv, this)); } + updateTags(datasource) { + if (this.useTags) { + return datasource.metricFindQuery(this.tagsQuery).then(results => { + this.tags = []; + for (var i = 0; i < results.length; i++) { + this.tags.push(results[i].text); + } + return datasource; + }); + } else { + delete this.tags; + } + + return datasource; + } + + getValuesForTag(tagKey) { + return this.datasourceSrv.get(this.datasource).then(datasource => { + var query = this.tagValuesQuery.replace('$tag', tagKey); + return datasource.metricFindQuery(query).then(function (results) { + return _.map(results, function(value) { + return value.text; + }); + }); + }); + } + updateOptionsFromMetricFindQuery(datasource) { return datasource.metricFindQuery(this.query).then(results => { this.options = this.metricNamesToVariableValues(results); @@ -147,11 +181,11 @@ export class QueryVariable implements Variable { } else if (sortType === 2) { options = _.sortBy(options, function(opt) { var matches = opt.text.match(/.*?(\d+).*/); - if (!matches) { - return 0; - } else { - return parseInt(matches[1], 10); - } + if (!matches) { + return 0; + } else { + return parseInt(matches[1], 10); + } }); } diff --git a/public/test/specs/value_select_dropdown_specs.js b/public/test/specs/value_select_dropdown_specs.js index 2bca4aaaf5c..0672ec6eedf 100644 --- a/public/test/specs/value_select_dropdown_specs.js +++ b/public/test/specs/value_select_dropdown_specs.js @@ -9,22 +9,26 @@ function () { var ctrl; var tagValuesMap = {}; var rootScope; + var q; beforeEach(module('grafana.core')); beforeEach(inject(function($controller, $rootScope, $q, $httpBackend) { rootScope = $rootScope; + q = $q; scope = $rootScope.$new(); ctrl = $controller('ValueSelectDropdownCtrl', {$scope: scope}); - ctrl.getValuesForTag = function(obj) { - return $q.when(tagValuesMap[obj.tagKey]); - }; ctrl.onUpdated = sinon.spy(); $httpBackend.when('GET', /\.html$/).respond(''); })); describe("Given simple variable", function() { beforeEach(function() { - ctrl.variable = {current: {text: 'hej', value: 'hej' }}; + ctrl.variable = { + current: {text: 'hej', value: 'hej' }, + getValuesForTag: function(key) { + return q.when(tagValuesMap[key]); + }, + }; ctrl.init(); }); @@ -43,6 +47,9 @@ function () { {text: 'server-3', value: 'server-3'}, ], tags: ["key1", "key2", "key3"], + getValuesForTag: function(key) { + return q.when(tagValuesMap[key]); + }, multi: true }; tagValuesMap.key1 = ['server-1', 'server-3']; @@ -145,6 +152,9 @@ function () { {text: 'server-3', value: 'server-3'}, ], tags: ["key1", "key2", "key3"], + getValuesForTag: function(key) { + return q.when(tagValuesMap[key]); + }, multi: true }; ctrl.init();