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

Create annotations (#8197)

Browse Source 
* annotations: add 25px space for events section

* annotations: restored create annotation action

* annotations: able to use fa icons as event markers

* annotations: initial emoji support from twemoji lib

* annotations: adjust fa icon position

* annotations: initial emoji picker

* annotation: include user info into annotation requests

* annotation: add icon info

* annotation: display user info in tooltip

* annotation: fix region saving

* annotation: initial region markers

* annotation: fix region clearing (add flot-temp-elem class)

* annotation: adjust styles a bit

* annotations: minor fixes

* annoations: removed userId look in loop, need a sql join or a user cache for this

* annotation: fix invisible events

* lib: changed twitter emoij lib to be npm dependency

* annotation: add icon picker to Add Annotation dialog

* annotation: save icon to annotation table

* annotation: able to set custom icon for annotation added by user

* annotations: fix emoji after library upgrade (switch to 72px)

* emoji: temporary remove bad code points

* annotations: improve icon picker

* annotations: icon show icon picker at the top

* annotations: use svg for emoji

* annotations: fix region drawing when add annotation editor opened

* annotations: use flot lib for drawing region fill

* annotations: move regions building into event_manager

* annotations: don't draw additional space if no events are got

* annotations: deduplicate events

* annotations: properly render cut regions

* annotations: fix cut region building

* annotations: refactor

* annotations: adjust event section size

* add-annotations: fix undefined default icon

* create-annotations:  edit event (frontend part)

* fixed bug causes error when hover event marker

* create-annotations:  update event (backend)

* ignore grafana-server debug binary in git (created VS Code)

* create-annotations: use PUT request for updating annotation.

* create-annotations: fixed time format when editing existing event

* create-annotations: support for region update

* create-annotations: fix bug with limit and event type

* create-annotations: delete annotation

* create-annotations: show only selected icon in edit mode

* create-annotations: show event editor only for users with at least Editor role

* create-annotations: handle double-sized emoji codepoints

* create-annotations: refactor

use CP_SEPARATOR from emojiDef

* create-annotations: update emoji list, add categories.

* create-annotations: copy SVG emoji into public/vendor/npm and use it as a base path

* create-annotations: initial tabs for emoji picker

* emoji-picker: adjust styles

* emoji-picker: minor refactor

* emoji-picker: refactor - rename and move into one directory

* emoji-picker: build emoji elements on app load, not on picker open

* emoji-picker: fix emoji searching

* emoji-picker: refactor

* emoji-picker: capitalize category name

* emoji-picker: refactor

move buildEmojiElem() into emoji_converter.ts for future reuse.

* jquery.flot.events: refactor

use buildEmojiElem() for making emojis, remove unused code for font awesome based icons.

* emoji_converter: handle converting error

* tech: updated

* merged with master

* shore: clean up some stuff

* annotation: wip tags

* annotation: filtering by tags

* tags: parse out spaces etc. from a tags string

* annotations: use tagsinput component for tag filtering

* annotation: wip work on how we query alert & panel annotations

* annotations: support for updating tags in an annotation

* linting

* annotations: work on unifying how alert history annotations and manual panel annotations are created

* tslint: fixes

* tags: create tag on blur as well

Currently, the tags directive only creates the tag when the
user presses enter. This change means the tag is created on
blur as well (when the user clicks outside the input field).

* annotations: fix update after refactoring

* annotations: progress on how alert annotations are fetched

* annotations: minor progress

* annotations: progress

* annotation: minor progress

* annotations: move tag parsing from tooltip to ds

Instead of parsing a tag string into an array in the annotation_tooltip
class, this moves the parsing to the datasources. InfluxDB ds already
does that parsing. Graphite now has it.

* annotations: more work on querying

* annotations: change from tags as string to array

when saving in the db and in the api.

* annotations: delete tag link if removed on edit

* annotation: more work on depricating annotation title

* annotations: delete tag links on delete

* annotations: fix for find

* annotation: added user to annotation tooltip and added alertName to annoation dto

* annotations: use id from route instead from cmd for updating

* annotations: http api docs

* create annotation: last edits

* annotations: minor fix for querying annotations before dashboard saved

* annotations: fix for popover placement when legend is on the side (and doubel render pass is causing original marker to be removed)

* annotations: changing how the built in query gets added

* annotation: added time to header in edit mode

* tests: fixed jshint built issue
This commit is contained in:
Torkel Ödegaard
2017-10-07 10:31:39 +02:00
committed by GitHub
parent 43903d71ec
commit 25aa9df270
72 changed files with 2240 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/plugins/panel/alertlist/module.html
View File

@@ -33,7 +33,7 @@
<i class="{{al.stateModel.iconClass}}"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">{{al.title}}</p>
<p class="alert-list-title">{{al.alertName}}</p>
<div class="alert-list-text">
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
<span class="alert-list-info alert-list-info-left">{{al.info}}</span>

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

@@ -22,7 +22,7 @@ import {EventManager} from 'app/features/annotations/all';
import {convertValuesToHistogram, getSeriesValues} from './histogram';
/** @ngInject **/
function graphDirective($rootScope, timeSrv, popoverSrv) {
function graphDirective($rootScope, timeSrv, popoverSrv, contextSrv) {
return {
restrict: 'A',
template: '',
@@ -37,7 +37,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv) {
var legendSideLastValue = null;
var rootScope = scope.$root;
var panelWidth = 0;
var eventManager = new EventManager(ctrl, elem, popoverSrv);
var eventManager = new EventManager(ctrl);
var thresholdManager = new ThresholdManager(ctrl);
var tooltip = new GraphTooltip(elem, dashboard, scope, function() {
return sortedSeries;
@@ -268,6 +268,7 @@ function graphDirective($rootScope, timeSrv, popoverSrv) {
clickable: true,
color: '#c8c8c8',
margin: { left: 0, right: 0 },
labelMarginX: 0,
},
selection: {
mode: "x",
@@ -651,10 +652,10 @@ function graphDirective($rootScope, timeSrv, popoverSrv) {
}
elem.bind("plotselected", function (event, ranges) {
if (ranges.ctrlKey || ranges.metaKey) {
// scope.$apply(() => {
// eventManager.updateTime(ranges.xaxis);
// });
if ((ranges.ctrlKey || ranges.metaKey) && contextSrv.isEditor) {
setTimeout(() => {
eventManager.updateTime(ranges.xaxis);
}, 100);
} else {
scope.$apply(function() {
timeSrv.setTime({
@@ -666,13 +667,13 @@ function graphDirective($rootScope, timeSrv, popoverSrv) {
});
elem.bind("plotclick", function (event, pos, item) {
if (pos.ctrlKey || pos.metaKey || eventManager.event) {
if ((pos.ctrlKey || pos.metaKey) && contextSrv.isEditor) {
// Skip if range selected (added in "plotselected" event handler)
let isRangeSelection = pos.x !== pos.x1;
if (!isRangeSelection) {
// scope.$apply(() => {
// eventManager.updateTime({from: pos.x, to: null});
// });
setTimeout(() => {
eventManager.updateTime({from: pos.x, to: null});
}, 100);
}
}
});

225
public/app/plugins/panel/graph/jquery.flot.events.js
View File

@@ -7,14 +7,18 @@ define([
function ($, _, angular, Drop) {
'use strict';
function createAnnotationToolip(element, event) {
function createAnnotationToolip(element, event, plot) {
var injector = angular.element(document).injector();
var content = document.createElement('div');
content.innerHTML = '<annotation-tooltip event="event"></annotation-tooltip>';
content.innerHTML = '<annotation-tooltip event="event" on-edit="onEdit()"></annotation-tooltip>';
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) {
var eventManager = plot.getOptions().events.manager;
var tmpScope = $rootScope.$new(true);
tmpScope.event = event;
tmpScope.onEdit = function() {
eventManager.editEvent(event);
};
$compile(content)(tmpScope);
tmpScope.$digest();
@@ -42,6 +46,69 @@ function ($, _, angular, Drop) {
}]);
}
var markerElementToAttachTo = null;
function createEditPopover(element, event, plot) {
var eventManager = plot.getOptions().events.manager;
if (eventManager.editorOpen) {
// update marker element to attach to (needed in case of legend on the right
// when there is a double render pass and the inital marker element is removed)
markerElementToAttachTo = element;
return;
}
// mark as openend
eventManager.editorOpened();
// set marker elment to attache to
markerElementToAttachTo = element;
// wait for element to be attached and positioned
setTimeout(function() {
var injector = angular.element(document).injector();
var content = document.createElement('div');
content.innerHTML = '<event-editor panel-ctrl="panelCtrl" event="event" close="close()"></event-editor>';
injector.invoke(["$compile", "$rootScope", function($compile, $rootScope) {
var scope = $rootScope.$new(true);
var drop;
scope.event = event;
scope.panelCtrl = eventManager.panelCtrl;
scope.close = function() {
drop.close();
};
$compile(content)(scope);
scope.$digest();
drop = new Drop({
target: markerElementToAttachTo[0],
content: content,
position: "bottom center",
classes: 'drop-popover drop-popover--form',
openOn: 'click',
tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}]
}
});
drop.open();
eventManager.editorOpened();
drop.on('close', function() {
// need timeout here in order call drop.destroy
setTimeout(function() {
eventManager.editorClosed();
scope.$destroy();
drop.destroy();
});
});
}]);
}, 100);
}
/*
* jquery.flot.events
*
@@ -121,11 +188,20 @@ function ($, _, angular, Drop) {
*/
this.setupEvents = function(events) {
var that = this;
var parts = _.partition(events, 'isRegion');
var regions = parts[0];
events = parts[1];
$.each(events, function(index, event) {
var ve = new VisualEvent(event, that._buildDiv(event));
_events.push(ve);
});
$.each(regions, function (index, event) {
var vre = new VisualEvent(event, that._buildRegDiv(event));
_events.push(vre);
});
_events.sort(function(a, b) {
var ao = a.getOptions(), bo = b.getOptions();
if (ao.min > bo.min) { return 1; }
@@ -232,7 +308,10 @@ function ($, _, angular, Drop) {
lineWidth = this._types[eventTypeId].lineWidth;
}
top = o.top + this._plot.height();
var topOffset = xaxis.options.eventSectionHeight || 0;
topOffset = topOffset / 3;
top = o.top + this._plot.height() + topOffset;
left = xaxis.p2c(event.min) + o.left;
var line = $('<div class="events_line flot-temp-elem"></div>').css({
@@ -241,25 +320,27 @@ function ($, _, angular, Drop) {
"left": left + 'px',
"top": 8,
"width": lineWidth + "px",
"height": this._plot.height(),
"height": this._plot.height() + topOffset * 0.8,
"border-left-width": lineWidth + "px",
"border-left-style": lineStyle,
"border-left-color": color
"border-left-color": color,
"color": color
})
.appendTo(container);
if (markerShow) {
var marker = $('<div class="events_marker"></div>').css({
"position": "absolute",
"left": (-markerSize-Math.round(lineWidth/2)) + "px",
"left": (-markerSize - Math.round(lineWidth / 2)) + "px",
"font-size": 0,
"line-height": 0,
"width": 0,
"height": 0,
"border-left": markerSize+"px solid transparent",
"border-right": markerSize+"px solid transparent"
})
.appendTo(line);
});
marker.appendTo(line);
if (this._types[eventTypeId] && this._types[eventTypeId].position && this._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
marker.css({
@@ -280,9 +361,13 @@ function ($, _, angular, Drop) {
});
var mouseenter = function() {
createAnnotationToolip(marker, $(this).data("event"));
createAnnotationToolip(marker, $(this).data("event"), that._plot);
};
if (event.editModel) {
createEditPopover(marker, event.editModel, that._plot);
}
var mouseleave = function() {
that._plot.clearSelection();
};
@@ -312,6 +397,127 @@ function ($, _, angular, Drop) {
return drawableEvent;
};
/**
* create a DOM element for the given region
*/
this._buildRegDiv = function (event) {
var that = this;
var container = this._plot.getPlaceholder();
var o = this._plot.getPlotOffset();
var axes = this._plot.getAxes();
var xaxis = this._plot.getXAxes()[this._plot.getOptions().events.xaxis - 1];
var yaxis, top, left, lineWidth, regionWidth, lineStyle, color, markerTooltip;
// determine the y axis used
if (axes.yaxis && axes.yaxis.used) { yaxis = axes.yaxis; }
if (axes.yaxis2 && axes.yaxis2.used) { yaxis = axes.yaxis2; }
// map the eventType to a types object
var eventTypeId = event.eventType;
if (this._types === null || !this._types[eventTypeId] || !this._types[eventTypeId].color) {
color = '#666';
} else {
color = this._types[eventTypeId].color;
}
if (this._types === null || !this._types[eventTypeId] || this._types[eventTypeId].markerTooltip === undefined) {
markerTooltip = true;
} else {
markerTooltip = this._types[eventTypeId].markerTooltip;
}
if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) {
lineWidth = 1; //default line width
} else {
lineWidth = this._types[eventTypeId].lineWidth;
}
if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) {
lineStyle = 'dashed'; //default line style
} else {
lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
}
var topOffset = 2;
top = o.top + this._plot.height() + topOffset;
var timeFrom = Math.min(event.min, event.timeEnd);
var timeTo = Math.max(event.min, event.timeEnd);
left = xaxis.p2c(timeFrom) + o.left;
var right = xaxis.p2c(timeTo) + o.left;
regionWidth = right - left;
_.each([left, right], function(position) {
var line = $('<div class="events_line flot-temp-elem"></div>').css({
"position": "absolute",
"opacity": 0.8,
"left": position + 'px',
"top": 8,
"width": lineWidth + "px",
"height": that._plot.height() + topOffset,
"border-left-width": lineWidth + "px",
"border-left-style": lineStyle,
"border-left-color": color,
"color": color
});
line.appendTo(container);
});
var region = $('<div class="events_marker region_marker flot-temp-elem"></div>').css({
"position": "absolute",
"opacity": 0.5,
"left": left + 'px',
"top": top,
"width": Math.round(regionWidth + lineWidth) + "px",
"height": "0.5rem",
"border-left-color": color,
"color": color,
"background-color": color
});
region.appendTo(container);
region.data({
"event": event
});
var mouseenter = function () {
createAnnotationToolip(region, $(this).data("event"), that._plot);
};
if (event.editModel) {
createEditPopover(region, event.editModel, that._plot);
}
var mouseleave = function () {
that._plot.clearSelection();
};
if (markerTooltip) {
region.css({ "cursor": "help" });
region.hover(mouseenter, mouseleave);
}
var drawableEvent = new DrawableEvent(
region,
function drawFunc(obj) { obj.show(); },
function (obj) { obj.remove(); },
function (obj, position) {
obj.css({
top: position.top,
left: position.left
});
},
left,
top,
region.width(),
region.height()
);
return drawableEvent;
};
/**
* check if the event is inside visible range
*/
@@ -395,5 +601,4 @@ function ($, _, angular, Drop) {
name: "events",
version: "0.2.5"
});
});