feat(annotations): refactoring annotations srv to typescript, #5990

public/app/features/annotations/annotations_srv.js

-define([
-  'angular',
-  'lodash',
-  './editor_ctrl',
-], function (angular, _) {
-  'use strict';
-
-  var module = angular.module('grafana.services');
-
-  module.service('annotationsSrv', function($rootScope, $q, datasourceSrv, alertSrv, timeSrv) {
-    var promiseCached;
-    var list = [];
-    var self = this;
-
-    this.init = function() {
-      $rootScope.onAppEvent('refresh', this.clearCache, $rootScope);
-      $rootScope.onAppEvent('dashboard-initialized', this.clearCache, $rootScope);
-    };
-
-    this.clearCache = function() {
-      promiseCached = null;
-      list = [];
-    };
-
-    this.getAnnotations = function(dashboard) {
-      if (dashboard.annotations.list.length === 0) {
-        return $q.when(null);
-      }
-
-      if (promiseCached) {
-        return promiseCached;
-      }
-
-      self.dashboard = dashboard;
-      var annotations = _.where(dashboard.annotations.list, {enable: true});
-
-      var range = timeSrv.timeRange();
-      var rangeRaw = timeSrv.timeRange(false);
-
-      var promises  = _.map(annotations, function(annotation) {
-        if (annotation.snapshotData) {
-          self.receiveAnnotationResults(annotation.snapshotData);
-          return;
-        }
-        return datasourceSrv.get(annotation.datasource).then(function(datasource) {
-          var query = {range: range, rangeRaw: rangeRaw, annotation: annotation};
-          return datasource.annotationQuery(query)
-            .then(self.receiveAnnotationResults)
-            .then(function(results) {
-              if (dashboard.snapshot) {
-                annotation.snapshotData = angular.copy(results);
-              }
-            })
-            .then(null, errorHandler);
-        }, this);
-      });
-
-      promiseCached = $q.all(promises).then(function() {
-        return list;
-      }).catch(function(err) {
-        $rootScope.appEvent('alert-error', ['Annotations failed', (err.message || err)]);
-      });
-
-      return promiseCached;
-    };
-
-    this.receiveAnnotationResults = function(results) {
-      for (var i = 0; i < results.length; i++) {
-        self.addAnnotation(results[i]);
-      }
-
-      return results;
-    };
-
-    this.addAnnotation = function(options) {
-      list.push({
-        annotation: options.annotation,
-        min: options.time,
-        max: options.time,
-        eventType: options.annotation.name,
-        title: options.title,
-        tags: options.tags,
-        text: options.text,
-        score: 1
-      });
-    };
-
-    function errorHandler(err) {
-      console.log('Annotation error: ', err);
-      var message = err.message || "Annotation query failed";
-      alertSrv.set('Annotations error', message,'error');
-    }
-
-    // Now init
-    this.init();
-  });
-
-});

public/app/features/annotations/annotations_srv.ts

+///<reference path="../../headers/common.d.ts" />
+
+import './editor_ctrl';
+
+import angular from 'angular';
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+
+export class AnnotationsSrv {
+  globalAnnotationsPromise: any;
+
+  /** @ngInject */
+  constructor(private $rootScope,
+              private $q,
+              private datasourceSrv,
+              private timeSrv) {
+    $rootScope.onAppEvent('refresh', this.clearCache.bind(this), $rootScope);
+    $rootScope.onAppEvent('dashboard-initialized', this.clearCache.bind(this), $rootScope);
+  }
+
+  clearCache() {
+    this.globalAnnotationsPromise = null;
+  }
+
+  getAnnotations(dashboard) {
+    if (dashboard.annotations.list.length === 0) {
+      return this.$q.when(null);
+    }
+
+    if (this.globalAnnotationsPromise) {
+      return this.globalAnnotationsPromise;
+    }
+
+    var annotations = _.where(dashboard.annotations.list, {enable: true});
+    var range = this.timeSrv.timeRange();
+    var rangeRaw = this.timeSrv.timeRange(false);
+
+    this.globalAnnotationsPromise = this.$q.all(_.map(annotations, annotation => {
+      if (annotation.snapshotData) {
+        return this.translateQueryResult(annotation.snapshotData);
+      }
+
+      return this.datasourceSrv.get(annotation.datasource).then(datasource => {
+        // issue query against data source
+        return datasource.annotationQuery({
+          range: range,
+          rangeRaw:
+          rangeRaw,
+          annotation: annotation
+        });
+      })
+      .then(results => {
+        // store response in annotation object if this is a snapshot call
+        if (dashboard.snapshot) {
+          annotation.snapshotData = angular.copy(results);
+        }
+        // translate result
+        return this.translateQueryResult(results);
+      });
+    }))
+    .then(allResults => {
+      return _.flatten(allResults);
+    }).catch(err => {
+      this.$rootScope.appEvent('alert-error', ['Annotations failed', (err.message || err)]);
+    });
+
+    return this.globalAnnotationsPromise;
+  }
+
+  translateQueryResult(results) {
+    var translated = [];
+
+    for (var item of results) {
+      translated.push({
+        annotation: item.annotation,
+        min: item.time,
+        max: item.time,
+        eventType: item.annotation.name,
+        title: item.title,
+        tags: item.tags,
+        text: item.text,
+        score: 1
+      });
+    }
+
+    return translated;
+  }
+}
+
+coreModule.service('annotationsSrv', AnnotationsSrv);

public/app/features/annotations/editor_ctrl.ts

@@ -2,7 +2,6 @@
 
 import angular from 'angular';
 import _ from 'lodash';
-import config from 'app/core/config';
 import $ from 'jquery';
 import coreModule from 'app/core/core_module';
 
@@ -21,6 +20,7 @@ export class AnnotationsEditorCtrl {
     enable: true
   };
 
+  /** @ngInject */
   constructor(private $scope, private datasourceSrv) {
     $scope.ctrl = this;
 

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

@@ -320,16 +320,17 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholdManExports) {
           }
 
           var types = {};
+          for (var i = 0; i < annotations.length; i++) {
+            var item = annotations[i];
 
-          _.each(annotations, function(event) {
-            if (!types[event.annotation.name]) {
-              types[event.annotation.name] = {
-                color: event.annotation.iconColor,
+            if (!types[item.annotation.name]) {
+              types[item.annotation.name] = {
+                color: item.annotation.iconColor,
                 position: 'BOTTOM',
                 markerSize: 5,
               };
             }
-          });
+          }
 
           options.events = {
             levels: _.keys(types).length + 1,