apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactoring: event / annotation handling in graph panel broken out

Browse Source
pull/8098/head
Torkel Ödegaard 8 years ago
parent 60ef7d8768
commit 03ef1fd758
6 changed files with 134 additions and 141 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      public/app/features/annotations/all.ts
  2. 1
      public/app/features/annotations/annotations_srv.ts
  3. 10
      public/app/features/annotations/event.ts
  4. 69
      public/app/features/annotations/event_editor.ts
  5. 117
      public/app/features/annotations/event_manager.ts
  6. 71
      public/app/plugins/panel/graph/graph.ts

7
public/app/features/annotations/all.ts
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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',

Write Preview
Loading…
Cancel
Save