refactoring: event / annotation handling in graph panel broken out

public/app/features/annotations/all.ts

@@ -1,9 +1,12 @@
 
 import {AnnotationsSrv} from './annotations_srv';
-import {eventEditor, EventManager} from './event_editor';
+import {eventEditor} from './event_editor';
+import {EventManager} from './event_manager';
+import {AnnotationEvent} from './event';
 
 export {
   AnnotationsSrv,
   eventEditor,
-  EventManager
+  EventManager,
+  AnnotationEvent,
 };

public/app/features/annotations/annotations_srv.ts

@@ -38,7 +38,6 @@ export class AnnotationsSrv {
 
       // filter out annotations that do not belong to requesting panel
       annotations = _.filter(annotations, item => {
-        console.log(item);
         // shownIn === 1 requires annotation matching panel id
         if (item.source.showIn === 1) {
           if (item.panelId && options.panel.id === item.panelId) {

public/app/features/annotations/event.ts

@@ -0,0 +1,10 @@
+
+export class AnnotationEvent {
+  dashboardId: number;
+  panelId: number;
+  time: any;
+  timeEnd: any;
+  isRegion: boolean;
+  title: string;
+  text: string;
+}

public/app/features/annotations/event_editor.ts

@@ -4,16 +4,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import {coreModule} from 'app/core/core';
 import {MetricsPanelCtrl} from 'app/plugins/sdk';
-
-export class AnnotationEvent {
-  dashboardId: number;
-  panelId: number;
-  time: any;
-  timeEnd: any;
-  isRegion: boolean;
-  title: string;
-  text: string;
-}
+import {AnnotationEvent} from './event';
 
 export class EventEditorCtrl {
   panelCtrl: MetricsPanelCtrl;
@@ -73,61 +64,3 @@ export function eventEditor() {
 }
 
 coreModule.directive('eventEditor', eventEditor);
-
-export class EventManager {
-  event: AnnotationEvent;
-
-  constructor(private panelCtrl: MetricsPanelCtrl,
-              private elem,
-              private popoverSrv) {
-              }
-
-              editorClosed() {
-                console.log('editorClosed');
-                this.event = null;
-                this.panelCtrl.render();
-              }
-
-              updateTime(range) {
-                let newEvent = true;
-
-                if (this.event) {
-                  newEvent = false;
-                } else {
-                  // init new event
-                  this.event = new AnnotationEvent();
-                  this.event.dashboardId = this.panelCtrl.dashboard.id;
-                  this.event.panelId = this.panelCtrl.panel.id;
-                }
-
-                // update time
-                this.event.time = moment(range.from);
-                this.event.isRegion = false;
-                if (range.to) {
-                  this.event.timeEnd = moment(range.to);
-                  this.event.isRegion = true;
-                }
-
-                // newEvent means the editor is not visible
-                if (!newEvent) {
-                  this.panelCtrl.render();
-                  return;
-                }
-
-                this.popoverSrv.show({
-                  element: this.elem[0],
-                  classNames: 'drop-popover drop-popover--form',
-                  position: 'bottom center',
-                  openOn: null,
-                  template: '<event-editor panel-ctrl="panelCtrl" event="event" close="dismiss()"></event-editor>',
-                  onClose: this.editorClosed.bind(this),
-                  model: {
-                    event: this.event,
-                    panelCtrl: this.panelCtrl,
-                  },
-                });
-
-                this.panelCtrl.render();
-              }
-}
-

public/app/features/annotations/event_manager.ts

@@ -0,0 +1,117 @@
+
+import moment from 'moment';
+import {MetricsPanelCtrl} from 'app/plugins/sdk';
+import {AnnotationEvent} from './event';
+
+export class EventManager {
+  event: AnnotationEvent;
+
+  constructor(private panelCtrl: MetricsPanelCtrl, private elem, private popoverSrv) {
+  }
+
+  editorClosed() {
+    console.log('editorClosed');
+    this.event = null;
+    this.panelCtrl.render();
+  }
+
+  updateTime(range) {
+    let newEvent = true;
+
+    if (this.event) {
+      newEvent = false;
+    } else {
+      // init new event
+      this.event = new AnnotationEvent();
+      this.event.dashboardId = this.panelCtrl.dashboard.id;
+      this.event.panelId = this.panelCtrl.panel.id;
+    }
+
+    // update time
+    this.event.time = moment(range.from);
+    this.event.isRegion = false;
+    if (range.to) {
+      this.event.timeEnd = moment(range.to);
+      this.event.isRegion = true;
+    }
+
+    // newEvent means the editor is not visible
+    if (!newEvent) {
+      this.panelCtrl.render();
+      return;
+    }
+
+    this.popoverSrv.show({
+      element: this.elem[0],
+      classNames: 'drop-popover drop-popover--form',
+      position: 'bottom center',
+      openOn: null,
+      template: '<event-editor panel-ctrl="panelCtrl" event="event" close="dismiss()"></event-editor>',
+      onClose: this.editorClosed.bind(this),
+      model: {
+        event: this.event,
+        panelCtrl: this.panelCtrl,
+      },
+    });
+
+    this.panelCtrl.render();
+  }
+
+  addPlotEvents(annotations) {
+    if (this.event || annotations.length === 0) {
+      return;
+    }
+
+    var types = {
+      '$__alerting': {
+        color: 'rgba(237, 46, 24, 1)',
+        position: 'BOTTOM',
+        markerSize: 5,
+      },
+      '$__ok': {
+        color: 'rgba(11, 237, 50, 1)',
+        position: 'BOTTOM',
+        markerSize: 5,
+      },
+      '$__no_data': {
+        color: 'rgba(150, 150, 150, 1)',
+        position: 'BOTTOM',
+        markerSize: 5,
+      },
+    };
+
+    if (this.event) {
+      annotations = [
+        {
+          min: this.event.time.valueOf(),
+          title: this.event.title,
+          text: this.event.text,
+          eventType: '$__alerting',
+        }
+      ];
+    } else {
+      // annotations from query
+      for (var i = 0; i < annotations.length; i++) {
+        var item = annotations[i];
+        if (item.newState) {
+          item.eventType = '$__' + item.newState;
+          continue;
+        }
+
+        if (!types[item.source.name]) {
+          types[item.source.name] = {
+            color: item.source.iconColor,
+            position: 'BOTTOM',
+            markerSize: 5,
+          };
+        }
+      }
+    }
+
+    options.events = {
+      levels: _.keys(types).length + 1,
+      data: annotations,
+      types: types,
+    };
+  }
+}

public/app/plugins/panel/graph/graph.ts

@@ -331,7 +331,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
         }
 
         thresholdManager.addPlotOptions(options, panel);
-        addAnnotationEvents(options);
+        eventManager.addPlotEvents(annotations, options);
         configureAxisOptions(data, options);
 
         sortedSeries = _.sortBy(data, function(series) { return series.zindex; });
@@ -463,75 +463,6 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
         };
       }
 
-      function hasAnnotationEvents() {
-        return eventManager.event || annotations.length > 0 ;
-      }
-
-      function addAnnotationEvents(options) {
-        if (!hasAnnotationEvents()) {
-          return;
-        }
-
-        var types = {};
-        types['$__alerting'] = {
-          color: 'rgba(237, 46, 24, 1)',
-          position: 'BOTTOM',
-          markerSize: 5,
-        };
-
-        types['$__ok'] = {
-          color: 'rgba(11, 237, 50, 1)',
-          position: 'BOTTOM',
-          markerSize: 5,
-        };
-
-        types['$__no_data'] = {
-          color: 'rgba(150, 150, 150, 1)',
-          position: 'BOTTOM',
-          markerSize: 5,
-        };
-
-        types['$__execution_error'] = ['$__no_data'];
-
-        var annotationsToShow;
-        // adding/edditing event, only show that one
-        if (eventManager.event) {
-          const event = eventManager.event;
-          annotationsToShow = [
-            {
-              min: event.time.valueOf(),
-              title: event.title,
-              description: event.text,
-              eventType: '$__alerting',
-            }
-          ];
-        } else {
-          // annotations from query
-          for (var i = 0; i < annotations.length; i++) {
-            var item = annotations[i];
-            if (item.newState) {
-              item.eventType = '$__' + item.newState;
-              continue;
-            }
-
-            if (!types[item.source.name]) {
-              types[item.source.name] = {
-                color: item.source.iconColor,
-                position: 'BOTTOM',
-                markerSize: 5,
-              };
-            }
-          }
-          annotationsToShow = annotations;
-        }
-
-        options.events = {
-          levels: _.keys(types).length + 1,
-          data: annotationsToShow,
-          types: types,
-        };
-      }
-
       function configureAxisOptions(data, options) {
         var defaults = {
           position: 'left',