From 25c6b64fedf2c62b5c5b3cbe897080071b5730a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 19 May 2015 16:54:08 +0200
Subject: [PATCH] Began working on exploring variable value groups/tags

---
 public/app/controllers/search.js              | 28 -----------
 public/app/directives/tip.js                  | 41 +++++++++++++++-
 .../partials/variableValueSelect.html         | 21 +++++---
 public/app/features/templating/editorCtrl.js  |  8 +++
 public/app/partials/search.html               |  2 +-
 public/css/less/overrides.less                |  5 +-
 public/css/less/sidemenu.less                 |  1 -
 public/css/less/submenu.less                  | 49 +++++++++++++------
 8 files changed, 101 insertions(+), 54 deletions(-)

diff --git a/public/app/controllers/search.js b/public/app/controllers/search.js
index 9083ef74705..1a88b25ef3f 100644
--- a/public/app/controllers/search.js
+++ b/public/app/controllers/search.js
@@ -123,32 +123,4 @@ function (angular, _, config) {
 
   });
 
-  module.directive('tagColorFromName', function() {
-
-    function djb2(str) {
-      var hash = 5381;
-      for (var i = 0; i < str.length; i++) {
-        hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
-      }
-      return hash;
-    }
-
-    return {
-      scope: { tag: "=" },
-      link: function (scope, element) {
-        var name = scope.tag;
-        var hash = djb2(name.toLowerCase());
-        var colors = [
-          "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
-          "#508642","#447EBC","#C15C17","#890F02","#757575",
-          "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
-          "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
-          "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
-          "#58140C","#052B51","#511749","#3F2B5B",
-        ];
-        var color = colors[Math.abs(hash % colors.length)];
-        element.css("background-color", color);
-      }
-    };
-  });
 });
diff --git a/public/app/directives/tip.js b/public/app/directives/tip.js
index 8553faad279..a58adce981d 100644
--- a/public/app/directives/tip.js
+++ b/public/app/directives/tip.js
@@ -78,4 +78,43 @@ function (angular, kbn) {
       };
     });
 
-});
+  angular
+    .module('grafana.directives')
+    .directive('tagColorFromName', function() {
+
+    function djb2(str) {
+      var hash = 5381;
+      for (var i = 0; i < str.length; i++) {
+        hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
+      }
+      return hash;
+    }
+
+    return {
+      scope: { tagColorFromName: "=" },
+      link: function (scope, element) {
+        var hash = djb2(scope.tagColorFromName.toLowerCase());
+        var colors = [
+          "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
+          "#508642","#447EBC","#C15C17","#890F02","#757575",
+          "#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
+          "#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
+          "#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
+          "#58140C","#052B51","#511749","#3F2B5B",
+        ];
+        var borderColors = [
+          "#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
+          "#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
+          "#3069A2","#934588","#7E6A9D","#88C477","#557575",
+          "#E54126","#A694DD","#B054DE", "#8FC426","#262626",
+          "#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
+          "#7E3A32","#2B5177","#773D6F","#655181",
+        ];
+        var color = colors[Math.abs(hash % colors.length)];
+        var borderColor = borderColors[Math.abs(hash % borderColors.length)];
+
+        element.css("background-color", color);
+        element.css("border-color", borderColor);
+      }
+    };
+  });});
diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html
index 30a61072626..c055c1151ae 100644
--- a/public/app/features/dashboard/partials/variableValueSelect.html
+++ b/public/app/features/dashboard/partials/variableValueSelect.html
@@ -15,12 +15,21 @@
 			</span>
 		</div>
 
-		<div class="variable-options-container" ng-if="!query.tagcloud">
-			<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 >{{option.text}}</label>
-				<span class="fa fa-fw variable-option-icon"></span>
-			</a>
+		<div class="variable-options-wrapper">
+			<div class="variable-options-column">
+				<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>{{option.text}}</span>
+					<span class="fa fa-fw variable-option-icon"></span>
+				</a>
+			</div>
+			<div class="variable-options-column" ng-if="variable.tags">
+				<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
+				<a class="variable-option-tag pointer" ng-repeat="(key, values) in variable.tags" ng-click="selectTag(option, $event)">
+					<span class="label-tag" tag-color-from-name="key">{{key}}</span>
+					<span class="fa fa-fw variable-option-icon"></span>
+				</a>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js
index f48452e4569..1363a774ef5 100644
--- a/public/app/features/templating/editorCtrl.js
+++ b/public/app/features/templating/editorCtrl.js
@@ -82,6 +82,14 @@ function (angular, _) {
     };
 
     $scope.update = function() {
+      $scope.current.tags = {
+        "Europe": ["backend_03", "backend_04"],
+        "USA": ["backend_01", "backend_02"],
+        "Asia": ["backend_01"],
+        "South America": ["backend_02"],
+        "Africa": ["backend_03"],
+      };
+
       if ($scope.isValid()) {
         $scope.runQuery().then(function() {
           $scope.reset();
diff --git a/public/app/partials/search.html b/public/app/partials/search.html
index 66e5fd3b7f4..18754010f0d 100644
--- a/public/app/partials/search.html
+++ b/public/app/partials/search.html
@@ -46,7 +46,7 @@
 			ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
 
 			<span class="search-result-tags">
-				<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag"  class="label label-tag">
+				<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag"  class="label label-tag">
 					{{tag}}
 				</span>
 				<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
diff --git a/public/css/less/overrides.less b/public/css/less/overrides.less
index 345837e01e8..425777f1597 100644
--- a/public/css/less/overrides.less
+++ b/public/css/less/overrides.less
@@ -542,10 +542,13 @@ div.flot-text {
 .label-tag {
   background-color: @purple;
   color: darken(@white, 5%);
+  white-space: nowrap;
   border-radius: 2px;
   text-shadow: none;
   font-size: 13px;
-  padding: 4px 6px;
+  padding: 2px 6px;
+  border-width: 1px;
+  border-style: solid;
   .icon-tag {
     position: relative;
     top: 1px;
diff --git a/public/css/less/sidemenu.less b/public/css/less/sidemenu.less
index 4b1e5f481e7..1b8ee3f1fdd 100644
--- a/public/css/less/sidemenu.less
+++ b/public/css/less/sidemenu.less
@@ -91,7 +91,6 @@
   display: block;
   padding: 8px 0 4px 22px;
   background-color: @navbarBackground;
-  border-right: 3px solid @bodyBackground;
   img {
     border-radius: 50%;
     background: @iconContainerBackground;
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index a9fecffefcf..4fefa50d5e7 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -55,31 +55,48 @@
   border-radius: 3px 3px 0 0;
 }
 
-.variable-options-container {
-  max-height: 350px;
-  overflow: auto;
-  display: block;
-  line-height: 26px;
+.variable-options-wrapper {
+  display: table;
+  width: 100%;
 }
 
-.variable-option {
+.variable-options-column {
+  max-height: 350px;
+  overflow: auto;
+  display: table-cell;
+  line-height: 26px;
+  &:nth-child(2) {
+    border-left: 1px solid @grafanaTargetFuncBackground;
+  }
+}
+
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
   display: block;
-  padding: 0 8px;
+  padding: 0 27px 0 8px;
+  position: relative;
 
-  &:hover, &.highlighted {
-    background-color: @blueDark;
-  }
-
-  .fa {
-    line-height: 26px;
-    float: right;
-    padding-left: 4px;
-  }
+ .variable-option-icon { display: none }
 
   &.selected {
     .variable-option-icon:before {
       content: "\f00c";
     }
+    .variable-option-icon {
+      display: block;
+      padding-left: 4px;
+      line-height: 26px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+}
+
+.variable-option {
+  &:hover, &.highlighted {
+    background-color: @blueDark;
   }
 }