Second take on dashboard tags search result colors

src/app/controllers/search.js

@@ -9,6 +9,32 @@ function (angular, _, config, $) {
 
 
   var module = angular.module('grafana.controllers');
   var module = angular.module('grafana.controllers');
 
 
+  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;
+  }
+
+  module.directive('tagColorFromName', function() {
+    return function (scope, element) {
+      var name = _.isString(scope.tag) ? scope.tag : scope.tag.term;
+      var hash = djb2(name.toLowerCase());
+      var colors = [
+        "#E24D42","#1F78C1","#BA43A9","#705DA0",
+        "#508642","#447EBC","#C15C17","#890F02",
+        "#0A437C","#6D1F62","#584477","#629E51",
+        "#BF1B00","#EA6460","#D683CE","#806EB7",
+        "#3F6833","#2F575E","#99440A","#E0752D",
+        "#58140C","#052B51","#511749","#3F2B5B",
+      ];
+      var color = colors[Math.abs(hash % colors.length)];
+      console.log("namei "  + name + " color: " + color, hash % 4);
+      element.css("background-color", color);
+    };
+  });
+
   module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) {
   module.controller('SearchCtrl', function($scope, $rootScope, $element, $location, datasourceSrv) {
 
 
     $scope.init = function() {
     $scope.init = function() {

src/app/partials/search.html

@@ -54,7 +54,7 @@
 							 ng-click="filterByTag(tag.term, $event)">
 							 ng-click="filterByTag(tag.term, $event)">
 						<a class="search-result-link" >
 						<a class="search-result-link" >
 							<i class="icon icon-tag"></i>
 							<i class="icon icon-tag"></i>
-							<span class="label label-tag">{{tag.term}} &nbsp;({{tag.count}})</span>
+							<span class="label label-tag" tag-color-from-name>{{tag.term}} &nbsp;({{tag.count}})</span>
 						</a>
 						</a>
           </div>
           </div>
         </div>
         </div>
@@ -79,7 +79,7 @@
 							</div>
 							</div>
 
 
 							<div class="search-result-tags">
 							<div class="search-result-tags">
-								<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" style="margin-right: 5px;" class="label label-tag">
+								<a ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name  class="label label-tag">
 									{{tag}}
 									{{tag}}
 								</a>
 								</a>
 							</div>
 							</div>

src/css/less/grafana.less

@@ -86,6 +86,9 @@
 
 
   .search-result-tags {
   .search-result-tags {
     float: right;
     float: right;
+    .label {
+      margin-left: 6px;
+    }
   }
   }
 
 
   .search-result-actions {
   .search-result-actions {

src/css/less/overrides.less

@@ -589,6 +589,9 @@ div.flot-text {
 .label-tag {
 .label-tag {
   background-color: @purple;
   background-color: @purple;
   color: darken(@white, 5%);
   color: darken(@white, 5%);
+  text-shadow: none;
+  font-size: 13px;
+  padding: 3px 6px;
 }
 }
 
 
 .label-tag:hover {
 .label-tag:hover {