From 685a2fec6ce29d323f10a9ed5cddfc854639f05f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 28 Aug 2014 16:03:13 +0200 Subject: [PATCH] trying to get new templating / filtering to work --- src/app/controllers/graphiteTarget.js | 6 +++--- src/app/controllers/templateEditorCtrl.js | 6 ++++-- src/app/directives/templateParamSelector.js | 7 ++----- src/app/partials/templating_editor.html | 12 +----------- src/app/services/elasticsearch/es-datasource.js | 6 +++--- src/app/services/templateSrv.js | 7 +++++-- src/css/less/variables.dark.less | 2 +- src/test/specs/helpers.js | 8 ++++++++ src/test/specs/templateSrv-specs.js | 9 ++------- 9 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/app/controllers/graphiteTarget.js b/src/app/controllers/graphiteTarget.js index 2e16c9f423e..aebc297b278 100644 --- a/src/app/controllers/graphiteTarget.js +++ b/src/app/controllers/graphiteTarget.js @@ -10,7 +10,7 @@ function (angular, _, config, gfunc, Parser) { var module = angular.module('grafana.controllers'); - module.controller('GraphiteTargetCtrl', function($scope, $sce) { + module.controller('GraphiteTargetCtrl', function($scope, $sce, templateSrv) { $scope.init = function() { $scope.target.target = $scope.target.target || ''; @@ -153,10 +153,10 @@ function (angular, _, config, gfunc, Parser) { return new MetricSegment({ value: segment.text, expandable: segment.expandable }); }); - _.each($scope.filter.templateParameters, function(templateParameter) { + _.each(templateSrv.variables, function(variable) { $scope.altSegments.unshift(new MetricSegment({ type: 'template', - value: '[[' + templateParameter.name + ']]', + value: '[[' + variable.name + ']]', expandable: true, })); }); diff --git a/src/app/controllers/templateEditorCtrl.js b/src/app/controllers/templateEditorCtrl.js index 4fc3a996d17..731bd433968 100644 --- a/src/app/controllers/templateEditorCtrl.js +++ b/src/app/controllers/templateEditorCtrl.js @@ -74,8 +74,10 @@ function (angular, _) { $scope.typeChanged = function () { if ($scope.current.type === 'time period') { - $scope.current.query = 'auto,1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; - $scope.current.auto_count = 10; + $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d'; + } + else { + $scope.current.query = ''; } }; diff --git a/src/app/directives/templateParamSelector.js b/src/app/directives/templateParamSelector.js index 52ebd00badc..106f5f9ee0b 100644 --- a/src/app/directives/templateParamSelector.js +++ b/src/app/directives/templateParamSelector.js @@ -21,9 +21,6 @@ function (angular, app, _, $) { var $input = $(inputTemplate); var $button = $(buttonTemplate); var variable = $scope.variable; - var options = _.map(variable.options, function(option) { - return option.text; - }); $input.appendTo(elem); $button.appendTo(elem); @@ -40,7 +37,6 @@ function (angular, app, _, $) { $input.attr('data-provide', 'typeahead'); $input.typeahead({ - source: options, minLength: 0, items: 10, updater: function(value) { @@ -52,8 +48,9 @@ function (angular, app, _, $) { var typeahead = $input.data('typeahead'); typeahead.lookup = function () { + var options = _.map(variable.options, function(option) { return option.text; }); this.query = this.$element.val() || ''; - return this.process(this.source); + return this.process(options); }; $button.click(function() { diff --git a/src/app/partials/templating_editor.html b/src/app/partials/templating_editor.html index 42dfe527399..15fff2b0492 100644 --- a/src/app/partials/templating_editor.html +++ b/src/app/partials/templating_editor.html @@ -5,7 +5,7 @@
-
+
@@ -71,16 +71,6 @@
-
- - -
-

-
- - This special type of template replacement is useful as the auto word will be calculated depending on the time range divided by - the number of periods you wish. -

diff --git a/src/app/services/elasticsearch/es-datasource.js b/src/app/services/elasticsearch/es-datasource.js index 8b499c75af1..34db3b50d8a 100644 --- a/src/app/services/elasticsearch/es-datasource.js +++ b/src/app/services/elasticsearch/es-datasource.js @@ -11,7 +11,7 @@ function (angular, _, $, config, kbn, moment) { var module = angular.module('grafana.services'); - module.factory('ElasticDatasource', function($q, $http) { + module.factory('ElasticDatasource', function($q, $http, templateSrv) { function ElasticDatasource(datasource) { this.type = 'elastic'; @@ -60,7 +60,7 @@ function (angular, _, $, config, kbn, moment) { }); }; - ElasticDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) { + ElasticDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) { var range = {}; var timeField = annotation.timeField || '@timestamp'; var queryString = annotation.query || '*'; @@ -73,7 +73,7 @@ function (angular, _, $, config, kbn, moment) { to: rangeUnparsed.to, }; - var queryInterpolated = filterSrv.applyTemplateToTarget(queryString); + var queryInterpolated = templateSrv.replace(queryString); var filter = { "bool": { "must": [{ "range": range }] } }; var query = { "bool": { "should": [{ "query_string": { "query": queryInterpolated } }] } }; var data = { "query" : { "filtered": { "query" : query, "filter": filter } }, "size": 100 }; diff --git a/src/app/services/templateSrv.js b/src/app/services/templateSrv.js index 6f1ab07ff41..187ecabf54a 100644 --- a/src/app/services/templateSrv.js +++ b/src/app/services/templateSrv.js @@ -2,14 +2,15 @@ define([ 'angular', 'lodash', 'kbn', - 'store' + 'config' ], -function (angular, _) { +function (angular, _, kbn, config) { 'use strict'; var module = angular.module('grafana.services'); module.service('templateSrv', function($q, $routeParams) { + var self = this; this.init = function(variables) { this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g }; @@ -29,7 +30,9 @@ function (angular, _) { if (!variable.current || !variable.current.value) { return; } + _templateData[variable.name] = variable.current.value; + }); this._templateData = _templateData; }; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 048ffd1a689..34863951190 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -6,7 +6,7 @@ // ------------------------- @black: #000; @gray: #bbb; -@grayDark: #242424; +@grayDark: #262626; @grayDarker: #1f1f1f; @grayLight: #ADAFAE; diff --git a/src/test/specs/helpers.js b/src/test/specs/helpers.js index bdc358d009d..9b08c02e2f6 100644 --- a/src/test/specs/helpers.js +++ b/src/test/specs/helpers.js @@ -9,6 +9,7 @@ define([ this.datasource = {}; this.annotationsSrv = {}; this.timeSrv = new TimeSrvStub(); + this.templateSrv = new TemplateSrvStub(); this.datasourceSrv = { getMetricSources: function() {}, get: function() { return self.datasource; } @@ -19,6 +20,7 @@ define([ $provide.value('datasourceSrv', self.datasourceSrv); $provide.value('annotationsSrv', self.annotationsSrv); $provide.value('timeSrv', self.timeSrv); + $provide.value('templateSrv', self.templateSrv); }); }; @@ -78,6 +80,12 @@ define([ }; } + function TemplateSrvStub() { + this.variables = []; + this.replace = function() {}; + } + + return { ControllerTestContext: ControllerTestContext, diff --git a/src/test/specs/templateSrv-specs.js b/src/test/specs/templateSrv-specs.js index ee02ed41e4e..c97f2e2caf4 100644 --- a/src/test/specs/templateSrv-specs.js +++ b/src/test/specs/templateSrv-specs.js @@ -29,14 +29,9 @@ define([ }); }); - describe('updateTemplateData', function() { + describe('updateTemplateData with simple value', function() { beforeEach(function() { - _templateSrv.init([{ - name: 'test', - value: 'muuu', - current: { value: 'muuuu' } - }]); - + _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]); _templateSrv.updateTemplateData(); });