From 03ef1fd7587c67922978e5b756b020244324092d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 14 Apr 2017 22:56:01 +0200 Subject: [PATCH] refactoring: event / annotation handling in graph panel broken out --- public/app/features/annotations/all.ts | 7 +- .../features/annotations/annotations_srv.ts | 1 - public/app/features/annotations/event.ts | 10 ++ .../app/features/annotations/event_editor.ts | 69 +---------- .../app/features/annotations/event_manager.ts | 117 ++++++++++++++++++ public/app/plugins/panel/graph/graph.ts | 71 +---------- 6 files changed, 134 insertions(+), 141 deletions(-) create mode 100644 public/app/features/annotations/event.ts create mode 100644 public/app/features/annotations/event_manager.ts diff --git a/public/app/features/annotations/all.ts b/public/app/features/annotations/all.ts index cde82c24a48..5f195928c7a 100644 --- a/public/app/features/annotations/all.ts +++ b/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, }; diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts index 45536d73b98..c2422a63c27 100644 --- a/public/app/features/annotations/annotations_srv.ts +++ b/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) { diff --git a/public/app/features/annotations/event.ts b/public/app/features/annotations/event.ts new file mode 100644 index 00000000000..53afbea5b07 --- /dev/null +++ b/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; +} diff --git a/public/app/features/annotations/event_editor.ts b/public/app/features/annotations/event_editor.ts index 737e48d3776..939920e21ad 100644 --- a/public/app/features/annotations/event_editor.ts +++ b/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: '', - onClose: this.editorClosed.bind(this), - model: { - event: this.event, - panelCtrl: this.panelCtrl, - }, - }); - - this.panelCtrl.render(); - } -} - diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts new file mode 100644 index 00000000000..7e1ca41ca6c --- /dev/null +++ b/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: '', + 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, + }; + } +} diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index af03bafc4ac..9eebae31874 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/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',