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

progess on adding annotations

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-04-14 14:43:06 +02:00
parent 0335c1f368
commit a151de1d37
4 changed files with 135 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/features/annotations/all.ts
View File

@@ -1,8 +1,9 @@
import {AnnotationsSrv} from './annotations_srv';
import {eventEditor} from './event_editor';
import {eventEditor, EventManager} from './event_editor';
export {
AnnotationsSrv,
eventEditor
eventEditor,
EventManager
};

89
public/app/features/annotations/event_editor.ts
View File

@@ -17,22 +17,15 @@ export class AnnotationEvent {
export class EventEditorCtrl {
panelCtrl: MetricsPanelCtrl;
annotation: AnnotationEvent;
event: AnnotationEvent;
timeRange: {from: number, to: number};
form: any;
close: any;
/** @ngInject **/
constructor(private annotationsSrv) {
this.annotation = new AnnotationEvent();
this.annotation.panelId = this.panelCtrl.panel.id;
this.annotation.dashboardId = this.panelCtrl.dashboard.id;
this.annotation.time = moment(this.timeRange.from);
if (this.timeRange.to) {
this.annotation.timeEnd = moment(this.timeRange.to);
this.annotation.isRegion = true;
}
this.event.panelId = this.panelCtrl.panel.id;
this.event.dashboardId = this.panelCtrl.dashboard.id;
}
save() {
@@ -40,15 +33,17 @@ export class EventEditorCtrl {
return;
}
let saveModel = _.cloneDeep(this.annotation);
let saveModel = _.cloneDeep(this.event);
saveModel.time = saveModel.time.valueOf();
saveModel.timeEnd = 0;
if (saveModel.isRegion) {
saveModel.timeEnd = saveModel.timeEnd.valueOf();
}
if (saveModel.timeEnd < saveModel.time) {
console.log('invalid time');
return;
if (saveModel.timeEnd < saveModel.time) {
console.log('invalid time');
return;
}
}
this.annotationsSrv.saveAnnotationEvent(saveModel).then(() => {
@@ -56,6 +51,10 @@ export class EventEditorCtrl {
this.close();
});
}
timeChanged() {
this.panelCtrl.render();
}
}
export function eventEditor() {
@@ -67,10 +66,68 @@ export function eventEditor() {
templateUrl: 'public/app/features/annotations/partials/event_editor.html',
scope: {
"panelCtrl": "=",
"timeRange": "=",
"event": "=",
"close": "&",
}
};
}
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();
}
}

14
public/app/features/annotations/partials/event_editor.html
View File

@@ -5,29 +5,29 @@
<div style="display: inline-block">
<div class="gf-form">
<span class="gf-form-label width-7">Title</span>
<input type="text" ng-model="ctrl.annotation.title" class="gf-form-input max-width-20" required>
<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20" required>
</div>
<!-- single event -->
<div ng-if="!ctrl.annotation.isRegion">
<div ng-if="!ctrl.event.isRegion">
<div class="gf-form">
<span class="gf-form-label width-7">Time</span>
<input type="text" ng-model="ctrl.annotation.time" class="gf-form-input max-width-20" input-datetime required>
<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20" input-datetime required ng-change="ctrl.timeChanged()">
</div>
</div>
<!-- region event -->
<div ng-if="ctrl.annotation.isRegion">
<div ng-if="ctrl.event.isRegion">
<div class="gf-form">
<span class="gf-form-label width-7">Start</span>
<input type="text" ng-model="ctrl.annotation.time" class="gf-form-input max-width-20" input-datetime required>
<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20" input-datetime required ng-change="ctrl.timeChanged()">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">End</span>
<input type="text" ng-model="ctrl.annotation.timeEnd" class="gf-form-input max-width-20" input-datetime required>
<input type="text" ng-model="ctrl.event.timeEnd" class="gf-form-input max-width-20" input-datetime required ng-change="ctrl.timeChanged()">
</div>
</div>
<div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-20" rows="3" ng-model="ctrl.annotation.text" placeholder="Event description"></textarea>
<textarea class="gf-form-input width-20" rows="3" ng-model="ctrl.event.text" placeholder="Event description"></textarea>
</div>
<div class="gf-form-button-row">