annotation redesign is almost done, #608

src/app/partials/graphite/annotation_editor.html

@@ -1,14 +1,14 @@
-<div class="editor-row"> 
+<div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite target expression</label>
-		<input type="text" class="span10" ng-model='currentAnnnotation.target' placeholder=""></input>
+		<input type="text" class="span10" ng-model='currentAnnotation.target' placeholder=""></input>
 	</div>
 </div>
 
 <div class="editor-row">
 	<div class="editor-option">
 		<label class="small">Graphite event tags</label>
-		<input type="text" ng-model='currentAnnnotation.tags' placeholder=""></input>
+		<input type="text" ng-model='currentAnnotation.tags' placeholder=""></input>
 	</div>
 </div>
 

src/app/services/annotationsSrv.js

@@ -54,86 +54,11 @@ define([
       }
     };
 
-    this.getGraphiteEvents = function(rangeUnparsed) {
-      var annotations = this.getAnnotationsByType('graphite events');
-      if (annotations.length === 0) {
-        return [];
-      }
-
-      var promises = _.map(annotations, function(annotation) {
-
-        return datasourceSrv.default.events({ range: rangeUnparsed, tags: annotation.tags })
-          .then(function(results) {
-            _.each(results.data, function (event) {
-              addAnnotation({
-                annotation: annotation,
-                time: event.when * 1000,
-                description: event.what,
-                tags: event.tags,
-                data: event.data
-              });
-            });
-          })
-          .then(null, errorHandler);
-      });
-
-      return promises;
-    };
-
-    this.getAnnotationsByType = function(type) {
-      return _.where(annotationPanel.annotations, {
-        type: type,
-        enable: true
-      });
-    };
-
-    this.getGraphiteMetrics = function(filterSrv, rangeUnparsed) {
-      var annotations = this.getAnnotationsByType('graphite metric');
-      if (annotations.length === 0) {
-        return [];
-      }
-
-      var promises = _.map(annotations, function(annotation) {
-        var graphiteQuery = {
-          range: rangeUnparsed,
-          targets: [{ target: annotation.target }],
-          format: 'json',
-          maxDataPoints: 100
-        };
-
-        var receiveFunc = _.partial(receiveGraphiteMetrics, annotation);
-
-        return datasourceSrv.default.query(filterSrv, graphiteQuery)
-          .then(receiveFunc)
-          .then(null, errorHandler);
-      });
-
-      return promises;
-    };
-
     function errorHandler(err) {
       console.log('Annotation error: ', err);
       alertSrv.set('Annotations','Could not fetch annotations','error');
     }
 
-    function receiveGraphiteMetrics(annotation, results) {
-      for (var i = 0; i < results.data.length; i++) {
-        var target = results.data[i];
-
-        for (var y = 0; y < target.datapoints.length; y++) {
-          var datapoint = target.datapoints[y];
-
-          if (datapoint[0]) {
-            addAnnotation({
-              annotation: annotation,
-              time: datapoint[1] * 1000,
-              description: target.target
-            });
-          }
-        }
-      }
-    }
-
     function addAnnotation(options) {
       var tooltip = "<small><b>" + options.title + "</b><br/>";
       if (options.tags) {

src/app/services/graphite/graphiteDatasource.js

@@ -58,34 +58,54 @@ function (angular, _, $, config, kbn, moment) {
     };
 
     GraphiteDatasource.prototype.annotationQuery = function(annotation, filterSrv, rangeUnparsed) {
-      var graphiteQuery = {
+      // Graphite metric as annotation
-        range: rangeUnparsed,
+      if (annotation.target) {
-        targets: [{ target: annotation.target }],
+        var graphiteQuery = {
-        format: 'json',
+          range: rangeUnparsed,
-        maxDataPoints: 100
+          targets: [{ target: annotation.target }],
-      };
+          format: 'json',
+          maxDataPoints: 100
+        };
 
-      return this.query(filterSrv, graphiteQuery)
+        return this.query(filterSrv, graphiteQuery)
-        .then(function(result) {
+          .then(function(result) {
-          var list = [];
+            var list = [];
 
-          for (var i = 0; i < result.data.length; i++) {
+            for (var i = 0; i < result.data.length; i++) {
-            var target = result.data[i];
+              var target = result.data[i];
 
-            for (var y = 0; y < target.datapoints.length; y++) {
+              for (var y = 0; y < target.datapoints.length; y++) {
-              var datapoint = target.datapoints[y];
+                var datapoint = target.datapoints[y];
-              if (!datapoint[0]) { continue; }
+                if (!datapoint[0]) { continue; }
 
+                list.push({
+                  annotation: annotation,
+                  time: datapoint[1] * 1000,
+                  title: target.target
+                });
+              }
+            }
+
+            return list;
+          });
+      }
+      // Graphite event as annotation
+      else if (annotation.tags) {
+        return this.events({ range: rangeUnparsed, tags: annotation.tags })
+          .then(function(results) {
+            var list = [];
+            for (var i = 0; i < results.data; i++) {
               list.push({
                 annotation: annotation,
-                time: datapoint[1] * 1000,
+                time: event.when * 1000,
-                title: target.target
+                title: event.what,
+                tags: event.tags,
+                text: event.data
               });
             }
-          }
+            return list;
-
+          });
-          return list;
+      }
-        });
     };
 
     GraphiteDatasource.prototype.events = function(options) {