feat(annotations): updated flot events lib and refactored it to use tether-drop lib

public/app/core/directives/annotation_tooltip.js

@@ -25,7 +25,8 @@ function ($, _, coreModule) {
         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> ' ;
+        var tooltip = '<div class="graph-annotation">';
+        tooltip += '<div class="graph-annotation-title">' + title + "</div>";
 
         if (event.text) {
           var text = sanitizeString(event.text);
@@ -42,9 +43,10 @@ function ($, _, coreModule) {
 
         if (tags && tags.length) {
           scope.tags = tags;
-          tooltip += '<span class="label label-tag" ng-repeat="tag in tags" tag-color-from-name="tag">{{tag}}</span><br/>';
+          tooltip += '<span class="label label-tag small" ng-repeat="tag in tags" tag-color-from-name="tag">{{tag}}</span><br/>';
         }
 
+        tooltip += '<div class="graph-annotation-time">' + time + '</div>' ;
         tooltip += "</div>";
 
         var $tooltip = $(tooltip);

public/app/plugins/datasource/influxdb/partials/annotations.editor.html

 <div class="gf-form-group">
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label width-14">InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></span class="gf-form-label">
+	<div class="gf-form">
+		<span class="gf-form-label width-10">InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></span class="gf-form-label">
 			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
 		</div>
 	</div>
 </div>
+
 <div class="gf-form-group">
-  <h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
-  <div class="gf-form-inline">
+	<h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
+	<div class="gf-form-inline">
 		<div class="gf-form">
-			<span class="gf-form-label width-10">Title</span>
+			<span class="gf-form-label width-4">Title</span>
 			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label width-10">Tags</span>
+			<span class="gf-form-label width-4">Tags</span>
 			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label width-10">Text</span>
+			<span class="gf-form-label width-4">Text</span>
 			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
 		</div>
 	</div>

public/app/plugins/panel/graph/graph.js

@@ -6,13 +6,13 @@ define([
   'app/core/utils/kbn',
   './graph_tooltip',
   'jquery.flot',
-  'jquery.flot.events',
   'jquery.flot.selection',
   'jquery.flot.time',
   'jquery.flot.stack',
   'jquery.flot.stackpercent',
   'jquery.flot.fillbelow',
-  'jquery.flot.crosshair'
+  'jquery.flot.crosshair',
+  './jquery.flot.events',
 ],
 function (angular, $, moment, _, kbn, GraphTooltip) {
   'use strict';
@@ -333,28 +333,24 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           _.each(annotations, function(event) {
             if (!types[event.annotation.name]) {
               types[event.annotation.name] = {
-                level: _.keys(types).length + 1,
-                icon: {
-                  icon: "fa fa-chevron-down",
-                  size: event.annotation.iconSize,
-                  color: event.annotation.iconColor,
-                }
+                color: event.annotation.iconColor,
+                position: 'BOTTOM',
               };
             }
 
-            if (event.annotation.showLine) {
-              options.grid.markings.push({
-                color: event.annotation.lineColor,
-                lineWidth: 1,
-                xaxis: { from: event.min, to: event.max }
-              });
-            }
+            // if (event.annotation.showLine) {
+            //   options.grid.markings.push({
+            //     color: event.annotation.lineColor,
+            //     lineWidth: 1,
+            //     xaxis: { from: event.min, to: event.max }
+            //   });
+            // }
           });
 
           options.events = {
             levels: _.keys(types).length + 1,
             data: annotations,
-            types: types
+            types: types,
           };
         }
 

public/app/system.conf.js

@@ -20,7 +20,6 @@ System.config({
     "bootstrap-tagsinput": "vendor/tagsinput/bootstrap-tagsinput.js",
     "jquery.flot": "vendor/flot/jquery.flot",
     "jquery.flot.pie": "vendor/flot/jquery.flot.pie",
-    "jquery.flot.events": "vendor/flot/jquery.flot.events",
     "jquery.flot.selection": "vendor/flot/jquery.flot.selection",
     "jquery.flot.stack": "vendor/flot/jquery.flot.stack",
     "jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",

public/sass/components/_panel_graph.scss

@@ -232,11 +232,6 @@
     opacity: 0.7;
   }
 
-  .label-tag {
-    margin-right: 4px;
-    margin-top: 8px;
-  }
-
   .graph-tooltip-list-item {
     display: table-row;
   }
@@ -253,6 +248,31 @@
   }
 }
 
+.graph-annotation {
+
+  .label-tag {
+    margin-right: 4px;
+    margin-top: 8px;
+  }
+
+  .graph-annotation-title {
+    font-weight: $font-weight-semi-bold;
+    position: relative;
+    top: -0.4rem;
+  }
+
+  a {
+    color: $blue;
+    text-decoration: underline;
+  }
+
+  .graph-annotation-time {
+    position: relative;
+    text-align: center;
+    top: 0.6rem;
+  }
+}
+
 .left-yaxis-label {
   top: 50%;
   left: -5px;

public/test/test-main.js

@@ -29,7 +29,6 @@
       "bootstrap-tagsinput": "vendor/tagsinput/bootstrap-tagsinput.js",
       "jquery.flot": "vendor/flot/jquery.flot",
       "jquery.flot.pie": "vendor/flot/jquery.flot.pie",
-      "jquery.flot.events": "vendor/flot/jquery.flot.events",
       "jquery.flot.selection": "vendor/flot/jquery.flot.selection",
       "jquery.flot.stack": "vendor/flot/jquery.flot.stack",
       "jquery.flot.stackpercent": "vendor/flot/jquery.flot.stackpercent",