worked on tags in search and dashboards

public/app/controllers/search.js

@@ -13,7 +13,7 @@ function (angular, _, config) {
     $scope.init = function() {
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = -1;
-      $scope.results = {dashboards: [], tags: [], metrics: []};
+      $scope.results = [];
       $scope.query = { query: '', tag: '', starred: false };
       $scope.currentSearchId = 0;
 
@@ -26,7 +26,6 @@ function (angular, _, config) {
         $scope.query.query = '';
         $scope.search();
       }, 100);
-
     };
 
     $scope.keyDown = function (evt) {

public/app/directives/all.js

@@ -5,11 +5,11 @@ define([
   './ngBlur',
   './dashEditLink',
   './ngModelOnBlur',
-  './tip',
+  './misc',
   './confirmClick',
   './configModal',
   './spectrumPicker',
-  './bootstrap-tagsinput',
+  './tags',
   './bodyClass',
   './variableValueSelect',
   './metric.segment',

public/app/directives/bootstrap-tagsinput.js

@@ -1,134 +0,0 @@
-define([
-  'angular',
-  'jquery',
-  'bootstrap-tagsinput'
-],
-function (angular, $) {
-  'use strict';
-
-  angular
-    .module('grafana.directives')
-    .directive('bootstrapTagsinput', function() {
-
-      function getItemProperty(scope, property) {
-        if (!property) {
-          return undefined;
-        }
-
-        if (angular.isFunction(scope.$parent[property])) {
-          return scope.$parent[property];
-        }
-
-        return function(item) {
-          return item[property];
-        };
-      }
-
-      return {
-        restrict: 'EA',
-        scope: {
-          model: '=ngModel'
-        },
-        template: '<select multiple></select>',
-        replace: false,
-        link: function(scope, element, attrs) {
-
-          if (!angular.isArray(scope.model)) {
-            scope.model = [];
-          }
-
-          var select = $('select', element);
-
-          if (attrs.placeholder) {
-            select.attr('placeholder', attrs.placeholder);
-          }
-
-          select.tagsinput({
-            typeahead : {
-              source   : angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
-            },
-            itemValue: getItemProperty(scope, attrs.itemvalue),
-            itemText : getItemProperty(scope, attrs.itemtext),
-            tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ?
-              scope.$parent[attrs.tagclass] : function() { return attrs.tagclass; }
-          });
-
-          select.on('itemAdded', function(event) {
-            if (scope.model.indexOf(event.item) === -1) {
-              scope.model.push(event.item);
-            }
-          });
-
-          select.on('itemRemoved', function(event) {
-            var idx = scope.model.indexOf(event.item);
-            if (idx !== -1) {
-              scope.model.splice(idx, 1);
-            }
-          });
-
-          scope.$watch("model", function() {
-            if (!angular.isArray(scope.model)) {
-              scope.model = [];
-            }
-
-            select.tagsinput('removeAll');
-
-            for (var i = 0; i < scope.model.length; i++) {
-              select.tagsinput('add', scope.model[i]);
-            }
-
-          }, true);
-
-        }
-      };
-    });
-
-  angular
-    .module('grafana.directives')
-    .directive('gfDropdown', function ($parse, $compile, $timeout) {
-
-      function buildTemplate(items, placement) {
-        var upclass = placement === 'top' ? 'dropup' : '';
-        var ul = [
-          '<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
-          '</ul>'
-        ];
-
-        angular.forEach(items, function (item, index) {
-          if (item.divider) {
-            return ul.splice(index + 1, 0, '<li class="divider"></li>');
-          }
-
-          var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
-            '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
-              (item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
-              (item.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
-              '>' + (item.text || '') + '</a>';
-
-          if (item.submenu && item.submenu.length) {
-            li += buildTemplate(item.submenu).join('\n');
-          }
-
-          li += '</li>';
-          ul.splice(index + 1, 0, li);
-        });
-        return ul;
-      }
-
-      return {
-        restrict: 'EA',
-        scope: true,
-        link: function postLink(scope, iElement, iAttrs) {
-          var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
-          $timeout(function () {
-            var placement = iElement.data('placement');
-            var dropdown = angular.element(buildTemplate(items, placement).join(''));
-            dropdown.insertAfter(iElement);
-            $compile(iElement.next('ul.dropdown-menu'))(scope);
-          });
-
-          iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
-        }
-      };
-    });
-});

public/app/directives/tip.js → public/app/directives/misc.js

@@ -80,41 +80,51 @@ function (angular, kbn) {
 
   angular
     .module('grafana.directives')
-    .directive('tagColorFromName', function() {
+    .directive('gfDropdown', function ($parse, $compile, $timeout) {
 
-    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",
+      function buildTemplate(items, placement) {
+        var upclass = placement === 'top' ? 'dropup' : '';
+        var ul = [
+          '<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
+          '</ul>'
         ];
-        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);
+        angular.forEach(items, function (item, index) {
+          if (item.divider) {
+            return ul.splice(index + 1, 0, '<li class="divider"></li>');
+          }
+
+          var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
+            '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
+            (item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
+            (item.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
+            '>' + (item.text || '') + '</a>';
+
+          if (item.submenu && item.submenu.length) {
+            li += buildTemplate(item.submenu).join('\n');
+          }
+
+          li += '</li>';
+          ul.splice(index + 1, 0, li);
+        });
+        return ul;
       }
-    };
-  });});
+
+      return {
+        restrict: 'EA',
+        scope: true,
+        link: function postLink(scope, iElement, iAttrs) {
+          var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
+          $timeout(function () {
+            var placement = iElement.data('placement');
+            var dropdown = angular.element(buildTemplate(items, placement).join(''));
+            dropdown.insertAfter(iElement);
+            $compile(iElement.next('ul.dropdown-menu'))(scope);
+          });
+
+          iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
+        }
+      };
+    });
+
+});

public/app/directives/tags.js

@@ -0,0 +1,131 @@
+define([
+  'angular',
+  'jquery',
+  'bootstrap-tagsinput'
+],
+function (angular, $) {
+  'use strict';
+
+  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;
+  }
+
+  function setColor(name, element) {
+    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 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);
+  }
+
+  angular
+  .module('grafana.directives')
+  .directive('tagColorFromName', function() {
+
+    return {
+      scope: { tagColorFromName: "=" },
+      link: function (scope, element) {
+        setColor(scope.tagColorFromName, element);
+      }
+    };
+  });
+
+  angular
+  .module('grafana.directives')
+  .directive('bootstrapTagsinput', function() {
+
+    function getItemProperty(scope, property) {
+      if (!property) {
+        return undefined;
+      }
+
+      if (angular.isFunction(scope.$parent[property])) {
+        return scope.$parent[property];
+      }
+
+      return function(item) {
+        return item[property];
+      };
+    }
+
+    return {
+      restrict: 'EA',
+      scope: {
+        model: '=ngModel'
+      },
+      template: '<select multiple></select>',
+      replace: false,
+      link: function(scope, element, attrs) {
+
+        if (!angular.isArray(scope.model)) {
+          scope.model = [];
+        }
+
+        var select = $('select', element);
+
+        if (attrs.placeholder) {
+          select.attr('placeholder', attrs.placeholder);
+        }
+
+        select.tagsinput({
+          typeahead: {
+            source: angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
+          },
+          itemValue: getItemProperty(scope, attrs.itemvalue),
+          itemText : getItemProperty(scope, attrs.itemtext),
+          tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ?
+            scope.$parent[attrs.tagclass] : function() { return attrs.tagclass; }
+        });
+
+        select.on('itemAdded', function(event) {
+          if (scope.model.indexOf(event.item) === -1) {
+            scope.model.push(event.item);
+          }
+          var tagElement = select.next().children("span").filter(function() { return $(this).text() === event.item; });
+          setColor(event.item, tagElement);
+        });
+
+        select.on('itemRemoved', function(event) {
+          var idx = scope.model.indexOf(event.item);
+          if (idx !== -1) {
+            scope.model.splice(idx, 1);
+          }
+        });
+
+        scope.$watch("model", function() {
+          if (!angular.isArray(scope.model)) {
+            scope.model = [];
+          }
+
+          select.tagsinput('removeAll');
+
+          for (var i = 0; i < scope.model.length; i++) {
+            select.tagsinput('add', scope.model[i]);
+          }
+
+        }, true);
+      }
+    };
+  });
+
+});

public/app/directives/variableValueSelect.js

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

public/app/features/templating/editorCtrl.js

@@ -82,14 +82,6 @@ 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,41 +226,41 @@
 				</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&#45;row" ng&#45;if="current.type === 'query'"> -->
+			<!-- 	<div class="tight&#45;form&#45;section"> -->
+			<!-- 		<h5>Value Groups/Tags</h5> -->
+			<!-- 		<div class="tight&#45;form" ng&#45;if="current.useTags"> -->
+			<!-- 			<ul class="tight&#45;form&#45;list"> -->
+			<!-- 				<li class="tight&#45;form&#45;item" style="width: 115px"> -->
+			<!-- 					Tags query -->
+			<!-- 				</li> -->
+			<!-- 				<li> -->
+			<!-- 					<input type="text" style="width: 588px" class="input&#45;xxlarge tight&#45;form&#45;input last" ng&#45;model='current.tagsQuery' placeholder="metric name or tags query" ng&#45;model&#45;onblur ng&#45;change="runQuery()"></input> -->
+			<!-- 				</li> -->
+			<!-- 			</ul> -->
+			<!-- 			<div class="clearfix"></div> -->
+			<!-- 		</div> -->
+			<!-- 		<div class="tight&#45;form" ng&#45;if="current.useTags"> -->
+			<!-- 			<ul class="tight&#45;form&#45;list"> -->
+			<!-- 				<li class="tight&#45;form&#45;item" style="width: 115px;"> -->
+			<!-- 					Tags values query -->
+			<!-- 				</li> -->
+			<!-- 				<li> -->
+			<!-- 					<input type="text" style="width: 588px" class="input tight&#45;form&#45;input last" ng&#45;model='current.tagValuesQuery' placeholder="apps.$__tag.*" ng&#45;model&#45;onblur ng&#45;change="runQuery()"></input> -->
+			<!-- 				</li> -->
+			<!-- 			</ul> -->
+			<!-- 			<div class="clearfix"></div> -->
+			<!-- 		</div> -->
+			<!-- 		<div class="tight&#45;form"> -->
+			<!-- 			<ul class="tight&#45;form&#45;list"> -->
+			<!-- 				<li class="tight&#45;form&#45;item last"> -->
+			<!-- 					<editor&#45;checkbox text="Enable" model="current.useTags" change="runQuery()"></editor&#45;checkbox> -->
+			<!-- 				</li> -->
+			<!-- 			</ul> -->
+			<!-- 			<div class="clearfix"></div> -->
+			<!-- 		</div> -->
+			<!-- 	</div> -->
+			<!-- </div> -->
 
 			<div class="editor-row">
 				<div class="tight-form-section">