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

'

+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'],
-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);
 

public/app/directives/all.js

@@ -17,4 +17,5 @@ define([
   './dropdown.typeahead',
   './topnav',
   './giveFocus',
+  './annotationTooltip',
 ], function () {});

public/app/directives/annotationTooltip.js

+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, $) {
   angular
   .module('grafana.directives')
   .directive('tagColorFromName', function() {
-
     return {
       scope: { tagColorFromName: "=" },
       link: function (scope, element) {

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 = '<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({
         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
       });
     };

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);
       }

public/app/partials/search.html

@@ -16,7 +16,7 @@
 				tags
 			</a>
 			<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>
 					{{query.tag}}
 				</a>

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
               });
             }

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;
   }

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 = $('<div id="tooltip">');
+          // grafana addition
+            var $tooltip = $('<div id="tooltip" annotation-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();
             }