Fixes to template variable with tags and inital state after dashboard load, #2080

public/app/directives/valueSelectDropdown.js

@@ -16,18 +16,7 @@ function (angular, app, _) {
         vm.oldVariableText = vm.variable.current.text;
         vm.highlightIndex = -1;
 
-        var currentValues = vm.variable.current.value;
-        if (_.isString(currentValues)) {
-          currentValues  = [currentValues];
-        }
-
-        vm.options = _.map(vm.variable.options, function(option) {
-          if (_.indexOf(currentValues, option.value) >= 0) { option.selected = true; }
-          return option;
-        });
-
-        _.sortBy(vm.options, 'text');
-
+        vm.options = vm.variable.options;
         vm.selectedValues = _.filter(vm.options, {selected: true});
 
         vm.tags = _.map(vm.variable.tags, function(value) {
@@ -46,28 +35,23 @@ function (angular, app, _) {
 
       vm.updateLinkText = function() {
         var current = vm.variable.current;
-        var currentValues = current.value;
 
-        if (_.isArray(currentValues) && current.tags.length) {
+        if (current.tags && current.tags.length) {
           // filer out values that are in selected tags
-          currentValues = _.filter(currentValues, function(test) {
-            for (var i = 0; i < current.tags.length; i++) {
-              if (_.indexOf(current.tags[i].values, test) !== -1) {
+          var selectedAndNotInTag = _.filter(vm.variable.options, function(option) {
+            if (!option.selected) { return false; }
+            for (var i = 0; i < current.tags.length; i++)  {
+              var tag = current.tags[i];
+              if (_.indexOf(tag.values, option.value) !== -1) {
                 return false;
               }
             }
             return true;
           });
+
           // convert values to text
-          var currentTexts = _.map(currentValues, function(value) {
-            for (var i = 0; i < vm.variable.options.length; i++) {
-              var option = vm.variable.options[i];
-              if (option.value === value) {
-                return option.text;
-              }
-            }
-            return value;
-          });
+          var currentTexts = _.pluck(selectedAndNotInTag, 'text');
+
           // join texts
           vm.linkText = currentTexts.join(' + ');
           if (vm.linkText.length > 0) {

public/app/features/dashboard/dynamicDashboardSrv.js

@@ -91,7 +91,7 @@ function (angular, _) {
     // returns a new panel clone or reuses a clone from previous iteration
     this.repeatRow = function(row) {
       var variables = this.dashboard.templating.list;
-      var variable = _.findWhere(variables, {name: row.repeat.replace('$', '')});
+      var variable = _.findWhere(variables, {name: row.repeat});
       if (!variable) {
         return;
       }

public/app/features/templating/templateValuesSrv.js

@@ -119,43 +119,58 @@ function (angular, _, kbn) {
         return $q.when([]);
       }
 
-      return datasourceSrv.get(variable.datasource).then(function(datasource) {
-        var queryPromise = datasource.metricFindQuery(variable.query).then(function (results) {
-          variable.options = self.metricNamesToVariableValues(variable, results);
+      return datasourceSrv.get(variable.datasource)
+        .then(_.partial(this.updateOptionsFromMetricFindQuery, variable))
+        .then(_.partial(this.updateTags, variable))
+        .then(_.partial(this.validateVariableSelectionState, variable));
+    };
 
-          if (variable.includeAll) {
-            self.addAllOption(variable);
-          }
+    this.validateVariableSelectionState = function(variable) {
+      if (!variable.current) {
+        return self.setVariableValue(variable, variable.options[0]);
+      }
 
-          // if parameter has current value
-          // if it exists in options array keep value
-          if (variable.current) {
-            // if current value is an array do not do anything
-            if (_.isArray(variable.current.value)) {
-              return $q.when([]);
-            }
-            var currentOption = _.findWhere(variable.options, { text: variable.current.text });
-            if (currentOption) {
-              return self.setVariableValue(variable, currentOption);
+      if (_.isArray(variable.current.value)) {
+        for (var i = 0; i < variable.current.value.length; i++) {
+          var value = variable.current.value[i];
+          for (var y = 0; y < variable.options.length; y++) {
+            var option = variable.options[y];
+            if (option.value === value) {
+              option.selected = true;
             }
           }
+        }
+      } else {
+        var currentOption = _.findWhere(variable.options, { text: variable.current.text });
+        if (currentOption) {
+          return self.setVariableValue(variable, currentOption);
+        }
+      }
+    };
 
-          return self.setVariableValue(variable, variable.options[0]);
+    this.updateTags = function(variable, datasource) {
+      if (variable.useTags) {
+        return datasource.metricFindQuery(variable.tagsQuery).then(function (results) {
+          variable.tags = [];
+          for (var i = 0; i < results.length; i++) {
+            variable.tags.push(results[i].text);
+          }
+          return datasource;
         });
+      } else {
+        delete variable.tags;
+      }
 
-        if (variable.useTags) {
-          return queryPromise.then(function() {
-            datasource.metricFindQuery(variable.tagsQuery).then(function (results) {
-              variable.tags = [];
-              for (var i = 0; i < results.length; i++) {
-                variable.tags.push(results[i].text);
-              }
-            });
-          });
-        } else {
-          delete variable.tags;
-          return queryPromise;
+      return datasource;
+    };
+
+    this.updateOptionsFromMetricFindQuery = function(variable, datasource) {
+      return datasource.metricFindQuery(variable.query).then(function (results) {
+        variable.options = self.metricNamesToVariableValues(variable, results);
+        if (variable.includeAll) {
+          self.addAllOption(variable);
         }
+        return datasource;
       });
     };
 
@@ -192,7 +207,7 @@ function (angular, _, kbn) {
         options[value] = value;
       }
 
-      return _.map(_.keys(options), function(key) {
+      return _.map(_.keys(options).sort(), function(key) {
         return { text: key, value: key };
       });
     };
@@ -200,19 +215,19 @@ function (angular, _, kbn) {
     this.addAllOption = function(variable) {
       var allValue = '';
       switch(variable.allFormat) {
-        case 'wildcard':
-          allValue = '*';
-          break;
-        case 'regex wildcard':
-          allValue = '.*';
-          break;
-        case 'regex values':
-          allValue = '(' + _.pluck(variable.options, 'text').join('|') + ')';
-          break;
-        default:
-          allValue = '{';
-          allValue += _.pluck(variable.options, 'text').join(',');
-          allValue += '}';
+      case 'wildcard':
+        allValue = '*';
+        break;
+      case 'regex wildcard':
+        allValue = '.*';
+        break;
+      case 'regex values':
+        allValue = '(' + _.pluck(variable.options, 'text').join('|') + ')';
+        break;
+      default:
+        allValue = '{';
+        allValue += _.pluck(variable.options, 'text').join(',');
+        allValue += '}';
       }
 
       variable.options.unshift({text: 'All', value: allValue});

public/test/specs/valueSelectDropdown-specs.js

@@ -38,7 +38,7 @@ function () {
         ctrl.variable = {
           current: {text: 'server-1', value: 'server-1'},
           options: [
-            {text: 'server-1', value: 'server-1'},
+            {text: 'server-1', value: 'server-1', selected: true},
             {text: 'server-2', value: 'server-2'},
             {text: 'server-3', value: 'server-3'},
           ],