progress on tag selection in variable dropdown

public/app/directives/variableValueSelect.js

@@ -95,6 +95,12 @@ function (angular, app, _) {
             scope.search = {query: '', options: scope.options};
             scope.selectedValuesCount = currentValues.length;
 
+            if (!scope.tags) {
+              scope.tags = _.map(variable.tags, function(value) {
+                return { text: value, selected: false };
+              });
+            }
+
             scope.openDropdown();
           };
 
@@ -158,11 +164,15 @@ function (angular, app, _) {
               setAllExceptCurrentTo(false);
             }
 
+            scope.selectionsChanged(option, commitChange);
+          };
+
+          scope.selectionsChanged = function(defaultItem, commitChange) {
             var selected = _.filter(scope.options, {selected: true});
 
             if (selected.length === 0) {
-              option.selected = true;
+              defaultItem.selected = true;
-              selected = [option];
+              selected = [defaultItem];
             }
 
             if (selected.length > 1 && selected.length !== scope.options.length) {
@@ -177,6 +187,18 @@ function (angular, app, _) {
               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
@@ -189,6 +211,27 @@ function (angular, app, _) {
             }
           };
 
+          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;

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

@@ -5,6 +5,10 @@
 <div style="position: relative; display: inline-block">
 	<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">
+			{{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>
@@ -22,9 +26,9 @@
 			</div>
 			<div class="variable-options-column" ng-if="variable.tags.length">
 				<div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div>
-				<a class="variable-option-tag pointer" ng-repeat="tag in variable.tags" ng-click="selectTag(option, $event)">
+				<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="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">{{tag}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
+					<span class="label-tag" tag-color-from-name="tag.text">{{tag.text}}&nbsp;&nbsp;<i class="fa fa-tag"></i>&nbsp;</span>
 				</a>
 			</div>
 		</div>

public/app/features/templating/editorCtrl.js

@@ -82,7 +82,6 @@ function (angular, _) {
     };
 
     $scope.update = function() {
-      $scope.current.tags = [];
       if ($scope.isValid()) {
         $scope.runQuery().then(function() {
           $scope.reset();

public/css/less/overrides.less

@@ -542,7 +542,7 @@ div.flot-text {
   background-color: @purple;
   color: darken(@white, 5%);
   white-space: nowrap;
-  border-radius: 2px;
+  border-radius: 3px;
   text-shadow: none;
   font-size: 13px;
   padding: 2px 6px;

public/css/less/submenu.less

@@ -39,6 +39,9 @@
 .variable-value-link {
   font-size: 16px;
   padding-right: 10px;
+  .label-tag {
+    margin: 0 5px;
+  }
 }
 
 .variable-value-dropdown {