diff --git a/' b/' new file mode 100644 index 00000000000..b179a2b8b5a --- /dev/null +++ b/' @@ -0,0 +1,36 @@ +define([ + 'angular', + 'lodash' +], +function (angular) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('annotationTooltip', function($sanitize, dashboardSrv) { + return { + scope: { tagColorFromName: "=" }, + link: function (scope, element) { + var title = $sanitize(scope.annoation.title); + var dashboard = dashboardSrv.getCurrent(); + var time = '' + dashboard.formatDate(scope.annotation.time) + ''; + + var tooltip = '
'+ title + ' ' + time + '
' ; + + if (options.tags) { + var tags = $sanitize(options.tags); + tooltip += '' + (tags || '') + '
'; + } + + if (options.text) { + var text = $sanitize(options.text); + tooltip += text.replace(/\n/g, '
'); + } + + tooltip += ""; + } + }; + }); + +}); + diff --git a/public/app/components/extend-jquery.js b/public/app/components/extend-jquery.js index ce5c8afb1a9..3e1f6b0c054 100644 --- a/public/app/components/extend-jquery.js +++ b/public/app/components/extend-jquery.js @@ -1,5 +1,5 @@ -define(['jquery'], -function ($) { +define(['jquery', 'angular', 'lodash'], +function ($, angular, _) { 'use strict'; /** @@ -14,6 +14,7 @@ function ($) { return function (x, y, opts) { opts = $.extend(true, {}, defaults, opts); + return this.each(function () { var $tooltip = $(this), width, height; @@ -22,6 +23,17 @@ function ($) { $("#tooltip").remove(); $tooltip.appendTo(document.body); + if (opts.compile) { + angular.element(document).injector().invoke(function($compile, $rootScope) { + var tmpScope = $rootScope.$new(true); + _.extend(tmpScope, opts.scopeData); + + $compile($tooltip)(tmpScope); + tmpScope.$digest(); + //tmpScope.$destroy(); + }); + } + width = $tooltip.outerWidth(true); height = $tooltip.outerHeight(true); diff --git a/public/app/directives/all.js b/public/app/directives/all.js index 7e95b6f26dc..b92bc59ca41 100644 --- a/public/app/directives/all.js +++ b/public/app/directives/all.js @@ -17,4 +17,5 @@ define([ './dropdown.typeahead', './topnav', './giveFocus', + './annotationTooltip', ], function () {}); diff --git a/public/app/directives/annotationTooltip.js b/public/app/directives/annotationTooltip.js new file mode 100644 index 00000000000..f84df88dd26 --- /dev/null +++ b/public/app/directives/annotationTooltip.js @@ -0,0 +1,40 @@ +define([ + 'angular', + 'jquery', + 'lodash' +], +function (angular, $) { + 'use strict'; + + angular + .module('grafana.directives') + .directive('annotationTooltip', function($sanitize, dashboardSrv, $compile) { + return { + link: function (scope, element) { + var event = scope.event; + var title = $sanitize(event.title); + var dashboard = dashboardSrv.getCurrent(); + var time = '' + dashboard.formatDate(event.min) + ''; + + var tooltip = '
' + title + ' ' + time + '
' ; + + if (event.text) { + var text = $sanitize(event.text); + tooltip += text.replace(/\n/g, '
') + '
'; + } + + if (event.tags && event.tags.length > 0) { + tooltip += '{{tag}}
'; + } + + tooltip += "
"; + + var $tooltip = $(tooltip); + $tooltip.appendTo(element); + + $compile(element.contents())(scope); + } + }; + }); + +}); diff --git a/public/app/directives/tags.js b/public/app/directives/tags.js index 3f77fc6ba12..4f8825a010b 100644 --- a/public/app/directives/tags.js +++ b/public/app/directives/tags.js @@ -41,7 +41,6 @@ function (angular, $) { angular .module('grafana.directives') .directive('tagColorFromName', function() { - return { scope: { tagColorFromName: "=" }, link: function (scope, element) { diff --git a/public/app/features/annotations/annotationsSrv.js b/public/app/features/annotations/annotationsSrv.js index 0ba30f1ef8b..a4529de2019 100644 --- a/public/app/features/annotations/annotationsSrv.js +++ b/public/app/features/annotations/annotationsSrv.js @@ -7,7 +7,7 @@ define([ var module = angular.module('grafana.services'); - module.service('annotationsSrv', function(datasourceSrv, $q, alertSrv, $rootScope, $sanitize) { + module.service('annotationsSrv', function(datasourceSrv, $q, alertSrv, $rootScope) { var promiseCached; var list = []; var self = this; @@ -57,30 +57,14 @@ define([ }; this.addAnnotation = function(options) { - var title = $sanitize(options.title); - var time = '' + self.dashboard.formatDate(options.time) + ''; - - var tooltip = '
'+ title + ' ' + time + '
' ; - - if (options.tags) { - var tags = $sanitize(options.tags); - tooltip += '' + (tags || '') + '
'; - } - - if (options.text) { - var text = $sanitize(options.text); - tooltip += text.replace(/\n/g, '
'); - } - - tooltip += ""; - list.push({ annotation: options.annotation, min: options.time, max: options.time, eventType: options.annotation.name, - title: null, - description: tooltip, + title: options.title, + tags: options.tags, + text: options.text, score: 1 }); }; diff --git a/public/app/features/dashboard/timeSrv.js b/public/app/features/dashboard/timeSrv.js index 7df83f7fcab..6bb9ccde223 100644 --- a/public/app/features/dashboard/timeSrv.js +++ b/public/app/features/dashboard/timeSrv.js @@ -93,7 +93,7 @@ define([ _.extend(this.time, time); // disable refresh if we have an absolute time - if (time.to && time.to.indexOf('now') === -1) { + if (_.isString(time.to) && time.to.indexOf('now') === -1) { this.old_refresh = this.dashboard.refresh || this.old_refresh; this.set_interval(false); } diff --git a/public/app/partials/search.html b/public/app/partials/search.html index 18754010f0d..9c644e96d25 100644 --- a/public/app/partials/search.html +++ b/public/app/partials/search.html @@ -16,7 +16,7 @@ tags - | + | {{query.tag}} diff --git a/public/app/plugins/datasource/graphite/datasource.js b/public/app/plugins/datasource/graphite/datasource.js index dfd096cdb0a..3697cade07b 100644 --- a/public/app/plugins/datasource/graphite/datasource.js +++ b/public/app/plugins/datasource/graphite/datasource.js @@ -111,11 +111,19 @@ function (angular, _, $, config, kbn, moment) { var list = []; for (var i = 0; i < results.data.length; i++) { var e = results.data[i]; + var tags = []; + if (e.tags) { + tags = e.tags.split(','); + if (tags.length === 1) { + tags = e.tags.split(' '); + } + } + list.push({ annotation: annotation, time: e.when * 1000, title: e.what, - tags: e.tags, + tags: tags, text: e.data }); } diff --git a/public/css/less/graph.less b/public/css/less/graph.less index b96e466eea1..a0350d5d16c 100644 --- a/public/css/less/graph.less +++ b/public/css/less/graph.less @@ -212,6 +212,11 @@ top: -3px; } + .label-tag { + margin-right: 4px; + margin-top: 8px; + } + .graph-tooltip-list-item { display: table-row; } diff --git a/public/vendor/jquery/jquery.flot.events.js b/public/vendor/jquery/jquery.flot.events.js index 4924b16d03b..48ebf2b67fd 100644 --- a/public/vendor/jquery/jquery.flot.events.js +++ b/public/vendor/jquery/jquery.flot.events.js @@ -191,14 +191,12 @@ console.log(tooltip); */ - // @rashidkpc - hack to work with our normal tooltip placer - var $tooltip = $('
'); + // grafana addition + var $tooltip = $('
'); if (event) { $tooltip .html(event.description) - .place_tt(x, y, { - offset: 10 - }); + .place_tt(x, y, {offset: 10, compile: true, scopeData: {event: event}}); } else { $tooltip.remove(); }