trying to get new templating / filtering to work

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,
             }));
           });

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 = '';
       }
     };
 

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() {

src/app/partials/templating_editor.html

@@ -5,7 +5,7 @@
 		</div>
 
 		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+			<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
 			</div>
 		</div>
 
@@ -71,16 +71,6 @@
 					<label class="small">Values</label>
 					<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
 				</div>
-				<div class="editor-option">
-					<label class="small">Auto period count <tip>The number you want to divide the time range in</tip></label>
-					<select class="input-small" ng-model="current.auto_count" ng-options="f for f in [5,6,7,8,9,10,15,20,30,40,50,70,90,100]"></select>
-				</div>
-				<p class="small">
-					<br>
-					<i class="icon-info-sign"></i>
-					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.
-				</p>
 			</div>
 
 			<div ng-show="current.type === 'query'">

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 };

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;
     };

src/css/less/variables.dark.less

@@ -6,7 +6,7 @@
 // -------------------------
 @black:                 #000;
 @gray:                  #bbb;
-@grayDark:              #242424;
+@grayDark:              #262626;
 @grayDarker:            #1f1f1f;
 
 @grayLight:             #ADAFAE;

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,

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();
       });