From e76d2ec9c2f62f0e31ff02edf036ac11f28fe24d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 May 2015 11:16:15 +0200 Subject: [PATCH] worked on tags in search and dashboards --- public/app/controllers/search.js | 3 +- public/app/directives/all.js | 4 +- public/app/directives/bootstrap-tagsinput.js | 134 ------------------ public/app/directives/{tip.js => misc.js} | 78 +++++----- public/app/directives/tags.js | 131 +++++++++++++++++ public/app/directives/variableValueSelect.js | 5 +- public/app/features/templating/editorCtrl.js | 8 -- .../features/templating/partials/editor.html | 70 ++++----- 8 files changed, 214 insertions(+), 219 deletions(-) delete mode 100644 public/app/directives/bootstrap-tagsinput.js rename public/app/directives/{tip.js => misc.js} (63%) create mode 100644 public/app/directives/tags.js diff --git a/public/app/controllers/search.js b/public/app/controllers/search.js index 1a88b25ef3f..b980297df16 100644 --- a/public/app/controllers/search.js +++ b/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) { diff --git a/public/app/directives/all.js b/public/app/directives/all.js index cd294c3df25..7e95b6f26dc 100644 --- a/public/app/directives/all.js +++ b/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', diff --git a/public/app/directives/bootstrap-tagsinput.js b/public/app/directives/bootstrap-tagsinput.js deleted file mode 100644 index a8b7eb6a7ad..00000000000 --- a/public/app/directives/bootstrap-tagsinput.js +++ /dev/null @@ -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: '', - 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 = [ - '' - ]; - - angular.forEach(items, function (item, index) { - if (item.divider) { - return ul.splice(index + 1, 0, '
  • '); - } - - var li = '' + - '' + (item.text || '') + ''; - - if (item.submenu && item.submenu.length) { - li += buildTemplate(item.submenu).join('\n'); - } - - 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'); - } - }; - }); -}); diff --git a/public/app/directives/tip.js b/public/app/directives/misc.js similarity index 63% rename from public/app/directives/tip.js rename to public/app/directives/misc.js index a58adce981d..11c1334d553 100644 --- a/public/app/directives/tip.js +++ b/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", + function buildTemplate(items, placement) { + var upclass = placement === 'top' ? 'dropup' : ''; + var ul = [ + '' ]; - 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.forEach(items, function (item, index) { + if (item.divider) { + return ul.splice(index + 1, 0, '
  • '); + } + + var li = '' + + '' + (item.text || '') + ''; + + if (item.submenu && item.submenu.length) { + li += buildTemplate(item.submenu).join('\n'); + } + + 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'); + } + }; + }); + +}); diff --git a/public/app/directives/tags.js b/public/app/directives/tags.js new file mode 100644 index 00000000000..3f77fc6ba12 --- /dev/null +++ b/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: '', + 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); + } + }; + }); + +}); diff --git a/public/app/directives/variableValueSelect.js b/public/app/directives/variableValueSelect.js index 0afb2a40509..fa0e56acebc 100644 --- a/public/app/directives/variableValueSelect.js +++ b/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); diff --git a/public/app/features/templating/editorCtrl.js b/public/app/features/templating/editorCtrl.js index 1363a774ef5..f48452e4569 100644 --- a/public/app/features/templating/editorCtrl.js +++ b/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(); diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 6883410cd01..d1232c72dcf 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -226,41 +226,41 @@ -
    -
    -
    Value Groups/Tags
    -
    -
      -
    • - Tags query -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - Tags values query -
      • -
    • - -
      • -
    -
    -
    -
    -
      -
    • - -
      • -
    -
    -
    -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +