Templating: Can now use template variables in panel titles, Closes #312

CHANGELOG.md

@@ -3,7 +3,7 @@
 **UI polish / changes**
 - [Issue #725](https://github.com/grafana/grafana/issues/725). UI: All modal editors are removed and replaced by an edit pane under menu. The look of editors is also updated and polished. Search dropdown is also shown as pane under menu and has seen some UI polish.
 
-**Filtering feature overhaul**
+**Filtering/Templating feature overhaul**
 - Filtering renamed to Templating, and filter items to variables
 - 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
@@ -11,6 +11,7 @@
 - [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
+- [Issue #312](https://github.com/grafana/grafana/issues/312). Templating: Can now use template variables in panel titles
 
 **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/directives/grafanaPanel.js

@@ -40,7 +40,7 @@ function (angular, $) {
                 'onStop:\'panelMoveStop\''+
                 '}"  ng-model="panel" ' +
                 '>' +
-                '{{panel.title || "No title"}}' +
+                '{{panel.title | interpolateTemplateVars}}' +
               '</span>' +
             '</span>'+
 

src/app/filters/all.js

@@ -9,18 +9,6 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen
     };
   });
 
-  /*
-    Filter an array of objects by elasticsearch version requirements
-  */
-  module.filter('esVersion', function(esVersion) {
-    return function(items, require) {
-      var ret = _.filter(items,function(qt) {
-        return esVersion.is(qt[require]) ? true : false;
-      });
-      return ret;
-    };
-  });
-
   module.filter('slice', function() {
     return function(arr, start, end) {
       if(!_.isUndefined(arr)) {
@@ -67,51 +55,10 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen
     };
   });
 
-  module.filter('urlLink', function() {
-    var  //URLs starting with http://, https://, or ftp://
-      r1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,
-      //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
-      r2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim,
-      //Change email addresses to mailto:: links.
-      r3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
-
-    var urlLink = function(text) {
-      var t1,t2,t3;
-      if(!_.isString(text)) {
-        return text;
-      } else {
-        _.each(text.match(r1), function() {
-          t1 = text.replace(r1, "<a href=\"$1\" target=\"_blank\">$1</a>");
-        });
-        text = t1 || text;
-        _.each(text.match(r2), function() {
-          t2 = text.replace(r2, "$1<a href=\"http://$2\" target=\"_blank\">$2</a>");
-        });
-        text = t2 || text;
-        _.each(text.match(r3), function() {
-          t3 = text.replace(r3, "<a href=\"mailto:$1\">$1</a>");
-        });
-        text = t3 || text;
-        return text;
-      }
-    };
+  module.filter('interpolateTemplateVars', function(templateSrv) {
     return function(text) {
-      return _.isArray(text)
-        ? _.map(text, urlLink)
-        : urlLink(text);
-    };
-  });
-
-  module.filter('gistid', function() {
-    var gist_pattern = /(\d{5,})|([a-z0-9]{10,})|(gist.github.com(\/*.*)\/[a-z0-9]{5,}\/*$)/;
-    return function(input) {
-      if(!(_.isUndefined(input))) {
-        var output = input.match(gist_pattern);
-        if(!_.isNull(output) && !_.isUndefined(output)) {
-          return output[0].replace(/.*\//, '');
-        }
-      }
+      return templateSrv.replace(text);
     };
   });
 
-});
+});