import _ from 'lodash'; import moment from 'moment'; import tinycolor from 'tinycolor2'; import { MetricsPanelCtrl } from 'app/plugins/sdk'; import { AnnotationEvent } from './event'; import { OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, DEFAULT_ANNOTATION_COLOR, REGION_FILL_ALPHA, } from 'app/core/utils/colors'; export class EventManager { event: AnnotationEvent; editorOpen: boolean; constructor(private panelCtrl: MetricsPanelCtrl) {} editorClosed() { this.event = null; this.editorOpen = false; this.panelCtrl.render(); } editorOpened() { this.editorOpen = true; } updateTime(range) { if (!this.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; } this.panelCtrl.render(); } editEvent(event, elem?) { this.event = event; this.panelCtrl.render(); } addFlotEvents(annotations, flotOptions) { if (!this.event && annotations.length === 0) { return; } var types = { $__alerting: { color: ALERTING_COLOR, position: 'BOTTOM', markerSize: 5, }, $__ok: { color: OK_COLOR, position: 'BOTTOM', markerSize: 5, }, $__no_data: { color: NO_DATA_COLOR, position: 'BOTTOM', markerSize: 5, }, $__editing: { color: DEFAULT_ANNOTATION_COLOR, position: 'BOTTOM', markerSize: 5, }, }; if (this.event) { if (this.event.isRegion) { annotations = [ { isRegion: true, min: this.event.time.valueOf(), timeEnd: this.event.timeEnd.valueOf(), text: this.event.text, eventType: '$__editing', editModel: this.event, }, ]; } else { annotations = [ { min: this.event.time.valueOf(), text: this.event.text, editModel: this.event, eventType: '$__editing', }, ]; } } else { // annotations from query for (var i = 0; i < annotations.length; i++) { var item = annotations[i]; // add properties used by jquery flot events item.min = item.time; item.max = item.time; item.eventType = item.source.name; 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, }; } } } let regions = getRegions(annotations); addRegionMarking(regions, flotOptions); let eventSectionHeight = 20; let eventSectionMargin = 7; flotOptions.grid.eventSectionHeight = eventSectionMargin; flotOptions.xaxis.eventSectionHeight = eventSectionHeight; flotOptions.events = { levels: _.keys(types).length + 1, data: annotations, types: types, manager: this, }; } } function getRegions(events) { return _.filter(events, 'isRegion'); } function addRegionMarking(regions, flotOptions) { let markings = flotOptions.grid.markings; let defaultColor = DEFAULT_ANNOTATION_COLOR; let fillColor; _.each(regions, region => { if (region.source) { fillColor = region.source.iconColor || defaultColor; } else { fillColor = defaultColor; } fillColor = addAlphaToRGB(fillColor, REGION_FILL_ALPHA); markings.push({ xaxis: { from: region.min, to: region.timeEnd }, color: fillColor, }); }); } function addAlphaToRGB(colorString: string, alpha: number): string { let color = tinycolor(colorString); if (color.isValid()) { color.setAlpha(alpha); return color.toRgbString(); } else { return colorString; } }