Templating: Ability to use template variables for function parameters via custom…

Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example, Closes #262

CHANGELOG.md

@@ -9,6 +9,8 @@
 - [Issue #296](https://github.com/grafana/grafana/issues/296). Templating: Can now retrieve variable values from a non-default data source
 - [Issue #219](https://github.com/grafana/grafana/issues/219). Templating: Template variable value selection is now a typeahead autocomplete dropdown
 - [Issue #760](https://github.com/grafana/grafana/issues/760). Templating: Extend template variable syntax to include $variable syntax replacement
+- [Issue #234](https://github.com/grafana/grafana/issues/234). Templating: Interval variable type for time intervals summarize/group by parameter, included "auto" option, and auto step counts option.
+- [Issue #262](https://github.com/grafana/grafana/issues/262). Templating: Ability to use template variables for function parameters via custom variable type, can be used as parameter for movingAverage or scaleToSeconds for example
 
 **InfluxDB Breaking changes**
 - To better support templating, fill(0) and group by time low limit some changes has been made to the editor and query model schema

src/app/partials/templating_editor.html

@@ -89,6 +89,15 @@
 						</div>
 					</div>
 
+					<div ng-show="current.type === 'custom'">
+						<div class="editor-row">
+							<div class="editor-option">
+								<label class="small">Values seperated by comma</label>
+								<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
+							</div>
+						</div>
+					</div>
+
 					<div ng-show="current.type === 'query'">
 						<div class="editor-row">
 							<div class="editor-option form-inline">

src/app/services/templateSrv.js

@@ -58,6 +58,7 @@ function (angular, _) {
         if (self._templateData[g1 || g2]) {
           return '<span class="template-variable">' + match + '</span>';
         }
+        return match;
       });
     };
 

src/app/services/templateValuesSrv.js

@@ -71,13 +71,20 @@ function (angular, _, kbn) {
       return $q.all(promises);
     };
 
-    this.updateOptions = function(variable) {
-      if (variable.type === 'interval') {
-        variable.options = _.map(variable.query.split(','), function(text) {
-          return { text: text, value: text };
-        });
+    this._updateNonQueryVariable = function(variable) {
+      // extract options in comma seperated string
+      variable.options = _.map(variable.query.split(/[\s,]+/), function(text) {
+        return { text: text, value: text };
+      });
 
+      if (variable.type === 'interval') {
         self.updateAutoInterval(variable);
+      }
+    };
+
+    this.updateOptions = function(variable) {
+      if (variable.type !== 'query') {
+        self._updateNonQueryVariable(variable);
         self.setVariableValue(variable, variable.options[0]);
         return $q.when([]);
       }

src/test/specs/templateSrv-specs.js

@@ -55,6 +55,11 @@ define([
         expect(result).to.be('this <span class="template-variable">$test</span> 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() {

src/test/specs/templateValuesSrv-specs.js

@@ -86,6 +86,24 @@ define([
       });
     });
 
+    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' };