Breaking out logic for variable dropdown into a controller, this needs some unit tests

public/app/directives/variableValueSelect.js

@@ -8,24 +8,206 @@ function (angular, app, _) {
   'use strict';
 
   angular
+    .module('grafana.controllers')
+    .controller('VariableSelectCtrl', function($scope) {
+      var vm = this;
+
+      vm.beforeDropdownShow = function() {
+        vm.oldCurrentText = 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;
+        });
+
+        vm.search = {query: '', options: vm.options};
+        vm.selectedValuesCount = currentValues.length;
+        vm.selectedTags = vm.selectedTag || [];
+
+        if (!vm.tags) {
+          vm.tags = _.map(vm.variable.tags, function(value) {
+            return { text: value, selected: false };
+          });
+        }
+      };
+
+      vm.updateLinkText = function() {
+        vm.labelText = vm.variable.label || '$' + vm.variable.name;
+        vm.linkText = vm.variable.current.text;
+      };
+
+      vm.clearSelections = function() {
+        _.each(vm.options, function(option) {
+          option.selected = false;
+        });
+
+        vm.selectionsChanged(vm.options[0], false);
+      };
+
+      vm.selectTag = function(tag) {
+        tag.selected = !tag.selected;
+        if (!tag.values) {
+          if (tag.text === 'backend') {
+            tag.values = ['backend_01', 'backend_02', 'backend_03', 'backend_04'];
+          } else {
+            tag.values = ['web_server_01', 'web_server_02', 'web_server_03', 'web_server_04'];
+          }
+          console.log('querying for tag values');
+        }
+
+        _.each(vm.options, function(option) {
+          if (_.indexOf(tag.values, option.value) !== -1) {
+            option.selected = tag.selected;
+          }
+        });
+
+        vm.selectedTags = _.filter(vm.tags, {selected: true});
+        vm.selectionsChanged(vm.options[0], false);
+      };
+
+      vm.keyDown = function (evt) {
+        if (evt.keyCode === 27) {
+          vm.hide();
+        }
+        if (evt.keyCode === 40) {
+          vm.moveHighlight(1);
+        }
+        if (evt.keyCode === 38) {
+          vm.moveHighlight(-1);
+        }
+        if (evt.keyCode === 13) {
+          vm.optionSelected(vm.search.options[vm.highlightIndex], {}, true, false);
+        }
+        if (evt.keyCode === 32) {
+          vm.optionSelected(vm.search.options[vm.highlightIndex], {}, false, false);
+        }
+      };
+
+      vm.moveHighlight = function(direction) {
+        vm.highlightIndex = (vm.highlightIndex + direction) % vm.search.options.length;
+      };
+
+      vm.optionSelected = function(option, event, commitChange, excludeOthers) {
+        if (!option) { return; }
+
+        option.selected = !option.selected;
+
+        commitChange = commitChange || false;
+        excludeOthers = excludeOthers || false;
+
+        var setAllExceptCurrentTo = function(newValue) {
+          _.each(vm.options, function(other) {
+            if (option !== other) { other.selected = newValue; }
+          });
+        };
+
+        // commit action (enter key), should not deselect it
+        if (commitChange) {
+          option.selected = true;
+        }
+
+        if (option.text === 'All' || excludeOthers) {
+          setAllExceptCurrentTo(false);
+          commitChange = true;
+        }
+        else if (!vm.variable.multi) {
+          setAllExceptCurrentTo(false);
+          commitChange = true;
+        } else if (event.ctrlKey || event.metaKey || event.shiftKey) {
+          commitChange = true;
+          setAllExceptCurrentTo(false);
+        }
+
+        vm.selectionsChanged(option, commitChange);
+      };
+
+      vm.selectionsChanged = function(defaultItem, commitChange) {
+        var selected = _.filter(vm.options, {selected: true});
+
+        if (selected.length === 0) {
+          defaultItem.selected = true;
+          selected = [defaultItem];
+        }
+
+        if (selected.length > 1 && selected.length !== vm.options.length) {
+          if (selected[0].text === 'All') {
+            selected[0].selected = false;
+            selected = selected.slice(1, selected.length);
+          }
+        }
+
+        vm.variable.current = {
+          text: _.pluck(selected, 'text').join(', '),
+          value: _.pluck(selected, 'value'),
+        };
+
+        var valuesNotInTag = _.filter(selected, function(test) {
+          for (var i = 0; i < vm.selectedTags.length; i++) {
+            var tag = vm.selectedTags[i];
+            if (_.indexOf(tag.values, test.value) !== -1) {
+              return false;
+            }
+          }
+          return true;
+        });
+
+        vm.variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
+
+        vm.selectedValuesCount = vm.variable.current.value.length;
+
+        // only single value
+        if (vm.selectedValuesCount === 1) {
+          vm.variable.current.value = selected[0].value;
+        }
+
+        if (commitChange) {
+          vm.switchToLink();
+        }
+      };
+
+      vm.queryChanged = function() {
+        vm.highlightIndex = -1;
+        vm.search.options = _.filter(vm.options, function(option) {
+          return option.text.toLowerCase().indexOf(vm.search.query.toLowerCase()) !== -1;
+        });
+      };
+
+      $scope.$watchGroup(['vm.variable.hideLabel', 'vm.variable.name', 'vm.variable.label', 'vm.variable.current.text'], function() {
+        vm.updateLinkText();
+      });
+
+    });
+
+    angular
     .module('grafana.directives')
     .directive('variableValueSelect', function($compile, $window, $timeout) {
 
       return {
         scope: { variable: "=", onUpdated: "&" },
         templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
-
+        controller: 'VariableSelectCtrl',
+        controllerAs: 'vm',
+        bindToController: true,
         link: function(scope, elem) {
+          var vm = scope.vm;
           var bodyEl = angular.element($window.document.body);
           var linkEl = elem.find('.variable-value-link');
           var inputEl = elem.find('input');
-          var variable = scope.variable;
           var cancelBlur = null;
 
           scope.openDropdown = function() {
             inputEl.show();
             linkEl.hide();
-            scope.dropdownVisible = true;
+            vm.dropdownVisible = true;
 
             inputEl.css('width', (linkEl.width() + 16) + 'px');
 
@@ -42,11 +224,12 @@ function (angular, app, _) {
               cancelBlur = null;
               inputEl.hide();
               linkEl.show();
-              scope.dropdownVisible = false;
+
+              vm.dropdownVisible = false;
               scope.$digest();
 
-              scope.updateLinkText();
-              scope.onUpdated();
+              scope.vm.updateLinkText();
+              scope.vm.onUpdated();
             }
             else {
               // need to have long delay because the blur
@@ -64,180 +247,10 @@ function (angular, app, _) {
           };
 
           scope.show = function() {
-            scope.oldCurrentText = variable.current.text;
-            scope.highlightIndex = -1;
-
-            var currentValues = variable.current.value;
-
-            if (_.isString(currentValues)) {
-              currentValues  = [currentValues];
-            }
-
-            scope.options = _.map(variable.options, function(option) {
-              if (_.indexOf(currentValues, option.value) >= 0) {
-                option.selected = true;
-              }
-              return option;
-            });
-
-            scope.search = {query: '', options: scope.options};
-            scope.selectedValuesCount = currentValues.length;
-            scope.selectedTags = scope.selectedTag || [];
-
-            if (!scope.tags) {
-              scope.tags = _.map(variable.tags, function(value) {
-                return { text: value, selected: false };
-              });
-            }
-
+            vm.beforeDropdownShow();
             scope.openDropdown();
           };
 
-          scope.queryChanged = function() {
-            scope.highlightIndex = -1;
-            scope.search.options = _.filter(scope.options, function(option) {
-              return option.text.toLowerCase().indexOf(scope.search.query.toLowerCase()) !== -1;
-            });
-          };
-
-          scope.keyDown = function (evt) {
-            if (evt.keyCode === 27) {
-              scope.hide();
-            }
-            if (evt.keyCode === 40) {
-              scope.moveHighlight(1);
-            }
-            if (evt.keyCode === 38) {
-              scope.moveHighlight(-1);
-            }
-            if (evt.keyCode === 13) {
-              scope.optionSelected(scope.search.options[scope.highlightIndex], {}, true, false);
-            }
-            if (evt.keyCode === 32) {
-              scope.optionSelected(scope.search.options[scope.highlightIndex], {}, false, false);
-            }
-          };
-
-          scope.moveHighlight = function(direction) {
-            scope.highlightIndex = (scope.highlightIndex + direction) % scope.search.options.length;
-          };
-
-          scope.optionSelected = function(option, event, commitChange, excludeOthers) {
-            if (!option) { return; }
-
-            option.selected = !option.selected;
-
-            commitChange = commitChange || false;
-            excludeOthers = excludeOthers || false;
-
-            var setAllExceptCurrentTo = function(newValue) {
-              _.each(scope.options, function(other) {
-                if (option !== other) { other.selected = newValue; }
-              });
-            };
-
-            // commit action (enter key), should not deselect it
-            if (commitChange) {
-              option.selected = true;
-            }
-
-            if (option.text === 'All' || excludeOthers) {
-              setAllExceptCurrentTo(false);
-              commitChange = true;
-            }
-            else if (!variable.multi) {
-              setAllExceptCurrentTo(false);
-              commitChange = true;
-            } else if (event.ctrlKey || event.metaKey || event.shiftKey) {
-              commitChange = true;
-              setAllExceptCurrentTo(false);
-            }
-
-            scope.selectionsChanged(option, commitChange);
-          };
-
-          scope.selectionsChanged = function(defaultItem, commitChange) {
-            var selected = _.filter(scope.options, {selected: true});
-
-            if (selected.length === 0) {
-              defaultItem.selected = true;
-              selected = [defaultItem];
-            }
-
-            if (selected.length > 1 && selected.length !== scope.options.length) {
-              if (selected[0].text === 'All') {
-                selected[0].selected = false;
-                selected = selected.slice(1, selected.length);
-              }
-            }
-
-            variable.current = {
-              text: _.pluck(selected, 'text').join(', '),
-              value: _.pluck(selected, 'value'),
-            };
-
-            var valuesNotInTag = _.filter(selected, function(test) {
-              for (var i = 0; i < scope.selectedTags.length; i++) {
-                var tag = scope.selectedTags[i];
-                if (_.indexOf(tag.values, test.value) !== -1) {
-                  return false;
-                }
-              }
-              return true;
-            });
-
-            variable.current.text = _.pluck(valuesNotInTag, 'text').join(', ');
-
-            scope.selectedValuesCount = variable.current.value.length;
-
-            // only single value
-            if (scope.selectedValuesCount === 1) {
-              variable.current.value = selected[0].value;
-            }
-
-            if (commitChange) {
-              scope.switchToLink();
-            }
-          };
-
-          scope.clearSelections = function() {
-            _.each(scope.options, function(option) {
-              option.selected = false;
-            });
-
-            scope.selectionsChanged(scope.options[0], false);
-          };
-
-          scope.selectTag = function(tag) {
-            tag.selected = !tag.selected;
-            if (!tag.values) {
-              if (tag.text === 'backend') {
-                tag.values = ['backend_01', 'backend_02', 'backend_03', 'backend_04'];
-              } else {
-                tag.values = ['web_server_01', 'web_server_02', 'web_server_03', 'web_server_04'];
-              }
-              console.log('querying for tag values');
-            }
-
-            _.each(scope.options, function(option) {
-              if (_.indexOf(tag.values, option.value) !== -1) {
-                option.selected = tag.selected;
-              }
-            });
-
-            scope.selectedTags = _.filter(scope.tags, {selected: true});
-            scope.selectionsChanged(scope.options[0], false);
-          };
-
-          scope.updateLinkText = function() {
-            scope.labelText = variable.label || '$' + variable.name;
-            scope.linkText = variable.current.text;
-          };
-
-          scope.$watchGroup(['variable.hideLabel', 'variable.name', 'variable.label', 'variable.current.text'], function() {
-            scope.updateLinkText();
-          });
-
           linkEl.click(scope.openDropdown);
         },
       };

public/app/features/dashboard/partials/variableValueSelect.html

@@ -1,36 +1,36 @@
-<span class="template-variable tight-form-item" ng-show="!variable.hideLabel" style="padding-right: 5px">
-	{{labelText}}:
+<span class="template-variable tight-form-item" ng-show="!vm.variable.hideLabel" style="padding-right: 5px">
+	{{vm.labelText}}:
 </span>
 
 <div class="variable-link-wrapper">
 	<a ng-click="show()" class="variable-value-link tight-form-item">
-		{{linkText}}
-		<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
+		{{vm.linkText}}
+		<span class="label-tag" ng-repeat="tag in vm.selectedTags" tag-color-from-name="tag.text">
 			{{tag.text}}
 			&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;
 		</span>
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
+	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
-	<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
+	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">
 			<div class="variable-options-column">
-				<a class="variable-options-column-header" ng-if="variable.multi" ng-class="{'many-selected': selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="clearSelections()">
+				<a class="variable-options-column-header" ng-if="vm.variable.multi" ng-class="{'many-selected': vm.selectedValuesCount > 1}" bs-tooltip="'Clear selections'" data-placement="top" ng-click="vm.clearSelections()">
 					<span class="variable-option-icon"></span>
-					Selected ({{selectedValuesCount}})
+					Selected ({{vm.selectedValuesCount}})
 				</a>
-				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
+				<a class="variable-option pointer" bindonce ng-repeat="option in vm.search.options" ng-class="{'selected': option.selected, 'highlighted': $index === vm.highlightIndex}" ng-click="vm.optionSelected(option, $event)">
 					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>
 			</div>
-			<div class="variable-options-column" ng-if="tags.length">
+			<div class="variable-options-column" ng-if="vm.tags.length">
 				<div class="variable-options-column-header text-center">
 					Tags
 				</div>
-				<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
+				<a class="variable-option-tag pointer" ng-repeat="tag in vm.tags" ng-click="vm.selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
 					<span class="fa fa-fw variable-option-icon"></span>
 					<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
 				</a>

public/css/less/submenu.less

@@ -82,15 +82,6 @@
  }
 }
 
-.variable-option-icon {
-  display: inline-block;
-  width: 24px;
-  height: 18px;
-  position: relative;
-  top: 4px;
-  background: url(@checkboxImageUrl) left top no-repeat;
-}
-
 .variable-options-wrapper {
   display: table;
   width: 100%;
@@ -126,6 +117,15 @@
   }
 }
 
+.variable-option-icon {
+  display: inline-block;
+  width: 24px;
+  height: 18px;
+  position: relative;
+  top: 4px;
+  background: url(@checkboxImageUrl) left top no-repeat;
+}
+
 .variable-option {
   &:hover, &.highlighted {
     background-color: @blueDark;