Extend template variable syntax to include , Closes #760

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Filter editing has gotten its own edit pane with much improved UI and options
 - [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
 
 **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/controllers/graphiteTarget.js

@@ -165,7 +165,7 @@ function (angular, _, config, gfunc, Parser) {
           _.each(templateSrv.variables, function(variable) {
             $scope.altSegments.unshift(new MetricSegment({
               type: 'template',
-              value: '$' + variable.name + ']]',
+              value: '$' + variable.name,
               expandable: true,
             }));
           });
@@ -297,13 +297,7 @@ function (angular, _, config, gfunc, Parser) {
       this.value = options.value;
       this.type = options.type;
       this.expandable = options.expandable;
-
-      if (options.type === 'template') {
-        this.html = $sce.trustAsHtml(options.value);
-      }
-      else {
-        this.html = $sce.trustAsHtml(this.value);
-      }
+      this.html = $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));
     }
 
   });

src/app/directives/graphiteFuncEditor.js

@@ -8,7 +8,7 @@ function (angular, _, $) {
 
   angular
     .module('grafana.directives')
-    .directive('graphiteFuncEditor', function($compile) {
+    .directive('graphiteFuncEditor', function($compile, templateSrv) {
 
       var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
       var paramTemplate = '<input type="text" style="display:none"' +
@@ -71,9 +71,10 @@ function (angular, _, $) {
             /*jshint validthis:true */
             var $input = $(this);
             var $link = $input.prev();
+            var newValue = $input.val();
 
-            if ($input.val() !== '' || func.def.params[paramIndex].optional) {
-              $link.text($input.val());
+            if (newValue !== '' || func.def.params[paramIndex].optional) {
+              $link.html(templateSrv.highlightVariablesAsHtml(newValue));
 
               func.updateParam($input.val(), paramIndex);
               scheduledRelinkIfNeeded();
@@ -153,7 +154,8 @@ function (angular, _, $) {
                 $('<span>, </span>').appendTo(elem);
               }
 
-              var $paramLink = $('<a ng-click="" class="graphite-func-param-link">' + func.params[index] + '</a>');
+              var paramValue = templateSrv.highlightVariablesAsHtml(func.params[index]);
+              var $paramLink = $('<a ng-click="" class="graphite-func-param-link">' + paramValue + '</a>');
               var $input = $(paramTemplate);
 
               paramCountAtLink++;

src/app/partials/panelgeneral.html

@@ -10,6 +10,5 @@
 		<div class="editor-option">
       <label class="small">Height</label><input type="text" class="input-medium" ng-model='panel.height'></select>
     </div>
-
   </div>
 </div>

src/app/services/templateSrv.js

@@ -40,9 +40,27 @@ function (angular, _) {
       this._templateData[name] = value;
     };
 
+    this.variableExists = function(expression) {
+      this.regex.lastIndex = 0;
+      var match = this.regex.exec(expression);
+      return match && (self._templateData[match[1] || match[2]] !== void 0);
+    };
+
+    this.highlightVariablesAsHtml = function(str) {
+      if (!str) { return str; }
+
+      this.regex.lastIndex = 0;
+      return str.replace(this.regex, function(match, g1, g2) {
+        if (self._templateData[g1 || g2]) {
+          return '<span class="template-variable">' + match + '</span>';
+        }
+      });
+    };
+
     this.replace = function(target) {
       if (!target) { return; }
 
+      this.regex.lastIndex = 0;
       return target.replace(this.regex, function(match, g1, g2) {
         return self._templateData[g1 || g2] || match;
       });

src/css/less/grafana.less

@@ -479,3 +479,8 @@ select.grafana-target-segment-input {
   color: darken(@gray, 25%);
   a { color: darken(@gray, 25%); }
 }
+
+.template-variable {
+  color: @variable;
+}
+

src/css/less/variables.dark.less

@@ -24,6 +24,7 @@
 @orange:                #FF8800;
 @pink:                  #FF4444;
 @purple:                #9933CC;
+@variable:              #32D1DF;
 
 // grafana Variables
 // -------------------------

src/css/less/variables.light.less

@@ -28,6 +28,7 @@
 @orange:                #FF7518;
 @pink:                  #E671B8;
 @purple:                #9954BB;
+@variable:              #32D1DF;
 
 // grafana Variables
 // -------------------------

src/test/specs/helpers.js

@@ -95,6 +95,8 @@ define([
     this.replace = function(text) {
       return _.template(text, this.data,  this.templateSettings);
     };
+    this.variableExists = function() { return false; };
+    this.highlightVariablesAsHtml = function(str) { return str; };
     this.setGrafanaVariable = function(name, value) {
       this.data[name] = value;
     };

src/test/specs/templateSrv-specs.js

@@ -29,6 +29,34 @@ define([
       });
     });
 
+    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('<span class="template-variable">$test</span>');
+      });
+
+      it('should insert html anywhere in string', function() {
+        var result = _templateSrv.highlightVariablesAsHtml('this $test ok');
+        expect(result).to.be('this <span class="template-variable">$test</span> ok');
+      });
+
+    });
+
     describe('updateTemplateData with simple value', function() {
       beforeEach(function() {
         _templateSrv.init([{ name: 'test', current: { value: 'muuuu' } }]);