Merge branch 'variable-tags'

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);
-      }
-    };
-  });
 });

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);
+      }
+    };
+  });});

public/app/directives/variableValueSelect.js

@@ -9,7 +9,7 @@ function (angular, app, _) {
 
   angular
     .module('grafana.directives')
-    .directive('variableValueSelect', function($compile, $window, $timeout) {
+    .directive('variableValueSelect', function($compile, $window, $timeout, datasourceSrv) {
       return {
         scope: {
           variable: "=",
@@ -132,6 +132,9 @@ function (angular, app, _) {
             }
           };
 
+          scope.selectTag = function(tag) {
+          };
+
           scope.hide = function() {
             scope.selectorOpen = false;
             bodyEl.off('click', scope.bodyOnClick);

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

@@ -15,12 +15,21 @@
 			</span>
 		</div>
 
-		<div class="variable-options-container" ng-if="!query.tagcloud">
+		<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}}</label>
+					<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="tag in variable.tags" ng-click="selectTag(option, $event)">
+					<span class="label-tag" tag-color-from-name="tag">{{tag}}</span>
 					<span class="fa fa-fw variable-option-icon"></span>
 				</a>
 			</div>
 		</div>
 	</div>
+</div>

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();

public/app/features/templating/partials/editor.html

@@ -226,6 +226,42 @@
 				</div>
 			</div>
 
+			<div class="editor-row" ng-if="current.type === 'query'">
+				<div class="tight-form-section">
+					<h5>Value Groups/Tags</h5>
+					<div class="tight-form" ng-if="current.useTags">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 115px">
+								Tags query
+							</li>
+							<li>
+								<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form" ng-if="current.useTags">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 115px;">
+								Tags values query
+							</li>
+							<li>
+								<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$__tag.*" ng-model-onblur ng-change="runQuery()"></input>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+					<div class="tight-form">
+						<ul class="tight-form-list">
+							<li class="tight-form-item last">
+								<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
+					</div>
+				</div>
+			</div>
+
 			<div class="editor-row">
 				<div class="tight-form-section">
 					<h5>Preview of values (shows max 20)</h5>

public/app/features/templating/templateValuesSrv.js

@@ -120,7 +120,7 @@ function (angular, _, kbn) {
       }
 
       return datasourceSrv.get(variable.datasource).then(function(datasource) {
-        return datasource.metricFindQuery(variable.query).then(function (results) {
+        var queryPromise = datasource.metricFindQuery(variable.query).then(function (results) {
           variable.options = self.metricNamesToVariableValues(variable, results);
 
           if (variable.includeAll) {
@@ -138,6 +138,19 @@ function (angular, _, kbn) {
 
           return self.setVariableValue(variable, variable.options[0]);
         });
+
+        if (variable.useTags) {
+          return queryPromise.then(function() {
+            datasource.metricFindQuery(variable.tagsQuery).then(function (results) {
+              variable.tags = [];
+              for (var i = 0; i < results.length; i++) {
+                variable.tags.push(results[i].text);
+              }
+            });
+          });
+        } else {
+          return queryPromise;
+        }
       });
     };
 

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>

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;

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;

public/css/less/submenu.less

@@ -55,31 +55,48 @@
   border-radius: 3px 3px 0 0;
 }
 
-.variable-options-container {
+.variable-options-wrapper {
+  display: table;
+  width: 100%;
+}
+
+.variable-options-column {
   max-height: 350px;
   overflow: auto;
-  display: block;
+  display: table-cell;
   line-height: 26px;
+  &:nth-child(2) {
+    border-left: 1px solid @grafanaTargetFuncBackground;
+  }
 }
 
-.variable-option {
+.variable-option-tag,
+.variable-option,
+.variable-options-column-header {
   display: block;
-  padding: 0 8px;
+  padding: 0 27px 0 8px;
+  position: relative;
 
-  &:hover, &.highlighted {
+ .variable-option-icon { display: none }
-    background-color: @blueDark;
-  }
-
-  .fa {
-    line-height: 26px;
-    float: right;
-    padding-left: 4px;
-  }
 
   &.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;
   }
 }