You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
4.0 KiB
177 lines
4.0 KiB
import _ from 'lodash'; |
|
import moment from 'moment'; |
|
import tinycolor from 'tinycolor2'; |
|
import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk'; |
|
import { AnnotationEvent } from './event'; |
|
import { |
|
DEFAULT_ANNOTATION_COLOR, |
|
OK_COLOR, |
|
ALERTING_COLOR, |
|
NO_DATA_COLOR, |
|
REGION_FILL_ALPHA |
|
} from './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; |
|
} |
|
}
|
|
|