IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: event / annotation handling in graph panel broken out

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-04-14 22:56:01 +02:00
parent 60ef7d8768
commit 03ef1fd758
6 changed files with 134 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/features/annotations/all.ts
View File

@ -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,
};

1
public/app/features/annotations/annotations_srv.ts
View File

@ -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) {

10
public/app/features/annotations/event.ts Normal file
View File

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

69
public/app/features/annotations/event_editor.ts
View File

@ -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();
}
}

117
public/app/features/annotations/event_manager.ts Normal file
View File

@ -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,
};
}
}

71
public/app/plugins/panel/graph/graph.ts
View File

@ -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',