diff --git a/src/app/controllers/search.js b/src/app/controllers/search.js index de0ec44045a..6e9de7ba585 100644 --- a/src/app/controllers/search.js +++ b/src/app/controllers/search.js @@ -9,6 +9,32 @@ function (angular, _, config, $) { 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) { $scope.init = function() { diff --git a/src/app/partials/search.html b/src/app/partials/search.html index e1c9f158e0b..297edadedfc 100644 --- a/src/app/partials/search.html +++ b/src/app/partials/search.html @@ -54,7 +54,7 @@ ng-click="filterByTag(tag.term, $event)"> - {{tag.term}} ({{tag.count}}) + {{tag.term}} ({{tag.count}}) @@ -79,7 +79,7 @@
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less index 0fc9c72bf2f..9ddc8568258 100644 --- a/src/css/less/grafana.less +++ b/src/css/less/grafana.less @@ -86,6 +86,9 @@ .search-result-tags { float: right; + .label { + margin-left: 6px; + } } .search-result-actions { diff --git a/src/css/less/overrides.less b/src/css/less/overrides.less index 7615f35d6f8..dd806cb46ca 100644 --- a/src/css/less/overrides.less +++ b/src/css/less/overrides.less @@ -589,6 +589,9 @@ div.flot-text { .label-tag { background-color: @purple; color: darken(@white, 5%); + text-shadow: none; + font-size: 13px; + padding: 3px 6px; } .label-tag:hover {