2017-12-20 05:33:33 -06:00
|
|
|
import _ from 'lodash';
|
|
|
|
import tinycolor from 'tinycolor2';
|
2017-12-19 09:06:54 -06:00
|
|
|
import {
|
|
|
|
OK_COLOR,
|
|
|
|
ALERTING_COLOR,
|
|
|
|
NO_DATA_COLOR,
|
2018-11-15 07:30:36 -06:00
|
|
|
PENDING_COLOR,
|
2017-12-19 09:06:54 -06:00
|
|
|
DEFAULT_ANNOTATION_COLOR,
|
2017-12-20 05:33:33 -06:00
|
|
|
REGION_FILL_ALPHA,
|
2019-01-10 06:34:23 -06:00
|
|
|
} from '@grafana/ui';
|
|
|
|
|
|
|
|
import { MetricsPanelCtrl } from 'app/plugins/sdk';
|
2019-07-06 01:05:53 -05:00
|
|
|
import { AnnotationEvent } from '@grafana/data';
|
2017-10-07 03:31:39 -05:00
|
|
|
|
2017-04-14 15:56:01 -05:00
|
|
|
export class EventManager {
|
Chore: Fix all Typescript strict null errors (#26204)
* Chore: Fix typescript strict null errors
* Added new limit
* Fixed ts issue
* fixed tests
* trying to fix type inference
* Fixing more ts errors
* Revert tsconfig option
* Fix
* Fixed code
* More fixes
* fix tests
* Updated snapshot
* Chore: More ts strict null fixes
* More fixes in some really messed up azure config components
* More fixes, current count: 441
* 419
* More fixes
* Fixed invalid initial state in explore
* Fixing tests
* Fixed tests
* Explore fix
* More fixes
* Progress
* Sub 300
* Now at 218
* Progress
* Update
* Progress
* Updated tests
* at 159
* fixed tests
* Progress
* YAy blow 100! at 94
* 10,9,8,7,6,5,4,3,2,1... lift off
* Fixed tests
* Fixed more type errors
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
2020-07-10 05:46:59 -05:00
|
|
|
event: AnnotationEvent | null;
|
2017-10-07 03:31:39 -05:00
|
|
|
editorOpen: boolean;
|
2017-04-14 15:56:01 -05:00
|
|
|
|
2017-10-07 05:23:20 -05:00
|
|
|
constructor(private panelCtrl: MetricsPanelCtrl) {}
|
2017-04-14 15:56:01 -05:00
|
|
|
|
|
|
|
editorClosed() {
|
|
|
|
this.event = null;
|
2017-10-07 03:31:39 -05:00
|
|
|
this.editorOpen = false;
|
2017-04-14 15:56:01 -05:00
|
|
|
this.panelCtrl.render();
|
|
|
|
}
|
|
|
|
|
2017-10-07 03:31:39 -05:00
|
|
|
editorOpened() {
|
|
|
|
this.editorOpen = true;
|
|
|
|
}
|
2017-04-14 15:56:01 -05:00
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
updateTime(range: { from: any; to: any }) {
|
2017-10-07 03:31:39 -05:00
|
|
|
if (!this.event) {
|
2019-03-22 06:51:12 -05:00
|
|
|
this.event = {};
|
2017-04-14 15:56:01 -05:00
|
|
|
this.event.dashboardId = this.panelCtrl.dashboard.id;
|
|
|
|
this.event.panelId = this.panelCtrl.panel.id;
|
|
|
|
}
|
|
|
|
|
|
|
|
// update time
|
2019-03-22 06:51:12 -05:00
|
|
|
this.event.time = range.from;
|
2017-04-14 15:56:01 -05:00
|
|
|
this.event.isRegion = false;
|
2019-03-22 06:51:12 -05:00
|
|
|
|
2017-04-14 15:56:01 -05:00
|
|
|
if (range.to) {
|
2019-03-22 06:51:12 -05:00
|
|
|
this.event.timeEnd = range.to;
|
2017-04-14 15:56:01 -05:00
|
|
|
this.event.isRegion = true;
|
|
|
|
}
|
|
|
|
|
2017-10-07 03:31:39 -05:00
|
|
|
this.panelCtrl.render();
|
|
|
|
}
|
2017-04-14 15:56:01 -05:00
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
editEvent(event: AnnotationEvent, elem?: any) {
|
2017-10-07 03:31:39 -05:00
|
|
|
this.event = event;
|
2017-04-14 15:56:01 -05:00
|
|
|
this.panelCtrl.render();
|
|
|
|
}
|
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
addFlotEvents(annotations: any, flotOptions: any) {
|
2017-04-25 07:27:41 -05:00
|
|
|
if (!this.event && annotations.length === 0) {
|
2017-04-14 15:56:01 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
const types: any = {
|
2017-10-07 05:23:20 -05:00
|
|
|
$__alerting: {
|
2017-10-07 03:31:39 -05:00
|
|
|
color: ALERTING_COLOR,
|
2017-12-20 05:33:33 -06:00
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
2017-04-14 15:56:01 -05:00
|
|
|
},
|
2017-10-07 05:23:20 -05:00
|
|
|
$__ok: {
|
2017-10-07 03:31:39 -05:00
|
|
|
color: OK_COLOR,
|
2017-12-20 05:33:33 -06:00
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
2017-04-14 15:56:01 -05:00
|
|
|
},
|
2017-10-07 05:23:20 -05:00
|
|
|
$__no_data: {
|
2017-10-07 03:31:39 -05:00
|
|
|
color: NO_DATA_COLOR,
|
2017-12-20 05:33:33 -06:00
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
2017-04-14 15:56:01 -05:00
|
|
|
},
|
2018-11-15 07:30:36 -06:00
|
|
|
$__pending: {
|
|
|
|
color: PENDING_COLOR,
|
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
|
|
|
},
|
2017-10-07 05:23:20 -05:00
|
|
|
$__editing: {
|
|
|
|
color: DEFAULT_ANNOTATION_COLOR,
|
2017-12-20 05:33:33 -06:00
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
|
|
|
},
|
2017-04-14 15:56:01 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
if (this.event) {
|
2017-10-07 03:31:39 -05:00
|
|
|
if (this.event.isRegion) {
|
|
|
|
annotations = [
|
|
|
|
{
|
|
|
|
isRegion: true,
|
2019-03-22 06:51:12 -05:00
|
|
|
min: this.event.time,
|
|
|
|
timeEnd: this.event.timeEnd,
|
2017-10-07 03:31:39 -05:00
|
|
|
text: this.event.text,
|
2017-12-20 05:33:33 -06:00
|
|
|
eventType: '$__editing',
|
|
|
|
editModel: this.event,
|
|
|
|
},
|
2017-10-07 03:31:39 -05:00
|
|
|
];
|
|
|
|
} else {
|
|
|
|
annotations = [
|
|
|
|
{
|
2019-03-22 06:51:12 -05:00
|
|
|
min: this.event.time,
|
2017-10-07 03:31:39 -05:00
|
|
|
text: this.event.text,
|
|
|
|
editModel: this.event,
|
2017-12-20 05:33:33 -06:00
|
|
|
eventType: '$__editing',
|
|
|
|
},
|
2017-10-07 03:31:39 -05:00
|
|
|
];
|
|
|
|
}
|
2017-04-14 15:56:01 -05:00
|
|
|
} else {
|
|
|
|
// annotations from query
|
2018-08-30 02:03:11 -05:00
|
|
|
for (let i = 0; i < annotations.length; i++) {
|
2018-08-29 07:27:29 -05:00
|
|
|
const item = annotations[i];
|
2017-10-07 03:31:39 -05:00
|
|
|
|
|
|
|
// add properties used by jquery flot events
|
|
|
|
item.min = item.time;
|
|
|
|
item.max = item.time;
|
2020-09-24 14:01:31 -05:00
|
|
|
item.eventType = item.type;
|
2017-10-07 03:31:39 -05:00
|
|
|
|
2017-04-14 15:56:01 -05:00
|
|
|
if (item.newState) {
|
2017-12-20 05:33:33 -06:00
|
|
|
item.eventType = '$__' + item.newState;
|
2017-04-14 15:56:01 -05:00
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
2020-09-24 14:01:31 -05:00
|
|
|
if (!types[item.type]) {
|
|
|
|
types[item.type] = {
|
|
|
|
color: item.color,
|
2017-12-20 05:33:33 -06:00
|
|
|
position: 'BOTTOM',
|
|
|
|
markerSize: 5,
|
2017-04-14 15:56:01 -05:00
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-08-26 10:14:40 -05:00
|
|
|
const regions = getRegions(annotations);
|
2017-10-07 03:31:39 -05:00
|
|
|
addRegionMarking(regions, flotOptions);
|
|
|
|
|
2018-08-26 10:14:40 -05:00
|
|
|
const eventSectionHeight = 20;
|
|
|
|
const eventSectionMargin = 7;
|
2017-10-07 03:31:39 -05:00
|
|
|
flotOptions.grid.eventSectionHeight = eventSectionMargin;
|
|
|
|
flotOptions.xaxis.eventSectionHeight = eventSectionHeight;
|
|
|
|
|
2017-04-14 16:10:56 -05:00
|
|
|
flotOptions.events = {
|
2017-04-14 15:56:01 -05:00
|
|
|
levels: _.keys(types).length + 1,
|
|
|
|
data: annotations,
|
|
|
|
types: types,
|
2017-12-20 05:33:33 -06:00
|
|
|
manager: this,
|
2017-04-14 15:56:01 -05:00
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
2017-10-07 03:31:39 -05:00
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
function getRegions(events: AnnotationEvent[]) {
|
2017-12-20 05:33:33 -06:00
|
|
|
return _.filter(events, 'isRegion');
|
2017-10-07 03:31:39 -05:00
|
|
|
}
|
|
|
|
|
2019-08-01 07:38:34 -05:00
|
|
|
function addRegionMarking(regions: any[], flotOptions: { grid: { markings: any } }) {
|
2018-08-26 10:14:40 -05:00
|
|
|
const markings = flotOptions.grid.markings;
|
|
|
|
const defaultColor = DEFAULT_ANNOTATION_COLOR;
|
2017-10-07 03:31:39 -05:00
|
|
|
let fillColor;
|
|
|
|
|
|
|
|
_.each(regions, region => {
|
|
|
|
if (region.source) {
|
|
|
|
fillColor = region.source.iconColor || defaultColor;
|
|
|
|
} else {
|
|
|
|
fillColor = defaultColor;
|
|
|
|
}
|
|
|
|
|
2017-10-09 06:54:14 -05:00
|
|
|
fillColor = addAlphaToRGB(fillColor, REGION_FILL_ALPHA);
|
2017-12-19 09:06:54 -06:00
|
|
|
markings.push({
|
|
|
|
xaxis: { from: region.min, to: region.timeEnd },
|
2017-12-20 05:33:33 -06:00
|
|
|
color: fillColor,
|
2017-12-19 09:06:54 -06:00
|
|
|
});
|
2017-10-07 03:31:39 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-10-09 06:54:14 -05:00
|
|
|
function addAlphaToRGB(colorString: string, alpha: number): string {
|
2018-08-26 10:14:40 -05:00
|
|
|
const color = tinycolor(colorString);
|
2017-10-09 06:54:14 -05:00
|
|
|
if (color.isValid()) {
|
|
|
|
color.setAlpha(alpha);
|
|
|
|
return color.toRgbString();
|
2017-10-07 03:31:39 -05:00
|
|
|
} else {
|
2017-10-09 06:54:14 -05:00
|
|
|
return colorString;
|
2017-10-07 03:31:39 -05:00
|
|
|
}
|
|
|
|
}
|