feat(mixed datasource): changed how query ref ids (letters) are assigned, now they are persisted

public/app/features/panel/panelDirective.js

@@ -40,8 +40,6 @@ function (angular, $, config) {
     };
   });
 
-  var targetLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
   module.directive('queryEditorLoader', function($compile, $parse, datasourceSrv) {
     return {
       restrict: 'E',
@@ -59,7 +57,6 @@ function (angular, $, config) {
 
             editorScope = scope.$new();
             editorScope.datasource = ds;
-            editorScope.targetLetters = targetLetters;
 
             var panelEl = angular.element(document.createElement('metric-query-editor-' + ds.meta.type));
             elem.append(panelEl);

public/app/features/panel/panelSrv.js

@@ -44,7 +44,20 @@ function (angular, _, config) {
       };
 
       $scope.addDataQuery = function(datasource) {
-        $scope.panel.targets.push({target: '', datasource: datasource});
+        var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        var target = {};
+
+        if (datasource) {
+          target.datasource = datasource;
+        }
+
+        target.refId = _.find(letters, function(refId) {
+          return _.every($scope.panel.targets, function(other) {
+            return other.refId !== refId;
+          });
+        });
+
+        $scope.panel.targets.push(target);
       };
 
       $scope.removeDataQuery = function (query) {

public/app/plugins/datasource/graphite/datasource.js

@@ -228,21 +228,13 @@ function (angular, _, $, config, kbn, moment) {
       return backendSrv.datasourceRequest(options);
     };
 
-    GraphiteDatasource.prototype._seriesRefLetters = [
-      '#A', '#B', '#C', '#D',
-      '#E', '#F', '#G', '#H',
-      '#I', '#J', '#K', '#L',
-      '#M', '#N', '#O', '#P',
-      '#Q', '#R', '#S', '#T',
-      '#U', '#V', '#W', '#X',
-      '#Y', '#Z'
-    ];
+    GraphiteDatasource.prototype._seriesRefLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
     GraphiteDatasource.prototype.buildGraphiteParams = function(options, scopedVars) {
       var graphite_options = ['from', 'until', 'rawData', 'format', 'maxDataPoints', 'cacheTimeout'];
       var clean_options = [], targets = {};
       var target, targetValue, i;
-      var regex = /(\#[A-Z])/g;
+      var regex = /\#([A-Z])/g;
       var intervalFormatFixRegex = /'(\d+)m'/gi;
 
       if (options.format !== 'png') {
@@ -259,13 +251,17 @@ function (angular, _, $, config, kbn, moment) {
           continue;
         }
 
+        if (!target.refId) {
+          target.refId = this._seriesRefLetters[i];
+        }
+
         targetValue = templateSrv.replace(target.target, scopedVars);
         targetValue = targetValue.replace(intervalFormatFixRegex, fixIntervalFormat);
-        targets[this._seriesRefLetters[i]] = targetValue;
+        targets[target.refId] = targetValue;
       }
 
-      function nestedSeriesRegexReplacer(match) {
-        return targets[match];
+      function nestedSeriesRegexReplacer(match, g1) {
+        return targets[g1];
       }
 
       for (i = 0; i < options.targets.length; i++) {
@@ -274,9 +270,9 @@ function (angular, _, $, config, kbn, moment) {
           continue;
         }
 
-        targetValue = targets[this._seriesRefLetters[i]];
+        targetValue = targets[target.refId];
         targetValue = targetValue.replace(regex, nestedSeriesRegexReplacer);
-        targets[this._seriesRefLetters[i]] = targetValue;
+        targets[target.refId] = targetValue;
 
         if (!target.hide) {
           clean_options.push("target=" + encodeURIComponent(targetValue));

public/app/plugins/datasource/graphite/partials/query.editor.html

@@ -48,7 +48,7 @@
 
 	<ul class="tight-form-list">
 		<li class="tight-form-item" style="min-width: 15px; text-align: center">
-			{{targetLetters[$index]}}
+			{{target.refId}}
 		</li>
 		<li>
 			<a  class="tight-form-item"

public/app/plugins/datasource/opentsdb/partials/query.editor.html

@@ -26,7 +26,7 @@
 
 	<ul class="tight-form-list">
 		<li class="tight-form-item" style="min-width: 15px; text-align: center">
-			{{targetLetters[$index]}}
+			{{target.refId}}
 		</li>
 		<li>
 			<a  class="tight-form-item"

public/test/specs/panelSrv-specs.js

+define([
+  'helpers',
+  'features/panel/panelSrv',
+], function() {
+  'use strict';
+
+  describe('PanelSrv', function() {
+    var _panelSrv;
+    var _panelScope;
+    var _datasourceSrvStub;
+
+    beforeEach(module('grafana.services'));
+    beforeEach(module(function($provide) {
+      _datasourceSrvStub = {
+        getMetricSources: sinon.spy(),
+      };
+      $provide.value('datasourceSrv', _datasourceSrvStub);
+    }));
+
+    beforeEach(inject(function(panelSrv, $rootScope) {
+      _panelSrv = panelSrv;
+      _panelScope = $rootScope.$new();
+      _panelScope.panel = {
+        targets: [],
+      };
+      _panelScope.dashboardViewState = {
+        registerPanel: sinon.spy(),
+      };
+    }));
+
+    describe('init', function() {
+      beforeEach(function() {
+        _panelSrv.init(_panelScope);
+      });
+
+      describe('addDataQuery', function() {
+        it('should add target', function() {
+          _panelScope.addDataQuery();
+          expect(_panelScope.panel.targets.length).to.be(1);
+        });
+
+        it('should set refId', function() {
+          _panelScope.addDataQuery();
+          expect(_panelScope.panel.targets[0].refId).to.be('A');
+        });
+
+        it('should set refId to first available letter', function() {
+          _panelScope.panel.targets = [{refId: 'A'}];
+          _panelScope.addDataQuery();
+          expect(_panelScope.panel.targets[1].refId).to.be('B');
+        });
+      });
+
+    });
+  });
+
+});
+

public/test/test-main.js

@@ -139,6 +139,7 @@ require([
     'specs/seriesOverridesCtrl-specs',
     'specs/shareModalCtrl-specs',
     'specs/timeSrv-specs',
+    'specs/panelSrv-specs',
     'specs/templateSrv-specs',
     'specs/templateValuesSrv-specs',
     'specs/kbn-format-specs',