work on variable multi select

public/app/directives/variableValueSelect.js

@@ -200,6 +200,14 @@ function (angular, app, _) {
             }
           };
 
+          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) {
@@ -231,7 +239,6 @@ function (angular, app, _) {
           });
 
           linkEl.click(scope.openDropdown);
-          //inputEl.blur(scope.switchToLink);
         },
       };
     });

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

@@ -17,16 +17,19 @@
 	<div class="variable-value-dropdown" ng-if="dropdownVisible" ng-class="{'multi': variable.multi, 'single': !variable.multi}">
 		<div class="variable-options-wrapper">
 			<div class="variable-options-column">
-				<div class="variable-options-column-header" ng-if="variable.multi">
+				<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()">
+					<span class="variable-option-icon"></span>
 					Selected ({{selectedValuesCount}})
-				</div>
+				</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)">
 					<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-header" ng-if="variable.tags.length">Tags</div>
+				<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}">
 					<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>

public/css/less/submenu.less

@@ -65,15 +65,6 @@
   border-radius: 3px 3px 0 0;
 
   &.multi {
-   .variable-option-icon {
-     display: inline-block;
-     width: 24px;
-     height: 18px;
-     position: relative;
-     top: 4px;
-     background: url(@checkboxImageUrl) left top no-repeat;
-   }
-
    .selected {
      .variable-option-icon{
        background: url(@checkboxImageUrl) 0px -18px no-repeat;
@@ -82,12 +73,24 @@
  }
 
  &.single {
+   .variable-option-icon {
+     display: none;
+   }
    .selected {
      background-color: @grafanaTargetFuncHightlight;
    }
  }
 }
 
+.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%;
@@ -113,10 +116,14 @@
 }
 
 .variable-options-column-header {
-  text-align: center;
   padding-top: 5px;
   padding-bottom: 5px;
   margin-bottom: 5px;
+  &.many-selected {
+    .variable-option-icon {
+      background: url(@checkboxImageUrl) 0px -36px no-repeat;
+    }
+  }
 }
 
 .variable-option {