Variable value select fixes and refactorings

public/app/directives/all.js

@@ -11,7 +11,7 @@ define([
   './spectrumPicker',
   './tags',
   './bodyClass',
-  './selectDropDown',
+  './valueSelectDropdown',
   './metric.segment',
   './grafanaVersionCheck',
   './dropdown.typeahead',

public/app/directives/valueSelectDropdown.js

@@ -9,7 +9,7 @@ function (angular, app, _) {
 
   angular
     .module('grafana.controllers')
-    .controller('SelectDropdownCtrl', function($q) {
+    .controller('ValueSelectDropdownCtrl', function($q) {
       var vm = this;
 
       vm.show = function() {
@@ -31,7 +31,13 @@ function (angular, app, _) {
         vm.selectedValues = _.filter(vm.options, {selected: true});
 
         vm.tags = _.map(vm.variable.tags, function(value) {
-          return { text: value, selected: false };
+          var tag = { text: value, selected: false };
+          _.each(vm.variable.current.tags, function(tagObj) {
+            if (tagObj.text === value) {
+              tag.selected = true;
+            }
+          });
+          return tag;
         });
 
         vm.search = {query: '', options: vm.options};
@@ -225,12 +231,12 @@ function (angular, app, _) {
 
   angular
     .module('grafana.directives')
-    .directive('selectDropdown', function($compile, $window, $timeout) {
+    .directive('valueSelectDropdown', function($compile, $window, $timeout) {
 
       return {
         scope: { variable: "=", onUpdated: "&", getValuesForTag: "&" },
-        templateUrl: 'app/partials/selectDropdown.html',
-        controller: 'SelectDropdownCtrl',
+        templateUrl: 'app/partials/valueSelectDropdown.html',
+        controller: 'ValueSelectDropdownCtrl',
         controllerAs: 'vm',
         bindToController: true,
         link: function(scope, elem) {

public/app/partials/submenu.html

@@ -6,7 +6,7 @@
 				<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
 					{{variable.label || variable.name}}:
 				</span>
-				<select-dropdown variable="variable" on-updated="variableUpdated(variable)" get-values-for-tag="getValuesForTag(variable, tagKey)"></select-dropdown>
+				<value-select-dropdown variable="variable" on-updated="variableUpdated(variable)" get-values-for-tag="getValuesForTag(variable, tagKey)"></value-select-dropdown>
 			</li>
 		</ul>
 

public/test/specs/valueSelectDropdown-specs.js

@@ -1,5 +1,5 @@
 define([
-  'directives/variableValueSelect',
+  'directives/valueSelectDropdown',
 ],
 function () {
   'use strict';
@@ -15,7 +15,7 @@ function () {
     beforeEach(inject(function($controller, $rootScope, $q) {
       rootScope = $rootScope;
       scope = $rootScope.$new();
-      ctrl = $controller('SelectDropdownCtrl', {$scope: scope});
+      ctrl = $controller('ValueSelectDropdownCtrl', {$scope: scope});
       ctrl.getValuesForTag = function(obj) {
         return $q.when(tagValuesMap[obj.tagKey]);
       };
@@ -134,5 +134,28 @@ function () {
         });
       });
     });
+
+    describe("Given variable with selected tags", function() {
+      beforeEach(function() {
+        ctrl.variable = {
+          current: {text: 'server-1', value: 'server-1', tags: [{text: 'key1'}] },
+          options: [
+            {text: 'server-1', value: 'server-1'},
+            {text: 'server-2', value: 'server-2'},
+            {text: 'server-3', value: 'server-3'},
+          ],
+          tags: ["key1", "key2", "key3"],
+          multi: true
+        };
+        ctrl.init();
+        ctrl.show();
+      });
+
+      it("should set tag as selected", function() {
+        expect(ctrl.tags[0].selected).to.be(true);
+      });
+
+    });
+
   });
 });

public/test/test-main.js

@@ -144,7 +144,7 @@ require([
     'specs/singlestat-specs',
     'specs/dynamicDashboardSrv-specs',
     'specs/unsavedChangesSrv-specs',
-    'specs/selectDropdownCtrl-specs',
+    'specs/valueSelectDropdown-specs',
   ];
 
   var pluginSpecs = (config.plugins.specs || []).map(function (spec) {