From 0a44add6c96cee16f71bf4afec50143b7e313783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Sep 2016 11:20:58 +0200 Subject: [PATCH 01/18] feat(adhoc fiters): began work on ad-hoc filters, refactored submenu filters to use gf-form styles, #6038 --- .../app/features/dashboard/submenu/submenu.html | 17 +++++++++++++---- public/app/features/templating/editorCtrl.js | 1 + .../features/templating/templateValuesSrv.js | 7 ++++++- public/app/partials/valueSelectDropdown.html | 4 ++-- public/sass/components/_submenu.scss | 5 +---- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index 464d8c4cecf..f02b3cfc881 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -1,10 +1,19 @@ -
+
  • - - {{variable.label || variable.name}}: +
    + + +
    + +
    + + + +
    -
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index d44d682a64c..b4181908977 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -23,6 +23,7 @@ function (angular, _) { $scope.variableTypes = [ {value: "query", text: "Query"}, + {value: "adhoc", text: "Ad hoc filters"}, {value: "interval", text: "Interval"}, {value: "datasource", text: "Data source"}, {value: "custom", text: "Custom"}, diff --git a/public/app/features/templating/templateValuesSrv.js b/public/app/features/templating/templateValuesSrv.js index 3a7885ad5a0..9c60cedc055 100644 --- a/public/app/features/templating/templateValuesSrv.js +++ b/public/app/features/templating/templateValuesSrv.js @@ -188,6 +188,11 @@ function (angular, _, $, kbn) { return; } + if (variable.type === 'adhoc') { + variable.options = []; + return; + } + // extract options in comma separated string variable.options = _.map(variable.query.split(/[,]+/), function(text) { return { text: text.trim(), value: text.trim() }; @@ -271,7 +276,7 @@ function (angular, _, $, kbn) { this.validateVariableSelectionState = function(variable) { if (!variable.current) { - if (!variable.options.length) { return; } + if (!variable.options.length) { return $q.when(); } return self.setVariableValue(variable, variable.options[0], false); } diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html index a6799c80fd0..d1ebce44040 100644 --- a/public/app/partials/valueSelectDropdown.html +++ b/public/app/partials/valueSelectDropdown.html @@ -1,5 +1,5 @@
- + {{vm.linkText}} @@ -10,7 +10,7 @@ - +
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 5d1d0648dda..840bc5a7ae2 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -18,10 +18,7 @@ .submenu-item { margin-right: 20px; display: inline-block; - border-radius: 3px; - background-color: $panel-bg; - border: $panel-border; - margin-right: 10px; + margin-right: 15px; display: inline-block; float: left; From 83b9db51e3434466cd2a01d06549ad95c44a798b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Sep 2016 17:36:28 +0200 Subject: [PATCH 02/18] feat(templating): great progress on adhoc filters, #6038 --- public/app/core/utils/kbn.js | 4 + .../app/features/dashboard/ad_hoc_filters.ts | 159 ++++++++++++++++++ public/app/features/dashboard/all.js | 1 + .../features/dashboard/submenu/submenu.html | 12 +- public/app/features/templating/editorCtrl.js | 2 +- .../features/templating/partials/editor.html | 13 +- .../plugins/datasource/influxdb/datasource.ts | 50 ++++-- .../datasource/influxdb/influx_query.ts | 19 ++- .../datasource/prometheus/datasource.ts | 9 +- public/sass/components/_gf-form.scss | 1 - public/sass/components/_submenu.scss | 15 +- 11 files changed, 239 insertions(+), 46 deletions(-) create mode 100644 public/app/features/dashboard/ad_hoc_filters.ts diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index c0d162b0ece..00c0cb3e127 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -9,6 +9,10 @@ function($, _, moment) { var kbn = {}; kbn.valueFormats = {}; + kbn.regexEscape = function(value) { + return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); + }; + ///// HELPER FUNCTIONS ///// kbn.round_interval = function(interval) { diff --git a/public/app/features/dashboard/ad_hoc_filters.ts b/public/app/features/dashboard/ad_hoc_filters.ts new file mode 100644 index 00000000000..c97c5588666 --- /dev/null +++ b/public/app/features/dashboard/ad_hoc_filters.ts @@ -0,0 +1,159 @@ +/// + +import _ from 'lodash'; +import angular from 'angular'; +import coreModule from 'app/core/core_module'; + +export class AdHocFiltersCtrl { + segments: any; + variable: any; + removeTagFilterSegment: any; + + /** @ngInject */ + constructor(private uiSegmentSrv, private datasourceSrv, private $q, private templateSrv, private $rootScope) { + this.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove filter --'}); + this.buildSegmentModel(); + } + + buildSegmentModel() { + this.segments = []; + + if (this.variable.value && !_.isArray(this.variable.value)) { + } + + for (let tag of this.variable.value) { + if (this.segments.length > 0) { + this.segments.push(this.uiSegmentSrv.newCondition('AND')); + } + + if (tag.key !== undefined && tag.value !== undefined) { + this.segments.push(this.uiSegmentSrv.newKey(tag.key)); + this.segments.push(this.uiSegmentSrv.newOperator(tag.operator)); + this.segments.push(this.uiSegmentSrv.newKeyValue(tag.value)); + } + } + + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + + getOptions(segment, index) { + if (segment.type === 'operator') { + return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<>', '<', '>', '=~', '!~'])); + } + + return this.datasourceSrv.get(this.variable.datasource).then(ds => { + var options: any = {}; + var promise = null; + + if (segment.type !== 'value') { + promise = ds.getTagKeys(); + } else { + options.key = this.segments[index-2].value; + promise = ds.getTagValues(options); + } + + return promise.then(results => { + results = _.map(results, segment => { + return this.uiSegmentSrv.newSegment({value: segment.text}); + }); + + // add remove option for keys + if (segment.type === 'key') { + results.splice(0, 0, angular.copy(this.removeTagFilterSegment)); + } + return results; + }); + }); + } + + segmentChanged(segment, index) { + this.segments[index] = segment; + + // handle remove tag condition + if (segment.value === this.removeTagFilterSegment.value) { + this.segments.splice(index, 3); + if (this.segments.length === 0) { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } else if (this.segments.length > 2) { + this.segments.splice(Math.max(index-1, 0), 1); + if (this.segments[this.segments.length-1].type !== 'plus-button') { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + } + } else { + if (segment.type === 'plus-button') { + if (index > 2) { + this.segments.splice(index, 0, this.uiSegmentSrv.newCondition('AND')); + } + this.segments.push(this.uiSegmentSrv.newOperator('=')); + this.segments.push(this.uiSegmentSrv.newFake('select tag value', 'value', 'query-segment-value')); + segment.type = 'key'; + segment.cssClass = 'query-segment-key'; + } + + if ((index+1) === this.segments.length) { + this.segments.push(this.uiSegmentSrv.newPlusButton()); + } + } + + this.updateVariableModel(); + } + + updateVariableModel() { + var tags = []; + var tagIndex = -1; + var tagOperator = ""; + + this.segments.forEach((segment, index) => { + if (segment.fake) { + return; + } + + switch (segment.type) { + case 'key': { + tags.push({key: segment.value}); + tagIndex += 1; + break; + } + case 'value': { + tags[tagIndex].value = segment.value; + break; + } + case 'operator': { + tags[tagIndex].operator = segment.value; + break; + } + case 'condition': { + break; + } + } + }); + + this.$rootScope.$broadcast('refresh'); + this.variable.value = tags; + } +} + +var template = ` +
+
+ +
+
+`; + +export function adHocFiltersComponent() { + return { + restrict: 'E', + template: template, + controller: AdHocFiltersCtrl, + bindToController: true, + controllerAs: 'ctrl', + scope: { + variable: "=" + } + }; +} + +coreModule.directive('adHocFilters', adHocFiltersComponent); diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 6aea2efa9f1..5ff221af85a 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -20,4 +20,5 @@ define([ './import/dash_import', './export/export_modal', './dash_list_ctrl', + './ad_hoc_filters', ], function () {}); diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index f02b3cfc881..1e1513d4021 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -1,19 +1,13 @@
    -
  • +
  • -
    - -
    - - - -
    -     +
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index b4181908977..8b3e7d3a169 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -56,7 +56,7 @@ function (angular, _) { $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; + return !ds.meta.builtIn && ds.value !== null; }); $scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) { diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 80ea870dfc4..a35deb0aaf5 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -165,7 +165,7 @@
- Data source + Data source
@@ -233,6 +233,17 @@
+
+
Options
+ +
+ Data source +
+ +
+
+
+
Selection Options
diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 08af9e71a91..f451d78e117 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -7,6 +7,7 @@ import * as dateMath from 'app/core/utils/datemath'; import InfluxSeries from './influx_series'; import InfluxQuery from './influx_query'; import ResponseParser from './response_parser'; +import InfluxQueryBuilder from './query_builder'; export default class InfluxDatasource { type: string; @@ -43,18 +44,35 @@ export default class InfluxDatasource { query(options) { var timeFilter = this.getTimeFilter(options); + var scopedVars = _.extend({}, options.scopedVars); + var targets = _.cloneDeep(options.targets); var queryTargets = []; var i, y; - var allQueries = _.map(options.targets, (target) => { + var allQueries = _.map(targets, target => { if (target.hide) { return ""; } + if (!target.rawQuery) { + // apply add hoc filters + for (let variable of this.templateSrv.variables) { + if (variable.type === 'adhoc' && variable.datasource === this.name) { + for (let tag of variable.value) { + if (tag.key !== undefined && tag.value !== undefined) { + target.tags.push({key: tag.key, value: tag.value, condition: 'AND'}); + } + } + } + } + } + queryTargets.push(target); // build query - var queryModel = new InfluxQuery(target, this.templateSrv, options.scopedVars); + scopedVars.interval = {value: target.interval || options.interval}; + + var queryModel = new InfluxQuery(target, this.templateSrv, scopedVars); var query = queryModel.render(true); - query = query.replace(/\$interval/g, (target.interval || options.interval)); + return query; }).reduce((acc, current) => { if (current !== "") { @@ -64,10 +82,10 @@ export default class InfluxDatasource { }); // replace grafana variables - allQueries = allQueries.replace(/\$timeFilter/g, timeFilter); + scopedVars.timeFilter = {value: timeFilter}; // replace templated variables - allQueries = this.templateSrv.replace(allQueries, options.scopedVars); + allQueries = this.templateSrv.replace(allQueries, scopedVars); return this._seriesQuery(allQueries).then((data): any => { if (!data || !data.results) { @@ -124,16 +142,23 @@ export default class InfluxDatasource { }; metricFindQuery(query) { - var interpolated; - try { - interpolated = this.templateSrv.replace(query, null, 'regex'); - } catch (err) { - return this.$q.reject(err); - } + var interpolated = this.templateSrv.replace(query, null, 'regex'); return this._seriesQuery(interpolated) .then(_.curry(this.responseParser.parse)(query)); - }; + } + + getTagKeys(options) { + var queryBuilder = new InfluxQueryBuilder({measurement: '', tags: []}, this.database); + var query = queryBuilder.buildExploreQuery('TAG_KEYS'); + return this.metricFindQuery(query); + } + + getTagValues(options) { + var queryBuilder = new InfluxQueryBuilder({measurement: '', tags: []}, this.database); + var query = queryBuilder.buildExploreQuery('TAG_VALUES', options.key); + return this.metricFindQuery(query); + } _seriesQuery(query) { if (!query) { return this.$q.when({results: []}); } @@ -141,7 +166,6 @@ export default class InfluxDatasource { return this._influxRequest('GET', '/query', {q: query, epoch: 'ms'}); } - serializeParams(params) { if (!params) { return '';} diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts index 1def8e8f424..fddb452767a 100644 --- a/public/app/plugins/datasource/influxdb/influx_query.ts +++ b/public/app/plugins/datasource/influxdb/influx_query.ts @@ -2,6 +2,7 @@ import _ from 'lodash'; import queryPart from './query_part'; +import kbn from 'app/core/utils/kbn'; export default class InfluxQuery { target: any; @@ -155,7 +156,7 @@ export default class InfluxQuery { if (operator !== '>' && operator !== '<') { value = "'" + value.replace(/\\/g, '\\\\') + "'"; } - } else if (interpolate){ + } else if (interpolate) { value = this.templateSrv.replace(value, this.scopedVars, 'regex'); } @@ -181,12 +182,26 @@ export default class InfluxQuery { return policy + measurement; } + interpolateQueryStr(value, variable, defaultFormatFn) { + // if no multi or include all do not regexEscape + if (!variable.multi && !variable.includeAll) { + return value; + } + + if (typeof value === 'string') { + return kbn.regexEscape(value); + } + + var escapedValues = _.map(value, kbn.regexEscape); + return escapedValues.join('|'); + }; + render(interpolate?) { var target = this.target; if (target.rawQuery) { if (interpolate) { - return this.templateSrv.replace(target.query, this.scopedVars, 'regex'); + return this.templateSrv.replace(target.query, this.scopedVars, this.interpolateQueryStr); } else { return target.query; } diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index 53ce91144a4..af692bdd799 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -3,6 +3,7 @@ import angular from 'angular'; import _ from 'lodash'; import moment from 'moment'; +import kbn from 'app/core/utils/kbn'; import * as dateMath from 'app/core/utils/datemath'; import PrometheusMetricFindQuery from './metric_find_query'; @@ -40,10 +41,6 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return backendSrv.datasourceRequest(options); }; - function regexEscape(value) { - return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); - } - this.interpolateQueryExpr = function(value, variable, defaultFormatFn) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { @@ -51,10 +48,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } if (typeof value === 'string') { - return regexEscape(value); + return kbn.regexEscape(value); } - var escapedValues = _.map(value, regexEscape); + var escapedValues = _.map(value, kbn.regexEscape); return escapedValues.join('|'); }; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 82ca9073a4a..f85aa1f52bf 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -48,7 +48,6 @@ $gf-form-margin: 0.25rem; .gf-form-label { padding: $input-padding-y $input-padding-x; margin-right: $gf-form-margin; - line-height: $input-line-height; flex-shrink: 0; background-color: $input-label-bg; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 840bc5a7ae2..14f0658f7cb 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -1,6 +1,5 @@ .submenu-controls { margin: 0 $panel-margin ($panel-margin*2) $panel-margin; - font-size: 16px; } .annotation-disabled, .annotation-disabled a { @@ -25,12 +24,12 @@ .fa-caret-down { font-size: 75%; position: relative; - top: 1px; + top: -1px; + left: 1px; } } .variable-value-link { - font-size: 16px; padding-right: 10px; .label-tag { margin: 0 5px; @@ -39,19 +38,9 @@ padding: 8px 7px; box-sizing: content-box; display: inline-block; - font-weight: normal; - display: inline-block; color: $text-color; } -.submenu-item-label { - padding: 8px 0px 8px 7px; - box-sizing: content-box; - display: inline-block; - font-weight: normal; - display: inline-block; -} - .variable-link-wrapper { display: inline-block; position: relative; From 94e5001c0ed374ecbbece54cb2c75cfe1a9ef662 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 15 Sep 2016 09:18:28 +0200 Subject: [PATCH 03/18] feat(templating): making progress on adhoc template variable, #6038 --- .../app/features/dashboard/ad_hoc_filters.ts | 4 +- .../features/templating/templateValuesSrv.js | 1 + .../plugins/datasource/influxdb/datasource.ts | 2 +- public/test/specs/templateValuesSrv-specs.js | 49 +++++++++++++------ 4 files changed, 38 insertions(+), 18 deletions(-) diff --git a/public/app/features/dashboard/ad_hoc_filters.ts b/public/app/features/dashboard/ad_hoc_filters.ts index c97c5588666..426f6162467 100644 --- a/public/app/features/dashboard/ad_hoc_filters.ts +++ b/public/app/features/dashboard/ad_hoc_filters.ts @@ -21,7 +21,7 @@ export class AdHocFiltersCtrl { if (this.variable.value && !_.isArray(this.variable.value)) { } - for (let tag of this.variable.value) { + for (let tag of this.variable.tags) { if (this.segments.length > 0) { this.segments.push(this.uiSegmentSrv.newCondition('AND')); } @@ -130,7 +130,7 @@ export class AdHocFiltersCtrl { }); this.$rootScope.$broadcast('refresh'); - this.variable.value = tags; + this.variable.tags = tags; } } diff --git a/public/app/features/templating/templateValuesSrv.js b/public/app/features/templating/templateValuesSrv.js index 9c60cedc055..3db7a3f5d9f 100644 --- a/public/app/features/templating/templateValuesSrv.js +++ b/public/app/features/templating/templateValuesSrv.js @@ -189,6 +189,7 @@ function (angular, _, $, kbn) { } if (variable.type === 'adhoc') { + variable.current = {}; variable.options = []; return; } diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index f451d78e117..4bb183474fb 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -56,7 +56,7 @@ export default class InfluxDatasource { // apply add hoc filters for (let variable of this.templateSrv.variables) { if (variable.type === 'adhoc' && variable.datasource === this.name) { - for (let tag of variable.value) { + for (let tag of variable.tags) { if (tag.key !== undefined && tag.value !== undefined) { target.tags.push({key: tag.key, value: tag.value, condition: 'AND'}); } diff --git a/public/test/specs/templateValuesSrv-specs.js b/public/test/specs/templateValuesSrv-specs.js index 1742f5739c3..7e62c0f87e0 100644 --- a/public/test/specs/templateValuesSrv-specs.js +++ b/public/test/specs/templateValuesSrv-specs.js @@ -28,24 +28,43 @@ define([ }); describe('when template variable is present in url', function() { - var variable = { - name: 'apps', - current: {text: "test", value: "test"}, - options: [{text: "test", value: "test"}] - }; + describe('and setting simple variable', function() { + var variable = { + name: 'apps', + current: {text: "test", value: "test"}, + options: [{text: "test", value: "test"}] + }; - beforeEach(function(done) { - var dashboard = { templating: { list: [variable] } }; - var urlParams = {}; - urlParams["var-apps"] = "new"; - ctx.$location.search = sinon.stub().returns(urlParams); - ctx.service.init(dashboard).then(function() { done(); }); - ctx.$rootScope.$digest(); + beforeEach(function(done) { + var dashboard = { templating: { list: [variable] } }; + var urlParams = {}; + urlParams["var-apps"] = "new"; + ctx.$location.search = sinon.stub().returns(urlParams); + ctx.service.init(dashboard).then(function() { done(); }); + ctx.$rootScope.$digest(); + }); + + it('should update current value', function() { + expect(variable.current.value).to.be("new"); + expect(variable.current.text).to.be("new"); + }); }); - it('should update current value', function() { - expect(variable.current.value).to.be("new"); - expect(variable.current.text).to.be("new"); + describe('and setting adhoc variable', function() { + var variable = {name: 'filters', type: 'adhoc'}; + + beforeEach(function(done) { + var dashboard = { templating: { list: [variable] } }; + var urlParams = {}; + urlParams["var-filters"] = "hostname|gt|server2"; + ctx.$location.search = sinon.stub().returns(urlParams); + ctx.service.init(dashboard).then(function() { done(); }); + ctx.$rootScope.$digest(); + }); + + it('should update current value', function() { + expect(variable.tags[0]).to.eq({tag: 'hostname', value: 'server2'}); + }); }); }); From 0f4a9f1ed18093cc5d88a5ab56a6ef8bb77d878b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 15 Sep 2016 14:53:36 +0200 Subject: [PATCH 04/18] feat(templating): began refactoring variables into rich behavioral classes --- .../app/features/dashboard/dashboard_ctrl.ts | 4 +- .../app/features/dashboard/submenu/submenu.ts | 8 +- public/app/features/templating/editorCtrl.js | 6 +- .../templating/specs/variable_srv_specs.ts | 4 + public/app/features/templating/templateSrv.js | 1 + .../features/templating/templateValuesSrv.js | 3 +- .../app/features/templating/variable_srv.ts | 107 ++++++++++++++++++ public/test/specs/templateValuesSrv-specs.js | 32 +++--- 8 files changed, 138 insertions(+), 27 deletions(-) create mode 100644 public/app/features/templating/specs/variable_srv_specs.ts create mode 100644 public/app/features/templating/variable_srv.ts diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 162331c4a98..4f70d56bd7f 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -15,7 +15,7 @@ export class DashboardCtrl { private $rootScope, dashboardKeybindings, timeSrv, - templateValuesSrv, + variableSrv, dashboardSrv, unsavedChangesSrv, dynamicDashboardSrv, @@ -46,7 +46,7 @@ export class DashboardCtrl { // template values service needs to initialize completely before // the rest of the dashboard can load - templateValuesSrv.init(dashboard) + variableSrv.init(dashboard) // template values failes are non fatal .catch($scope.onInitFailed.bind(this, 'Templating init failed', false)) // continue diff --git a/public/app/features/dashboard/submenu/submenu.ts b/public/app/features/dashboard/submenu/submenu.ts index 3b9b0b6b0d8..01405d8894c 100644 --- a/public/app/features/dashboard/submenu/submenu.ts +++ b/public/app/features/dashboard/submenu/submenu.ts @@ -10,11 +10,11 @@ export class SubmenuCtrl { /** @ngInject */ constructor(private $rootScope, - private templateValuesSrv, + private variableSrv, private templateSrv, private $location) { this.annotations = this.dashboard.templating.list; - this.variables = this.dashboard.templating.list; + this.variables = this.variableSrv.variables; } disableAnnotation(annotation) { @@ -23,11 +23,11 @@ export class SubmenuCtrl { } getValuesForTag(variable, tagKey) { - return this.templateValuesSrv.getValuesForTag(variable, tagKey); + return this.variableSrv.getValuesForTag(variable, tagKey); } variableUpdated(variable) { - this.templateValuesSrv.variableUpdated(variable).then(() => { + this.variableSrv.variableUpdated(variable).then(() => { this.$rootScope.$emit('template-variable-value-updated'); this.$rootScope.$broadcast('refresh'); }); diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index 8b3e7d3a169..7d60295168f 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -7,7 +7,7 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, templateSrv, templateValuesSrv) { + module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, variableSrv) { var replacementDefaults = { type: 'query', @@ -63,7 +63,7 @@ function (angular, _) { return value; }); - $scope.variables = templateSrv.variables; + $scope.variables = variableSrv.variables; $scope.reset(); $scope.$watch('mode', function(val) { @@ -113,7 +113,7 @@ function (angular, _) { }; $scope.runQuery = function() { - return templateValuesSrv.updateOptions($scope.current).then(null, function(err) { + return variableSrv.updateOptions($scope.current).then(null, function(err) { if (err.data && err.data.message) { err.message = err.data.message; } $scope.appEvent("alert-error", ['Templating', 'Template variables could not be initialized: ' + err.message]); }); diff --git a/public/app/features/templating/specs/variable_srv_specs.ts b/public/app/features/templating/specs/variable_srv_specs.ts new file mode 100644 index 00000000000..4d0c88e2e39 --- /dev/null +++ b/public/app/features/templating/specs/variable_srv_specs.ts @@ -0,0 +1,4 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +describe('VariableSrv', function() { +}); diff --git a/public/app/features/templating/templateSrv.js b/public/app/features/templating/templateSrv.js index b8d6cbaee2d..130e2fed246 100644 --- a/public/app/features/templating/templateSrv.js +++ b/public/app/features/templating/templateSrv.js @@ -2,6 +2,7 @@ define([ 'angular', 'lodash', './editorCtrl', + './variable_srv', './templateValuesSrv', ], function (angular, _) { diff --git a/public/app/features/templating/templateValuesSrv.js b/public/app/features/templating/templateValuesSrv.js index 3db7a3f5d9f..a3db47fe3a9 100644 --- a/public/app/features/templating/templateValuesSrv.js +++ b/public/app/features/templating/templateValuesSrv.js @@ -166,8 +166,7 @@ function (angular, _, $, kbn) { if (otherVariable === updatedVariable) { return; } - if ((otherVariable.type === "datasource" && - templateSrv.containsVariable(otherVariable.regex, updatedVariable.name)) || + if (templateSrv.containsVariable(otherVariable.regex, updatedVariable.name) || templateSrv.containsVariable(otherVariable.query, updatedVariable.name) || templateSrv.containsVariable(otherVariable.datasource, updatedVariable.name)) { return self.updateOptions(otherVariable); diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts new file mode 100644 index 00000000000..d03559537dc --- /dev/null +++ b/public/app/features/templating/variable_srv.ts @@ -0,0 +1,107 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import $ from 'jquery'; +import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; + +interface Variable { +} + +class ConstantVariable implements Variable { + constructor(private model) { + } +} + +class CustomVariable implements Variable { + constructor(private model) { + } +} + +class IntervalVariable implements Variable { + constructor(private model) { + } +} + + +class QueryVariable implements Variable { + + constructor(private model, + private variableSrv: VariableSrv, + private datasourceSrv) { + _.extend(this, model); + } + + updateOptions() { + return this.datasourceSrv.get(this.datasource) + .then(_.partial(this.updateOptionsFromMetricFindQuery, variable)) + .then(_.partial(this.updateTags, variable)) + .then(_.partial(this.validateVariableSelectionState, variable)); + } +} + +class DatasourceVariable implements Variable { + constructor(private model) { + } +} + + +export class VariableSrv { + dashboard: any; + variables: any; + + variableLock: any; + + /** @ngInject */ + constructor( + private $q, + private $rootScope, + private datasourceSrv, + private $location, + private templateSrv, + private timeSrv) { + + } + + init(dashboard) { + this.variableLock = {}; + this.dashboard = dashboard; + + this.variables = dashboard.templating.list.map(item => { + return new QueryVariable(item, this); + }); + + this.templateSrv.init(this.variables); + return this.$q.when(); + } + + updateOptions(variable) { + return variable.updateOptions(); + } + + variableUpdated(variable) { + // if there is a variable lock ignore cascading update because we are in a boot up scenario + if (this.variableLock[variable.name]) { + return this.$q.when(); + } + + var promises = _.map(this.variables, otherVariable => { + if (otherVariable === variable) { + return; + } + + if (this.templateSrv.containsVariable(otherVariable.regex, variable.name) || + this.templateSrv.containsVariable(otherVariable.query, variable.name) || + this.templateSrv.containsVariable(otherVariable.datasource, variable.name)) { + return this.updateOptions(otherVariable); + } + }); + + return this.$q.all(promises); + } + + +} + +coreModule.service('variableSrv', VariableSrv); diff --git a/public/test/specs/templateValuesSrv-specs.js b/public/test/specs/templateValuesSrv-specs.js index 7e62c0f87e0..2ddb69a5b4a 100644 --- a/public/test/specs/templateValuesSrv-specs.js +++ b/public/test/specs/templateValuesSrv-specs.js @@ -50,22 +50,22 @@ define([ }); }); - describe('and setting adhoc variable', function() { - var variable = {name: 'filters', type: 'adhoc'}; - - beforeEach(function(done) { - var dashboard = { templating: { list: [variable] } }; - var urlParams = {}; - urlParams["var-filters"] = "hostname|gt|server2"; - ctx.$location.search = sinon.stub().returns(urlParams); - ctx.service.init(dashboard).then(function() { done(); }); - ctx.$rootScope.$digest(); - }); - - it('should update current value', function() { - expect(variable.tags[0]).to.eq({tag: 'hostname', value: 'server2'}); - }); - }); + // describe('and setting adhoc variable', function() { + // var variable = {name: 'filters', type: 'adhoc'}; + // + // beforeEach(function(done) { + // var dashboard = { templating: { list: [variable] } }; + // var urlParams = {}; + // urlParams["var-filters"] = "hostname|gt|server2"; + // ctx.$location.search = sinon.stub().returns(urlParams); + // ctx.service.init(dashboard).then(function() { done(); }); + // ctx.$rootScope.$digest(); + // }); + // + // it('should update current value', function() { + // expect(variable.tags[0]).to.eq({tag: 'hostname', value: 'server2'}); + // }); + // }); }); describe('when template variable is present in url multiple times', function() { From 7e8b279895ed4070ab90f14f9d87838557b56928 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Sep 2016 10:48:03 +0200 Subject: [PATCH 05/18] feat(templating): good progress on new variable update code, #6048 --- public/app/features/all.js | 2 +- public/app/features/templating/all.ts | 13 + .../features/templating/interval_variable.ts | 48 +++ .../app/features/templating/query_variable.ts | 125 ++++++++ .../templating/specs/variable_srv_specs.ts | 277 +++++++++++++++++- public/app/features/templating/templateSrv.js | 3 - public/app/features/templating/variable.ts | 5 + .../app/features/templating/variable_srv.ts | 171 ++++++----- 8 files changed, 567 insertions(+), 77 deletions(-) create mode 100644 public/app/features/templating/all.ts create mode 100644 public/app/features/templating/interval_variable.ts create mode 100644 public/app/features/templating/query_variable.ts create mode 100644 public/app/features/templating/variable.ts diff --git a/public/app/features/all.js b/public/app/features/all.js index 43d9f33f190..cd7adb49de6 100644 --- a/public/app/features/all.js +++ b/public/app/features/all.js @@ -2,7 +2,7 @@ define([ './panellinks/module', './dashlinks/module', './annotations/annotations_srv', - './templating/templateSrv', + './templating/all', './dashboard/all', './playlist/all', './snapshot/all', diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts new file mode 100644 index 00000000000..208212c4034 --- /dev/null +++ b/public/app/features/templating/all.ts @@ -0,0 +1,13 @@ +import './templateSrv'; +import './templateValuesSrv'; +import './editorCtrl'; + +import {VariableSrv} from './variable_srv'; +import {IntervalVariable} from './interval_variable'; +import {QueryVariable} from './query_variable'; + +export { + VariableSrv, + IntervalVariable, + QueryVariable, +} diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts new file mode 100644 index 00000000000..e7177982e07 --- /dev/null +++ b/public/app/features/templating/interval_variable.ts @@ -0,0 +1,48 @@ +/// + +import _ from 'lodash'; +import kbn from 'app/core/utils/kbn'; +import {Variable} from './variable'; +import {VariableSrv, variableConstructorMap} from './variable_srv'; + +export class IntervalVariable implements Variable { + auto_count: number; + auto_min: number; + options: any; + auto: boolean; + query: string; + + /** @ngInject */ + constructor(private model, private timeSrv, private templateSrv) { + _.extend(this, model); + } + + setValue(option) { + if (this.auto) { + this.updateAutoValue(); + } + } + + updateAutoValue() { + // add auto option if missing + if (this.options.length && this.options[0].text !== 'auto') { + this.options.unshift({ text: 'auto', value: '$__auto_interval' }); + } + + var interval = kbn.calculateInterval(this.timeSrv.timeRange(), this.auto_count, (this.auto_min ? ">"+this.auto_min : null)); + this.templateSrv.setGrafanaVariable('$__auto_interval', interval); + } + + updateOptions() { + // extract options in comma separated string + this.options = _.map(this.query.split(/[,]+/), function(text) { + return {text: text.trim(), value: text.trim()}; + }); + + if (this.auto) { + this.updateAutoValue(); + } + } +} + +variableConstructorMap['interval'] = IntervalVariable; diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts new file mode 100644 index 00000000000..2bcd89460d3 --- /dev/null +++ b/public/app/features/templating/query_variable.ts @@ -0,0 +1,125 @@ +/// + +import _ from 'lodash'; +import kbn from 'app/core/utils/kbn'; +import {Variable} from './variable'; +import {VariableSrv, variableConstructorMap} from './variable_srv'; + +function getNoneOption() { + return { text: 'None', value: '', isNone: true }; +} + +export class QueryVariable implements Variable { + datasource: any; + query: any; + regex: any; + sort: any; + options: any; + current: any; + includeAll: boolean; + + constructor(private model, private datasourceSrv, private templateSrv, private variableSrv) { + _.extend(this, model); + } + + setValue(option){ + this.current = _.cloneDeep(option); + + if (_.isArray(this.current.text)) { + this.current.text = this.current.text.join(' + '); + } + + this.variableSrv.selectOptionsForCurrentValue(this); + return this.variableSrv.variableUpdated(this); + } + + updateOptions() { + return this.datasourceSrv.get(this.datasource) + .then(this.updateOptionsFromMetricFindQuery.bind(this)) + .then(() => { + this.variableSrv.validateVariableSelectionState(this); + }); + } + + updateOptionsFromMetricFindQuery(datasource) { + return datasource.metricFindQuery(this.query).then(results => { + this.options = this.metricNamesToVariableValues(results); + if (this.includeAll) { + this.addAllOption(); + } + if (!this.options.length) { + this.options.push(getNoneOption()); + } + return datasource; + }); + } + + addAllOption() { + this.options.unshift({text: 'All', value: "$__all"}); + } + + metricNamesToVariableValues(metricNames) { + var regex, options, i, matches; + options = []; + + if (this.model.regex) { + regex = kbn.stringToJsRegex(this.templateSrv.replace(this.regex)); + } + + for (i = 0; i < metricNames.length; i++) { + var item = metricNames[i]; + var value = item.value || item.text; + var text = item.text || item.value; + + if (_.isNumber(value)) { + value = value.toString(); + } + + if (_.isNumber(text)) { + text = text.toString(); + } + + if (regex) { + matches = regex.exec(value); + if (!matches) { continue; } + if (matches.length > 1) { + value = matches[1]; + text = value; + } + } + + options.push({text: text, value: value}); + } + + options = _.uniq(options, 'value'); + return this.sortVariableValues(options, this.sort); + } + + sortVariableValues(options, sortOrder) { + if (sortOrder === 0) { + return options; + } + + var sortType = Math.ceil(sortOrder / 2); + var reverseSort = (sortOrder % 2 === 0); + if (sortType === 1) { + options = _.sortBy(options, 'text'); + } else if (sortType === 2) { + options = _.sortBy(options, function(opt) { + var matches = opt.text.match(new RegExp(".*?(\d+).*")); + if (!matches) { + return 0; + } else { + return parseInt(matches[1], 10); + } + }); + } + if (reverseSort) { + options = options.reverse(); + } + + return options; + } +} + +variableConstructorMap['query'] = QueryVariable; diff --git a/public/app/features/templating/specs/variable_srv_specs.ts b/public/app/features/templating/specs/variable_srv_specs.ts index 4d0c88e2e39..c5a1ea6f536 100644 --- a/public/app/features/templating/specs/variable_srv_specs.ts +++ b/public/app/features/templating/specs/variable_srv_specs.ts @@ -1,4 +1,279 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; -describe('VariableSrv', function() { +import moment from 'moment'; +import helpers from 'test/specs/helpers'; +import '../all'; + +describe.only('VariableSrv', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.controllers')); + beforeEach(angularMocks.module('grafana.services')); + + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', '$location'])); + beforeEach(angularMocks.inject(($rootScope, $q, $location, $injector) => { + ctx.$q = $q; + ctx.$rootScope = $rootScope; + ctx.variableSrv = $injector.get('variableSrv'); + ctx.variableSrv.init({templating: {list: []}}); + ctx.$rootScope.$digest(); + })); + + function describeUpdateVariable(desc, fn) { + describe(desc, function() { + var scenario: any = {}; + scenario.setup = function(setupFn) { + scenario.setupFn = setupFn; + }; + + beforeEach(function() { + scenario.setupFn(); + var ds: any = {}; + ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); + ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); + + scenario.variable = ctx.variableSrv.addVariable(scenario.variableModel); + ctx.variableSrv.updateOptions(scenario.variable); + ctx.$rootScope.$digest(); + }); + + fn(scenario); + }); + } + + describeUpdateVariable('interval variable without auto', scenario => { + scenario.setup(() => { + scenario.variableModel = {type: 'interval', query: '1s,2h,5h,1d', name: 'test'}; + }); + + it('should update options array', () => { + expect(scenario.variable.options.length).to.be(4); + expect(scenario.variable.options[0].text).to.be('1s'); + expect(scenario.variable.options[0].value).to.be('1s'); + }); + }); + + // + // Interval variable update + // + describeUpdateVariable('interval variable with auto', scenario => { + scenario.setup(() => { + scenario.variableModel = {type: 'interval', query: '1s,2h,5h,1d', name: 'test', auto: true, auto_count: 10 }; + + var range = { + from: moment(new Date()).subtract(7, 'days').toDate(), + to: new Date() + }; + + ctx.timeSrv.timeRange = sinon.stub().returns(range); + ctx.templateSrv.setGrafanaVariable = sinon.spy(); + }); + + it('should update options array', function() { + expect(scenario.variable.options.length).to.be(5); + expect(scenario.variable.options[0].text).to.be('auto'); + expect(scenario.variable.options[0].value).to.be('$__auto_interval'); + }); + + it('should set $__auto_interval', function() { + var call = ctx.templateSrv.setGrafanaVariable.getCall(0); + expect(call.args[0]).to.be('$__auto_interval'); + expect(call.args[1]).to.be('12h'); + }); + }); + + // + // Query variable update + // + describeUpdateVariable('query variable with empty current object and refresh', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: '', name: 'test', current: {}}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should set current value to first option', function() { + expect(scenario.variable.options.length).to.be(2); + expect(scenario.variable.current.value).to.be('backend1'); + }); + }); + + describeUpdateVariable('query variable with multi select and new options does not contain some selected values', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { + type: 'query', + query: '', + name: 'test', + current: { + value: ['val1', 'val2', 'val3'], + text: 'val1 + val2 + val3' + } + }; + scenario.queryResult = [{text: 'val2'}, {text: 'val3'}]; + }); + + it('should update current value', function() { + expect(scenario.variable.current.value).to.eql(['val2', 'val3']); + expect(scenario.variable.current.text).to.eql('val2 + val3'); + }); + }); + + describeUpdateVariable('query variable with multi select and new options does not contain any selected values', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { + type: 'query', + query: '', + name: 'test', + current: { + value: ['val1', 'val2', 'val3'], + text: 'val1 + val2 + val3' + } + }; + scenario.queryResult = [{text: 'val5'}, {text: 'val6'}]; + }); + + it('should update current value with first one', function() { + expect(scenario.variable.current.value).to.eql('val5'); + expect(scenario.variable.current.text).to.eql('val5'); + }); + }); + + describeUpdateVariable('query variable with multi select and $__all selected', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { + type: 'query', + query: '', + name: 'test', + includeAll: true, + current: { + value: ['$__all'], + text: 'All' + } + }; + scenario.queryResult = [{text: 'val5'}, {text: 'val6'}]; + }); + + it('should keep current All value', function() { + expect(scenario.variable.current.value).to.eql(['$__all']); + expect(scenario.variable.current.text).to.eql('All'); + }); + }); + + describeUpdateVariable('query variable with numeric results', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { type: 'query', query: '', name: 'test', current: {} }; + scenario.queryResult = [{text: 12, value: 12}]; + }); + + it('should set current value to first option', function() { + expect(scenario.variable.current.value).to.be('12'); + expect(scenario.variable.options[0].value).to.be('12'); + expect(scenario.variable.options[0].text).to.be('12'); + }); + }); + + describeUpdateVariable('basic query variable', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { type: 'query', query: 'apps.*', name: 'test' }; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should update options array', function() { + expect(scenario.variable.options.length).to.be(2); + expect(scenario.variable.options[0].text).to.be('backend1'); + expect(scenario.variable.options[0].value).to.be('backend1'); + expect(scenario.variable.options[1].value).to.be('backend2'); + }); + + it('should select first option as value', function() { + expect(scenario.variable.current.value).to.be('backend1'); + }); + }); + + describeUpdateVariable('and existing value still exists in options', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test'}; + scenario.variableModel.current = { value: 'backend2', text: 'backend2'}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; + }); + + it('should keep variable value', function() { + expect(scenario.variable.current.text).to.be('backend2'); + }); + }); + + describeUpdateVariable('and regex pattern exists', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test'}; + scenario.variableModel.regex = '/apps.*(backend_[0-9]+)/'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should extract and use match group', function() { + expect(scenario.variable.options[0].value).to.be('backend_01'); + }); + }); + + describeUpdateVariable('and regex pattern exists and no match', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test'}; + scenario.variableModel.regex = '/apps.*(backendasd[0-9]+)/'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should not add non matching items, None option should be added instead', function() { + expect(scenario.variable.options.length).to.be(1); + expect(scenario.variable.options[0].isNone).to.be(true); + }); + }); + + describeUpdateVariable('regex pattern without slashes', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test'}; + scenario.variableModel.regex = 'backend_01'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; + }); + + it('should return matches options', function() { + expect(scenario.variable.options.length).to.be(1); + }); + }); + + describeUpdateVariable('regex pattern remove duplicates', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test'}; + scenario.variableModel.regex = 'backend_01'; + scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_01.counters.req'}]; + }); + + it('should return matches options', function() { + expect(scenario.variable.options.length).to.be(1); + }); + }); + + describeUpdateVariable('with include All', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', includeAll: true}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All option', function() { + expect(scenario.variable.options[0].text).to.be('All'); + expect(scenario.variable.options[0].value).to.be('$__all'); + }); + }); + + describeUpdateVariable('with include all and custom value', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', includeAll: true, allValue: '*'}; + scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; + }); + + it('should add All option with custom value', function() { + expect(scenario.variable.options[0].value).to.be('$__all'); + }); + }); + }); + + diff --git a/public/app/features/templating/templateSrv.js b/public/app/features/templating/templateSrv.js index 130e2fed246..d6ed0b65877 100644 --- a/public/app/features/templating/templateSrv.js +++ b/public/app/features/templating/templateSrv.js @@ -1,9 +1,6 @@ define([ 'angular', 'lodash', - './editorCtrl', - './variable_srv', - './templateValuesSrv', ], function (angular, _) { 'use strict'; diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts new file mode 100644 index 00000000000..fb8b08112d6 --- /dev/null +++ b/public/app/features/templating/variable.ts @@ -0,0 +1,5 @@ + +export interface Variable { + setValue(option); +} + diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index d03559537dc..e7470bdfa98 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -3,49 +3,13 @@ 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 {IntervalVariable} from './interval_variable'; +import {Variable} from './variable'; -interface Variable { -} - -class ConstantVariable implements Variable { - constructor(private model) { - } -} - -class CustomVariable implements Variable { - constructor(private model) { - } -} - -class IntervalVariable implements Variable { - constructor(private model) { - } -} - - -class QueryVariable implements Variable { - - constructor(private model, - private variableSrv: VariableSrv, - private datasourceSrv) { - _.extend(this, model); - } - - updateOptions() { - return this.datasourceSrv.get(this.datasource) - .then(_.partial(this.updateOptionsFromMetricFindQuery, variable)) - .then(_.partial(this.updateTags, variable)) - .then(_.partial(this.validateVariableSelectionState, variable)); - } -} - -class DatasourceVariable implements Variable { - constructor(private model) { - } -} - +export var variableConstructorMap: any = {}; export class VariableSrv { dashboard: any; @@ -55,53 +19,116 @@ export class VariableSrv { /** @ngInject */ constructor( - private $q, private $rootScope, - private datasourceSrv, + private $q, private $location, - private templateSrv, - private timeSrv) { + private $injector, + private templateSrv) { + } - } + init(dashboard) { + this.variableLock = {}; + this.dashboard = dashboard; + this.variables = []; - init(dashboard) { - this.variableLock = {}; - this.dashboard = dashboard; + dashboard.templating.list.map(this.addVariable.bind(this)); + this.templateSrv.init(this.variables); - this.variables = dashboard.templating.list.map(item => { - return new QueryVariable(item, this); - }); - - this.templateSrv.init(this.variables); - return this.$q.when(); - } - - updateOptions(variable) { - return variable.updateOptions(); - } - - variableUpdated(variable) { - // if there is a variable lock ignore cascading update because we are in a boot up scenario - if (this.variableLock[variable.name]) { return this.$q.when(); } - var promises = _.map(this.variables, otherVariable => { - if (otherVariable === variable) { - return; + addVariable(model) { + var ctor = variableConstructorMap[model.type]; + if (!ctor) { + throw "Unable to find variable constructor for " + model.type; } - if (this.templateSrv.containsVariable(otherVariable.regex, variable.name) || - this.templateSrv.containsVariable(otherVariable.query, variable.name) || - this.templateSrv.containsVariable(otherVariable.datasource, variable.name)) { + var variable = this.$injector.instantiate(ctor, {model: model}); + this.variables.push(variable); + this.dashboard.templating.list.push(model); + + return variable; + } + + updateOptions(variable) { + return variable.updateOptions(); + } + + variableUpdated(variable) { + // if there is a variable lock ignore cascading update because we are in a boot up scenario + if (this.variableLock[variable.name]) { + return this.$q.when(); + } + + var promises = _.map(this.variables, otherVariable => { + if (otherVariable === variable) { + return; + } + + if (this.templateSrv.containsVariable(otherVariable.regex, variable.name) || + this.templateSrv.containsVariable(otherVariable.query, variable.name) || + this.templateSrv.containsVariable(otherVariable.datasource, variable.name)) { return this.updateOptions(otherVariable); } - }); + }); - return this.$q.all(promises); - } + return this.$q.all(promises); + } + selectOptionsForCurrentValue(variable) { + var i, y, value, option; + var selected: any = []; + for (i = 0; i < variable.options.length; i++) { + option = variable.options[i]; + option.selected = false; + if (_.isArray(variable.current.value)) { + for (y = 0; y < variable.current.value.length; y++) { + value = variable.current.value[y]; + if (option.value === value) { + option.selected = true; + selected.push(option); + } + } + } else if (option.value === variable.current.value) { + option.selected = true; + selected.push(option); + } + } + + return selected; + } + + validateVariableSelectionState(variable) { + if (!variable.current) { + if (!variable.options.length) { return Promise.resolve(); } + return variable.setValue(variable.options[0]); + } + + if (_.isArray(variable.current.value)) { + var selected = this.selectOptionsForCurrentValue(variable); + + // if none pick first + if (selected.length === 0) { + selected = variable.options[0]; + } else { + selected = { + value: _.map(selected, function(val) {return val.value;}), + text: _.map(selected, function(val) {return val.text;}).join(' + '), + }; + } + + return variable.setValue(selected); + } else { + var currentOption = _.find(variable.options, {text: variable.current.text}); + if (currentOption) { + return variable.setValue(currentOption); + } else { + if (!variable.options.length) { return Promise.resolve(); } + return variable.setValue(variable.options[0]); + } + } + } } coreModule.service('variableSrv', VariableSrv); From 46ebae73043d731bf166abb7b1a929270fa8d174 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 16 Sep 2016 16:50:30 +0200 Subject: [PATCH 06/18] feat(templating): progress on template system rewrite #6048 --- public/app/core/utils/kbn.js | 2 +- public/app/features/templating/all.ts | 4 + .../features/templating/custom_variable.ts | 41 ++ .../templating/datasource_variable.ts | 56 +++ .../features/templating/interval_variable.ts | 4 + .../app/features/templating/query_variable.ts | 40 +- .../templating/specs/variable_specs.ts | 36 ++ .../templating/specs/variable_srv_specs.ts | 163 +++++++- public/app/features/templating/templateSrv.js | 22 +- public/app/features/templating/variable.ts | 18 + .../app/features/templating/variable_srv.ts | 55 ++- .../datasource/prometheus/datasource.ts | 9 +- public/test/specs/templateSrv-specs.js | 32 -- public/test/specs/templateValuesSrv-specs.js | 386 +----------------- 14 files changed, 413 insertions(+), 455 deletions(-) create mode 100644 public/app/features/templating/custom_variable.ts create mode 100644 public/app/features/templating/datasource_variable.ts create mode 100644 public/app/features/templating/specs/variable_specs.ts diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 00c0cb3e127..4b7281c55e2 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -10,7 +10,7 @@ function($, _, moment) { kbn.valueFormats = {}; kbn.regexEscape = function(value) { - return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); + return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&') }; ///// HELPER FUNCTIONS ///// diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index 208212c4034..d72a76f5a65 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -5,9 +5,13 @@ import './editorCtrl'; import {VariableSrv} from './variable_srv'; import {IntervalVariable} from './interval_variable'; import {QueryVariable} from './query_variable'; +import {DatasourceVariable} from './datasource_variable'; +import {CustomVariable} from './custom_variable'; export { VariableSrv, IntervalVariable, QueryVariable, + DatasourceVariable, + CustomVariable, } diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts new file mode 100644 index 00000000000..99dd278f899 --- /dev/null +++ b/public/app/features/templating/custom_variable.ts @@ -0,0 +1,41 @@ +/// + +import _ from 'lodash'; +import kbn from 'app/core/utils/kbn'; +import {Variable} from './variable'; +import {VariableSrv, variableConstructorMap} from './variable_srv'; + +export class CustomVariable implements Variable { + query: string; + options: any; + includeAll: boolean; + + /** @ngInject */ + constructor(private model, private timeSrv, private templateSrv) { + _.extend(this, model); + } + + setValue(option) { + } + + updateOptions() { + // extract options in comma separated string + this.options = _.map(this.query.split(/[,]+/), function(text) { + return { text: text.trim(), value: text.trim() }; + }); + + if (this.includeAll) { + this.addAllOption(); + } + } + + addAllOption() { + this.options.unshift({text: 'All', value: "$__all"}); + } + + dependsOn(variableName) { + return false; + } +} + +variableConstructorMap['custom'] = CustomVariable; diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts new file mode 100644 index 00000000000..bd13c43f6e4 --- /dev/null +++ b/public/app/features/templating/datasource_variable.ts @@ -0,0 +1,56 @@ +/// + +import _ from 'lodash'; +import kbn from 'app/core/utils/kbn'; +import {Variable} from './variable'; +import {VariableSrv, variableConstructorMap} from './variable_srv'; + +export class DatasourceVariable implements Variable { + regex: any; + query: string; + options: any; + + /** @ngInject */ + constructor(private model, private datasourceSrv) { + _.extend(this, model); + } + + setValue(option) { + } + + updateOptions() { + var options = []; + var sources = this.datasourceSrv.getMetricSources({skipVariables: true}); + var regex; + + if (this.regex) { + regex = kbn.stringToJsRegex(this.regex); + } + + for (var i = 0; i < sources.length; i++) { + var source = sources[i]; + // must match on type + if (source.meta.id !== this.query) { + continue; + } + + if (regex && !regex.exec(source.name)) { + continue; + } + + options.push({text: source.name, value: source.name}); + } + + if (options.length === 0) { + options.push({text: 'No data sources found', value: ''}); + } + + this.options = options; + } + + dependsOn(variableName) { + return false; + } +} + +variableConstructorMap['datasource'] = DatasourceVariable; diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index e7177982e07..681b088ed0b 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -43,6 +43,10 @@ export class IntervalVariable implements Variable { this.updateAutoValue(); } } + + dependsOn(variableName) { + return false; + } } variableConstructorMap['interval'] = IntervalVariable; diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 2bcd89460d3..784b401a52a 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable} from './variable'; +import {Variable, containsVariable} from './variable'; import {VariableSrv, variableConstructorMap} from './variable_srv'; function getNoneOption() { @@ -17,8 +17,9 @@ export class QueryVariable implements Variable { options: any; current: any; includeAll: boolean; + refresh: number; - constructor(private model, private datasourceSrv, private templateSrv, private variableSrv) { + constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) { _.extend(this, model); } @@ -33,6 +34,23 @@ export class QueryVariable implements Variable { return this.variableSrv.variableUpdated(this); } + setValueFromUrl(urlValue) { + var promise = this.$q.when(); + + if (this.refresh) { + promise = this.updateOptions(); + } + + return promise.then(() => { + var option = _.find(this.options, op => { + return op.text === urlValue || op.value === urlValue; + }); + + option = option || { text: urlValue, value: urlValue }; + return this.setValue(option); + }); + } + updateOptions() { return this.datasourceSrv.get(this.datasource) .then(this.updateOptionsFromMetricFindQuery.bind(this)) @@ -102,24 +120,30 @@ export class QueryVariable implements Variable { var sortType = Math.ceil(sortOrder / 2); var reverseSort = (sortOrder % 2 === 0); + if (sortType === 1) { options = _.sortBy(options, 'text'); } else if (sortType === 2) { options = _.sortBy(options, function(opt) { - var matches = opt.text.match(new RegExp(".*?(\d+).*")); - if (!matches) { - return 0; - } else { - return parseInt(matches[1], 10); - } + var matches = opt.text.match(/.*?(\d+).*/); +if (!matches) { + return 0; +} else { + return parseInt(matches[1], 10); +} }); } + if (reverseSort) { options = options.reverse(); } return options; } + + dependsOn(variableName) { + return containsVariable(this.query, variableName) || containsVariable(this.datasource, variableName); + } } variableConstructorMap['query'] = QueryVariable; diff --git a/public/app/features/templating/specs/variable_specs.ts b/public/app/features/templating/specs/variable_specs.ts new file mode 100644 index 00000000000..a87cd744aaa --- /dev/null +++ b/public/app/features/templating/specs/variable_specs.ts @@ -0,0 +1,36 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import {containsVariable} from '../variable'; + +describe('containsVariable', function() { + + describe('when checking if a string contains a variable', function() { + + it('should find it with $var syntax', function() { + var contains = containsVariable('this.$test.filters', 'test'); + expect(contains).to.be(true); + }); + + it('should not find it if only part matches with $var syntax', function() { + var contains = containsVariable('this.$ServerDomain.filters', 'Server'); + expect(contains).to.be(false); + }); + + it('should find it with [[var]] syntax', function() { + var contains = containsVariable('this.[[test]].filters', 'test'); + expect(contains).to.be(true); + }); + + it('should find it when part of segment', function() { + var contains = containsVariable('metrics.$env.$group-*', 'group'); + expect(contains).to.be(true); + }); + + it('should find it its the only thing', function() { + var contains = containsVariable('$env', 'env'); + expect(contains).to.be(true); + }); + }); + +}); + diff --git a/public/app/features/templating/specs/variable_srv_specs.ts b/public/app/features/templating/specs/variable_srv_specs.ts index c5a1ea6f536..f6a7224da42 100644 --- a/public/app/features/templating/specs/variable_srv_specs.ts +++ b/public/app/features/templating/specs/variable_srv_specs.ts @@ -4,7 +4,7 @@ import moment from 'moment'; import helpers from 'test/specs/helpers'; import '../all'; -describe.only('VariableSrv', function() { +describe('VariableSrv', function() { var ctx = new helpers.ControllerTestContext(); beforeEach(angularMocks.module('grafana.core')); @@ -15,11 +15,58 @@ describe.only('VariableSrv', function() { beforeEach(angularMocks.inject(($rootScope, $q, $location, $injector) => { ctx.$q = $q; ctx.$rootScope = $rootScope; + ctx.$location = $location; ctx.variableSrv = $injector.get('variableSrv'); ctx.variableSrv.init({templating: {list: []}}); ctx.$rootScope.$digest(); })); + function describeInitSceneario(desc, fn) { + describe(desc, function() { + var scenario: any = { + urlParams: {}, + setup: setupFn => { + scenario.setupFn = setupFn; + } + }; + + beforeEach(function() { + scenario.setupFn(); + var ds: any = {}; + ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); + ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); + ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); + + ctx.$location.search = sinon.stub().returns(scenario.urlParams); + + ctx.dashboard = {templating: {list: scenario.variables}}; + ctx.variableSrv.init(ctx.dashboard); + ctx.$rootScope.$digest(); + + scenario.variables = ctx.variableSrv.variables; + }); + + fn(scenario); + }); + } + + describeInitSceneario('when setting simple variable via url', scenario => { + scenario.setup(() => { + scenario.variables = [{ + name: 'apps', + type: 'query', + current: {text: "test", value: "test"}, + options: [{text: "test", value: "test"}] + }]; + scenario.urlParams["var-apps"] = "new"; + }); + + it('should update current value', () => { + expect(scenario.variables[0].current.value).to.be("new"); + expect(scenario.variables[0].current.text).to.be("new"); + }); + }); + function describeUpdateVariable(desc, fn) { describe(desc, function() { var scenario: any = {}; @@ -32,6 +79,8 @@ describe.only('VariableSrv', function() { var ds: any = {}; ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); + ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); + scenario.variable = ctx.variableSrv.addVariable(scenario.variableModel); ctx.variableSrv.updateOptions(scenario.variable); @@ -274,6 +323,114 @@ describe.only('VariableSrv', function() { }); }); + describeUpdateVariable('without sort', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', sort: 0}; + scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; + }); + + it('should return options without sort', function() { + expect(scenario.variable.options[0].text).to.be('bbb2'); + expect(scenario.variable.options[1].text).to.be('aaa10'); + expect(scenario.variable.options[2].text).to.be('ccc3'); + }); + }); + + describeUpdateVariable('with alphabetical sort (asc)', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', sort: 1}; + scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; + }); + + it('should return options with alphabetical sort', function() { + expect(scenario.variable.options[0].text).to.be('aaa10'); + expect(scenario.variable.options[1].text).to.be('bbb2'); + expect(scenario.variable.options[2].text).to.be('ccc3'); + }); + }); + + describeUpdateVariable('with alphabetical sort (desc)', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', sort: 2}; + scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; + }); + + it('should return options with alphabetical sort', function() { + expect(scenario.variable.options[0].text).to.be('ccc3'); + expect(scenario.variable.options[1].text).to.be('bbb2'); + expect(scenario.variable.options[2].text).to.be('aaa10'); + }); + }); + + describeUpdateVariable('with numerical sort (asc)', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', sort: 3}; + scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; + }); + + it('should return options with numerical sort', function() { + expect(scenario.variable.options[0].text).to.be('bbb2'); + expect(scenario.variable.options[1].text).to.be('ccc3'); + expect(scenario.variable.options[2].text).to.be('aaa10'); + }); + }); + + describeUpdateVariable('with numerical sort (desc)', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'query', query: 'apps.*', name: 'test', sort: 4}; + scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; + }); + + it('should return options with numerical sort', function() { + expect(scenario.variable.options[0].text).to.be('aaa10'); + expect(scenario.variable.options[1].text).to.be('ccc3'); + expect(scenario.variable.options[2].text).to.be('bbb2'); + }); + }); + + // + // datasource variable update + // + describeUpdateVariable('datasource variable with regex filter', function(scenario) { + scenario.setup(function() { + scenario.variableModel = { + type: 'datasource', + query: 'graphite', + name: 'test', + current: {value: 'backend4_pee', text: 'backend4_pee'}, + regex: '/pee$/' + }; + scenario.metricSources = [ + {name: 'backend1', meta: {id: 'influx'}}, + {name: 'backend2_pee', meta: {id: 'graphite'}}, + {name: 'backend3', meta: {id: 'graphite'}}, + {name: 'backend4_pee', meta: {id: 'graphite'}}, + ]; + }); + + it('should set only contain graphite ds and filtered using regex', function() { + expect(scenario.variable.options.length).to.be(2); + expect(scenario.variable.options[0].value).to.be('backend2_pee'); + expect(scenario.variable.options[1].value).to.be('backend4_pee'); + }); + + it('should keep current value if available', function() { + expect(scenario.variable.current.value).to.be('backend4_pee'); + }); + }); + + // + // Custom variable update + // + describeUpdateVariable('update custom variable', function(scenario) { + scenario.setup(function() { + scenario.variableModel = {type: 'custom', query: 'hej, hop, asd', name: 'test'}; + }); + + it('should update options array', function() { + expect(scenario.variable.options.length).to.be(3); + expect(scenario.variable.options[0].text).to.be('hej'); + expect(scenario.variable.options[1].value).to.be('hop'); + }); + }); }); - - diff --git a/public/app/features/templating/templateSrv.js b/public/app/features/templating/templateSrv.js index d6ed0b65877..7615aa7da0f 100644 --- a/public/app/features/templating/templateSrv.js +++ b/public/app/features/templating/templateSrv.js @@ -1,8 +1,9 @@ define([ 'angular', 'lodash', + 'app/core/utils/kbn', ], -function (angular, _) { +function (angular, _, kbn) { 'use strict'; var module = angular.module('grafana.services'); @@ -32,10 +33,6 @@ function (angular, _) { } }; - function regexEscape(value) { - return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&'); - } - function luceneEscape(value) { return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, "\\$1"); } @@ -61,10 +58,10 @@ function (angular, _) { switch(format) { case "regex": { if (typeof value === 'string') { - return regexEscape(value); + return kbn.regexEscape(value); } - var escapedValues = _.map(value, regexEscape); + var escapedValues = _.map(value, kbn.regexEscape); return '(' + escapedValues.join('|') + ')'; } case "lucene": { @@ -95,17 +92,6 @@ function (angular, _) { return match && (self._index[match[1] || match[2]] !== void 0); }; - this.containsVariable = function(str, variableName) { - if (!str) { - return false; - } - - variableName = regexEscape(variableName); - var findVarRegex = new RegExp('\\$(' + variableName + ')(?:\\W|$)|\\[\\[(' + variableName + ')\\]\\]', 'g'); - var match = findVarRegex.exec(str); - return match !== null; - }; - this.highlightVariablesAsHtml = function(str) { if (!str || !_.isString(str)) { return str; } diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index fb8b08112d6..cbee8b0b9c1 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -1,5 +1,23 @@ +import kbn from 'app/core/utils/kbn'; + +export function containsVariable(str, variableName) { + if (!str) { + return false; + } + + variableName = kbn.regexEscape(variableName); + var findVarRegex = new RegExp('\\$(' + variableName + ')(?:\\W|$)|\\[\\[(' + variableName + ')\\]\\]', 'g'); + var match = findVarRegex.exec(str); + return match !== null; +} + export interface Variable { setValue(option); + updateOptions(); + dependsOn(variableName); } + + + diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index e7470bdfa98..f03cd8a576d 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -34,7 +34,52 @@ export class VariableSrv { dashboard.templating.list.map(this.addVariable.bind(this)); this.templateSrv.init(this.variables); - return this.$q.when(); + var queryParams = this.$location.search(); + + for (let variable of this.variables) { + this.variableLock[variable.name] = this.$q.defer(); + } + + var promises = []; + + for (let variable of this.variables) { + promises.push(this.processVariable(variable, queryParams)); + } + + return this.$q.all(this.variables.map(variable => { + return this.processVariable(variable, queryParams); + })); + } + + processVariable(variable, queryParams) { + var dependencies = []; + var lock = this.variableLock[variable.name]; + + for (let otherVariable of this.variables) { + if (variable.dependsOn(otherVariable)) { + dependencies.push(this.variableLock[otherVariable.name].promise); + } + } + + return this.$q.all(dependencies).then(() => { + var urlValue = queryParams['var-' + variable.name]; + if (urlValue !== void 0) { + return variable.setValueFromUrl(urlValue).then(lock.resolve); + } + + if (variable.refresh === 1 || variable.refresh === 2) { + return variable.updateOptions().then(() => { + // if (_.isEmpty(variable.current) && variable.options.length) { + // self.setVariableValue(variable, variable.options[0]); + // } + lock.resolve(); + }); + } + + lock.resolve(); + }).finally(() => { + delete this.variableLock[variable.name]; + }); } addVariable(model) { @@ -60,14 +105,13 @@ export class VariableSrv { return this.$q.when(); } + // cascade updates to variables that use this variable var promises = _.map(this.variables, otherVariable => { if (otherVariable === variable) { return; } - if (this.templateSrv.containsVariable(otherVariable.regex, variable.name) || - this.templateSrv.containsVariable(otherVariable.query, variable.name) || - this.templateSrv.containsVariable(otherVariable.datasource, variable.name)) { + if (otherVariable.dependsOn(variable)) { return this.updateOptions(otherVariable); } }); @@ -101,7 +145,7 @@ export class VariableSrv { validateVariableSelectionState(variable) { if (!variable.current) { - if (!variable.options.length) { return Promise.resolve(); } + if (!variable.options.length) { return this.$q.when(); } return variable.setValue(variable.options[0]); } @@ -129,6 +173,7 @@ export class VariableSrv { } } } + } coreModule.service('variableSrv', VariableSrv); diff --git a/public/app/plugins/datasource/prometheus/datasource.ts b/public/app/plugins/datasource/prometheus/datasource.ts index af692bdd799..eedf9c1badd 100644 --- a/public/app/plugins/datasource/prometheus/datasource.ts +++ b/public/app/plugins/datasource/prometheus/datasource.ts @@ -3,7 +3,6 @@ import angular from 'angular'; import _ from 'lodash'; import moment from 'moment'; -import kbn from 'app/core/utils/kbn'; import * as dateMath from 'app/core/utils/datemath'; import PrometheusMetricFindQuery from './metric_find_query'; @@ -41,6 +40,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS return backendSrv.datasourceRequest(options); }; + function prometheusSpecialRegexEscape(value) { + return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\\\$&'); + } + this.interpolateQueryExpr = function(value, variable, defaultFormatFn) { // if no multi or include all do not regexEscape if (!variable.multi && !variable.includeAll) { @@ -48,10 +51,10 @@ export function PrometheusDatasource(instanceSettings, $q, backendSrv, templateS } if (typeof value === 'string') { - return kbn.regexEscape(value); + return prometheusSpecialRegexEscape(value); } - var escapedValues = _.map(value, kbn.regexEscape); + var escapedValues = _.map(value, prometheusSpecialRegexEscape); return escapedValues.join('|'); }; diff --git a/public/test/specs/templateSrv-specs.js b/public/test/specs/templateSrv-specs.js index a592cc7a152..3dac01fbdf2 100644 --- a/public/test/specs/templateSrv-specs.js +++ b/public/test/specs/templateSrv-specs.js @@ -177,38 +177,6 @@ define([ var result = _templateSrv.highlightVariablesAsHtml('this $google ok'); expect(result).to.be('this $google ok'); }); - - }); - - describe('when checking if a string contains a variable', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); - }); - - it('should find it with $var syntax', function() { - var contains = _templateSrv.containsVariable('this.$test.filters', 'test'); - expect(contains).to.be(true); - }); - - it('should not find it if only part matches with $var syntax', function() { - var contains = _templateSrv.containsVariable('this.$ServerDomain.filters', 'Server'); - expect(contains).to.be(false); - }); - - it('should find it with [[var]] syntax', function() { - var contains = _templateSrv.containsVariable('this.[[test]].filters', 'test'); - expect(contains).to.be(true); - }); - - it('should find it when part of segment', function() { - var contains = _templateSrv.containsVariable('metrics.$env.$group-*', 'group'); - expect(contains).to.be(true); - }); - - it('should find it its the only thing', function() { - var contains = _templateSrv.containsVariable('$env', 'env'); - expect(contains).to.be(true); - }); }); describe('updateTemplateData with simple value', function() { diff --git a/public/test/specs/templateValuesSrv-specs.js b/public/test/specs/templateValuesSrv-specs.js index 2ddb69a5b4a..1807157ae35 100644 --- a/public/test/specs/templateValuesSrv-specs.js +++ b/public/test/specs/templateValuesSrv-specs.js @@ -1,9 +1,8 @@ define([ '../mocks/dashboard-mock', './helpers', - 'moment', 'app/features/templating/templateValuesSrv' -], function(dashboardMock, helpers, moment) { +], function(dashboardMock, helpers) { 'use strict'; describe('templateValuesSrv', function() { @@ -13,20 +12,6 @@ define([ beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', '$location'])); beforeEach(ctx.createService('templateValuesSrv')); - describe('update interval variable options', function() { - var variable = { type: 'interval', query: 'auto,1s,2h,5h,1d', name: 'test' }; - - beforeEach(function() { - ctx.service.updateOptions(variable); - }); - - it('should update options array', function() { - expect(variable.options.length).to.be(5); - expect(variable.options[1].text).to.be('1s'); - expect(variable.options[1].value).to.be('1s'); - }); - }); - describe('when template variable is present in url', function() { describe('and setting simple variable', function() { var variable = { @@ -99,375 +84,6 @@ define([ }); }); - function describeUpdateVariable(desc, fn) { - describe(desc, function() { - var scenario = {}; - scenario.setup = function(setupFn) { - scenario.setupFn = setupFn; - }; - beforeEach(function() { - scenario.setupFn(); - var ds = {}; - ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); - ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); - ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); - - ctx.service.updateOptions(scenario.variable); - ctx.$rootScope.$digest(); - }); - - fn(scenario); - }); - } - - describeUpdateVariable('interval variable without auto', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'interval', query: '1s,2h,5h,1d', name: 'test' }; - }); - - it('should update options array', function() { - expect(scenario.variable.options.length).to.be(4); - expect(scenario.variable.options[0].text).to.be('1s'); - expect(scenario.variable.options[0].value).to.be('1s'); - }); - }); - - describeUpdateVariable('query variable with empty current object and refresh', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: '', name: 'test', current: {} }; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; - }); - - it('should set current value to first option', function() { - expect(scenario.variable.options.length).to.be(2); - expect(scenario.variable.current.value).to.be('backend1'); - }); - }); - - describeUpdateVariable('query variable with multi select and new options does not contain some selected values', function(scenario) { - scenario.setup(function() { - scenario.variable = { - type: 'query', - query: '', - name: 'test', - current: { - value: ['val1', 'val2', 'val3'], - text: 'val1 + val2 + val3' - } - }; - scenario.queryResult = [{text: 'val2'}, {text: 'val3'}]; - }); - - it('should update current value', function() { - expect(scenario.variable.current.value).to.eql(['val2', 'val3']); - expect(scenario.variable.current.text).to.eql('val2 + val3'); - }); - }); - - describeUpdateVariable('query variable with multi select and new options does not contain any selected values', function(scenario) { - scenario.setup(function() { - scenario.variable = { - type: 'query', - query: '', - name: 'test', - current: { - value: ['val1', 'val2', 'val3'], - text: 'val1 + val2 + val3' - } - }; - scenario.queryResult = [{text: 'val5'}, {text: 'val6'}]; - }); - - it('should update current value with first one', function() { - expect(scenario.variable.current.value).to.eql('val5'); - expect(scenario.variable.current.text).to.eql('val5'); - }); - }); - - describeUpdateVariable('query variable with multi select and $__all selected', function(scenario) { - scenario.setup(function() { - scenario.variable = { - type: 'query', - query: '', - name: 'test', - includeAll: true, - current: { - value: ['$__all'], - text: 'All' - } - }; - scenario.queryResult = [{text: 'val5'}, {text: 'val6'}]; - }); - - it('should keep current All value', function() { - expect(scenario.variable.current.value).to.eql(['$__all']); - expect(scenario.variable.current.text).to.eql('All'); - }); - }); - - describeUpdateVariable('query variable with numeric results', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: '', name: 'test', current: {} }; - scenario.queryResult = [{text: 12, value: 12}]; - }); - - it('should set current value to first option', function() { - expect(scenario.variable.current.value).to.be('12'); - expect(scenario.variable.options[0].value).to.be('12'); - expect(scenario.variable.options[0].text).to.be('12'); - }); - }); - - describeUpdateVariable('interval variable without auto', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'interval', query: '1s,2h,5h,1d', name: 'test' }; - }); - - it('should update options array', function() { - expect(scenario.variable.options.length).to.be(4); - expect(scenario.variable.options[0].text).to.be('1s'); - expect(scenario.variable.options[0].value).to.be('1s'); - }); - }); - - describeUpdateVariable('interval variable with auto', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'interval', query: '1s,2h,5h,1d', name: 'test', auto: true, auto_count: 10 }; - - var range = { - from: moment(new Date()).subtract(7, 'days').toDate(), - to: new Date() - }; - - ctx.timeSrv.timeRange = sinon.stub().returns(range); - ctx.templateSrv.setGrafanaVariable = sinon.spy(); - }); - - it('should update options array', function() { - expect(scenario.variable.options.length).to.be(5); - expect(scenario.variable.options[0].text).to.be('auto'); - expect(scenario.variable.options[0].value).to.be('$__auto_interval'); - }); - - it('should set $__auto_interval', function() { - var call = ctx.templateSrv.setGrafanaVariable.getCall(0); - expect(call.args[0]).to.be('$__auto_interval'); - expect(call.args[1]).to.be('12h'); - }); - }); - - describeUpdateVariable('update custom variable', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'custom', query: 'hej, hop, asd', name: 'test'}; - }); - - it('should update options array', function() { - expect(scenario.variable.options.length).to.be(3); - expect(scenario.variable.options[0].text).to.be('hej'); - expect(scenario.variable.options[1].value).to.be('hop'); - }); - - it('should set $__auto_interval', function() { - var call = ctx.templateSrv.setGrafanaVariable.getCall(0); - expect(call.args[0]).to.be('$__auto_interval'); - expect(call.args[1]).to.be('12h'); - }); - }); - - describeUpdateVariable('basic query variable', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; - }); - - it('should update options array', function() { - expect(scenario.variable.options.length).to.be(2); - expect(scenario.variable.options[0].text).to.be('backend1'); - expect(scenario.variable.options[0].value).to.be('backend1'); - expect(scenario.variable.options[1].value).to.be('backend2'); - }); - - it('should select first option as value', function() { - expect(scenario.variable.current.value).to.be('backend1'); - }); - }); - - describeUpdateVariable('and existing value still exists in options', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.current = { value: 'backend2', text: 'backend2'}; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}]; - }); - - it('should keep variable value', function() { - expect(scenario.variable.current.text).to.be('backend2'); - }); - }); - - describeUpdateVariable('and regex pattern exists', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.regex = '/apps.*(backend_[0-9]+)/'; - scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; - }); - - it('should extract and use match group', function() { - expect(scenario.variable.options[0].value).to.be('backend_01'); - }); - }); - - describeUpdateVariable('and regex pattern exists and no match', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.regex = '/apps.*(backendasd[0-9]+)/'; - scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; - }); - - it('should not add non matching items, None option should be added instead', function() { - expect(scenario.variable.options.length).to.be(1); - expect(scenario.variable.options[0].isNone).to.be(true); - }); - }); - - describeUpdateVariable('regex pattern without slashes', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.regex = 'backend_01'; - scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_02.counters.req'}]; - }); - - it('should return matches options', function() { - expect(scenario.variable.options.length).to.be(1); - }); - }); - - describeUpdateVariable('regex pattern remove duplicates', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test' }; - scenario.variable.regex = 'backend_01'; - scenario.queryResult = [{text: 'apps.backend.backend_01.counters.req'}, {text: 'apps.backend.backend_01.counters.req'}]; - }); - - it('should return matches options', function() { - expect(scenario.variable.options.length).to.be(1); - }); - }); - - describeUpdateVariable('with include All', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', includeAll: true}; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; - }); - - it('should add All option', function() { - expect(scenario.variable.options[0].text).to.be('All'); - expect(scenario.variable.options[0].value).to.be('$__all'); - }); - }); - - describeUpdateVariable('with include all and custom value', function(scenario) { - scenario.setup(function() { - scenario.variable = { type: 'query', query: 'apps.*', name: 'test', includeAll: true, allValue: '*' }; - scenario.queryResult = [{text: 'backend1'}, {text: 'backend2'}, { text: 'backend3'}]; - }); - - it('should add All option with custom value', function() { - expect(scenario.variable.options[0].value).to.be('$__all'); - }); - }); - - describeUpdateVariable('datasource variable with regex filter', function(scenario) { - scenario.setup(function() { - scenario.variable = { - type: 'datasource', - query: 'graphite', - name: 'test', - current: {value: 'backend4_pee', text: 'backend4_pee'}, - regex: '/pee$/' - }; - scenario.metricSources = [ - {name: 'backend1', meta: {id: 'influx'}}, - {name: 'backend2_pee', meta: {id: 'graphite'}}, - {name: 'backend3', meta: {id: 'graphite'}}, - {name: 'backend4_pee', meta: {id: 'graphite'}}, - ]; - }); - - it('should set only contain graphite ds and filtered using regex', function() { - expect(scenario.variable.options.length).to.be(2); - expect(scenario.variable.options[0].value).to.be('backend2_pee'); - expect(scenario.variable.options[1].value).to.be('backend4_pee'); - }); - - it('should keep current value if available', function() { - expect(scenario.variable.current.value).to.be('backend4_pee'); - }); - }); - - describeUpdateVariable('without sort', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', sort: 0}; - scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; - }); - - it('should return options without sort', function() { - expect(scenario.variable.options[0].text).to.be('bbb2'); - expect(scenario.variable.options[1].text).to.be('aaa10'); - expect(scenario.variable.options[2].text).to.be('ccc3'); - }); - }); - - describeUpdateVariable('with alphabetical sort (asc)', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', sort: 1}; - scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; - }); - - it('should return options with alphabetical sort', function() { - expect(scenario.variable.options[0].text).to.be('aaa10'); - expect(scenario.variable.options[1].text).to.be('bbb2'); - expect(scenario.variable.options[2].text).to.be('ccc3'); - }); - }); - - describeUpdateVariable('with alphabetical sort (desc)', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', sort: 2}; - scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; - }); - - it('should return options with alphabetical sort', function() { - expect(scenario.variable.options[0].text).to.be('ccc3'); - expect(scenario.variable.options[1].text).to.be('bbb2'); - expect(scenario.variable.options[2].text).to.be('aaa10'); - }); - }); - - describeUpdateVariable('with numerical sort (asc)', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', sort: 3}; - scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; - }); - - it('should return options with numerical sort', function() { - expect(scenario.variable.options[0].text).to.be('bbb2'); - expect(scenario.variable.options[1].text).to.be('ccc3'); - expect(scenario.variable.options[2].text).to.be('aaa10'); - }); - }); - - describeUpdateVariable('with numerical sort (desc)', function(scenario) { - scenario.setup(function() { - scenario.variable = {type: 'query', query: 'apps.*', name: 'test', sort: 4}; - scenario.queryResult = [{text: 'bbb2'}, {text: 'aaa10'}, { text: 'ccc3'}]; - }); - - it('should return options with numerical sort', function() { - expect(scenario.variable.options[0].text).to.be('aaa10'); - expect(scenario.variable.options[1].text).to.be('ccc3'); - expect(scenario.variable.options[2].text).to.be('bbb2'); - }); - }); }); }); From 4188c46f83f5b95a9aca5fe1f23c7ffc2a360dcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 17 Sep 2016 11:28:45 +0200 Subject: [PATCH 07/18] feat(templating): more work on new variable handling code, #6048 --- .../features/templating/custom_variable.ts | 9 +- .../templating/datasource_variable.ts | 9 +- .../features/templating/interval_variable.ts | 18 ++- .../app/features/templating/query_variable.ts | 38 ++---- .../templating/specs/variable_specs.ts | 6 + .../specs/variable_srv_init_specs.ts | 113 ++++++++++++++++++ .../templating/specs/variable_srv_specs.ts | 46 ------- public/app/features/templating/variable.ts | 14 ++- .../app/features/templating/variable_srv.ts | 34 ++++-- 9 files changed, 192 insertions(+), 95 deletions(-) create mode 100644 public/app/features/templating/specs/variable_srv_init_specs.ts diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts index 99dd278f899..6b119d0947c 100644 --- a/public/app/features/templating/custom_variable.ts +++ b/public/app/features/templating/custom_variable.ts @@ -11,11 +11,12 @@ export class CustomVariable implements Variable { includeAll: boolean; /** @ngInject */ - constructor(private model, private timeSrv, private templateSrv) { + constructor(private model, private timeSrv, private templateSrv, private variableSrv) { _.extend(this, model); } setValue(option) { + this.variableSrv.setOptionAsCurrent(this, option); } updateOptions() { @@ -33,9 +34,13 @@ export class CustomVariable implements Variable { this.options.unshift({text: 'All', value: "$__all"}); } - dependsOn(variableName) { + dependsOn(variable) { return false; } + + setValueFromUrl(urlValue) { + return this.variableSrv.setOptionFromUrl(this, urlValue); + } } variableConstructorMap['custom'] = CustomVariable; diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts index bd13c43f6e4..ff89152dbc0 100644 --- a/public/app/features/templating/datasource_variable.ts +++ b/public/app/features/templating/datasource_variable.ts @@ -11,11 +11,12 @@ export class DatasourceVariable implements Variable { options: any; /** @ngInject */ - constructor(private model, private datasourceSrv) { + constructor(private model, private datasourceSrv, private variableSrv) { _.extend(this, model); } setValue(option) { + this.variableSrv.setOptionAsCurrent(this, option); } updateOptions() { @@ -48,9 +49,13 @@ export class DatasourceVariable implements Variable { this.options = options; } - dependsOn(variableName) { + dependsOn(variable) { return false; } + + setValueFromUrl(urlValue) { + return this.variableSrv.setOptionFromUrl(this, urlValue); + } } variableConstructorMap['datasource'] = DatasourceVariable; diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index 681b088ed0b..409a0824aea 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -13,17 +13,20 @@ export class IntervalVariable implements Variable { query: string; /** @ngInject */ - constructor(private model, private timeSrv, private templateSrv) { + constructor(private model, private timeSrv, private templateSrv, private variableSrv) { _.extend(this, model); } setValue(option) { - if (this.auto) { - this.updateAutoValue(); - } + this.updateAutoValue(); + this.variableSrv.setOptionAsCurrent(this, option); } updateAutoValue() { + if (!this.auto) { + return; + } + // add auto option if missing if (this.options.length && this.options[0].text !== 'auto') { this.options.unshift({ text: 'auto', value: '$__auto_interval' }); @@ -44,9 +47,14 @@ export class IntervalVariable implements Variable { } } - dependsOn(variableName) { + dependsOn(variable) { return false; } + + setValueFromUrl(urlValue) { + this.updateAutoValue(); + return this.variableSrv.setOptionFromUrl(this, urlValue); + } } variableConstructorMap['interval'] = IntervalVariable; diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 784b401a52a..6ba95b05e00 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -24,31 +24,11 @@ export class QueryVariable implements Variable { } setValue(option){ - this.current = _.cloneDeep(option); - - if (_.isArray(this.current.text)) { - this.current.text = this.current.text.join(' + '); - } - - this.variableSrv.selectOptionsForCurrentValue(this); - return this.variableSrv.variableUpdated(this); + this.variableSrv.setOptionAsCurrent(this, option); } setValueFromUrl(urlValue) { - var promise = this.$q.when(); - - if (this.refresh) { - promise = this.updateOptions(); - } - - return promise.then(() => { - var option = _.find(this.options, op => { - return op.text === urlValue || op.value === urlValue; - }); - - option = option || { text: urlValue, value: urlValue }; - return this.setValue(option); - }); + return this.variableSrv.setOptionFromUrl(this, urlValue); } updateOptions() { @@ -126,11 +106,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); + } }); } @@ -141,8 +121,8 @@ if (!matches) { return options; } - dependsOn(variableName) { - return containsVariable(this.query, variableName) || containsVariable(this.datasource, variableName); + dependsOn(variable) { + return containsVariable(this.query, this.datasource, variable.name); } } diff --git a/public/app/features/templating/specs/variable_specs.ts b/public/app/features/templating/specs/variable_specs.ts index a87cd744aaa..a11f6272425 100644 --- a/public/app/features/templating/specs/variable_specs.ts +++ b/public/app/features/templating/specs/variable_specs.ts @@ -30,6 +30,12 @@ describe('containsVariable', function() { var contains = containsVariable('$env', 'env'); expect(contains).to.be(true); }); + + it('should be able to pass in multiple test strings', function() { + var contains = containsVariable('asd','asd2.$env', 'env'); + expect(contains).to.be(true); + }); + }); }); diff --git a/public/app/features/templating/specs/variable_srv_init_specs.ts b/public/app/features/templating/specs/variable_srv_init_specs.ts new file mode 100644 index 00000000000..59c82ed26c5 --- /dev/null +++ b/public/app/features/templating/specs/variable_srv_init_specs.ts @@ -0,0 +1,113 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import _ from 'lodash'; +import helpers from 'test/specs/helpers'; +import '../all'; + +describe('VariableSrv init', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.controllers')); + beforeEach(angularMocks.module('grafana.services')); + + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', '$location'])); + beforeEach(angularMocks.inject(($rootScope, $q, $location, $injector) => { + ctx.$q = $q; + ctx.$rootScope = $rootScope; + ctx.$location = $location; + ctx.variableSrv = $injector.get('variableSrv'); + ctx.variableSrv.init({templating: {list: []}}); + ctx.$rootScope.$digest(); + })); + + function describeInitScenario(desc, fn) { + describe(desc, function() { + var scenario: any = { + urlParams: {}, + setup: setupFn => { + scenario.setupFn = setupFn; + } + }; + + beforeEach(function() { + scenario.setupFn(); + ctx.datasource = {}; + ctx.datasource.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); + + ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ctx.datasource)); + ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); + + ctx.$location.search = sinon.stub().returns(scenario.urlParams); + + ctx.dashboard = {templating: {list: scenario.variables}}; + ctx.variableSrv.init(ctx.dashboard); + ctx.$rootScope.$digest(); + + scenario.variables = ctx.variableSrv.variables; + }); + + fn(scenario); + }); + } + + ['query', 'interval', 'custom', 'datasource'].forEach(type => { + describeInitScenario('when setting ' + type + ' variable via url', scenario => { + scenario.setup(() => { + scenario.variables = [{ + name: 'apps', + type: type, + current: {text: "test", value: "test"}, + options: [{text: "test", value: "test"}] + }]; + scenario.urlParams["var-apps"] = "new"; + }); + + it('should update current value', () => { + expect(scenario.variables[0].current.value).to.be("new"); + expect(scenario.variables[0].current.text).to.be("new"); + }); + }); + + }); + + describe('given dependent variables', () => { + var variableList = [ + { + name: 'app', + type: 'query', + query: '', + current: {text: "app1", value: "app1"}, + options: [{text: "app1", value: "app1"}] + }, + { + name: 'server', + type: 'query', + refresh: 1, + query: '$app.*', + current: {text: "server1", value: "server1"}, + options: [{text: "server1", value: "server1"}] + }, + ]; + + describeInitScenario('when setting parent var from url', scenario => { + scenario.setup(() => { + scenario.variables = _.cloneDeep(variableList); + scenario.urlParams["var-app"] = "google"; + scenario.queryResult = [{text: 'google-server1'}, {text: 'google-server2'}]; + }); + + it('should update child variable', () => { + expect(scenario.variables[1].options.length).to.be(2); + expect(scenario.variables[1].current.text).to.be("google-server1"); + }); + + it('should only update it once', () => { + expect(ctx.datasource.metricFindQuery.callCount).to.be(1); + }); + + }); + }); + +}); + diff --git a/public/app/features/templating/specs/variable_srv_specs.ts b/public/app/features/templating/specs/variable_srv_specs.ts index f6a7224da42..7dc007c663c 100644 --- a/public/app/features/templating/specs/variable_srv_specs.ts +++ b/public/app/features/templating/specs/variable_srv_specs.ts @@ -21,52 +21,6 @@ describe('VariableSrv', function() { ctx.$rootScope.$digest(); })); - function describeInitSceneario(desc, fn) { - describe(desc, function() { - var scenario: any = { - urlParams: {}, - setup: setupFn => { - scenario.setupFn = setupFn; - } - }; - - beforeEach(function() { - scenario.setupFn(); - var ds: any = {}; - ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); - ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); - ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); - - ctx.$location.search = sinon.stub().returns(scenario.urlParams); - - ctx.dashboard = {templating: {list: scenario.variables}}; - ctx.variableSrv.init(ctx.dashboard); - ctx.$rootScope.$digest(); - - scenario.variables = ctx.variableSrv.variables; - }); - - fn(scenario); - }); - } - - describeInitSceneario('when setting simple variable via url', scenario => { - scenario.setup(() => { - scenario.variables = [{ - name: 'apps', - type: 'query', - current: {text: "test", value: "test"}, - options: [{text: "test", value: "test"}] - }]; - scenario.urlParams["var-apps"] = "new"; - }); - - it('should update current value', () => { - expect(scenario.variables[0].current.value).to.be("new"); - expect(scenario.variables[0].current.text).to.be("new"); - }); - }); - function describeUpdateVariable(desc, fn) { describe(desc, function() { var scenario: any = {}; diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index cbee8b0b9c1..da9c280aa33 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -1,9 +1,14 @@ +/// +import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -export function containsVariable(str, variableName) { - if (!str) { - return false; +export function containsVariable(...args: any[]) { + var variableName = args[args.length-1]; + var str = args[0] || ''; + + for (var i = 1; i < args.length-1; i++) { + str += args[i] || ''; } variableName = kbn.regexEscape(variableName); @@ -15,7 +20,8 @@ export function containsVariable(str, variableName) { export interface Variable { setValue(option); updateOptions(); - dependsOn(variableName); + dependsOn(variable); + setValueFromUrl(urlValue); } diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index f03cd8a576d..a1409e4cc2e 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -40,12 +40,6 @@ export class VariableSrv { this.variableLock[variable.name] = this.$q.defer(); } - var promises = []; - - for (let variable of this.variables) { - promises.push(this.processVariable(variable, queryParams)); - } - return this.$q.all(this.variables.map(variable => { return this.processVariable(variable, queryParams); })); @@ -66,7 +60,6 @@ export class VariableSrv { if (urlValue !== void 0) { return variable.setValueFromUrl(urlValue).then(lock.resolve); } - if (variable.refresh === 1 || variable.refresh === 2) { return variable.updateOptions().then(() => { // if (_.isEmpty(variable.current) && variable.options.length) { @@ -174,6 +167,33 @@ export class VariableSrv { } } + setOptionFromUrl(variable, urlValue) { + var promise = this.$q.when(); + + if (variable.refresh) { + promise = variable.updateOptions(); + } + + return promise.then(() => { + var option = _.find(variable.options, op => { + return op.text === urlValue || op.value === urlValue; + }); + + option = option || {text: urlValue, value: urlValue}; + return variable.setValue(option); + }); + } + + setOptionAsCurrent(variable, option) { + variable.current = _.cloneDeep(option); + + if (_.isArray(variable.current.text)) { + variable.current.text = variable.current.text.join(' + '); + } + + this.selectOptionsForCurrentValue(variable); + return this.variableUpdated(variable); + } } coreModule.service('variableSrv', VariableSrv); From 5ce3e40cc934b5a2060d788676e8084efa3693a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 17 Sep 2016 15:27:53 +0200 Subject: [PATCH 08/18] feat(templating): more work on new variable handling code, #6048 --- public/app/core/utils/kbn.js | 2 +- public/app/features/templating/all.ts | 2 + .../features/templating/constant_variable.ts | 34 +++++++ .../specs/variabe_srv_init_specs.ts | 88 +++++++++++++++++++ .../specs/variable_srv_init_specs.ts | 29 ++++++ public/app/features/templating/variable.ts | 13 +-- .../app/features/templating/variable_srv.ts | 29 +++--- public/test/specs/templateValuesSrv-specs.js | 31 ------- 8 files changed, 177 insertions(+), 51 deletions(-) create mode 100644 public/app/features/templating/constant_variable.ts create mode 100644 public/app/features/templating/specs/variabe_srv_init_specs.ts diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 4b7281c55e2..cf80d671d71 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -10,7 +10,7 @@ function($, _, moment) { kbn.valueFormats = {}; kbn.regexEscape = function(value) { - return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&') + return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&'); }; ///// HELPER FUNCTIONS ///// diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index d72a76f5a65..c6e8dfb82ea 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -7,6 +7,7 @@ import {IntervalVariable} from './interval_variable'; import {QueryVariable} from './query_variable'; import {DatasourceVariable} from './datasource_variable'; import {CustomVariable} from './custom_variable'; +import {ConstantVariable} from './constant_variable'; export { VariableSrv, @@ -14,4 +15,5 @@ export { QueryVariable, DatasourceVariable, CustomVariable, + ConstantVariable, } diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts new file mode 100644 index 00000000000..2fb32b336f7 --- /dev/null +++ b/public/app/features/templating/constant_variable.ts @@ -0,0 +1,34 @@ +/// + +import _ from 'lodash'; +import {Variable} from './variable'; +import {VariableSrv, variableConstructorMap} from './variable_srv'; + +export class ConstantVariable implements Variable { + query: string; + options: any[]; + + /** @ngInject */ + constructor(private model, private variableSrv) { + _.extend(this, model); + } + + setValue(option) { + this.variableSrv.setOptionAsCurrent(this, option); + } + + updateOptions() { + this.options = [{text: this.query.trim(), value: this.query.trim()}]; + this.setValue(this.options[0]); + } + + dependsOn(variable) { + return false; + } + + setValueFromUrl(urlValue) { + return this.variableSrv.setOptionFromUrl(this, urlValue); + } +} + +variableConstructorMap['constant'] = ConstantVariable; diff --git a/public/app/features/templating/specs/variabe_srv_init_specs.ts b/public/app/features/templating/specs/variabe_srv_init_specs.ts new file mode 100644 index 00000000000..080b1706736 --- /dev/null +++ b/public/app/features/templating/specs/variabe_srv_init_specs.ts @@ -0,0 +1,88 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import moment from 'moment'; +import helpers from 'test/specs/helpers'; +import '../all'; + +describe('VariableSrv Init', function() { + var ctx = new helpers.ControllerTestContext(); + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.controllers')); + beforeEach(angularMocks.module('grafana.services')); + + beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', '$location'])); + beforeEach(angularMocks.inject(($rootScope, $q, $location, $injector) => { + ctx.$q = $q; + ctx.$rootScope = $rootScope; + ctx.$location = $location; + ctx.variableSrv = $injector.get('variableSrv'); + ctx.variableSrv.init({templating: {list: []}}); + ctx.$rootScope.$digest(); + })); + + function describeInitSceneario(desc, fn) { + describe(desc, function() { + var scenario: any = { + urlParams: {}, + setup: setupFn => { + scenario.setupFn = setupFn; + } + }; + + beforeEach(function() { + scenario.setupFn(); + var ds: any = {}; + ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); + ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); + ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); + + ctx.$location.search = sinon.stub().returns(scenario.urlParams); + + ctx.dashboard = {templating: {list: scenario.variables}}; + ctx.variableSrv.init(ctx.dashboard); + ctx.$rootScope.$digest(); + + scenario.variables = ctx.variableSrv.variables; + }); + + fn(scenario); + }); + } + + describeInitSceneario('when setting query variable via url', scenario => { + scenario.setup(() => { + scenario.variables = [{ + name: 'apps', + type: 'query', + current: {text: "test", value: "test"}, + options: [{text: "test", value: "test"}] + }]; + scenario.urlParams["var-apps"] = "new"; + }); + + it('should update current value', () => { + expect(scenario.variables[0].current.value).to.be("new"); + expect(scenario.variables[0].current.text).to.be("new"); + }); + }); + + describeInitSceneario('when setting custom variable via url', scenario => { + scenario.setup(() => { + scenario.variables = [{ + name: 'apps', + type: 'custom', + current: {text: "test", value: "test"}, + options: [{text: "test", value: "test"}] + }]; + scenario.urlParams["var-apps"] = "new"; + }); + + it('should update current value', () => { + expect(scenario.variables[0].current.value).to.be("new"); + expect(scenario.variables[0].current.text).to.be("new"); + }); + }); + +}); + diff --git a/public/app/features/templating/specs/variable_srv_init_specs.ts b/public/app/features/templating/specs/variable_srv_init_specs.ts index 59c82ed26c5..2703b70bce3 100644 --- a/public/app/features/templating/specs/variable_srv_init_specs.ts +++ b/public/app/features/templating/specs/variable_srv_init_specs.ts @@ -109,5 +109,34 @@ describe('VariableSrv init', function() { }); }); + describeInitScenario('when template variable is present in url multiple times', scenario => { + scenario.setup(() => { + scenario.variables = [{ + name: 'apps', + type: 'query', + multi: true, + current: {text: "val1", value: "val1"}, + options: [{text: "val1", value: "val1"}, {text: 'val2', value: 'val2'}, {text: 'val3', value: 'val3', selected: true}] + }]; + scenario.urlParams["var-apps"] = ["val2", "val1"]; + }); + + it('should update current value', function() { + var variable = ctx.variableSrv.variables[0]; + expect(variable.current.value.length).to.be(2); + expect(variable.current.value[0]).to.be("val2"); + expect(variable.current.value[1]).to.be("val1"); + expect(variable.current.text).to.be("val2 + val1"); + expect(variable.options[0].selected).to.be(true); + expect(variable.options[1].selected).to.be(true); + }); + + it('should set options that are not in value to selected false', function() { + var variable = ctx.variableSrv.variables[0]; + expect(variable.options[2].selected).to.be(false); + }); + }); + + }); diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index da9c280aa33..c7938f3ebb5 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -3,6 +3,13 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; +export interface Variable { + setValue(option); + updateOptions(); + dependsOn(variable); + setValueFromUrl(urlValue); +} + export function containsVariable(...args: any[]) { var variableName = args[args.length-1]; var str = args[0] || ''; @@ -17,12 +24,6 @@ export function containsVariable(...args: any[]) { return match !== null; } -export interface Variable { - setValue(option); - updateOptions(); - dependsOn(variable); - setValueFromUrl(urlValue); -} diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index a1409e4cc2e..dfc938543a8 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -29,9 +29,7 @@ export class VariableSrv { init(dashboard) { this.variableLock = {}; this.dashboard = dashboard; - this.variables = []; - - dashboard.templating.list.map(this.addVariable.bind(this)); + this.variables = dashboard.templating.list.map(this.createVariableFromModel.bind(this)); this.templateSrv.init(this.variables); var queryParams = this.$location.search(); @@ -60,13 +58,9 @@ export class VariableSrv { if (urlValue !== void 0) { return variable.setValueFromUrl(urlValue).then(lock.resolve); } + if (variable.refresh === 1 || variable.refresh === 2) { - return variable.updateOptions().then(() => { - // if (_.isEmpty(variable.current) && variable.options.length) { - // self.setVariableValue(variable, variable.options[0]); - // } - lock.resolve(); - }); + return variable.updateOptions().then(lock.resolve); } lock.resolve(); @@ -75,19 +69,28 @@ export class VariableSrv { }); } - addVariable(model) { + createVariableFromModel(model) { var ctor = variableConstructorMap[model.type]; if (!ctor) { throw "Unable to find variable constructor for " + model.type; } var variable = this.$injector.instantiate(ctor, {model: model}); - this.variables.push(variable); - this.dashboard.templating.list.push(model); - return variable; } + addVariable(model) { + var variable = this.createVariableFromModel(model); + this.variables.push(this.createVariableFromModel(variable)); + return variable; + } + + syncToDashboardModel() { + this.dashboard.templating.list = this.variables.map(variable => { + return variable.model; + }); + } + updateOptions(variable) { return variable.updateOptions(); } diff --git a/public/test/specs/templateValuesSrv-specs.js b/public/test/specs/templateValuesSrv-specs.js index 1807157ae35..f1d5375361e 100644 --- a/public/test/specs/templateValuesSrv-specs.js +++ b/public/test/specs/templateValuesSrv-specs.js @@ -53,37 +53,6 @@ define([ // }); }); - describe('when template variable is present in url multiple times', function() { - var variable = { - name: 'apps', - multi: true, - current: {text: "val1", value: "val1"}, - options: [{text: "val1", value: "val1"}, {text: 'val2', value: 'val2'}, {text: 'val3', value: 'val3', selected: true}] - }; - - beforeEach(function(done) { - var dashboard = { templating: { list: [variable] } }; - var urlParams = {}; - urlParams["var-apps"] = ["val2", "val1"]; - ctx.$location.search = sinon.stub().returns(urlParams); - ctx.service.init(dashboard).then(function() { done(); }); - ctx.$rootScope.$digest(); - }); - - it('should update current value', function() { - expect(variable.current.value.length).to.be(2); - expect(variable.current.value[0]).to.be("val2"); - expect(variable.current.value[1]).to.be("val1"); - expect(variable.current.text).to.be("val2 + val1"); - expect(variable.options[0].selected).to.be(true); - expect(variable.options[1].selected).to.be(true); - }); - - it('should set options that are not in value to selected false', function() { - expect(variable.options[2].selected).to.be(false); - }); - }); - }); }); From 524f5056640f44b612cc347603bb59f969fa84a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 10:08:05 +0200 Subject: [PATCH 09/18] tech(templating): refactoring, updated dashboardSrv to typescript --- public/app/features/dashboard/all.js | 2 +- public/app/features/dashboard/dashboardSrv.js | 552 ----------------- .../app/features/dashboard/dashboard_ctrl.ts | 2 - .../app/features/dashboard/dashboard_srv.ts | 582 ++++++++++++++++++ .../dashboard/specs/dashboard_srv_specs.ts | 379 ++++++++++++ .../specs/dynamic_dashboard_srv_specs.ts | 3 +- public/test/specs/dashboardSrv-specs.js | 388 ------------ public/test/specs/unsavedChangesSrv-specs.js | 2 +- 8 files changed, 965 insertions(+), 945 deletions(-) delete mode 100644 public/app/features/dashboard/dashboardSrv.js create mode 100644 public/app/features/dashboard/dashboard_srv.ts create mode 100644 public/app/features/dashboard/specs/dashboard_srv_specs.ts delete mode 100644 public/test/specs/dashboardSrv-specs.js diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 5ff221af85a..b49b910f95f 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -7,7 +7,7 @@ define([ './rowCtrl', './shareModalCtrl', './shareSnapshotCtrl', - './dashboardSrv', + './dashboard_srv', './keybindings', './viewStateSrv', './timeSrv', diff --git a/public/app/features/dashboard/dashboardSrv.js b/public/app/features/dashboard/dashboardSrv.js deleted file mode 100644 index 66801b64f00..00000000000 --- a/public/app/features/dashboard/dashboardSrv.js +++ /dev/null @@ -1,552 +0,0 @@ -define([ - 'angular', - 'jquery', - 'lodash', - 'moment', -], -function (angular, $, _, moment) { - 'use strict'; - - var module = angular.module('grafana.services'); - - module.factory('dashboardSrv', function(contextSrv) { - - function DashboardModel (data, meta) { - if (!data) { - data = {}; - } - - this.id = data.id || null; - this.title = data.title || 'No Title'; - this.autoUpdate = data.autoUpdate; - this.description = data.description; - this.tags = data.tags || []; - this.style = data.style || "dark"; - this.timezone = data.timezone || ''; - this.editable = data.editable !== false; - this.hideControls = data.hideControls || false; - this.sharedCrosshair = data.sharedCrosshair || false; - this.rows = data.rows || []; - this.time = data.time || { from: 'now-6h', to: 'now' }; - this.timepicker = data.timepicker || {}; - this.templating = this._ensureListExist(data.templating); - this.annotations = this._ensureListExist(data.annotations); - this.refresh = data.refresh; - this.snapshot = data.snapshot; - this.schemaVersion = data.schemaVersion || 0; - this.version = data.version || 0; - this.links = data.links || []; - this.gnetId = data.gnetId || null; - this._updateSchema(data); - this._initMeta(meta); - } - - var p = DashboardModel.prototype; - - p._initMeta = function(meta) { - meta = meta || {}; - - meta.canShare = meta.canShare !== false; - meta.canSave = meta.canSave !== false; - meta.canStar = meta.canStar !== false; - meta.canEdit = meta.canEdit !== false; - - if (!this.editable) { - meta.canEdit = false; - meta.canDelete = false; - meta.canSave = false; - this.hideControls = true; - } - - this.meta = meta; - }; - - // cleans meta data and other non peristent state - p.getSaveModelClone = function() { - var copy = $.extend(true, {}, this); - delete copy.meta; - return copy; - }; - - p._ensureListExist = function (data) { - if (!data) { data = {}; } - if (!data.list) { data.list = []; } - return data; - }; - - p.getNextPanelId = function() { - var i, j, row, panel, max = 0; - for (i = 0; i < this.rows.length; i++) { - row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - panel = row.panels[j]; - if (panel.id > max) { max = panel.id; } - } - } - return max + 1; - }; - - p.forEachPanel = function(callback) { - var i, j, row; - for (i = 0; i < this.rows.length; i++) { - row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - callback(row.panels[j], j, row, i); - } - } - }; - - p.getPanelById = function(id) { - for (var i = 0; i < this.rows.length; i++) { - var row = this.rows[i]; - for (var j = 0; j < row.panels.length; j++) { - var panel = row.panels[j]; - if (panel.id === id) { - return panel; - } - } - } - return null; - }; - - p.rowSpan = function(row) { - return _.reduce(row.panels, function(p,v) { - return p + v.span; - },0); - }; - - p.addPanel = function(panel, row) { - var rowSpan = this.rowSpan(row); - var panelCount = row.panels.length; - var space = (12 - rowSpan) - panel.span; - panel.id = this.getNextPanelId(); - - // try to make room of there is no space left - if (space <= 0) { - if (panelCount === 1) { - row.panels[0].span = 6; - panel.span = 6; - } - else if (panelCount === 2) { - row.panels[0].span = 4; - row.panels[1].span = 4; - panel.span = 4; - } - } - - row.panels.push(panel); - }; - - p.isSubmenuFeaturesEnabled = function() { - var visableTemplates = _.filter(this.templating.list, function(template) { - return template.hideVariable === undefined || template.hideVariable === false; - }); - - return visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0; - }; - - p.getPanelInfoById = function(panelId) { - var result = {}; - _.each(this.rows, function(row) { - _.each(row.panels, function(panel, index) { - if (panel.id === panelId) { - result.panel = panel; - result.row = row; - result.index = index; - } - }); - }); - - if (!result.panel) { - return null; - } - - return result; - }; - - p.duplicatePanel = function(panel, row) { - var rowIndex = _.indexOf(this.rows, row); - var newPanel = angular.copy(panel); - newPanel.id = this.getNextPanelId(); - - delete newPanel.repeat; - delete newPanel.repeatIteration; - delete newPanel.repeatPanelId; - delete newPanel.scopedVars; - - var currentRow = this.rows[rowIndex]; - currentRow.panels.push(newPanel); - return newPanel; - }; - - p.formatDate = function(date, format) { - date = moment.isMoment(date) ? date : moment(date); - format = format || 'YYYY-MM-DD HH:mm:ss'; - this.timezone = this.getTimezone(); - - return this.timezone === 'browser' ? - moment(date).format(format) : - moment.utc(date).format(format); - }; - - p.getRelativeTime = function(date) { - date = moment.isMoment(date) ? date : moment(date); - - return this.timezone === 'browser' ? - moment(date).fromNow() : - moment.utc(date).fromNow(); - }; - - p.getNextQueryLetter = function(panel) { - var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; - - return _.find(letters, function(refId) { - return _.every(panel.targets, function(other) { - return other.refId !== refId; - }); - }); - }; - - p.isTimezoneUtc = function() { - return this.getTimezone() === 'utc'; - }; - - p.getTimezone = function() { - return this.timezone ? this.timezone : contextSrv.user.timezone; - }; - - p._updateSchema = function(old) { - var i, j, k; - var oldVersion = this.schemaVersion; - var panelUpgrades = []; - this.schemaVersion = 13; - - if (oldVersion === this.schemaVersion) { - return; - } - - // version 2 schema changes - if (oldVersion < 2) { - - if (old.services) { - if (old.services.filter) { - this.time = old.services.filter.time; - this.templating.list = old.services.filter.list || []; - } - delete this.services; - } - - panelUpgrades.push(function(panel) { - // rename panel type - if (panel.type === 'graphite') { - panel.type = 'graph'; - } - - if (panel.type !== 'graph') { - return; - } - - if (_.isBoolean(panel.legend)) { panel.legend = { show: panel.legend }; } - - if (panel.grid) { - if (panel.grid.min) { - panel.grid.leftMin = panel.grid.min; - delete panel.grid.min; - } - - if (panel.grid.max) { - panel.grid.leftMax = panel.grid.max; - delete panel.grid.max; - } - } - - if (panel.y_format) { - panel.y_formats[0] = panel.y_format; - delete panel.y_format; - } - - if (panel.y2_format) { - panel.y_formats[1] = panel.y2_format; - delete panel.y2_format; - } - }); - } - - // schema version 3 changes - if (oldVersion < 3) { - // ensure panel ids - var maxId = this.getNextPanelId(); - panelUpgrades.push(function(panel) { - if (!panel.id) { - panel.id = maxId; - maxId += 1; - } - }); - } - - // schema version 4 changes - if (oldVersion < 4) { - // move aliasYAxis changes - panelUpgrades.push(function(panel) { - if (panel.type !== 'graph') { return; } - _.each(panel.aliasYAxis, function(value, key) { - panel.seriesOverrides = [{ alias: key, yaxis: value }]; - }); - delete panel.aliasYAxis; - }); - } - - if (oldVersion < 6) { - // move pulldowns to new schema - var annotations = _.find(old.pulldowns, { type: 'annotations' }); - - if (annotations) { - this.annotations = { - list: annotations.annotations || [], - }; - } - - // update template variables - for (i = 0 ; i < this.templating.list.length; i++) { - var variable = this.templating.list[i]; - if (variable.datasource === void 0) { variable.datasource = null; } - if (variable.type === 'filter') { variable.type = 'query'; } - if (variable.type === void 0) { variable.type = 'query'; } - if (variable.allFormat === void 0) { variable.allFormat = 'glob'; } - } - } - - if (oldVersion < 7) { - if (old.nav && old.nav.length) { - this.timepicker = old.nav[0]; - delete this.nav; - } - - // ensure query refIds - panelUpgrades.push(function(panel) { - _.each(panel.targets, function(target) { - if (!target.refId) { - target.refId = this.getNextQueryLetter(panel); - } - }.bind(this)); - }); - } - - if (oldVersion < 8) { - panelUpgrades.push(function(panel) { - _.each(panel.targets, function(target) { - // update old influxdb query schema - if (target.fields && target.tags && target.groupBy) { - if (target.rawQuery) { - delete target.fields; - delete target.fill; - } else { - target.select = _.map(target.fields, function(field) { - var parts = []; - parts.push({type: 'field', params: [field.name]}); - parts.push({type: field.func, params: []}); - if (field.mathExpr) { - parts.push({type: 'math', params: [field.mathExpr]}); - } - if (field.asExpr) { - parts.push({type: 'alias', params: [field.asExpr]}); - } - return parts; - }); - delete target.fields; - _.each(target.groupBy, function(part) { - if (part.type === 'time' && part.interval) { - part.params = [part.interval]; - delete part.interval; - } - if (part.type === 'tag' && part.key) { - part.params = [part.key]; - delete part.key; - } - }); - - if (target.fill) { - target.groupBy.push({type: 'fill', params: [target.fill]}); - delete target.fill; - } - } - } - }); - }); - } - - // schema version 9 changes - if (oldVersion < 9) { - // move aliasYAxis changes - panelUpgrades.push(function(panel) { - if (panel.type !== 'singlestat' && panel.thresholds !== "") { return; } - - if (panel.thresholds) { - var k = panel.thresholds.split(","); - - if (k.length >= 3) { - k.shift(); - panel.thresholds = k.join(","); - } - } - }); - } - - // schema version 10 changes - if (oldVersion < 10) { - // move aliasYAxis changes - panelUpgrades.push(function(panel) { - if (panel.type !== 'table') { return; } - - _.each(panel.styles, function(style) { - if (style.thresholds && style.thresholds.length >= 3) { - var k = style.thresholds; - k.shift(); - style.thresholds = k; - } - }); - }); - } - - if (oldVersion < 12) { - // update template variables - _.each(this.templating.list, function(templateVariable) { - if (templateVariable.refresh) { templateVariable.refresh = 1; } - if (!templateVariable.refresh) { templateVariable.refresh = 0; } - if (templateVariable.hideVariable) { - templateVariable.hide = 2; - } else if (templateVariable.hideLabel) { - templateVariable.hide = 1; - } else { - templateVariable.hide = 0; - } - }); - } - - if (oldVersion < 12) { - // update graph yaxes changes - panelUpgrades.push(function(panel) { - if (panel.type !== 'graph') { return; } - if (!panel.grid) { return; } - - if (!panel.yaxes) { - panel.yaxes = [ - { - show: panel['y-axis'], - min: panel.grid.leftMin, - max: panel.grid.leftMax, - logBase: panel.grid.leftLogBase, - format: panel.y_formats[0], - label: panel.leftYAxisLabel, - }, - { - show: panel['y-axis'], - min: panel.grid.rightMin, - max: panel.grid.rightMax, - logBase: panel.grid.rightLogBase, - format: panel.y_formats[1], - label: panel.rightYAxisLabel, - } - ]; - - panel.xaxis = { - show: panel['x-axis'], - }; - - delete panel.grid.leftMin; - delete panel.grid.leftMax; - delete panel.grid.leftLogBase; - delete panel.grid.rightMin; - delete panel.grid.rightMax; - delete panel.grid.rightLogBase; - delete panel.y_formats; - delete panel.leftYAxisLabel; - delete panel.rightYAxisLabel; - delete panel['y-axis']; - delete panel['x-axis']; - } - }); - } - - if (oldVersion < 13) { - // update graph yaxes changes - panelUpgrades.push(function(panel) { - if (panel.type !== 'graph') { return; } - - panel.thresholds = []; - var t1 = {}, t2 = {}; - - if (panel.grid.threshold1 !== null) { - t1.value = panel.grid.threshold1; - if (panel.grid.thresholdLine) { - t1.line = true; - t1.lineColor = panel.grid.threshold1Color; - } else { - t1.fill = true; - t1.fillColor = panel.grid.threshold1Color; - } - } - - if (panel.grid.threshold2 !== null) { - t2.value = panel.grid.threshold2; - if (panel.grid.thresholdLine) { - t2.line = true; - t2.lineColor = panel.grid.threshold2Color; - } else { - t2.fill = true; - t2.fillColor = panel.grid.threshold2Color; - } - } - - if (_.isNumber(t1.value)) { - if (_.isNumber(t2.value)) { - if (t1.value > t2.value) { - t1.op = t2.op = '<'; - panel.thresholds.push(t2); - panel.thresholds.push(t1); - } else { - t1.op = t2.op = '>'; - panel.thresholds.push(t2); - panel.thresholds.push(t1); - } - } else { - t1.op = '>'; - panel.thresholds.push(t1); - } - } - - delete panel.grid.threshold1; - delete panel.grid.threshold1Color; - delete panel.grid.threshold2; - delete panel.grid.threshold2Color; - delete panel.grid.thresholdLine; - }); - } - - if (panelUpgrades.length === 0) { - return; - } - - for (i = 0; i < this.rows.length; i++) { - var row = this.rows[i]; - for (j = 0; j < row.panels.length; j++) { - for (k = 0; k < panelUpgrades.length; k++) { - panelUpgrades[k].call(this, row.panels[j]); - } - } - } - }; - - return { - create: function(dashboard, meta) { - return new DashboardModel(dashboard, meta); - }, - setCurrent: function(dashboard) { - this.currentDashboard = dashboard; - }, - getCurrent: function() { - return this.currentDashboard; - }, - }; - }); -}); diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index 4f70d56bd7f..ac47d7d6440 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -87,8 +87,6 @@ export class DashboardCtrl { }; $scope.templateVariableUpdated = function() { - console.log('dynamic update'); - dynamicDashboardSrv.update($scope.dashboard); }; $scope.updateSubmenuVisibility = function() { diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts new file mode 100644 index 00000000000..e68133bd3a4 --- /dev/null +++ b/public/app/features/dashboard/dashboard_srv.ts @@ -0,0 +1,582 @@ +/// + +import config from 'app/core/config'; +import angular from 'angular'; +import moment from 'moment'; +import _ from 'lodash'; +import $ from 'jquery'; + +import coreModule from 'app/core/core_module'; + +export class DashboardModel { + id: any; + title: any; + autoUpdate: any; + description: any; + tags: any; + style: any; + timezone: any; + editable: any; + hideControls: any; + sharedCrosshair: any; + rows: any; + time: any; + timepicker: any; + templating: any; + annotations: any; + refresh: any; + snapshot: any; + schemaVersion: number; + version: number; + links: any; + gnetId: any; + meta: any; + contextSrv: any; + + constructor(data, meta, contextSrv) { + if (!data) { + data = {}; + } + + this.contextSrv = contextSrv; + this.id = data.id || null; + this.title = data.title || 'No Title'; + this.autoUpdate = data.autoUpdate; + this.description = data.description; + this.tags = data.tags || []; + this.style = data.style || "dark"; + this.timezone = data.timezone || ''; + this.editable = data.editable !== false; + this.hideControls = data.hideControls || false; + this.sharedCrosshair = data.sharedCrosshair || false; + this.rows = data.rows || []; + this.time = data.time || { from: 'now-6h', to: 'now' }; + this.timepicker = data.timepicker || {}; + this.templating = this.ensureListExist(data.templating); + this.annotations = this.ensureListExist(data.annotations); + this.refresh = data.refresh; + this.snapshot = data.snapshot; + this.schemaVersion = data.schemaVersion || 0; + this.version = data.version || 0; + this.links = data.links || []; + this.gnetId = data.gnetId || null; + + this.updateSchema(data); + this.initMeta(meta); + } + + private initMeta(meta) { + meta = meta || {}; + + meta.canShare = meta.canShare !== false; + meta.canSave = meta.canSave !== false; + meta.canStar = meta.canStar !== false; + meta.canEdit = meta.canEdit !== false; + + if (!this.editable) { + meta.canEdit = false; + meta.canDelete = false; + meta.canSave = false; + this.hideControls = true; + } + + this.meta = meta; + } + + // cleans meta data and other non peristent state + getSaveModelClone() { + var copy = $.extend(true, {}, this); + delete copy.meta; + return copy; + } + + private ensureListExist(data) { + if (!data) { data = {}; } + if (!data.list) { data.list = []; } + return data; + } + + getNextPanelId() { + var i, j, row, panel, max = 0; + for (i = 0; i < this.rows.length; i++) { + row = this.rows[i]; + for (j = 0; j < row.panels.length; j++) { + panel = row.panels[j]; + if (panel.id > max) { max = panel.id; } + } + } + return max + 1; + } + + forEachPanel(callback) { + var i, j, row; + for (i = 0; i < this.rows.length; i++) { + row = this.rows[i]; + for (j = 0; j < row.panels.length; j++) { + callback(row.panels[j], j, row, i); + } + } + } + + getPanelById(id) { + for (var i = 0; i < this.rows.length; i++) { + var row = this.rows[i]; + for (var j = 0; j < row.panels.length; j++) { + var panel = row.panels[j]; + if (panel.id === id) { + return panel; + } + } + } + return null; + } + + rowSpan(row) { + return _.reduce(row.panels, function(p,v) { + return p + v.span; + },0); + }; + + addPanel(panel, row) { + var rowSpan = this.rowSpan(row); + var panelCount = row.panels.length; + var space = (12 - rowSpan) - panel.span; + panel.id = this.getNextPanelId(); + + // try to make room of there is no space left + if (space <= 0) { + if (panelCount === 1) { + row.panels[0].span = 6; + panel.span = 6; + } else if (panelCount === 2) { + row.panels[0].span = 4; + row.panels[1].span = 4; + panel.span = 4; + } + } + + row.panels.push(panel); + } + + isSubmenuFeaturesEnabled() { + var visableTemplates = _.filter(this.templating.list, function(template) { + return template.hideVariable === undefined || template.hideVariable === false; + }); + + return visableTemplates.length > 0 || this.annotations.list.length > 0 || this.links.length > 0; + } + + getPanelInfoById(panelId) { + var result: any = {}; + _.each(this.rows, function(row) { + _.each(row.panels, function(panel, index) { + if (panel.id === panelId) { + result.panel = panel; + result.row = row; + result.index = index; + } + }); + }); + + if (!result.panel) { + return null; + } + + return result; + } + + duplicatePanel(panel, row) { + var rowIndex = _.indexOf(this.rows, row); + var newPanel = angular.copy(panel); + newPanel.id = this.getNextPanelId(); + + delete newPanel.repeat; + delete newPanel.repeatIteration; + delete newPanel.repeatPanelId; + delete newPanel.scopedVars; + + var currentRow = this.rows[rowIndex]; + currentRow.panels.push(newPanel); + return newPanel; + } + + formatDate(date, format) { + date = moment.isMoment(date) ? date : moment(date); + format = format || 'YYYY-MM-DD HH:mm:ss'; + this.timezone = this.getTimezone(); + + return this.timezone === 'browser' ? + moment(date).format(format) : + moment.utc(date).format(format); + } + + getRelativeTime(date) { + date = moment.isMoment(date) ? date : moment(date); + + return this.timezone === 'browser' ? + moment(date).fromNow() : + moment.utc(date).fromNow(); + } + + getNextQueryLetter(panel) { + var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + + return _.find(letters, function(refId) { + return _.every(panel.targets, function(other) { + return other.refId !== refId; + }); + }); + } + + isTimezoneUtc() { + return this.getTimezone() === 'utc'; + } + + getTimezone() { + return this.timezone ? this.timezone : this.contextSrv.user.timezone; + } + + private updateSchema(old) { + var i, j, k; + var oldVersion = this.schemaVersion; + var panelUpgrades = []; + this.schemaVersion = 13; + + if (oldVersion === this.schemaVersion) { + return; + } + + // version 2 schema changes + if (oldVersion < 2) { + + if (old.services) { + if (old.services.filter) { + this.time = old.services.filter.time; + this.templating.list = old.services.filter.list || []; + } + } + + panelUpgrades.push(function(panel) { + // rename panel type + if (panel.type === 'graphite') { + panel.type = 'graph'; + } + + if (panel.type !== 'graph') { + return; + } + + if (_.isBoolean(panel.legend)) { panel.legend = { show: panel.legend }; } + + if (panel.grid) { + if (panel.grid.min) { + panel.grid.leftMin = panel.grid.min; + delete panel.grid.min; + } + + if (panel.grid.max) { + panel.grid.leftMax = panel.grid.max; + delete panel.grid.max; + } + } + + if (panel.y_format) { + panel.y_formats[0] = panel.y_format; + delete panel.y_format; + } + + if (panel.y2_format) { + panel.y_formats[1] = panel.y2_format; + delete panel.y2_format; + } + }); + } + + // schema version 3 changes + if (oldVersion < 3) { + // ensure panel ids + var maxId = this.getNextPanelId(); + panelUpgrades.push(function(panel) { + if (!panel.id) { + panel.id = maxId; + maxId += 1; + } + }); + } + + // schema version 4 changes + if (oldVersion < 4) { + // move aliasYAxis changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'graph') { return; } + _.each(panel.aliasYAxis, function(value, key) { + panel.seriesOverrides = [{ alias: key, yaxis: value }]; + }); + delete panel.aliasYAxis; + }); + } + + if (oldVersion < 6) { + // move pulldowns to new schema + var annotations = _.find(old.pulldowns, { type: 'annotations' }); + + if (annotations) { + this.annotations = { + list: annotations.annotations || [], + }; + } + + // update template variables + for (i = 0 ; i < this.templating.list.length; i++) { + var variable = this.templating.list[i]; + if (variable.datasource === void 0) { variable.datasource = null; } + if (variable.type === 'filter') { variable.type = 'query'; } + if (variable.type === void 0) { variable.type = 'query'; } + if (variable.allFormat === void 0) { variable.allFormat = 'glob'; } + } + } + + if (oldVersion < 7) { + if (old.nav && old.nav.length) { + this.timepicker = old.nav[0]; + } + + // ensure query refIds + panelUpgrades.push(function(panel) { + _.each(panel.targets, function(target) { + if (!target.refId) { + target.refId = this.getNextQueryLetter(panel); + } + }.bind(this)); + }); + } + + if (oldVersion < 8) { + panelUpgrades.push(function(panel) { + _.each(panel.targets, function(target) { + // update old influxdb query schema + if (target.fields && target.tags && target.groupBy) { + if (target.rawQuery) { + delete target.fields; + delete target.fill; + } else { + target.select = _.map(target.fields, function(field) { + var parts = []; + parts.push({type: 'field', params: [field.name]}); + parts.push({type: field.func, params: []}); + if (field.mathExpr) { + parts.push({type: 'math', params: [field.mathExpr]}); + } + if (field.asExpr) { + parts.push({type: 'alias', params: [field.asExpr]}); + } + return parts; + }); + delete target.fields; + _.each(target.groupBy, function(part) { + if (part.type === 'time' && part.interval) { + part.params = [part.interval]; + delete part.interval; + } + if (part.type === 'tag' && part.key) { + part.params = [part.key]; + delete part.key; + } + }); + + if (target.fill) { + target.groupBy.push({type: 'fill', params: [target.fill]}); + delete target.fill; + } + } + } + }); + }); + } + + // schema version 9 changes + if (oldVersion < 9) { + // move aliasYAxis changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'singlestat' && panel.thresholds !== "") { return; } + + if (panel.thresholds) { + var k = panel.thresholds.split(","); + + if (k.length >= 3) { + k.shift(); + panel.thresholds = k.join(","); + } + } + }); + } + + // schema version 10 changes + if (oldVersion < 10) { + // move aliasYAxis changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'table') { return; } + + _.each(panel.styles, function(style) { + if (style.thresholds && style.thresholds.length >= 3) { + var k = style.thresholds; + k.shift(); + style.thresholds = k; + } + }); + }); + } + + if (oldVersion < 12) { + // update template variables + _.each(this.templating.list, function(templateVariable) { + if (templateVariable.refresh) { templateVariable.refresh = 1; } + if (!templateVariable.refresh) { templateVariable.refresh = 0; } + if (templateVariable.hideVariable) { + templateVariable.hide = 2; + } else if (templateVariable.hideLabel) { + templateVariable.hide = 1; + } else { + templateVariable.hide = 0; + } + }); + } + + if (oldVersion < 12) { + // update graph yaxes changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'graph') { return; } + if (!panel.grid) { return; } + + if (!panel.yaxes) { + panel.yaxes = [ + { + show: panel['y-axis'], + min: panel.grid.leftMin, + max: panel.grid.leftMax, + logBase: panel.grid.leftLogBase, + format: panel.y_formats[0], + label: panel.leftYAxisLabel, + }, + { + show: panel['y-axis'], + min: panel.grid.rightMin, + max: panel.grid.rightMax, + logBase: panel.grid.rightLogBase, + format: panel.y_formats[1], + label: panel.rightYAxisLabel, + } + ]; + + panel.xaxis = { + show: panel['x-axis'], + }; + + delete panel.grid.leftMin; + delete panel.grid.leftMax; + delete panel.grid.leftLogBase; + delete panel.grid.rightMin; + delete panel.grid.rightMax; + delete panel.grid.rightLogBase; + delete panel.y_formats; + delete panel.leftYAxisLabel; + delete panel.rightYAxisLabel; + delete panel['y-axis']; + delete panel['x-axis']; + } + }); + } + + if (oldVersion < 13) { + // update graph yaxes changes + panelUpgrades.push(function(panel) { + if (panel.type !== 'graph') { return; } + + panel.thresholds = []; + var t1: any = {}, t2: any = {}; + + if (panel.grid.threshold1 !== null) { + t1.value = panel.grid.threshold1; + if (panel.grid.thresholdLine) { + t1.line = true; + t1.lineColor = panel.grid.threshold1Color; + } else { + t1.fill = true; + t1.fillColor = panel.grid.threshold1Color; + } + } + + if (panel.grid.threshold2 !== null) { + t2.value = panel.grid.threshold2; + if (panel.grid.thresholdLine) { + t2.line = true; + t2.lineColor = panel.grid.threshold2Color; + } else { + t2.fill = true; + t2.fillColor = panel.grid.threshold2Color; + } + } + + if (_.isNumber(t1.value)) { + if (_.isNumber(t2.value)) { + if (t1.value > t2.value) { + t1.op = t2.op = '<'; + panel.thresholds.push(t2); + panel.thresholds.push(t1); + } else { + t1.op = t2.op = '>'; + panel.thresholds.push(t2); + panel.thresholds.push(t1); + } + } else { + t1.op = '>'; + panel.thresholds.push(t1); + } + } + + delete panel.grid.threshold1; + delete panel.grid.threshold1Color; + delete panel.grid.threshold2; + delete panel.grid.threshold2Color; + delete panel.grid.thresholdLine; + }); + } + + if (panelUpgrades.length === 0) { + return; + } + + for (i = 0; i < this.rows.length; i++) { + var row = this.rows[i]; + for (j = 0; j < row.panels.length; j++) { + for (k = 0; k < panelUpgrades.length; k++) { + panelUpgrades[k].call(this, row.panels[j]); + } + } + } + } +} + + +export class DashboardSrv { + currentDashboard: any; + + /** @ngInject */ + constructor(private contextSrv) { + } + + create(dashboard, meta) { + return new DashboardModel(dashboard, meta, this.contextSrv); + } + + setCurrent(dashboard) { + this.currentDashboard = dashboard; + } + + getCurrent() { + return this.currentDashboard; + } +} + +coreModule.service('dashboardSrv', DashboardSrv); + diff --git a/public/app/features/dashboard/specs/dashboard_srv_specs.ts b/public/app/features/dashboard/specs/dashboard_srv_specs.ts new file mode 100644 index 00000000000..3c17053dff0 --- /dev/null +++ b/public/app/features/dashboard/specs/dashboard_srv_specs.ts @@ -0,0 +1,379 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import {DashboardSrv} from '../dashboard_srv'; + +describe('dashboardSrv', function() { + var _dashboardSrv; + + beforeEach(() => { + _dashboardSrv = new DashboardSrv({}); + }); + + describe('when creating new dashboard with defaults only', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({}, {}); + }); + + it('should have title', function() { + expect(model.title).to.be('No Title'); + }); + + it('should have meta', function() { + expect(model.meta.canSave).to.be(true); + expect(model.meta.canShare).to.be(true); + }); + + it('should have default properties', function() { + expect(model.rows.length).to.be(0); + }); + }); + + describe('when getting next panel id', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({ + rows: [{ panels: [{ id: 5 }]}] + }); + }); + + it('should return max id + 1', function() { + expect(model.getNextPanelId()).to.be(6); + }); + }); + + describe('row and panel manipulation', function() { + var dashboard; + + beforeEach(function() { + dashboard = _dashboardSrv.create({}); + }); + + it('row span should sum spans', function() { + var spanLeft = dashboard.rowSpan({ panels: [{ span: 2 }, { span: 3 }] }); + expect(spanLeft).to.be(5); + }); + + it('adding default should split span in half', function() { + dashboard.rows = [{ panels: [{ span: 12, id: 7 }] }]; + dashboard.addPanel({span: 4}, dashboard.rows[0]); + + expect(dashboard.rows[0].panels[0].span).to.be(6); + expect(dashboard.rows[0].panels[1].span).to.be(6); + expect(dashboard.rows[0].panels[1].id).to.be(8); + }); + + it('duplicate panel should try to add it to same row', function() { + var panel = { span: 4, attr: '123', id: 10 }; + dashboard.rows = [{ panels: [panel] }]; + dashboard.duplicatePanel(panel, dashboard.rows[0]); + + expect(dashboard.rows[0].panels[0].span).to.be(4); + expect(dashboard.rows[0].panels[1].span).to.be(4); + expect(dashboard.rows[0].panels[1].attr).to.be('123'); + expect(dashboard.rows[0].panels[1].id).to.be(11); + }); + + it('duplicate panel should remove repeat data', function() { + var panel = { span: 4, attr: '123', id: 10, repeat: 'asd', scopedVars: { test: 'asd' }}; + dashboard.rows = [{ panels: [panel] }]; + dashboard.duplicatePanel(panel, dashboard.rows[0]); + + expect(dashboard.rows[0].panels[1].repeat).to.be(undefined); + expect(dashboard.rows[0].panels[1].scopedVars).to.be(undefined); + }); + + }); + + describe('when creating dashboard with editable false', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({ + editable: false + }); + }); + + it('should set editable false', function() { + expect(model.editable).to.be(false); + }); + + }); + + describe('when creating dashboard with old schema', function() { + var model; + var graph; + var singlestat; + var table; + + beforeEach(function() { + model = _dashboardSrv.create({ + services: { filter: { time: { from: 'now-1d', to: 'now'}, list: [{}] }}, + pulldowns: [ + {type: 'filtering', enable: true}, + {type: 'annotations', enable: true, annotations: [{name: 'old'}]} + ], + rows: [ + { + panels: [ + { + type: 'graph', legend: true, aliasYAxis: { test: 2 }, + y_formats: ['kbyte', 'ms'], + grid: { + min: 1, + max: 10, + rightMin: 5, + rightMax: 15, + leftLogBase: 1, + rightLogBase: 2, + threshold1: 200, + threshold2: 400, + threshold1Color: 'yellow', + threshold2Color: 'red', + }, + leftYAxisLabel: 'left label', + targets: [{refId: 'A'}, {}], + }, + { + type: 'singlestat', legend: true, thresholds: '10,20,30', aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 }, + targets: [{refId: 'A'}, {}], + }, + { + type: 'table', legend: true, styles: [{ thresholds: ["10", "20", "30"]}, { thresholds: ["100", "200", "300"]}], + targets: [{refId: 'A'}, {}], + } + ] + } + ] + }); + + graph = model.rows[0].panels[0]; + singlestat = model.rows[0].panels[1]; + table = model.rows[0].panels[2]; + }); + + it('should have title', function() { + expect(model.title).to.be('No Title'); + }); + + it('should have panel id', function() { + expect(graph.id).to.be(1); + }); + + it('should move time and filtering list', function() { + expect(model.time.from).to.be('now-1d'); + expect(model.templating.list[0].allFormat).to.be('glob'); + }); + + it('graphite panel should change name too graph', function() { + expect(graph.type).to.be('graph'); + }); + + it('single stat panel should have two thresholds', function() { + expect(singlestat.thresholds).to.be('20,30'); + }); + + it('queries without refId should get it', function() { + expect(graph.targets[1].refId).to.be('B'); + }); + + it('update legend setting', function() { + expect(graph.legend.show).to.be(true); + }); + + it('move aliasYAxis to series override', function() { + expect(graph.seriesOverrides[0].alias).to.be("test"); + expect(graph.seriesOverrides[0].yaxis).to.be(2); + }); + + it('should move pulldowns to new schema', function() { + expect(model.annotations.list[0].name).to.be('old'); + }); + + it('table panel should only have two thresholds values', function() { + expect(table.styles[0].thresholds[0]).to.be("20"); + expect(table.styles[0].thresholds[1]).to.be("30"); + expect(table.styles[1].thresholds[0]).to.be("200"); + expect(table.styles[1].thresholds[1]).to.be("300"); + }); + + it('graph grid to yaxes options', function() { + expect(graph.yaxes[0].min).to.be(1); + expect(graph.yaxes[0].max).to.be(10); + expect(graph.yaxes[0].format).to.be('kbyte'); + expect(graph.yaxes[0].label).to.be('left label'); + expect(graph.yaxes[0].logBase).to.be(1); + expect(graph.yaxes[1].min).to.be(5); + expect(graph.yaxes[1].max).to.be(15); + expect(graph.yaxes[1].format).to.be('ms'); + expect(graph.yaxes[1].logBase).to.be(2); + + expect(graph.grid.rightMax).to.be(undefined); + expect(graph.grid.rightLogBase).to.be(undefined); + expect(graph.y_formats).to.be(undefined); + }); + + it('dashboard schema version should be set to latest', function() { + expect(model.schemaVersion).to.be(13); + }); + + it('graph thresholds should be migrated', function() { + expect(graph.thresholds.length).to.be(2); + expect(graph.thresholds[0].op).to.be('>'); + expect(graph.thresholds[0].value).to.be(400); + expect(graph.thresholds[0].fillColor).to.be('red'); + expect(graph.thresholds[1].value).to.be(200); + expect(graph.thresholds[1].fillColor).to.be('yellow'); + }); + }); + + describe('when creating dashboard model with missing list for annoations or templating', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({ + annotations: { + enable: true, + }, + templating: { + enable: true + } + }); + }); + + it('should add empty list', function() { + expect(model.annotations.list.length).to.be(0); + expect(model.templating.list.length).to.be(0); + }); + }); + + describe('Given editable false dashboard', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({ + editable: false, + }); + }); + + it('Should set meta canEdit and canSave to false', function() { + expect(model.meta.canSave).to.be(false); + expect(model.meta.canEdit).to.be(false); + }); + + it('getSaveModelClone should remove meta', function() { + var clone = model.getSaveModelClone(); + expect(clone.meta).to.be(undefined); + }); + }); + + describe('when loading dashboard with old influxdb query schema', function() { + var model; + var target; + + beforeEach(function() { + model = _dashboardSrv.create({ + rows: [{ + panels: [{ + type: 'graph', + grid: {}, + yaxes: [{}, {}], + targets: [{ + "alias": "$tag_datacenter $tag_source $col", + "column": "value", + "measurement": "logins.count", + "fields": [ + { + "func": "mean", + "name": "value", + "mathExpr": "*2", + "asExpr": "value" + }, + { + "name": "one-minute", + "func": "mean", + "mathExpr": "*3", + "asExpr": "one-minute" + } + ], + "tags": [], + "fill": "previous", + "function": "mean", + "groupBy": [ + { + "interval": "auto", + "type": "time" + }, + { + "key": "source", + "type": "tag" + }, + { + "type": "tag", + "key": "datacenter" + } + ], + }] + }] + }] + }); + + target = model.rows[0].panels[0].targets[0]; + }); + + it('should update query schema', function() { + expect(target.fields).to.be(undefined); + expect(target.select.length).to.be(2); + expect(target.select[0].length).to.be(4); + expect(target.select[0][0].type).to.be('field'); + expect(target.select[0][1].type).to.be('mean'); + expect(target.select[0][2].type).to.be('math'); + expect(target.select[0][3].type).to.be('alias'); + }); + + }); + + describe('when creating dashboard model with missing list for annoations or templating', function() { + var model; + + beforeEach(function() { + model = _dashboardSrv.create({ + annotations: { + enable: true, + }, + templating: { + enable: true + } + }); + }); + + it('should add empty list', function() { + expect(model.annotations.list.length).to.be(0); + expect(model.templating.list.length).to.be(0); + }); + }); + + describe('Formatting epoch timestamp when timezone is set as utc', function() { + var dashboard; + + beforeEach(function() { + dashboard = _dashboardSrv.create({ + timezone: 'utc', + }); + }); + + it('Should format timestamp with second resolution by default', function() { + expect(dashboard.formatDate(1234567890000)).to.be('2009-02-13 23:31:30'); + }); + + it('Should format timestamp with second resolution even if second format is passed as parameter', function() { + expect(dashboard.formatDate(1234567890007,'YYYY-MM-DD HH:mm:ss')).to.be('2009-02-13 23:31:30'); + }); + + it('Should format timestamp with millisecond resolution if format is passed as parameter', function() { + expect(dashboard.formatDate(1234567890007,'YYYY-MM-DD HH:mm:ss.SSS')).to.be('2009-02-13 23:31:30.007'); + }); + }); +}); diff --git a/public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts b/public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts index fbc1913ca30..0173c6569a5 100644 --- a/public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts +++ b/public/app/features/dashboard/specs/dynamic_dashboard_srv_specs.ts @@ -1,6 +1,6 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; -import 'app/features/dashboard/dashboardSrv'; +import {DashboardSrv} from '../dashboard_srv'; import {DynamicDashboardSrv} from '../dynamic_dashboard_srv'; function dynamicDashScenario(desc, func) { @@ -10,6 +10,7 @@ function dynamicDashScenario(desc, func) { ctx.setup = function (setupFunc) { + beforeEach(angularMocks.module('grafana.core')); beforeEach(angularMocks.module('grafana.services')); beforeEach(angularMocks.module(function($provide) { $provide.value('contextSrv', { diff --git a/public/test/specs/dashboardSrv-specs.js b/public/test/specs/dashboardSrv-specs.js deleted file mode 100644 index 65441bb3b41..00000000000 --- a/public/test/specs/dashboardSrv-specs.js +++ /dev/null @@ -1,388 +0,0 @@ -define([ - 'app/features/dashboard/dashboardSrv' -], function() { - 'use strict'; - - describe('dashboardSrv', function() { - var _dashboardSrv; - - beforeEach(module('grafana.services')); - beforeEach(module(function($provide) { - $provide.value('contextSrv', { - }); - })); - - beforeEach(inject(function(dashboardSrv) { - _dashboardSrv = dashboardSrv; - })); - - describe('when creating new dashboard with defaults only', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({}, {}); - }); - - it('should have title', function() { - expect(model.title).to.be('No Title'); - }); - - it('should have meta', function() { - expect(model.meta.canSave).to.be(true); - expect(model.meta.canShare).to.be(true); - }); - - it('should have default properties', function() { - expect(model.rows.length).to.be(0); - }); - }); - - describe('when getting next panel id', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({ - rows: [{ panels: [{ id: 5 }]}] - }); - }); - - it('should return max id + 1', function() { - expect(model.getNextPanelId()).to.be(6); - }); - }); - - describe('row and panel manipulation', function() { - var dashboard; - - beforeEach(function() { - dashboard = _dashboardSrv.create({}); - }); - - it('row span should sum spans', function() { - var spanLeft = dashboard.rowSpan({ panels: [{ span: 2 }, { span: 3 }] }); - expect(spanLeft).to.be(5); - }); - - it('adding default should split span in half', function() { - dashboard.rows = [{ panels: [{ span: 12, id: 7 }] }]; - dashboard.addPanel({span: 4}, dashboard.rows[0]); - - expect(dashboard.rows[0].panels[0].span).to.be(6); - expect(dashboard.rows[0].panels[1].span).to.be(6); - expect(dashboard.rows[0].panels[1].id).to.be(8); - }); - - it('duplicate panel should try to add it to same row', function() { - var panel = { span: 4, attr: '123', id: 10 }; - dashboard.rows = [{ panels: [panel] }]; - dashboard.duplicatePanel(panel, dashboard.rows[0]); - - expect(dashboard.rows[0].panels[0].span).to.be(4); - expect(dashboard.rows[0].panels[1].span).to.be(4); - expect(dashboard.rows[0].panels[1].attr).to.be('123'); - expect(dashboard.rows[0].panels[1].id).to.be(11); - }); - - it('duplicate panel should remove repeat data', function() { - var panel = { span: 4, attr: '123', id: 10, repeat: 'asd', scopedVars: { test: 'asd' }}; - dashboard.rows = [{ panels: [panel] }]; - dashboard.duplicatePanel(panel, dashboard.rows[0]); - - expect(dashboard.rows[0].panels[1].repeat).to.be(undefined); - expect(dashboard.rows[0].panels[1].scopedVars).to.be(undefined); - }); - - }); - - describe('when creating dashboard with editable false', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({ - editable: false - }); - }); - - it('should set editable false', function() { - expect(model.editable).to.be(false); - }); - - }); - - describe('when creating dashboard with old schema', function() { - var model; - var graph; - var singlestat; - var table; - - beforeEach(function() { - model = _dashboardSrv.create({ - services: { filter: { time: { from: 'now-1d', to: 'now'}, list: [{}] }}, - pulldowns: [ - {type: 'filtering', enable: true}, - {type: 'annotations', enable: true, annotations: [{name: 'old'}]} - ], - rows: [ - { - panels: [ - { - type: 'graph', legend: true, aliasYAxis: { test: 2 }, - y_formats: ['kbyte', 'ms'], - grid: { - min: 1, - max: 10, - rightMin: 5, - rightMax: 15, - leftLogBase: 1, - rightLogBase: 2, - threshold1: 200, - threshold2: 400, - threshold1Color: 'yellow', - threshold2Color: 'red', - }, - leftYAxisLabel: 'left label', - targets: [{refId: 'A'}, {}], - }, - { - type: 'singlestat', legend: true, thresholds: '10,20,30', aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 }, - targets: [{refId: 'A'}, {}], - }, - { - type: 'table', legend: true, styles: [{ thresholds: ["10", "20", "30"]}, { thresholds: ["100", "200", "300"]}], - targets: [{refId: 'A'}, {}], - } - ] - } - ] - }); - - graph = model.rows[0].panels[0]; - singlestat = model.rows[0].panels[1]; - table = model.rows[0].panels[2]; - }); - - it('should have title', function() { - expect(model.title).to.be('No Title'); - }); - - it('should have panel id', function() { - expect(graph.id).to.be(1); - }); - - it('should move time and filtering list', function() { - expect(model.time.from).to.be('now-1d'); - expect(model.templating.list[0].allFormat).to.be('glob'); - }); - - it('graphite panel should change name too graph', function() { - expect(graph.type).to.be('graph'); - }); - - it('single stat panel should have two thresholds', function() { - expect(singlestat.thresholds).to.be('20,30'); - }); - - it('queries without refId should get it', function() { - expect(graph.targets[1].refId).to.be('B'); - }); - - it('update legend setting', function() { - expect(graph.legend.show).to.be(true); - }); - - it('move aliasYAxis to series override', function() { - expect(graph.seriesOverrides[0].alias).to.be("test"); - expect(graph.seriesOverrides[0].yaxis).to.be(2); - }); - - it('should move pulldowns to new schema', function() { - expect(model.annotations.list[0].name).to.be('old'); - }); - - it('table panel should only have two thresholds values', function() { - expect(table.styles[0].thresholds[0]).to.be("20"); - expect(table.styles[0].thresholds[1]).to.be("30"); - expect(table.styles[1].thresholds[0]).to.be("200"); - expect(table.styles[1].thresholds[1]).to.be("300"); - }); - - it('graph grid to yaxes options', function() { - expect(graph.yaxes[0].min).to.be(1); - expect(graph.yaxes[0].max).to.be(10); - expect(graph.yaxes[0].format).to.be('kbyte'); - expect(graph.yaxes[0].label).to.be('left label'); - expect(graph.yaxes[0].logBase).to.be(1); - expect(graph.yaxes[1].min).to.be(5); - expect(graph.yaxes[1].max).to.be(15); - expect(graph.yaxes[1].format).to.be('ms'); - expect(graph.yaxes[1].logBase).to.be(2); - - expect(graph.grid.rightMax).to.be(undefined); - expect(graph.grid.rightLogBase).to.be(undefined); - expect(graph.y_formats).to.be(undefined); - }); - - it('dashboard schema version should be set to latest', function() { - expect(model.schemaVersion).to.be(13); - }); - - it('graph thresholds should be migrated', function() { - expect(graph.thresholds.length).to.be(2); - expect(graph.thresholds[0].op).to.be('>'); - expect(graph.thresholds[0].value).to.be(400); - expect(graph.thresholds[0].fillColor).to.be('red'); - expect(graph.thresholds[1].value).to.be(200); - expect(graph.thresholds[1].fillColor).to.be('yellow'); - }); - }); - - describe('when creating dashboard model with missing list for annoations or templating', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({ - annotations: { - enable: true, - }, - templating: { - enable: true - } - }); - }); - - it('should add empty list', function() { - expect(model.annotations.list.length).to.be(0); - expect(model.templating.list.length).to.be(0); - }); - }); - - describe('Given editable false dashboard', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({ - editable: false, - }); - }); - - it('Should set meta canEdit and canSave to false', function() { - expect(model.meta.canSave).to.be(false); - expect(model.meta.canEdit).to.be(false); - }); - - it('getSaveModelClone should remove meta', function() { - var clone = model.getSaveModelClone(); - expect(clone.meta).to.be(undefined); - }); - }); - - describe('when loading dashboard with old influxdb query schema', function() { - var model; - var target; - - beforeEach(function() { - model = _dashboardSrv.create({ - rows: [{ - panels: [{ - type: 'graph', - grid: {}, - yaxes: [{}, {}], - targets: [{ - "alias": "$tag_datacenter $tag_source $col", - "column": "value", - "measurement": "logins.count", - "fields": [ - { - "func": "mean", - "name": "value", - "mathExpr": "*2", - "asExpr": "value" - }, - { - "name": "one-minute", - "func": "mean", - "mathExpr": "*3", - "asExpr": "one-minute" - } - ], - "tags": [], - "fill": "previous", - "function": "mean", - "groupBy": [ - { - "interval": "auto", - "type": "time" - }, - { - "key": "source", - "type": "tag" - }, - { - "type": "tag", - "key": "datacenter" - } - ], - }] - }] - }] - }); - - target = model.rows[0].panels[0].targets[0]; - }); - - it('should update query schema', function() { - expect(target.fields).to.be(undefined); - expect(target.select.length).to.be(2); - expect(target.select[0].length).to.be(4); - expect(target.select[0][0].type).to.be('field'); - expect(target.select[0][1].type).to.be('mean'); - expect(target.select[0][2].type).to.be('math'); - expect(target.select[0][3].type).to.be('alias'); - }); - - }); - - describe('when creating dashboard model with missing list for annoations or templating', function() { - var model; - - beforeEach(function() { - model = _dashboardSrv.create({ - annotations: { - enable: true, - }, - templating: { - enable: true - } - }); - }); - - it('should add empty list', function() { - expect(model.annotations.list.length).to.be(0); - expect(model.templating.list.length).to.be(0); - }); - }); - - describe('Formatting epoch timestamp when timezone is set as utc', function() { - var dashboard; - - beforeEach(function() { - dashboard = _dashboardSrv.create({ - timezone: 'utc', - }); - }); - - it('Should format timestamp with second resolution by default', function() { - expect(dashboard.formatDate(1234567890000)).to.be('2009-02-13 23:31:30'); - }); - - it('Should format timestamp with second resolution even if second format is passed as parameter', function() { - expect(dashboard.formatDate(1234567890007,'YYYY-MM-DD HH:mm:ss')).to.be('2009-02-13 23:31:30'); - }); - - it('Should format timestamp with millisecond resolution if format is passed as parameter', function() { - expect(dashboard.formatDate(1234567890007,'YYYY-MM-DD HH:mm:ss.SSS')).to.be('2009-02-13 23:31:30.007'); - }); - }); - - }); -}); diff --git a/public/test/specs/unsavedChangesSrv-specs.js b/public/test/specs/unsavedChangesSrv-specs.js index ddbbb557055..c69c2f67885 100644 --- a/public/test/specs/unsavedChangesSrv-specs.js +++ b/public/test/specs/unsavedChangesSrv-specs.js @@ -1,6 +1,6 @@ define([ 'app/features/dashboard/unsavedChangesSrv', - 'app/features/dashboard/dashboardSrv' + 'app/features/dashboard/dashboard_srv' ], function() { 'use strict'; From 5ded88fa4d8a687070c7fded84a8651777826aa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 11:34:08 +0200 Subject: [PATCH 10/18] feat(templating): progress on variable system refactoring, #6048 --- public/app/core/services/context_srv.ts | 1 + .../app/features/dashboard/dashboard_srv.ts | 28 +-- .../dashboard/specs/dashboard_srv_specs.ts | 2 +- public/app/features/dashboard/viewStateSrv.js | 2 +- public/app/features/templating/all.ts | 1 - .../features/templating/interval_variable.ts | 4 +- .../specs/variabe_srv_init_specs.ts | 88 ---------- .../specs/variable_srv_init_specs.ts | 8 +- .../templating/specs/variable_srv_specs.ts | 9 +- .../app/features/templating/variable_srv.ts | 165 ++++++++++-------- public/test/core/utils/emitter_specs.ts | 16 ++ public/test/specs/unsavedChangesSrv-specs.js | 1 + 12 files changed, 142 insertions(+), 183 deletions(-) delete mode 100644 public/app/features/templating/specs/variabe_srv_init_specs.ts diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index 41d99c3198f..ac00528db20 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -9,6 +9,7 @@ export class User { isGrafanaAdmin: any; isSignedIn: any; orgRole: any; + timezone: string; constructor() { if (config.bootData.user) { diff --git a/public/app/features/dashboard/dashboard_srv.ts b/public/app/features/dashboard/dashboard_srv.ts index e68133bd3a4..289e3a841f5 100644 --- a/public/app/features/dashboard/dashboard_srv.ts +++ b/public/app/features/dashboard/dashboard_srv.ts @@ -6,6 +6,8 @@ import moment from 'moment'; import _ from 'lodash'; import $ from 'jquery'; +import {Emitter} from 'app/core/core'; +import {contextSrv} from 'app/core/services/context_srv'; import coreModule from 'app/core/core_module'; export class DashboardModel { @@ -31,14 +33,14 @@ export class DashboardModel { links: any; gnetId: any; meta: any; - contextSrv: any; + events: any; - constructor(data, meta, contextSrv) { + constructor(data, meta) { if (!data) { data = {}; } - this.contextSrv = contextSrv; + this.events = new Emitter(); this.id = data.id || null; this.title = data.title || 'No Title'; this.autoUpdate = data.autoUpdate; @@ -85,8 +87,18 @@ export class DashboardModel { // cleans meta data and other non peristent state getSaveModelClone() { + // temp remove stuff + var events = this.events; + var meta = this.meta; + delete this.events; + delete this.meta; + + events.emit('prepare-save-model'); var copy = $.extend(true, {}, this); - delete copy.meta; + + // restore properties + this.events = events; + this.meta = meta; return copy; } @@ -233,7 +245,7 @@ export class DashboardModel { } getTimezone() { - return this.timezone ? this.timezone : this.contextSrv.user.timezone; + return this.timezone ? this.timezone : contextSrv.user.timezone; } private updateSchema(old) { @@ -561,12 +573,8 @@ export class DashboardModel { export class DashboardSrv { currentDashboard: any; - /** @ngInject */ - constructor(private contextSrv) { - } - create(dashboard, meta) { - return new DashboardModel(dashboard, meta, this.contextSrv); + return new DashboardModel(dashboard, meta); } setCurrent(dashboard) { diff --git a/public/app/features/dashboard/specs/dashboard_srv_specs.ts b/public/app/features/dashboard/specs/dashboard_srv_specs.ts index 3c17053dff0..56ce355881a 100644 --- a/public/app/features/dashboard/specs/dashboard_srv_specs.ts +++ b/public/app/features/dashboard/specs/dashboard_srv_specs.ts @@ -6,7 +6,7 @@ describe('dashboardSrv', function() { var _dashboardSrv; beforeEach(() => { - _dashboardSrv = new DashboardSrv({}); + _dashboardSrv = new DashboardSrv(); }); describe('when creating new dashboard with defaults only', function() { diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index b8a8af24ab9..758d8ab7067 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -185,7 +185,7 @@ function (angular, _, $) { DashboardViewState.prototype.enterFullscreen = function(panelScope) { var ctrl = panelScope.ctrl; - ctrl.editMode = this.state.edit && this.$scope.dashboardMeta.canEdit; + ctrl.editMode = this.state.edit && this.dashboard.meta.canEdit; ctrl.fullscreen = true; this.oldTimeRange = ctrl.range; diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index c6e8dfb82ea..e3c36b653a0 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -1,5 +1,4 @@ import './templateSrv'; -import './templateValuesSrv'; import './editorCtrl'; import {VariableSrv} from './variable_srv'; diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index 409a0824aea..f2366da8163 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -42,9 +42,7 @@ export class IntervalVariable implements Variable { return {text: text.trim(), value: text.trim()}; }); - if (this.auto) { - this.updateAutoValue(); - } + this.updateAutoValue(); } dependsOn(variable) { diff --git a/public/app/features/templating/specs/variabe_srv_init_specs.ts b/public/app/features/templating/specs/variabe_srv_init_specs.ts deleted file mode 100644 index 080b1706736..00000000000 --- a/public/app/features/templating/specs/variabe_srv_init_specs.ts +++ /dev/null @@ -1,88 +0,0 @@ -import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; - -import moment from 'moment'; -import helpers from 'test/specs/helpers'; -import '../all'; - -describe('VariableSrv Init', function() { - var ctx = new helpers.ControllerTestContext(); - - beforeEach(angularMocks.module('grafana.core')); - beforeEach(angularMocks.module('grafana.controllers')); - beforeEach(angularMocks.module('grafana.services')); - - beforeEach(ctx.providePhase(['datasourceSrv', 'timeSrv', 'templateSrv', '$location'])); - beforeEach(angularMocks.inject(($rootScope, $q, $location, $injector) => { - ctx.$q = $q; - ctx.$rootScope = $rootScope; - ctx.$location = $location; - ctx.variableSrv = $injector.get('variableSrv'); - ctx.variableSrv.init({templating: {list: []}}); - ctx.$rootScope.$digest(); - })); - - function describeInitSceneario(desc, fn) { - describe(desc, function() { - var scenario: any = { - urlParams: {}, - setup: setupFn => { - scenario.setupFn = setupFn; - } - }; - - beforeEach(function() { - scenario.setupFn(); - var ds: any = {}; - ds.metricFindQuery = sinon.stub().returns(ctx.$q.when(scenario.queryResult)); - ctx.datasourceSrv.get = sinon.stub().returns(ctx.$q.when(ds)); - ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); - - ctx.$location.search = sinon.stub().returns(scenario.urlParams); - - ctx.dashboard = {templating: {list: scenario.variables}}; - ctx.variableSrv.init(ctx.dashboard); - ctx.$rootScope.$digest(); - - scenario.variables = ctx.variableSrv.variables; - }); - - fn(scenario); - }); - } - - describeInitSceneario('when setting query variable via url', scenario => { - scenario.setup(() => { - scenario.variables = [{ - name: 'apps', - type: 'query', - current: {text: "test", value: "test"}, - options: [{text: "test", value: "test"}] - }]; - scenario.urlParams["var-apps"] = "new"; - }); - - it('should update current value', () => { - expect(scenario.variables[0].current.value).to.be("new"); - expect(scenario.variables[0].current.text).to.be("new"); - }); - }); - - describeInitSceneario('when setting custom variable via url', scenario => { - scenario.setup(() => { - scenario.variables = [{ - name: 'apps', - type: 'custom', - current: {text: "test", value: "test"}, - options: [{text: "test", value: "test"}] - }]; - scenario.urlParams["var-apps"] = "new"; - }); - - it('should update current value', () => { - expect(scenario.variables[0].current.value).to.be("new"); - expect(scenario.variables[0].current.text).to.be("new"); - }); - }); - -}); - diff --git a/public/app/features/templating/specs/variable_srv_init_specs.ts b/public/app/features/templating/specs/variable_srv_init_specs.ts index 2703b70bce3..8cac63135ca 100644 --- a/public/app/features/templating/specs/variable_srv_init_specs.ts +++ b/public/app/features/templating/specs/variable_srv_init_specs.ts @@ -1,8 +1,10 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; +import '../all'; + import _ from 'lodash'; import helpers from 'test/specs/helpers'; -import '../all'; +import {Emitter} from 'app/core/core'; describe('VariableSrv init', function() { var ctx = new helpers.ControllerTestContext(); @@ -17,7 +19,6 @@ describe('VariableSrv init', function() { ctx.$rootScope = $rootScope; ctx.$location = $location; ctx.variableSrv = $injector.get('variableSrv'); - ctx.variableSrv.init({templating: {list: []}}); ctx.$rootScope.$digest(); })); @@ -39,8 +40,8 @@ describe('VariableSrv init', function() { ctx.datasourceSrv.getMetricSources = sinon.stub().returns(scenario.metricSources); ctx.$location.search = sinon.stub().returns(scenario.urlParams); + ctx.dashboard = {templating: {list: scenario.variables}, events: new Emitter()}; - ctx.dashboard = {templating: {list: scenario.variables}}; ctx.variableSrv.init(ctx.dashboard); ctx.$rootScope.$digest(); @@ -137,6 +138,5 @@ describe('VariableSrv init', function() { }); }); - }); diff --git a/public/app/features/templating/specs/variable_srv_specs.ts b/public/app/features/templating/specs/variable_srv_specs.ts index 7dc007c663c..3e5af531668 100644 --- a/public/app/features/templating/specs/variable_srv_specs.ts +++ b/public/app/features/templating/specs/variable_srv_specs.ts @@ -1,8 +1,10 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; +import '../all'; + import moment from 'moment'; import helpers from 'test/specs/helpers'; -import '../all'; +import {Emitter} from 'app/core/core'; describe('VariableSrv', function() { var ctx = new helpers.ControllerTestContext(); @@ -17,7 +19,10 @@ describe('VariableSrv', function() { ctx.$rootScope = $rootScope; ctx.$location = $location; ctx.variableSrv = $injector.get('variableSrv'); - ctx.variableSrv.init({templating: {list: []}}); + ctx.variableSrv.init({ + templating: {list: []}, + events: new Emitter(), + }); ctx.$rootScope.$digest(); })); diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index dfc938543a8..767765296e5 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -6,7 +6,6 @@ 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 {IntervalVariable} from './interval_variable'; import {Variable} from './variable'; export var variableConstructorMap: any = {}; @@ -14,95 +13,115 @@ export var variableConstructorMap: any = {}; export class VariableSrv { dashboard: any; variables: any; - variableLock: any; /** @ngInject */ - constructor( - private $rootScope, - private $q, - private $location, - private $injector, - private templateSrv) { + constructor(private $rootScope, private $q, private $location, private $injector, private templateSrv) { + // update time variant variables + // $rootScope.onAppEvent('refresh', this.onDashboardRefresh.bind(this), $rootScope); + } + + init(dashboard) { + this.variableLock = {}; + this.dashboard = dashboard; + + // create working class models representing variables + this.variables = dashboard.templating.list.map(this.createVariableFromModel.bind(this)); + this.templateSrv.init(this.variables); + + // register event to sync back to persisted model + this.dashboard.events.on('prepare-save-model', this.syncToDashboardModel.bind(this)); + + // init variables + for (let variable of this.variables) { + this.variableLock[variable.name] = this.$q.defer(); } - init(dashboard) { - this.variableLock = {}; - this.dashboard = dashboard; - this.variables = dashboard.templating.list.map(this.createVariableFromModel.bind(this)); - this.templateSrv.init(this.variables); + var queryParams = this.$location.search(); + return this.$q.all(this.variables.map(variable => { + return this.processVariable(variable, queryParams); + })); + } - var queryParams = this.$location.search(); + onDashboardRefresh() { + // var promises = this.variables + // .filter(variable => variable.refresh === 2) + // .map(variable => { + // var previousOptions = variable.options.slice(); + // + // return self.updateOptions(variable).then(function () { + // return self.variableUpdated(variable).then(function () { + // // check if current options changed due to refresh + // if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) { + // $rootScope.appEvent('template-variable-value-updated'); + // } + // }); + // }); + // }); + // + // return this.$q.all(promises); + } - for (let variable of this.variables) { - this.variableLock[variable.name] = this.$q.defer(); + processVariable(variable, queryParams) { + var dependencies = []; + var lock = this.variableLock[variable.name]; + + for (let otherVariable of this.variables) { + if (variable.dependsOn(otherVariable)) { + dependencies.push(this.variableLock[otherVariable.name].promise); + } + } + + return this.$q.all(dependencies).then(() => { + var urlValue = queryParams['var-' + variable.name]; + if (urlValue !== void 0) { + return variable.setValueFromUrl(urlValue).then(lock.resolve); } - return this.$q.all(this.variables.map(variable => { - return this.processVariable(variable, queryParams); - })); - } - - processVariable(variable, queryParams) { - var dependencies = []; - var lock = this.variableLock[variable.name]; - - for (let otherVariable of this.variables) { - if (variable.dependsOn(otherVariable)) { - dependencies.push(this.variableLock[otherVariable.name].promise); - } + if (variable.refresh === 1 || variable.refresh === 2) { + return variable.updateOptions().then(lock.resolve); } - return this.$q.all(dependencies).then(() => { - var urlValue = queryParams['var-' + variable.name]; - if (urlValue !== void 0) { - return variable.setValueFromUrl(urlValue).then(lock.resolve); - } + lock.resolve(); + }).finally(() => { + delete this.variableLock[variable.name]; + }); + } - if (variable.refresh === 1 || variable.refresh === 2) { - return variable.updateOptions().then(lock.resolve); - } - - lock.resolve(); - }).finally(() => { - delete this.variableLock[variable.name]; - }); + createVariableFromModel(model) { + var ctor = variableConstructorMap[model.type]; + if (!ctor) { + throw "Unable to find variable constructor for " + model.type; } - createVariableFromModel(model) { - var ctor = variableConstructorMap[model.type]; - if (!ctor) { - throw "Unable to find variable constructor for " + model.type; - } + var variable = this.$injector.instantiate(ctor, {model: model}); + return variable; + } - var variable = this.$injector.instantiate(ctor, {model: model}); - return variable; + addVariable(model) { + var variable = this.createVariableFromModel(model); + this.variables.push(this.createVariableFromModel(variable)); + return variable; + } + + syncToDashboardModel() { + this.dashboard.templating.list = this.variables.map(variable => { + return variable.model; + }); + } + + updateOptions(variable) { + return variable.updateOptions(); + } + + variableUpdated(variable) { + // if there is a variable lock ignore cascading update because we are in a boot up scenario + if (this.variableLock[variable.name]) { + return this.$q.when(); } - addVariable(model) { - var variable = this.createVariableFromModel(model); - this.variables.push(this.createVariableFromModel(variable)); - return variable; - } - - syncToDashboardModel() { - this.dashboard.templating.list = this.variables.map(variable => { - return variable.model; - }); - } - - updateOptions(variable) { - return variable.updateOptions(); - } - - variableUpdated(variable) { - // if there is a variable lock ignore cascading update because we are in a boot up scenario - if (this.variableLock[variable.name]) { - return this.$q.when(); - } - - // cascade updates to variables that use this variable - var promises = _.map(this.variables, otherVariable => { + // cascade updates to variables that use this variable + var promises = _.map(this.variables, otherVariable => { if (otherVariable === variable) { return; } diff --git a/public/test/core/utils/emitter_specs.ts b/public/test/core/utils/emitter_specs.ts index fec4d02a649..388d3849055 100644 --- a/public/test/core/utils/emitter_specs.ts +++ b/public/test/core/utils/emitter_specs.ts @@ -24,6 +24,22 @@ describe("Emitter", () => { expect(sub2Called).to.be(true); }); + it('when subscribing twice', () => { + var events = new Emitter(); + var sub1Called = 0; + + function handler() { + sub1Called += 1; + } + + events.on('test', handler); + events.on('test', handler); + + events.emit('test', null); + + expect(sub1Called).to.be(2); + }); + it('should handle errors', () => { var events = new Emitter(); var sub1Called = 0; diff --git a/public/test/specs/unsavedChangesSrv-specs.js b/public/test/specs/unsavedChangesSrv-specs.js index c69c2f67885..a304279b77b 100644 --- a/public/test/specs/unsavedChangesSrv-specs.js +++ b/public/test/specs/unsavedChangesSrv-specs.js @@ -14,6 +14,7 @@ define([ var dash; var scope; + beforeEach(module('grafana.core')); beforeEach(module('grafana.services')); beforeEach(module(function($provide) { $provide.value('contextSrv', _contextSrvStub); From 8a796c5b4b8149c6bfc69b0c8765656418839d56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 15:15:15 +0200 Subject: [PATCH 11/18] feat(templating): progress on variable system refactoring, #6048 --- .../features/templating/constant_variable.ts | 17 +- public/app/features/templating/editorCtrl.js | 4 +- .../app/features/templating/query_variable.ts | 31 +++- .../templating/specs/query_variable_specs.ts | 39 +++++ .../templating/specs/variable_specs.ts | 19 +- public/app/features/templating/variable.ts | 8 + .../app/features/templating/variable_srv.ts | 164 +++++++++--------- 7 files changed, 192 insertions(+), 90 deletions(-) create mode 100644 public/app/features/templating/specs/query_variable_specs.ts diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts index 2fb32b336f7..ea66b4a0af2 100644 --- a/public/app/features/templating/constant_variable.ts +++ b/public/app/features/templating/constant_variable.ts @@ -1,16 +1,29 @@ /// import _ from 'lodash'; -import {Variable} from './variable'; +import {Variable, assignModelProperties} from './variable'; import {VariableSrv, variableConstructorMap} from './variable_srv'; export class ConstantVariable implements Variable { query: string; options: any[]; + defaults = { + type: 'constant', + name: '', + query: '', + hide: 2, + refresh: 0, + }; + /** @ngInject */ constructor(private model, 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/editorCtrl.js index 7d60295168f..5383eb2f178 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/public/app/features/templating/editorCtrl.js @@ -13,7 +13,7 @@ function (angular, _) { type: 'query', datasource: null, refresh: 0, - sort: 1, + sort: 0, name: '', hide: 0, options: [], @@ -37,7 +37,7 @@ function (angular, _) { ]; $scope.sortOptions = [ - {value: 0, text: "Without Sort"}, + {value: 0, text: "Query sort"}, {value: 1, text: "Alphabetical (asc)"}, {value: 2, text: "Alphabetical (desc)"}, {value: 3, text: "Numerical (asc)"}, diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 6ba95b05e00..2816d0a47ed 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -2,7 +2,7 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable, containsVariable} from './variable'; +import {Variable, containsVariable, assignModelProperties} from './variable'; import {VariableSrv, variableConstructorMap} from './variable_srv'; function getNoneOption() { @@ -16,11 +16,36 @@ export class QueryVariable implements Variable { sort: any; options: any; current: any; - includeAll: boolean; refresh: number; + hide: number; + name: string; + multi: boolean; + includeAll: boolean; + + defaults = { + type: 'query', + query: '', + regex: '', + sort: 1, + datasource: null, + refresh: 0, + hide: 0, + name: '', + multi: false, + includeAll: false, + options: [], + current: {text: '', value: ''}, + }; constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) { - _.extend(this, model); + // copy model properties to this instance + assignModelProperties(this, model, this.defaults); + } + + getModel() { + // copy back model properties to model + assignModelProperties(this.model, this, this.defaults); + return this.model; } setValue(option){ diff --git a/public/app/features/templating/specs/query_variable_specs.ts b/public/app/features/templating/specs/query_variable_specs.ts new file mode 100644 index 00000000000..4040056bfe4 --- /dev/null +++ b/public/app/features/templating/specs/query_variable_specs.ts @@ -0,0 +1,39 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import {QueryVariable} from '../query_variable'; + +describe('QueryVariable', function() { + + describe('when creating from model', function() { + + it('should set defaults', 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.name).to.be(''); + expect(variable.hide).to.be(0); + expect(variable.options.length).to.be(0); + expect(variable.multi).to.be(false); + expect(variable.includeAll).to.be(false); + }); + + it('get model should copy changes back to model', () => { + var variable = new QueryVariable({}, null, null, null, null); + variable.options = [{text: 'test'}]; + variable.datasource = 'google'; + variable.regex = 'asd'; + variable.sort = 50; + + var model = variable.getModel(); + expect(model.options.length).to.be(1); + expect(model.options[0].text).to.be('test'); + expect(model.datasource).to.be('google'); + expect(model.regex).to.be('asd'); + expect(model.sort).to.be(50); + }); + + }); + +}); + diff --git a/public/app/features/templating/specs/variable_specs.ts b/public/app/features/templating/specs/variable_specs.ts index a11f6272425..9a974eae695 100644 --- a/public/app/features/templating/specs/variable_specs.ts +++ b/public/app/features/templating/specs/variable_specs.ts @@ -1,6 +1,6 @@ import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; -import {containsVariable} from '../variable'; +import {containsVariable, assignModelProperties} from '../variable'; describe('containsVariable', function() { @@ -40,3 +40,20 @@ describe('containsVariable', function() { }); +describe('assignModelProperties', function() { + + it('only set properties defined in defaults', function() { + var target: any = {test: 'asd'}; + assignModelProperties(target, {propA: 1, propB: 2}, {propB: 0}); + expect(target.propB).to.be(2); + expect(target.test).to.be('asd'); + }); + + it('use default value if not found on source', function() { + var target: any = {test: 'asd'}; + assignModelProperties(target, {propA: 1, propB: 2}, {propC: 10}); + expect(target.propC).to.be(10); + }); + +}); + diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index c7938f3ebb5..b9441b55840 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -8,6 +8,14 @@ export interface Variable { updateOptions(); dependsOn(variable); setValueFromUrl(urlValue); + getModel(); +} + + +export function assignModelProperties(target, source, defaults) { + _.forEach(defaults, function(value, key) { + target[key] = source[key] === undefined ? value : source[key]; + }); } export function containsVariable(...args: any[]) { diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index 767765296e5..e093514791d 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -106,7 +106,7 @@ export class VariableSrv { syncToDashboardModel() { this.dashboard.templating.list = this.variables.map(variable => { - return variable.model; + return variable.getModel(); }); } @@ -122,100 +122,100 @@ export class VariableSrv { // cascade updates to variables that use this variable var promises = _.map(this.variables, otherVariable => { - if (otherVariable === variable) { - return; - } - - if (otherVariable.dependsOn(variable)) { - return this.updateOptions(otherVariable); - } - }); - - return this.$q.all(promises); - } - - selectOptionsForCurrentValue(variable) { - var i, y, value, option; - var selected: any = []; - - for (i = 0; i < variable.options.length; i++) { - option = variable.options[i]; - option.selected = false; - if (_.isArray(variable.current.value)) { - for (y = 0; y < variable.current.value.length; y++) { - value = variable.current.value[y]; - if (option.value === value) { - option.selected = true; - selected.push(option); - } - } - } else if (option.value === variable.current.value) { - option.selected = true; - selected.push(option); - } + if (otherVariable === variable) { + return; } - return selected; + if (otherVariable.dependsOn(variable)) { + return this.updateOptions(otherVariable); + } + }); + + return this.$q.all(promises); + } + + selectOptionsForCurrentValue(variable) { + var i, y, value, option; + var selected: any = []; + + for (i = 0; i < variable.options.length; i++) { + option = variable.options[i]; + option.selected = false; + if (_.isArray(variable.current.value)) { + for (y = 0; y < variable.current.value.length; y++) { + value = variable.current.value[y]; + if (option.value === value) { + option.selected = true; + selected.push(option); + } + } + } else if (option.value === variable.current.value) { + option.selected = true; + selected.push(option); + } } - validateVariableSelectionState(variable) { - if (!variable.current) { - if (!variable.options.length) { return this.$q.when(); } + return selected; + } + + validateVariableSelectionState(variable) { + if (!variable.current) { + if (!variable.options.length) { return this.$q.when(); } + return variable.setValue(variable.options[0]); + } + + if (_.isArray(variable.current.value)) { + var selected = this.selectOptionsForCurrentValue(variable); + + // if none pick first + if (selected.length === 0) { + selected = variable.options[0]; + } else { + selected = { + value: _.map(selected, function(val) {return val.value;}), + text: _.map(selected, function(val) {return val.text;}).join(' + '), + }; + } + + return variable.setValue(selected); + } else { + var currentOption = _.find(variable.options, {text: variable.current.text}); + if (currentOption) { + return variable.setValue(currentOption); + } else { + if (!variable.options.length) { return Promise.resolve(); } return variable.setValue(variable.options[0]); } + } + } - if (_.isArray(variable.current.value)) { - var selected = this.selectOptionsForCurrentValue(variable); + setOptionFromUrl(variable, urlValue) { + var promise = this.$q.when(); - // if none pick first - if (selected.length === 0) { - selected = variable.options[0]; - } else { - selected = { - value: _.map(selected, function(val) {return val.value;}), - text: _.map(selected, function(val) {return val.text;}).join(' + '), - }; - } - - return variable.setValue(selected); - } else { - var currentOption = _.find(variable.options, {text: variable.current.text}); - if (currentOption) { - return variable.setValue(currentOption); - } else { - if (!variable.options.length) { return Promise.resolve(); } - return variable.setValue(variable.options[0]); - } - } + if (variable.refresh) { + promise = variable.updateOptions(); } - setOptionFromUrl(variable, urlValue) { - var promise = this.$q.when(); - - if (variable.refresh) { - promise = variable.updateOptions(); - } - - return promise.then(() => { - var option = _.find(variable.options, op => { - return op.text === urlValue || op.value === urlValue; - }); - - option = option || {text: urlValue, value: urlValue}; - return variable.setValue(option); + return promise.then(() => { + var option = _.find(variable.options, op => { + return op.text === urlValue || op.value === urlValue; }); + + option = option || {text: urlValue, value: urlValue}; + return variable.setValue(option); + }); + } + + setOptionAsCurrent(variable, option) { + variable.current = _.cloneDeep(option); + + if (_.isArray(variable.current.text)) { + variable.current.text = variable.current.text.join(' + '); } - setOptionAsCurrent(variable, option) { - variable.current = _.cloneDeep(option); - - if (_.isArray(variable.current.text)) { - variable.current.text = variable.current.text.join(' + '); - } - - this.selectOptionsForCurrentValue(variable); - return this.variableUpdated(variable); - } + this.selectOptionsForCurrentValue(variable); + return this.variableUpdated(variable); + } } coreModule.service('variableSrv', VariableSrv); 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 12/18] 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} | 116 ++++++++---------- .../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, 117 insertions(+), 81 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'); +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 @@ -
+

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 = {}; From 9d6ecc636180f290d4b4ae3a2ae944c1914b35df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 18:06:36 +0200 Subject: [PATCH 13/18] feat(templating): progress on variable system refactoring, #6048 --- .../app/features/dashboard/dashboard_ctrl.ts | 1 + .../features/templating/custom_variable.ts | 6 +- .../templating/datasource_variable.ts | 5 +- public/app/features/templating/editor_ctrl.ts | 38 +--- .../features/templating/interval_variable.ts | 6 +- .../features/templating/partials/editor.html | 168 +++++++++--------- .../app/features/templating/query_variable.ts | 8 +- .../app/features/templating/variable_srv.ts | 33 ++-- .../datasource/elasticsearch/datasource.js | 4 + 9 files changed, 124 insertions(+), 145 deletions(-) diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts index ac47d7d6440..4daf8ef6a68 100644 --- a/public/app/features/dashboard/dashboard_ctrl.ts +++ b/public/app/features/dashboard/dashboard_ctrl.ts @@ -87,6 +87,7 @@ export class DashboardCtrl { }; $scope.templateVariableUpdated = function() { + dynamicDashboardSrv.update($scope.dashboard); }; $scope.updateSubmenuVisibility = function() { diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts index bfd42f61eff..6095bdd1582 100644 --- a/public/app/features/templating/custom_variable.ts +++ b/public/app/features/templating/custom_variable.ts @@ -23,13 +23,15 @@ export class CustomVariable implements Variable { multi: false, }; + supportsMulti = true; + /** @ngInject */ constructor(private model, private timeSrv, private templateSrv, private variableSrv) { assignModelProperties(this, model, this.defaults); } setValue(option) { - this.variableSrv.setOptionAsCurrent(this, option); + return this.variableSrv.setOptionAsCurrent(this, option); } getModel() { @@ -47,7 +49,7 @@ export class CustomVariable implements Variable { this.addAllOption(); } - return Promise.resolve(); + return this.variableSrv.validateVariableSelectionState(this); } addAllOption() { diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts index e8612379c5f..8bc13c9f44b 100644 --- a/public/app/features/templating/datasource_variable.ts +++ b/public/app/features/templating/datasource_variable.ts @@ -15,7 +15,7 @@ export class DatasourceVariable implements Variable { name: '', hide: 0, label: '', - current: {text: '', value: ''} + current: {text: '', value: ''}, regex: '', options: [], query: '', @@ -32,7 +32,7 @@ export class DatasourceVariable implements Variable { } setValue(option) { - this.variableSrv.setOptionAsCurrent(this, option); + return this.variableSrv.setOptionAsCurrent(this, option); } updateOptions() { @@ -63,6 +63,7 @@ export class DatasourceVariable implements Variable { } this.options = options; + return this.variableSrv.validateVariableSelectionState(this); } dependsOn(variable) { diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index 04cf082d9c9..a185d7d838d 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -10,7 +10,7 @@ import appEvents from 'app/core/app_events'; export class VariableEditorCtrl { /** @ngInject */ - constructor(private $scope, private datasourceSrv, private variableSrv) { + constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) { $scope.variableTypes = [ {value: "query", text: "Query"}, {value: "adhoc", text: "Ad hoc filters"}, @@ -27,7 +27,7 @@ export class VariableEditorCtrl { ]; $scope.sortOptions = [ - {value: 0, text: "Query sort"}, + {value: 0, text: "Disabled"}, {value: 1, text: "Alphabetical (asc)"}, {value: 2, text: "Alphabetical (desc)"}, {value: 3, text: "Numerical (asc)"}, @@ -115,6 +115,7 @@ export class VariableEditorCtrl { $scope.runQuery().then(function() { $scope.reset(); $scope.mode = 'list'; + templateSrv.updateTemplateData(); }); } }; @@ -124,18 +125,6 @@ export class VariableEditorCtrl { $scope.current = variableSrv.createVariableFromModel({type: 'query'}); }; - $scope.showSelectionOptions = function() { - if ($scope.current) { - if ($scope.current.type === 'query') { - return true; - } - if ($scope.current.type === 'custom') { - return true; - } - } - return false; - }; - $scope.typeChanged = function() { var old = $scope.current; $scope.current = variableSrv.createVariableFromModel({type: $scope.current.type}); @@ -147,27 +136,6 @@ export class VariableEditorCtrl { if (oldIndex !== -1) { this.variables[oldIndex] = $scope.current; } - - // 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) { diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index 260a8b9bb8e..e532a054188 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -11,12 +11,14 @@ export class IntervalVariable implements Variable { options: any; auto: boolean; query: string; + refresh: number; defaults = { type: 'interval', name: '', hide: 0, label: '', + refresh: 2, options: [], current: {text: '', value: ''}, query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d', @@ -28,6 +30,7 @@ export class IntervalVariable implements Variable { /** @ngInject */ constructor(private model, private timeSrv, private templateSrv, private variableSrv) { assignModelProperties(this, model, this.defaults); + this.refresh = 2; } getModel() { @@ -37,7 +40,7 @@ export class IntervalVariable implements Variable { setValue(option) { this.updateAutoValue(); - this.variableSrv.setOptionAsCurrent(this, option); + return this.variableSrv.setOptionAsCurrent(this, option); } updateAutoValue() { @@ -61,6 +64,7 @@ export class IntervalVariable implements Variable { }); this.updateAutoValue(); + return this.variableSrv.validateVariableSelectionState(this); } dependsOn(variable) { diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 37d21a6e495..8158846f790 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -181,19 +181,8 @@

-
- - Sort - - How to sort the values of this variable. - - -
- -
-
-
-
+
+
Query
@@ -206,35 +195,46 @@
-
+
+ + Sort + + How to sort the values of this variable. + + +
+ +
+
+
-
-
Data source options
+
+
Data source options
-
- -
- -
-
+
+ +
+ +
+
-
-
+ + + +
+
-
Options
+
Options
Data source @@ -242,58 +242,58 @@
-
+
-
-
Selection Options
-
- - - - -
-
- Custom all value - -
-
+
+
Selection Options
+
+ + + + +
+
+ Custom all value + +
+
-
-
Value groups/tags (Experimental feature)
-
- -
-
- Tags query - -
-
-
  • Tag values query
    • - -
    -
    +
    +
    Value groups/tags (Experimental feature)
    +
    + +
    +
    + Tags query + +
    +
    +
  • Tag values query
    • + +
    +
    -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    -
    +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    +
    -
    - +
    +
    diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 08eaa546d4b..82aaa2e5b8f 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -37,6 +37,8 @@ export class QueryVariable implements Variable { current: {text: '', value: ''}, }; + supportsMulti = true; + constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) { // copy model properties to this instance assignModelProperties(this, model, this.defaults); @@ -49,7 +51,7 @@ export class QueryVariable implements Variable { } setValue(option){ - this.variableSrv.setOptionAsCurrent(this, option); + return this.variableSrv.setOptionAsCurrent(this, option); } setValueFromUrl(urlValue) { @@ -59,9 +61,7 @@ export class QueryVariable implements Variable { updateOptions() { return this.datasourceSrv.get(this.datasource) .then(this.updateOptionsFromMetricFindQuery.bind(this)) - .then(() => { - this.variableSrv.validateVariableSelectionState(this); - }); + .then(this.variableSrv.validateVariableSelectionState.bind(this.variableSrv, this)); } updateOptionsFromMetricFindQuery(datasource) { diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index 9c06e1fb361..f31ce7515e0 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -15,7 +15,7 @@ export class VariableSrv { /** @ngInject */ constructor(private $rootScope, private $q, private $location, private $injector, private templateSrv) { // update time variant variables - // $rootScope.onAppEvent('refresh', this.onDashboardRefresh.bind(this), $rootScope); + $rootScope.$on('refresh', this.onDashboardRefresh.bind(this), $rootScope); } init(dashboard) { @@ -41,22 +41,21 @@ export class VariableSrv { } onDashboardRefresh() { - // var promises = this.variables - // .filter(variable => variable.refresh === 2) - // .map(variable => { - // var previousOptions = variable.options.slice(); - // - // return self.updateOptions(variable).then(function () { - // return self.variableUpdated(variable).then(function () { - // // check if current options changed due to refresh - // if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) { - // $rootScope.appEvent('template-variable-value-updated'); - // } - // }); - // }); - // }); - // - // return this.$q.all(promises); + var promises = this.variables + .filter(variable => variable.refresh === 2) + .map(variable => { + var previousOptions = variable.options.slice(); + + return variable.updateOptions() + .then(this.variableUpdated.bind(this, variable)) + .then(() => { + if (angular.toJson(previousOptions) !== angular.toJson(variable.options)) { + this.$rootScope.$emit('template-variable-value-updated'); + } + }); + }); + + return this.$q.all(promises); } processVariable(variable, queryParams) { diff --git a/public/app/plugins/datasource/elasticsearch/datasource.js b/public/app/plugins/datasource/elasticsearch/datasource.js index c952bf4d4f6..cf73ead21bd 100644 --- a/public/app/plugins/datasource/elasticsearch/datasource.js +++ b/public/app/plugins/datasource/elasticsearch/datasource.js @@ -257,6 +257,10 @@ function (angular, _, moment, kbn, ElasticQueryBuilder, IndexPattern, ElasticRes esQuery = header + '\n' + esQuery + '\n'; return this._post('_msearch?search_type=count', esQuery).then(function(res) { + if (!res.responses[0].aggregations) { + return []; + } + var buckets = res.responses[0].aggregations["1"].buckets; return _.map(buckets, function(bucket) { return {text: bucket.key, value: bucket.key}; From 7a6fb70026b183843c9dd86c9dc5c9e6d96b4b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 18:32:09 +0200 Subject: [PATCH 14/18] feat(templating): progress on variable system refactoring, #6048 --- .../features/templating/constant_variable.ts | 10 +- .../features/templating/custom_variable.ts | 15 +- .../templating/datasource_variable.ts | 10 +- public/app/features/templating/editor_ctrl.ts | 14 +- .../features/templating/interval_variable.ts | 10 +- .../features/templating/partials/editor.html | 142 ++++++++---------- .../app/features/templating/query_variable.ts | 13 +- public/app/features/templating/variable.ts | 1 + .../app/features/templating/variable_srv.ts | 6 +- 9 files changed, 109 insertions(+), 112 deletions(-) diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts index f76d2c04818..f0a659e0c20 100644 --- a/public/app/features/templating/constant_variable.ts +++ b/public/app/features/templating/constant_variable.ts @@ -1,8 +1,8 @@ /// import _ from 'lodash'; -import {Variable, assignModelProperties} from './variable'; -import {VariableSrv, variableConstructorMap} from './variable_srv'; +import {Variable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; export class ConstantVariable implements Variable { query: string; @@ -45,4 +45,8 @@ export class ConstantVariable implements Variable { } } -variableConstructorMap['constant'] = ConstantVariable; +variableTypes['constant'] = { + name: 'Constant', + ctor: ConstantVariable, + description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share' , +}; diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts index 6095bdd1582..77dfd57cae8 100644 --- a/public/app/features/templating/custom_variable.ts +++ b/public/app/features/templating/custom_variable.ts @@ -2,8 +2,8 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable, assignModelProperties} from './variable'; -import {VariableSrv, variableConstructorMap} from './variable_srv'; +import {Variable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; export class CustomVariable implements Variable { query: string; @@ -23,9 +23,7 @@ export class CustomVariable implements Variable { multi: false, }; - supportsMulti = true; - - /** @ngInject */ + /** @ngInject **/ constructor(private model, private timeSrv, private templateSrv, private variableSrv) { assignModelProperties(this, model, this.defaults); } @@ -65,4 +63,9 @@ export class CustomVariable implements Variable { } } -variableConstructorMap['custom'] = CustomVariable; +variableTypes['custom'] = { + name: 'Custom', + ctor: CustomVariable, + description: 'Define variable values manually' , + supportsMulti: true, +}; diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts index 8bc13c9f44b..b23b5e04e42 100644 --- a/public/app/features/templating/datasource_variable.ts +++ b/public/app/features/templating/datasource_variable.ts @@ -2,8 +2,8 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable, assignModelProperties} from './variable'; -import {VariableSrv, variableConstructorMap} from './variable_srv'; +import {Variable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; export class DatasourceVariable implements Variable { regex: any; @@ -75,4 +75,8 @@ export class DatasourceVariable implements Variable { } } -variableConstructorMap['datasource'] = DatasourceVariable; +variableTypes['datasource'] = { + name: 'Datasource', + ctor: DatasourceVariable, + description: 'Enabled you to dynamically switch the datasource for multiple panels', +}; diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index a185d7d838d..25ddec62cce 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -1,24 +1,14 @@ /// -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 {variableTypes} from './variable'; export class VariableEditorCtrl { /** @ngInject */ constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) { - $scope.variableTypes = [ - {value: "query", text: "Query"}, - {value: "adhoc", text: "Ad hoc filters"}, - {value: "interval", text: "Interval"}, - {value: "datasource", text: "Data source"}, - {value: "custom", text: "Custom"}, - {value: "constant", text: "Constant"}, - ]; + $scope.variableTypes = variableTypes; $scope.refreshOptions = [ {value: 0, text: "Never"}, diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index e532a054188..94bb608e7e3 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -2,8 +2,8 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable, assignModelProperties} from './variable'; -import {VariableSrv, variableConstructorMap} from './variable_srv'; +import {Variable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; export class IntervalVariable implements Variable { auto_count: number; @@ -77,4 +77,8 @@ export class IntervalVariable implements Variable { } } -variableConstructorMap['interval'] = IntervalVariable; +variableTypes['interval'] = { + name: 'Interval', + ctor: IntervalVariable, + description: 'Define a timespan interval (ex 1m, 1h, 1d)', +}; diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 8158846f790..c74245ae6be 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -82,21 +82,11 @@ Type -
    -
    Query
    -
    Variable values are fetched from a metric names query to a data source
    -
    Interval
    -
    Timespan variable type
    -
    Datasource
    -
    Dynamically switch data sources using this type of variable
    -
    Custom
    -
    Define variable values manually
    -
    - Templating docs + {{variableTypes[current.type].description}}
    - +
    @@ -215,26 +205,26 @@
    -
    - + + -
    -
    + + + + +
    -
    Options
    +
    Options
    Data source @@ -242,58 +232,58 @@
    - + -
    -
    Selection Options
    -
    - - - - -
    -
    - Custom all value - -
    -
    +
    +
    Selection Options
    +
    + + + + +
    +
    + Custom all value + +
    +
    -
    -
    Value groups/tags (Experimental feature)
    -
    - -
    -
    - Tags query - -
    -
    -
  • Tag values query
    • - -
    -
    +
    +
    Value groups/tags (Experimental feature)
    +
    + +
    +
    + Tags query + +
    +
    +
  • Tag values query
    • + +
    +
    -
    -
    Preview of values (shows max 20)
    -
    -
    - {{option.text}} -
    -
    -
    - +
    +
    Preview of values (shows max 20)
    +
    +
    + {{option.text}} +
    +
    +
    + -
    - +
    +
    diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 82aaa2e5b8f..5d6492849f4 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -2,8 +2,8 @@ import _ from 'lodash'; import kbn from 'app/core/utils/kbn'; -import {Variable, containsVariable, assignModelProperties} from './variable'; -import {VariableSrv, variableConstructorMap} from './variable_srv'; +import {Variable, containsVariable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; function getNoneOption() { return { text: 'None', value: '', isNone: true }; @@ -37,8 +37,6 @@ export class QueryVariable implements Variable { current: {text: '', value: ''}, }; - supportsMulti = true; - constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) { // copy model properties to this instance assignModelProperties(this, model, this.defaults); @@ -151,4 +149,9 @@ export class QueryVariable implements Variable { } } -variableConstructorMap['query'] = QueryVariable; +variableTypes['query'] = { + name: 'Query', + ctor: QueryVariable, + description: 'Variable values are fetched from a datasource query', + supportsMulti: true, +}; diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index b9441b55840..9a478b50840 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -11,6 +11,7 @@ export interface Variable { getModel(); } +export var variableTypes = {}; export function assignModelProperties(target, source, defaults) { _.forEach(defaults, function(value, key) { diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index f31ce7515e0..d2efdeb971e 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -3,9 +3,7 @@ import angular from 'angular'; import _ from 'lodash'; import coreModule from 'app/core/core_module'; -import {Variable} from './variable'; - -export var variableConstructorMap: any = {}; +import {Variable, variableTypes} from './variable'; export class VariableSrv { dashboard: any; @@ -85,7 +83,7 @@ export class VariableSrv { } createVariableFromModel(model) { - var ctor = variableConstructorMap[model.type]; + var ctor = variableTypes[model.type].ctor; if (!ctor) { throw "Unable to find variable constructor for " + model.type; } From cb522d58cd896b316994c56707215a83acc17c9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 19 Sep 2016 18:41:42 +0200 Subject: [PATCH 15/18] feat(templating): back to be able to continue work on ad hoc filters, #6048 --- .../app/features/templating/adhoc_variable.ts | 52 +++++++++++++++++++ public/app/features/templating/all.ts | 2 + 2 files changed, 54 insertions(+) create mode 100644 public/app/features/templating/adhoc_variable.ts diff --git a/public/app/features/templating/adhoc_variable.ts b/public/app/features/templating/adhoc_variable.ts new file mode 100644 index 00000000000..579b0268efa --- /dev/null +++ b/public/app/features/templating/adhoc_variable.ts @@ -0,0 +1,52 @@ +/// + +import _ from 'lodash'; +import kbn from 'app/core/utils/kbn'; +import {Variable, assignModelProperties, variableTypes} from './variable'; +import {VariableSrv} from './variable_srv'; + +export class AdhocVariable implements Variable { + + defaults = { + type: 'adhoc', + name: '', + label: '', + hide: 0, + datasource: null, + options: [], + current: {}, + tags: {}, + }; + + /** @ngInject **/ + constructor(private model, private timeSrv, private templateSrv, private variableSrv) { + assignModelProperties(this, model, this.defaults); + } + + setValue(option) { + return Promise.resolve(); + } + + getModel() { + assignModelProperties(this.model, this, this.defaults); + return this.model; + } + + updateOptions() { + return Promise.resolve(); + } + + dependsOn(variable) { + return false; + } + + setValueFromUrl(urlValue) { + return Promise.resolve(); + } +} + +variableTypes['adhoc'] = { + name: 'Ad hoc', + ctor: AdhocVariable, + description: 'Ad hoc filters', +}; diff --git a/public/app/features/templating/all.ts b/public/app/features/templating/all.ts index 3b36f18b9b0..7205da52d19 100644 --- a/public/app/features/templating/all.ts +++ b/public/app/features/templating/all.ts @@ -7,6 +7,7 @@ import {QueryVariable} from './query_variable'; import {DatasourceVariable} from './datasource_variable'; import {CustomVariable} from './custom_variable'; import {ConstantVariable} from './constant_variable'; +import {AdhocVariable} from './adhoc_variable'; export { VariableSrv, @@ -15,4 +16,5 @@ export { DatasourceVariable, CustomVariable, ConstantVariable, + AdhocVariable, } From 6e429b8575edc2a6ec7c27bb276534676da21bae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 20 Sep 2016 11:57:43 +0200 Subject: [PATCH 16/18] feat(adhoc filters): good progress on ad hoc filters and sync from to url, #6038 --- .../app/features/dashboard/ad_hoc_filters.ts | 36 ++- public/app/features/dashboard/viewStateSrv.js | 20 -- .../app/features/templating/adhoc_variable.ts | 28 ++- .../features/templating/constant_variable.ts | 7 + .../features/templating/custom_variable.ts | 11 +- .../templating/datasource_variable.ts | 7 +- .../features/templating/interval_variable.ts | 7 +- .../app/features/templating/query_variable.ts | 12 +- .../templating/specs/template_srv_specs.ts | 237 ++++++++++++++++++ public/app/features/templating/templateSrv.js | 13 +- public/app/features/templating/variable.ts | 1 + .../app/features/templating/variable_srv.ts | 18 ++ .../plugins/datasource/influxdb/datasource.ts | 6 +- public/test/specs/templateSrv-specs.js | 235 ----------------- 14 files changed, 351 insertions(+), 287 deletions(-) create mode 100644 public/app/features/templating/specs/template_srv_specs.ts delete mode 100644 public/test/specs/templateSrv-specs.js diff --git a/public/app/features/dashboard/ad_hoc_filters.ts b/public/app/features/dashboard/ad_hoc_filters.ts index 426f6162467..f962f8ca2f4 100644 --- a/public/app/features/dashboard/ad_hoc_filters.ts +++ b/public/app/features/dashboard/ad_hoc_filters.ts @@ -21,7 +21,7 @@ export class AdHocFiltersCtrl { if (this.variable.value && !_.isArray(this.variable.value)) { } - for (let tag of this.variable.tags) { + for (let tag of this.variable.filters) { if (this.segments.length > 0) { this.segments.push(this.uiSegmentSrv.newCondition('AND')); } @@ -38,7 +38,11 @@ export class AdHocFiltersCtrl { getOptions(segment, index) { if (segment.type === 'operator') { - return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<>', '<', '>', '=~', '!~'])); + return this.$q.when(this.uiSegmentSrv.newOperators(['=', '!=', '<', '>', '=~', '!~'])); + } + + if (segment.type === 'condition') { + return this.$q.when([this.uiSegmentSrv.newSegment('AND')]); } return this.datasourceSrv.get(this.variable.datasource).then(ds => { @@ -100,37 +104,45 @@ export class AdHocFiltersCtrl { } updateVariableModel() { - var tags = []; - var tagIndex = -1; - var tagOperator = ""; + var filters = []; + var filterIndex = -1; + var operator = ""; + var hasFakes = false; - this.segments.forEach((segment, index) => { - if (segment.fake) { + this.segments.forEach(segment => { + if (segment.type === 'value' && segment.fake) { + hasFakes = true; return; } switch (segment.type) { case 'key': { - tags.push({key: segment.value}); - tagIndex += 1; + filters.push({key: segment.value}); + filterIndex += 1; break; } case 'value': { - tags[tagIndex].value = segment.value; + filters[filterIndex].value = segment.value; break; } case 'operator': { - tags[tagIndex].operator = segment.value; + filters[filterIndex].operator = segment.value; break; } case 'condition': { + filters[filterIndex].condition = segment.value; break; } } }); + if (hasFakes) { + return; + } + + this.variable.setFilters(filters); + this.$rootScope.$emit('template-variable-value-updated'); this.$rootScope.$broadcast('refresh'); - this.variable.tags = tags; } } diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 758d8ab7067..73f0c038c7f 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -34,10 +34,6 @@ function (angular, _, $) { $location.search(urlParams); }); - $scope.onAppEvent('template-variable-value-updated', function() { - self.updateUrlParamsWithCurrentVariables(); - }); - $scope.onAppEvent('$routeUpdate', function() { var urlState = self.getQueryStringState(); if (self.needsSync(urlState)) { @@ -57,22 +53,6 @@ function (angular, _, $) { this.expandRowForPanel(); } - DashboardViewState.prototype.updateUrlParamsWithCurrentVariables = function() { - // update url - var params = $location.search(); - // remove variable params - _.each(params, function(value, key) { - if (key.indexOf('var-') === 0) { - delete params[key]; - } - }); - - // add new values - templateSrv.fillVariableValuesForUrl(params); - // update url - $location.search(params); - }; - DashboardViewState.prototype.expandRowForPanel = function() { if (!this.state.panelId) { return; } diff --git a/public/app/features/templating/adhoc_variable.ts b/public/app/features/templating/adhoc_variable.ts index 579b0268efa..ea942beaef3 100644 --- a/public/app/features/templating/adhoc_variable.ts +++ b/public/app/features/templating/adhoc_variable.ts @@ -6,6 +6,7 @@ import {Variable, assignModelProperties, variableTypes} from './variable'; import {VariableSrv} from './variable_srv'; export class AdhocVariable implements Variable { + filters: any[]; defaults = { type: 'adhoc', @@ -13,9 +14,7 @@ export class AdhocVariable implements Variable { label: '', hide: 0, datasource: null, - options: [], - current: {}, - tags: {}, + filters: [], }; /** @ngInject **/ @@ -41,8 +40,31 @@ export class AdhocVariable implements Variable { } setValueFromUrl(urlValue) { + if (!_.isArray(urlValue)) { + urlValue = [urlValue]; + } + + this.filters = urlValue.map(item => { + var values = item.split('|'); + return { + key: values[0], + operator: values[1], + value: values[2], + }; + }); + return Promise.resolve(); } + + getValueForUrl() { + return this.filters.map(filter => { + return filter.key + '|' + filter.operator + '|' + filter.value; + }); + } + + setFilters(filters: any[]) { + this.filters = filters; + } } variableTypes['adhoc'] = { diff --git a/public/app/features/templating/constant_variable.ts b/public/app/features/templating/constant_variable.ts index f0a659e0c20..9fe2acfdfb2 100644 --- a/public/app/features/templating/constant_variable.ts +++ b/public/app/features/templating/constant_variable.ts @@ -7,6 +7,7 @@ import {VariableSrv} from './variable_srv'; export class ConstantVariable implements Variable { query: string; options: any[]; + current: any; defaults = { type: 'constant', @@ -14,6 +15,7 @@ export class ConstantVariable implements Variable { hide: 2, label: '', query: '', + current: {}, }; /** @ngInject */ @@ -43,6 +45,11 @@ export class ConstantVariable implements Variable { setValueFromUrl(urlValue) { return this.variableSrv.setOptionFromUrl(this, urlValue); } + + getValueForUrl() { + return this.current.value; + } + } variableTypes['constant'] = { diff --git a/public/app/features/templating/custom_variable.ts b/public/app/features/templating/custom_variable.ts index 77dfd57cae8..90ce08cf9e4 100644 --- a/public/app/features/templating/custom_variable.ts +++ b/public/app/features/templating/custom_variable.ts @@ -10,6 +10,7 @@ export class CustomVariable implements Variable { options: any; includeAll: boolean; multi: boolean; + current: any; defaults = { type: 'custom', @@ -17,10 +18,11 @@ export class CustomVariable implements Variable { label: '', hide: 0, options: [], - current: {text: '', value: ''}, + current: {}, query: '', includeAll: false, multi: false, + allValue: null, }; /** @ngInject **/ @@ -61,6 +63,13 @@ export class CustomVariable implements Variable { setValueFromUrl(urlValue) { return this.variableSrv.setOptionFromUrl(this, urlValue); } + + getValueForUrl() { + if (this.current.text === 'All') { + return 'All'; + } + return this.current.value; + } } variableTypes['custom'] = { diff --git a/public/app/features/templating/datasource_variable.ts b/public/app/features/templating/datasource_variable.ts index b23b5e04e42..96776c31163 100644 --- a/public/app/features/templating/datasource_variable.ts +++ b/public/app/features/templating/datasource_variable.ts @@ -9,13 +9,14 @@ export class DatasourceVariable implements Variable { regex: any; query: string; options: any; + current: any; defaults = { type: 'datasource', name: '', hide: 0, label: '', - current: {text: '', value: ''}, + current: {}, regex: '', options: [], query: '', @@ -73,6 +74,10 @@ export class DatasourceVariable implements Variable { setValueFromUrl(urlValue) { return this.variableSrv.setOptionFromUrl(this, urlValue); } + + getValueForUrl() { + return this.current.value; + } } variableTypes['datasource'] = { diff --git a/public/app/features/templating/interval_variable.ts b/public/app/features/templating/interval_variable.ts index 94bb608e7e3..d53e44ae533 100644 --- a/public/app/features/templating/interval_variable.ts +++ b/public/app/features/templating/interval_variable.ts @@ -12,6 +12,7 @@ export class IntervalVariable implements Variable { auto: boolean; query: string; refresh: number; + current: any; defaults = { type: 'interval', @@ -20,7 +21,7 @@ export class IntervalVariable implements Variable { label: '', refresh: 2, options: [], - current: {text: '', value: ''}, + current: {}, query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d', auto: false, auto_min: '10s', @@ -75,6 +76,10 @@ export class IntervalVariable implements Variable { this.updateAutoValue(); return this.variableSrv.setOptionFromUrl(this, urlValue); } + + getValueForUrl() { + return this.current.value; + } } variableTypes['interval'] = { diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index 5d6492849f4..a9ac6aa02b9 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -33,8 +33,11 @@ export class QueryVariable implements Variable { name: '', multi: false, includeAll: false, + allValue: null, options: [], - current: {text: '', value: ''}, + current: {}, + tagsQuery: null, + tagValuesQuery: null, }; constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) { @@ -56,6 +59,13 @@ export class QueryVariable implements Variable { return this.variableSrv.setOptionFromUrl(this, urlValue); } + getValueForUrl() { + if (this.current.text === 'All') { + return 'All'; + } + return this.current.value; + } + updateOptions() { return this.datasourceSrv.get(this.datasource) .then(this.updateOptionsFromMetricFindQuery.bind(this)) diff --git a/public/app/features/templating/specs/template_srv_specs.ts b/public/app/features/templating/specs/template_srv_specs.ts new file mode 100644 index 00000000000..94b1e211293 --- /dev/null +++ b/public/app/features/templating/specs/template_srv_specs.ts @@ -0,0 +1,237 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import '../all'; +import {Emitter} from 'app/core/core'; + +describe('templateSrv', function() { + var _templateSrv, _variableSrv; + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.services')); + + beforeEach(angularMocks.inject(function(variableSrv, templateSrv) { + _templateSrv = templateSrv; + _variableSrv = variableSrv; + })); + + function initTemplateSrv(variables) { + _variableSrv.init({ + templating: {list: variables}, + events: new Emitter(), + }); + } + + describe('init', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: {value: 'oogle'}}]); + }); + + it('should initialize template data', function() { + var target = _templateSrv.replace('this.[[test]].filters'); + expect(target).to.be('this.oogle.filters'); + }); + }); + + describe('replace can pass scoped vars', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: {value: 'oogle' }}]); + }); + + it('should replace $test with scoped value', function() { + var target = _templateSrv.replace('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}}); + expect(target).to.be('this.mupp.filters'); + }); + + it('should replace $test with scoped text', function() { + var target = _templateSrv.replaceWithText('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}}); + expect(target).to.be('this.asd.filters'); + }); + }); + + describe('replace can pass multi / all format', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: {value: ['value1', 'value2'] }}]); + }); + + it('should replace $test with globbed value', function() { + var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); + expect(target).to.be('this.{value1,value2}.filters'); + }); + + it('should replace $test with piped value', function() { + var target = _templateSrv.replace('this=$test', {}, 'pipe'); + expect(target).to.be('this=value1|value2'); + }); + + it('should replace $test with piped value', function() { + var target = _templateSrv.replace('this=$test', {}, 'pipe'); + expect(target).to.be('this=value1|value2'); + }); + }); + + describe('variable with all option', function() { + beforeEach(function() { + initTemplateSrv([{ + type: 'query', + name: 'test', + current: {value: '$__all' }, + options: [ + {value: '$__all'}, {value: 'value1'}, {value: 'value2'} + ] + }]); + }); + + it('should replace $test with formatted all value', function() { + var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); + expect(target).to.be('this.{value1,value2}.filters'); + }); + }); + + describe('variable with all option and custom value', function() { + beforeEach(function() { + initTemplateSrv([{ + type: 'query', + name: 'test', + current: {value: '$__all' }, + allValue: '*', + options: [ + {value: 'value1'}, {value: 'value2'} + ] + }]); + }); + + it('should replace $test with formatted all value', function() { + var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); + expect(target).to.be('this.*.filters'); + }); + + it('should not escape custom all value', function() { + var target = _templateSrv.replace('this.$test', {}, 'regex'); + expect(target).to.be('this.*'); + }); + }); + + describe('lucene format', function() { + it('should properly escape $test with lucene escape sequences', function() { + initTemplateSrv([{type: 'query', name: 'test', current: {value: 'value/4' }}]); + var target = _templateSrv.replace('this:$test', {}, 'lucene'); + expect(target).to.be("this:value\\\/4"); + }); + }); + + describe('format variable to string values', function() { + it('single value should return value', function() { + var result = _templateSrv.formatValue('test'); + expect(result).to.be('test'); + }); + + it('multi value and glob format should render glob string', function() { + var result = _templateSrv.formatValue(['test','test2'], 'glob'); + expect(result).to.be('{test,test2}'); + }); + + it('multi value and lucene should render as lucene expr', function() { + var result = _templateSrv.formatValue(['test','test2'], 'lucene'); + expect(result).to.be('("test" OR "test2")'); + }); + + it('multi value and regex format should render regex string', function() { + var result = _templateSrv.formatValue(['test.','test2'], 'regex'); + expect(result).to.be('(test\\.|test2)'); + }); + + it('multi value and pipe should render pipe string', function() { + var result = _templateSrv.formatValue(['test','test2'], 'pipe'); + expect(result).to.be('test|test2'); + }); + + it('slash should be properly escaped in regex format', function() { + var result = _templateSrv.formatValue('Gi3/14', 'regex'); + expect(result).to.be('Gi3\\/14'); + }); + + }); + + describe('can check if variable exists', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: { value: 'oogle' } }]); + }); + + it('should return true if exists', function() { + var result = _templateSrv.variableExists('$test'); + expect(result).to.be(true); + }); + }); + + describe('can hightlight variables in string', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: { value: 'oogle' } }]); + }); + + it('should insert html', function() { + var result = _templateSrv.highlightVariablesAsHtml('$test'); + expect(result).to.be('$test'); + }); + + it('should insert html anywhere in string', function() { + var result = _templateSrv.highlightVariablesAsHtml('this $test ok'); + expect(result).to.be('this $test ok'); + }); + + it('should ignore if variables does not exist', function() { + var result = _templateSrv.highlightVariablesAsHtml('this $google ok'); + expect(result).to.be('this $google ok'); + }); + }); + + describe('updateTemplateData with simple value', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: { value: 'muuuu' } }]); + }); + + it('should set current value and update template data', function() { + var target = _templateSrv.replace('this.[[test]].filters'); + expect(target).to.be('this.muuuu.filters'); + }); + }); + + describe('fillVariableValuesForUrl with multi value', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: { value: ['val1', 'val2'] }}]); + }); + + it('should set multiple url params', function() { + var params = {}; + _templateSrv.fillVariableValuesForUrl(params); + expect(params['var-test']).to.eql(['val1', 'val2']); + }); + }); + + describe('fillVariableValuesForUrl with multi value and scopedVars', function() { + beforeEach(function() { + initTemplateSrv([{type: 'query', name: 'test', current: { value: ['val1', 'val2'] }}]); + }); + + it('should set scoped value as url params', function() { + var params = {}; + _templateSrv.fillVariableValuesForUrl(params, {'test': {value: 'val1'}}); + expect(params['var-test']).to.eql('val1'); + }); + }); + + describe('replaceWithText', function() { + beforeEach(function() { + initTemplateSrv([ + {type: 'query', name: 'server', current: { value: '{asd,asd2}', text: 'All' } }, + {type: 'interval', name: 'period', current: { value: '$__auto_interval', text: 'auto' } } + ]); + _templateSrv.setGrafanaVariable('$__auto_interval', '13m'); + _templateSrv.updateTemplateData(); + }); + + it('should replace with text except for grafanaVariables', function() { + var target = _templateSrv.replaceWithText('Server: $server, period: $period'); + expect(target).to.be('Server: All, period: 13m'); + }); + }); +}); diff --git a/public/app/features/templating/templateSrv.js b/public/app/features/templating/templateSrv.js index 7615aa7da0f..bca814d29a4 100644 --- a/public/app/features/templating/templateSrv.js +++ b/public/app/features/templating/templateSrv.js @@ -180,18 +180,11 @@ function (angular, _, kbn) { this.fillVariableValuesForUrl = function(params, scopedVars) { _.each(this.variables, function(variable) { - var current = variable.current; - var value = current.value; - - if (current.text === 'All') { - value = 'All'; - } - if (scopedVars && scopedVars[variable.name] !== void 0) { - value = scopedVars[variable.name].value; + params['var-' + variable.name] = scopedVars[variable.name].value; + } else { + params['var-' + variable.name] = variable.getValueForUrl(); } - - params['var-' + variable.name] = value; }); }; diff --git a/public/app/features/templating/variable.ts b/public/app/features/templating/variable.ts index 9a478b50840..3e12b65ec16 100644 --- a/public/app/features/templating/variable.ts +++ b/public/app/features/templating/variable.ts @@ -8,6 +8,7 @@ export interface Variable { updateOptions(); dependsOn(variable); setValueFromUrl(urlValue); + getValueForUrl(); getModel(); } diff --git a/public/app/features/templating/variable_srv.ts b/public/app/features/templating/variable_srv.ts index d2efdeb971e..b7013d517f4 100644 --- a/public/app/features/templating/variable_srv.ts +++ b/public/app/features/templating/variable_srv.ts @@ -14,6 +14,7 @@ export class VariableSrv { constructor(private $rootScope, private $q, private $location, private $injector, private templateSrv) { // update time variant variables $rootScope.$on('refresh', this.onDashboardRefresh.bind(this), $rootScope); + $rootScope.$on('template-variable-value-updated', this.updateUrlParamsWithCurrentVariables.bind(this), $rootScope); } init(dashboard) { @@ -210,6 +211,23 @@ export class VariableSrv { this.selectOptionsForCurrentValue(variable); return this.variableUpdated(variable); } + + updateUrlParamsWithCurrentVariables() { + // update url + var params = this.$location.search(); + + // remove variable params + _.each(params, function(value, key) { + if (key.indexOf('var-') === 0) { + delete params[key]; + } + }); + + // add new values + this.templateSrv.fillVariableValuesForUrl(params); + // update url + this.$location.search(params); + } } coreModule.service('variableSrv', VariableSrv); diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 4bb183474fb..81cffd18364 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -56,9 +56,9 @@ export default class InfluxDatasource { // apply add hoc filters for (let variable of this.templateSrv.variables) { if (variable.type === 'adhoc' && variable.datasource === this.name) { - for (let tag of variable.tags) { - if (tag.key !== undefined && tag.value !== undefined) { - target.tags.push({key: tag.key, value: tag.value, condition: 'AND'}); + for (let filter of variable.filters) { + if (filter.key !== undefined && filter.value !== undefined) { + target.tags.push({key: filter.key, value: filter.value, condition: filter.condition, operator: filter.operator}); } } } diff --git a/public/test/specs/templateSrv-specs.js b/public/test/specs/templateSrv-specs.js deleted file mode 100644 index 3dac01fbdf2..00000000000 --- a/public/test/specs/templateSrv-specs.js +++ /dev/null @@ -1,235 +0,0 @@ -define([ - '../mocks/dashboard-mock', - 'lodash', - 'app/features/templating/templateSrv' -], function(dashboardMock) { - 'use strict'; - - describe('templateSrv', function() { - var _templateSrv; - var _dashboard; - - beforeEach(module('grafana.services')); - beforeEach(module(function() { - _dashboard = dashboardMock.create(); - })); - - beforeEach(inject(function(templateSrv) { - _templateSrv = templateSrv; - })); - - describe('init', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); - }); - - it('should initialize template data', function() { - var target = _templateSrv.replace('this.[[test]].filters'); - expect(target).to.be('this.oogle.filters'); - }); - }); - - describe('replace can pass scoped vars', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); - }); - - it('should replace $test with scoped value', function() { - var target = _templateSrv.replace('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}}); - expect(target).to.be('this.mupp.filters'); - }); - - it('should replace $test with scoped text', function() { - var target = _templateSrv.replaceWithText('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}}); - expect(target).to.be('this.asd.filters'); - }); - }); - - describe('replace can pass multi / all format', function() { - beforeEach(function() { - _templateSrv.init([{name: 'test', current: {value: ['value1', 'value2'] }}]); - }); - - it('should replace $test with globbed value', function() { - var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); - expect(target).to.be('this.{value1,value2}.filters'); - }); - - it('should replace $test with piped value', function() { - var target = _templateSrv.replace('this=$test', {}, 'pipe'); - expect(target).to.be('this=value1|value2'); - }); - - it('should replace $test with piped value', function() { - var target = _templateSrv.replace('this=$test', {}, 'pipe'); - expect(target).to.be('this=value1|value2'); - }); - }); - - describe('variable with all option', function() { - beforeEach(function() { - _templateSrv.init([{ - name: 'test', - current: {value: '$__all' }, - options: [ - {value: '$__all'}, {value: 'value1'}, {value: 'value2'} - ] - }]); - }); - - it('should replace $test with formatted all value', function() { - var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); - expect(target).to.be('this.{value1,value2}.filters'); - }); - }); - - describe('variable with all option and custom value', function() { - beforeEach(function() { - _templateSrv.init([{ - name: 'test', - current: {value: '$__all' }, - allValue: '*', - options: [ - {value: 'value1'}, {value: 'value2'} - ] - }]); - }); - - it('should replace $test with formatted all value', function() { - var target = _templateSrv.replace('this.$test.filters', {}, 'glob'); - expect(target).to.be('this.*.filters'); - }); - - it('should not escape custom all value', function() { - var target = _templateSrv.replace('this.$test', {}, 'regex'); - expect(target).to.be('this.*'); - }); - }); - - describe('lucene format', function() { - it('should properly escape $test with lucene escape sequences', function() { - _templateSrv.init([{name: 'test', current: {value: 'value/4' }}]); - var target = _templateSrv.replace('this:$test', {}, 'lucene'); - expect(target).to.be("this:value\\\/4"); - }); - }); - - describe('format variable to string values', function() { - it('single value should return value', function() { - var result = _templateSrv.formatValue('test'); - expect(result).to.be('test'); - }); - - it('multi value and glob format should render glob string', function() { - var result = _templateSrv.formatValue(['test','test2'], 'glob'); - expect(result).to.be('{test,test2}'); - }); - - it('multi value and lucene should render as lucene expr', function() { - var result = _templateSrv.formatValue(['test','test2'], 'lucene'); - expect(result).to.be('("test" OR "test2")'); - }); - - it('multi value and regex format should render regex string', function() { - var result = _templateSrv.formatValue(['test.','test2'], 'regex'); - expect(result).to.be('(test\\.|test2)'); - }); - - it('multi value and pipe should render pipe string', function() { - var result = _templateSrv.formatValue(['test','test2'], 'pipe'); - expect(result).to.be('test|test2'); - }); - - it('slash should be properly escaped in regex format', function() { - var result = _templateSrv.formatValue('Gi3/14', 'regex'); - expect(result).to.be('Gi3\\/14'); - }); - - }); - - describe('can check if variable exists', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); - }); - - it('should return true if exists', function() { - var result = _templateSrv.variableExists('$test'); - expect(result).to.be(true); - }); - }); - - describe('can hightlight variables in string', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'oogle' } }]); - }); - - it('should insert html', function() { - var result = _templateSrv.highlightVariablesAsHtml('$test'); - expect(result).to.be('$test'); - }); - - it('should insert html anywhere in string', function() { - var result = _templateSrv.highlightVariablesAsHtml('this $test ok'); - expect(result).to.be('this $test ok'); - }); - - it('should ignore if variables does not exist', function() { - var result = _templateSrv.highlightVariablesAsHtml('this $google ok'); - expect(result).to.be('this $google ok'); - }); - }); - - describe('updateTemplateData with simple value', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); - }); - - it('should set current value and update template data', function() { - var target = _templateSrv.replace('this.[[test]].filters'); - expect(target).to.be('this.muuuu.filters'); - }); - }); - - describe('fillVariableValuesForUrl with multi value', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: ['val1', 'val2'] }}]); - }); - - it('should set multiple url params', function() { - var params = {}; - _templateSrv.fillVariableValuesForUrl(params); - expect(params['var-test']).to.eql(['val1', 'val2']); - }); - }); - - describe('fillVariableValuesForUrl with multi value and scopedVars', function() { - beforeEach(function() { - _templateSrv.init([{ name: 'test', current: { value: ['val1', 'val2'] }}]); - }); - - it('should set multiple url params', function() { - var params = {}; - _templateSrv.fillVariableValuesForUrl(params, {'test': {value: 'val1'}}); - expect(params['var-test']).to.eql('val1'); - }); - }); - - describe('replaceWithText', function() { - beforeEach(function() { - _templateSrv.init([ - { name: 'server', current: { value: '{asd,asd2}', text: 'All' } }, - { name: 'period', current: { value: '$__auto_interval', text: 'auto' } } - ]); - _templateSrv.setGrafanaVariable('$__auto_interval', '13m'); - _templateSrv.updateTemplateData(); - }); - - it('should replace with text except for grafanaVariables', function() { - var target = _templateSrv.replaceWithText('Server: $server, period: $period'); - expect(target).to.be('Server: All, period: 13m'); - }); - }); - - }); - -}); From dfe0f911053705e394457bab2919f659eada7021 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 20 Sep 2016 16:29:48 +0200 Subject: [PATCH 17/18] feat(adhoc): adhoc filters progress --- .../app/features/templating/adhoc_variable.ts | 6 +-- .../templating/specs/adhoc_variable_specs.ts | 40 +++++++++++++++++++ public/app/features/templating/templateSrv.js | 18 +++++++++ .../plugins/datasource/influxdb/datasource.ts | 33 +++++++-------- .../datasource/influxdb/influx_query.ts | 7 ++++ .../influxdb/specs/influx_query_specs.ts | 13 ++++++ 6 files changed, 96 insertions(+), 21 deletions(-) create mode 100644 public/app/features/templating/specs/adhoc_variable_specs.ts diff --git a/public/app/features/templating/adhoc_variable.ts b/public/app/features/templating/adhoc_variable.ts index ea942beaef3..5ebffb0b0e6 100644 --- a/public/app/features/templating/adhoc_variable.ts +++ b/public/app/features/templating/adhoc_variable.ts @@ -18,7 +18,7 @@ export class AdhocVariable implements Variable { }; /** @ngInject **/ - constructor(private model, private timeSrv, private templateSrv, private variableSrv) { + constructor(private model) { assignModelProperties(this, model, this.defaults); } @@ -68,7 +68,7 @@ export class AdhocVariable implements Variable { } variableTypes['adhoc'] = { - name: 'Ad hoc', + name: 'Ad hoc filters', ctor: AdhocVariable, - description: 'Ad hoc filters', + description: 'Add key/value filters on the fly', }; diff --git a/public/app/features/templating/specs/adhoc_variable_specs.ts b/public/app/features/templating/specs/adhoc_variable_specs.ts new file mode 100644 index 00000000000..15856940540 --- /dev/null +++ b/public/app/features/templating/specs/adhoc_variable_specs.ts @@ -0,0 +1,40 @@ +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; + +import {AdhocVariable} from '../adhoc_variable'; + +describe('AdhocVariable', function() { + + describe('when serializing to url', function() { + + it('should set return key value and op seperated by pipe', function() { + var variable = new AdhocVariable({ + filters: [ + {key: 'key1', operator: '=', value: 'value1'}, + {key: 'key2', operator: '!=', value: 'value2'}, + ] + }); + var urlValue = variable.getValueForUrl(); + expect(urlValue).to.eql(["key1|=|value1", "key2|!=|value2"]); + }); + + }); + + describe('when deserializing from url', function() { + + it('should restore filters', function() { + var variable = new AdhocVariable({}); + variable.setValueFromUrl(["key1|=|value1", "key2|!=|value2"]); + + expect(variable.filters[0].key).to.be('key1'); + expect(variable.filters[0].operator).to.be('='); + expect(variable.filters[0].value).to.be('value1'); + + expect(variable.filters[1].key).to.be('key2'); + expect(variable.filters[1].operator).to.be('!='); + expect(variable.filters[1].value).to.be('value2'); + }); + + }); + +}); + diff --git a/public/app/features/templating/templateSrv.js b/public/app/features/templating/templateSrv.js index bca814d29a4..e5ef5a0f6b7 100644 --- a/public/app/features/templating/templateSrv.js +++ b/public/app/features/templating/templateSrv.js @@ -15,6 +15,7 @@ function (angular, _, kbn) { this._index = {}; this._texts = {}; this._grafanaVariables = {}; + this._adhocVariables = {}; this.init = function(variables) { this.variables = variables; @@ -23,16 +24,33 @@ function (angular, _, kbn) { this.updateTemplateData = function() { this._index = {}; + this._filters = {}; for (var i = 0; i < this.variables.length; i++) { var variable = this.variables[i]; + + // add adhoc filters to it's own index + if (variable.type === 'adhoc') { + this._adhocVariables[variable.datasource] = variable; + continue; + } + if (!variable.current || !variable.current.isNone && !variable.current.value) { continue; } + this._index[variable.name] = variable; } }; + this.getAdhocFilters = function(datasourceName) { + var variable = this._adhocVariables[datasourceName]; + if (variable) { + return variable.filters || []; + } + return [] + }; + function luceneEscape(value) { return value.replace(/([\!\*\+\-\=<>\s\&\|\(\)\[\]\{\}\^\~\?\:\\/"])/g, "\\$1"); } diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index 81cffd18364..dd35f42f02e 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -44,36 +44,23 @@ export default class InfluxDatasource { query(options) { var timeFilter = this.getTimeFilter(options); - var scopedVars = _.extend({}, options.scopedVars); + var scopedVars = options.scopedVars ? _.cloneDeep(options.scopedVars) : {}; var targets = _.cloneDeep(options.targets); var queryTargets = []; + var queryModel; var i, y; var allQueries = _.map(targets, target => { if (target.hide) { return ""; } - if (!target.rawQuery) { - // apply add hoc filters - for (let variable of this.templateSrv.variables) { - if (variable.type === 'adhoc' && variable.datasource === this.name) { - for (let filter of variable.filters) { - if (filter.key !== undefined && filter.value !== undefined) { - target.tags.push({key: filter.key, value: filter.value, condition: filter.condition, operator: filter.operator}); - } - } - } - } - } - queryTargets.push(target); // build query scopedVars.interval = {value: target.interval || options.interval}; - var queryModel = new InfluxQuery(target, this.templateSrv, scopedVars); - var query = queryModel.render(true); + queryModel = new InfluxQuery(target, this.templateSrv, scopedVars); + return queryModel.render(true); - return query; }).reduce((acc, current) => { if (current !== "") { acc += ";" + current; @@ -81,6 +68,16 @@ export default class InfluxDatasource { return acc; }); + if (allQueries === '') { + return this.$q.when({data: []}); + } + + // add global adhoc filters to timeFilter + var adhocFilters = this.templateSrv.getAdhocFilters(this.name); + if (adhocFilters.length > 0 ) { + timeFilter += ' AND ' + queryModel.renderAdhocFilters(adhocFilters); + } + // replace grafana variables scopedVars.timeFilter = {value: timeFilter}; @@ -120,7 +117,7 @@ export default class InfluxDatasource { } } - return { data: seriesList }; + return {data: seriesList}; }); }; diff --git a/public/app/plugins/datasource/influxdb/influx_query.ts b/public/app/plugins/datasource/influxdb/influx_query.ts index fddb452767a..2f03f37a0a1 100644 --- a/public/app/plugins/datasource/influxdb/influx_query.ts +++ b/public/app/plugins/datasource/influxdb/influx_query.ts @@ -251,4 +251,11 @@ export default class InfluxQuery { return query; } + + renderAdhocFilters(filters) { + var conditions = _.map(filters, (tag, index) => { + return this.renderTagCondition(tag, index, false); + }); + return conditions.join(' '); + } } diff --git a/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts b/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts index 557c626a7cc..52beed1d080 100644 --- a/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts +++ b/public/app/plugins/datasource/influxdb/specs/influx_query_specs.ts @@ -237,6 +237,19 @@ describe('InfluxQuery', function() { expect(query.target.select[0][2].type).to.be('math'); }); + describe('when render adhoc filters', function() { + it('should generate correct query segment', function() { + var query = new InfluxQuery({measurement: 'cpu', }, templateSrv, {}); + + var queryText = query.renderAdhocFilters([ + {key: 'key1', operator: '=', value: 'value1'}, + {key: 'key2', operator: '!=', value: 'value2'}, + ]); + + expect(queryText).to.be('"key1" = \'value1\' AND "key2" != \'value2\''); + }); + }); + }); }); From 15423e6e51313e071ac64df8a313f813e397c610 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 20 Sep 2016 17:34:38 +0200 Subject: [PATCH 18/18] feat(adhoc filters): initial base mvp for adhoc filters are donecloses #6038 --- public/app/features/templating/editor_ctrl.ts | 22 ++++++-- .../features/templating/partials/editor.html | 51 ++++++++++--------- .../plugins/datasource/influxdb/datasource.ts | 2 + 3 files changed, 47 insertions(+), 28 deletions(-) diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index 25ddec62cce..81bf2d4d71c 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -9,6 +9,7 @@ export class VariableEditorCtrl { /** @ngInject */ constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) { $scope.variableTypes = variableTypes; + $scope.ctrl = {}; $scope.refreshOptions = [ {value: 0, text: "Never"}, @@ -60,9 +61,8 @@ export class VariableEditorCtrl { }; $scope.isValid = function() { - if (!$scope.current.name) { - $scope.appEvent('alert-warning', ['Validation', 'Template variable requires a name']); - return false; + if (!$scope.ctrl.form.$valid) { + return; } if (!$scope.current.name.match(/^\w+$/)) { @@ -79,6 +79,18 @@ export class VariableEditorCtrl { return true; }; + $scope.validate = function() { + $scope.infoText = ''; + if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) { + $scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource'; + datasourceSrv.get($scope.current.datasource).then(ds => { + if (!ds.supportAdhocFilters) { + $scope.infoText = 'This datasource does not support adhoc filters yet.'; + } + }); + } + }; + $scope.runQuery = function() { return variableSrv.updateOptions($scope.current).then(null, function(err) { if (err.data && err.data.message) { err.message = err.data.message; } @@ -90,6 +102,7 @@ export class VariableEditorCtrl { $scope.current = variable; $scope.currentIsNew = false; $scope.mode = 'edit'; + $scope.validate(); }; $scope.duplicate = function(variable) { @@ -126,6 +139,8 @@ export class VariableEditorCtrl { if (oldIndex !== -1) { this.variables[oldIndex] = $scope.current; } + + $scope.validate(); }; $scope.removeVariable = function(variable) { @@ -133,7 +148,6 @@ export class VariableEditorCtrl { $scope.variables.splice(index, 1); $scope.updateSubmenuVisibility(); }; - } } diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index c74245ae6be..e485072eed0 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -70,13 +70,13 @@ -
    +
    Variable
    Name - +
    @@ -102,15 +102,14 @@
    -
    -
    +
    Interval Options
    Values - +
    Auto option @@ -134,15 +133,15 @@
    -
    +
    Custom Options
    Values separated by comma - +
    -
    +
    Constant options
    Value @@ -150,14 +149,14 @@
    -
    +
    Query Options
    Data source
    - +
    @@ -174,7 +173,7 @@
    Query - +
    @@ -223,19 +222,18 @@
    -
    +
    Options
    -
    Data source
    - +
    -
    +
    -
    -
    Selection Options
    +
    +
    Selection Options
    -
    +
    Preview of values (shows max 20)
    @@ -280,12 +278,17 @@
    -
    -
    - - -
    -
    +
    + {{infoText}} +
    + +
    + + +
    + + +
    diff --git a/public/app/plugins/datasource/influxdb/datasource.ts b/public/app/plugins/datasource/influxdb/datasource.ts index dd35f42f02e..4c707dd59d1 100644 --- a/public/app/plugins/datasource/influxdb/datasource.ts +++ b/public/app/plugins/datasource/influxdb/datasource.ts @@ -21,6 +21,7 @@ export default class InfluxDatasource { interval: any; supportAnnotations: boolean; supportMetrics: boolean; + supportAdhocFilters: boolean; responseParser: any; /** @ngInject */ @@ -39,6 +40,7 @@ export default class InfluxDatasource { this.interval = (instanceSettings.jsonData || {}).timeInterval; this.supportAnnotations = true; this.supportMetrics = true; + this.supportAdhocFilters = true; this.responseParser = new ResponseParser(); }