Skip to content

N
nexpie-grafana-theme
Commit 494ede5b by Torkel Ödegaard
Options

Big refactoring/rewrite for how annotation tooltips are shown, also work on #1474

parent e76d2ec9
Showing with 114 additions and 31 deletions
' 0 → 100644
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 = '<i>' + dashboard.formatDate(scope.annotation.time) + '</i>';
var tooltip = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ title + ' ' + time + '</div> ' ;
if (options.tags) {
var tags = $sanitize(options.tags);
tooltip += '<span class="label label-tag" tag-color-from-name="\'asd\'">' + (tags || '') + '</span><br/>';
}
if (options.text) {
var text = $sanitize(options.text);
tooltip += text.replace(/\n/g, '<br/>');
}
tooltip += "</small>";
}
};
});
});
public/app/components/extend-jquery.js
define(['jquery'], define(['jquery', 'angular', 'lodash'],
function ($) { function ($, angular, _) {
'use strict'; 'use strict';
/** /**
...@@ -14,6 +14,7 @@ function ($) { ...@@ -14,6 +14,7 @@ function ($) {
return function (x, y, opts) { return function (x, y, opts) {
opts = $.extend(true, {}, defaults, opts); opts = $.extend(true, {}, defaults, opts);
return this.each(function () { return this.each(function () {
var $tooltip = $(this), width, height; var $tooltip = $(this), width, height;
...@@ -22,6 +23,17 @@ function ($) { ...@@ -22,6 +23,17 @@ function ($) {
$("#tooltip").remove(); $("#tooltip").remove();
$tooltip.appendTo(document.body); $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); width = $tooltip.outerWidth(true);
height = $tooltip.outerHeight(true); height = $tooltip.outerHeight(true);
......
public/app/directives/all.js
...@@ -17,4 +17,5 @@ define([ ...@@ -17,4 +17,5 @@ define([
'./dropdown.typeahead', './dropdown.typeahead',
'./topnav', './topnav',
'./giveFocus', './giveFocus',
'./annotationTooltip',
], function () {}); ], function () {});
public/app/directives/annotationTooltip.js 0 → 100644
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 = '<i>' + dashboard.formatDate(event.min) + '</i>';
var tooltip = '<div class="graph-tooltip small"><div class="graph-tooltip-time">' + title + ' ' + time + '</div> ' ;
if (event.text) {
var text = $sanitize(event.text);
tooltip += text.replace(/\n/g, '<br>') + '<br>';
}
if (event.tags && event.tags.length > 0) {
tooltip += '<span class="label label-tag" ng-repeat="tag in event.tags" tag-color-from-name="tag">{{tag}}</span><br/>';
}
tooltip += "</div>";
var $tooltip = $(tooltip);
$tooltip.appendTo(element);
$compile(element.contents())(scope);
}
};
});
});
public/app/directives/tags.js
...@@ -41,7 +41,6 @@ function (angular, $) { ...@@ -41,7 +41,6 @@ function (angular, $) {
angular angular
.module('grafana.directives') .module('grafana.directives')
.directive('tagColorFromName', function() { .directive('tagColorFromName', function() {
return { return {
scope: { tagColorFromName: "=" }, scope: { tagColorFromName: "=" },
link: function (scope, element) { link: function (scope, element) {
......
public/app/features/annotations/annotationsSrv.js
...@@ -7,7 +7,7 @@ define([ ...@@ -7,7 +7,7 @@ define([
var module = angular.module('grafana.services'); 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 promiseCached;
var list = []; var list = [];
var self = this; var self = this;
...@@ -57,30 +57,14 @@ define([ ...@@ -57,30 +57,14 @@ define([
}; };
this.addAnnotation = function(options) { this.addAnnotation = function(options) {
var title = $sanitize(options.title);
var time = '<i>' + self.dashboard.formatDate(options.time) + '</i>';
var tooltip = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ title + ' ' + time + '</div> ' ;
if (options.tags) {
var tags = $sanitize(options.tags);
tooltip += '<span class="tag label label-tag">' + (tags || '') + '</span><br/>';
}
if (options.text) {
var text = $sanitize(options.text);
tooltip += text.replace(/\n/g, '<br/>');
}
tooltip += "</small>";
list.push({ list.push({
annotation: options.annotation, annotation: options.annotation,
min: options.time, min: options.time,
max: options.time, max: options.time,
eventType: options.annotation.name, eventType: options.annotation.name,
title: null, title: options.title,
description: tooltip, tags: options.tags,
text: options.text,
score: 1 score: 1
}); });
}; };
......
public/app/features/dashboard/timeSrv.js
...@@ -93,7 +93,7 @@ define([ ...@@ -93,7 +93,7 @@ define([
_.extend(this.time, time); _.extend(this.time, time);
// disable refresh if we have an absolute 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.old_refresh = this.dashboard.refresh || this.old_refresh;
this.set_interval(false); this.set_interval(false);
} }
......
public/app/partials/search.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
tags tags
</a> </a>
<span ng-show="query.tag"> <span ng-show="query.tag">
| <a ng-click="filterByTag('')" tag-color-from-name tag="query.tag" class="label label-tag" ng-if="query.tag"> | <a ng-click="filterByTag('')" tag-color-from-name="query.tag" class="label label-tag" ng-if="query.tag">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
{{query.tag}} {{query.tag}}
</a> </a>
......
public/app/plugins/datasource/graphite/datasource.js
...@@ -111,11 +111,19 @@ function (angular, _, $, config, kbn, moment) { ...@@ -111,11 +111,19 @@ function (angular, _, $, config, kbn, moment) {
var list = []; var list = [];
for (var i = 0; i < results.data.length; i++) { for (var i = 0; i < results.data.length; i++) {
var e = results.data[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({ list.push({
annotation: annotation, annotation: annotation,
time: e.when * 1000, time: e.when * 1000,
title: e.what, title: e.what,
tags: e.tags, tags: tags,
text: e.data text: e.data
}); });
} }
......
public/css/less/graph.less
...@@ -212,6 +212,11 @@ ...@@ -212,6 +212,11 @@
top: -3px; top: -3px;
} }
.label-tag {
margin-right: 4px;
margin-top: 8px;
}
.graph-tooltip-list-item { .graph-tooltip-list-item {
display: table-row; display: table-row;
} }
......
public/vendor/jquery/jquery.flot.events.js
...@@ -191,14 +191,12 @@ ...@@ -191,14 +191,12 @@
console.log(tooltip); console.log(tooltip);
*/ */
// @rashidkpc - hack to work with our normal tooltip placer // grafana addition
var $tooltip = $('<div id="tooltip">'); var $tooltip = $('<div id="tooltip" annotation-tooltip>');
if (event) { if (event) {
$tooltip $tooltip
.html(event.description) .html(event.description)
.place_tt(x, y, { .place_tt(x, y, {offset: 10, compile: true, scopeData: {event: event}});
offset: 10
});
} else { } else {
$tooltip.remove(); $tooltip.remove();
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment