work on scoped variable values

src/app/features/dashboard/dynamicDashboardSrv.js

@@ -33,15 +33,16 @@ function (angular, _) {
         return;
       }
 
-      dashboard.scopedVars = {
-        panel: {}
-      };
-
-      _.each(variable.options, function(option) {
-        var copy = dashboard.duplicatePanel(panel, row);
-        copy.repeat = null;
-        dashboard.scopedVars.panel[panel.id] = {};
-        dashboard.scopedVars.panel[panel.id][variable.name] = option.value;
+      _.each(variable.options, function(option, index) {
+        if (index > 0) {
+          var copy = dashboard.duplicatePanel(panel, row);
+          copy.repeat = null;
+          copy.scopedVars = {};
+          copy.scopedVars[variable.name] = option;
+        } else {
+          panel.scopedVars = {};
+          panel.scopedVars[variable.name] = option;
+        }
         console.log('duplicatePanel');
       });
     };

src/app/features/panel/panelHelper.js

@@ -68,6 +68,7 @@ function (angular, _, kbn, $) {
         targets: scope.panel.targets,
         format: scope.panel.renderer === 'png' ? 'png' : 'json',
         maxDataPoints: scope.resolution,
+        scopedVars: scope.panel.scopedVars,
         cacheTimeout: scope.panel.cacheTimeout
       };
 

src/app/features/panel/panelMenu.js

@@ -11,7 +11,7 @@ function (angular, $, _) {
     .directive('panelMenu', function($compile, linkSrv) {
       var linkTemplate =
           '<span class="panel-title drag-handle pointer">' +
-            '<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars}}</span>' +
+            '<span class="panel-title-text drag-handle">{{panel.title | interpolateTemplateVars:this}}</span>' +
             '<span class="panel-links-icon"></span>' +
             '<span class="panel-time-info" ng-show="panelMeta.timeInfo"><i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}</span>' +
           '</span>';

src/app/features/templating/templateSrv.js

@@ -72,7 +72,7 @@ function (angular, _) {
       return target.replace(this._regex, function(match, g1, g2) {
         if (scopedVars) {
           value = scopedVars[g1 || g2];
-          if (value) { return value; }
+          if (value) { return value.value; }
         }
 
         value = self._values[g1 || g2];
@@ -82,7 +82,7 @@ function (angular, _) {
       });
     };
 
-    this.replaceWithText = function(target) {
+    this.replaceWithText = function(target, scopedVars) {
       if (!target) { return; }
 
       var value;
@@ -90,6 +90,11 @@ function (angular, _) {
       this._regex.lastIndex = 0;
 
       return target.replace(this._regex, function(match, g1, g2) {
+        if (scopedVars) {
+          var option = scopedVars[g1 || g2];
+          if (option) { return option.text; }
+        }
+
         value = self._values[g1 || g2];
         text = self._texts[g1 || g2];
         if (!value) { return match; }

src/app/filters/all.js

@@ -56,8 +56,8 @@ define(['angular', 'jquery', 'lodash', 'moment'], function (angular, $, _, momen
   });
 
   module.filter('interpolateTemplateVars', function(templateSrv) {
-    function interpolateTemplateVars(text) {
-      return templateSrv.replaceWithText(text);
+    function interpolateTemplateVars(text, scope) {
+      return templateSrv.replaceWithText(text, scope.panel.scopedVars);
     }
 
     interpolateTemplateVars.$stateful = true;

src/app/plugins/datasource/graphite/datasource.js

@@ -36,7 +36,7 @@ function (angular, _, $, config, kbn, moment) {
           maxDataPoints: options.maxDataPoints,
         };
 
-        var params = this.buildGraphiteParams(graphOptions, options.panelId);
+        var params = this.buildGraphiteParams(graphOptions, options.scopedVars);
 
         if (options.format === 'png') {
           return $q.when(this.url + '/render' + '?' + params.join('&'));
@@ -231,7 +231,7 @@ function (angular, _, $, config, kbn, moment) {
       '#Y', '#Z'
     ];
 
-    GraphiteDatasource.prototype.buildGraphiteParams = function(options, panelId) {
+    GraphiteDatasource.prototype.buildGraphiteParams = function(options, scopedVars) {
       var graphite_options = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
       var clean_options = [], targets = {};
       var target, targetValue, i;
@@ -252,7 +252,7 @@ function (angular, _, $, config, kbn, moment) {
           continue;
         }
 
-        targetValue = templateSrv.replace(target.target, panelId);
+        targetValue = templateSrv.replace(target.target, scopedVars);
         targetValue = targetValue.replace(intervalFormatFixRegex, fixIntervalFormat);
         targets[this._seriesRefLetters[i]] = targetValue;
       }

src/test/specs/templateSrv-specs.js

@@ -35,9 +35,14 @@ define([
       });
 
       it('should replace $test with scoped value', function() {
-        var target = _templateSrv.replace('this.$test.filters', {'test': 'mupp'});
+        var target = _templateSrv.replace('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}});
         expect(target).to.be('this.mupp.filters');
       });
+
+      it('should replace $test with scoped text', function() {
+        var target = _templateSrv.replaceWithText('this.$test.filters', {'test': {value: 'mupp', text: 'asd'}});
+        expect(target).to.be('this.asd.filters');
+      });
     });