IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

graph(add annotation): able to select region (start and stop time) #1286

Browse Source
This commit is contained in:
Alexander Zobnin 2017-04-10 12:38:28 +03:00
parent 32d34aed7a
commit 362860f687
4 changed files with 82 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/app/features/dashboard/addAnnotationModalCtrl.ts
View File

@ -4,9 +4,12 @@ import angular from 'angular';
import moment from 'moment';
export class AddAnnotationModalCtrl {
annotationTime: any;
annotationTimeFormat = 'YYYY-MM-DD HH:mm:ss';
annotation: any;
annotationTimeFrom: any;
annotationTimeTo: any = null;
annotationTitle: string;
annotationTextFrom: string;
annotationTextTo: string;
graphCtrl: any;
/** @ngInject */
@ -14,20 +17,39 @@ export class AddAnnotationModalCtrl {
this.graphCtrl = $scope.ctrl;
$scope.ctrl = this;
this.annotation = {
time: null,
title: "",
text: ""
};
this.annotationTime = moment(this.$scope.annotationTimeUnix).format(this.annotationTimeFormat);
this.annotationTimeFrom = moment($scope.annotationTimeRange.from).format(this.annotationTimeFormat);
if ($scope.annotationTimeRange.to) {
this.annotationTimeTo = moment($scope.annotationTimeRange.to).format(this.annotationTimeFormat);
}
}
addAnnotation() {
let time = moment(this.annotationTime, this.annotationTimeFormat);
this.annotation.time = time.valueOf();
let dashboardId = this.graphCtrl.dashboard.id;
let panelId = this.graphCtrl.panel.id;
let timeFrom = moment(this.annotationTimeFrom, this.annotationTimeFormat).valueOf();
this.graphCtrl.pushAnnotation(this.annotation)
let annotationFrom = {
dashboardId: dashboardId,
panelId: panelId,
time: timeFrom,
title: this.annotationTitle,
text: this.annotationTextFrom
};
let annotations = [annotationFrom];
if (this.annotationTimeTo) {
let timeTo = moment(this.annotationTimeTo, this.annotationTimeFormat).valueOf();
let annotationTo = {
dashboardId: dashboardId,
panelId: panelId,
time: timeTo,
title: this.annotationTitle,
text: this.annotationTextTo
};
annotations.push(annotationTo);
}
this.graphCtrl.pushAnnotations(annotations)
.then(response => {
console.log(response);
this.close();

32
public/app/features/dashboard/partials/addAnnotationModal.html
View File

@ -27,23 +27,39 @@
</p>
<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">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="ctrl.annotationTitle" class="gf-form-input max-width-20">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Time</span>
<input type="text" ng-model="ctrl.annotationTime" class="gf-form-input max-width-20">
<span class="gf-form-label width-8" ng-if="!ctrl.annotationTimeTo">Time</span>
<span class="gf-form-label width-8" ng-if="ctrl.annotationTimeTo">Time Start</span>
<input type="text" ng-model="ctrl.annotationTimeFrom" class="gf-form-input max-width-20">
</div>
<div class="gf-form" ng-if="ctrl.annotationTimeTo">
<span class="gf-form-label width-8">Time Stop</span>
<input type="text" ng-model="ctrl.annotationTimeTo" class="gf-form-input max-width-20">
</div>
</div>
<div>
<h6>
Description
</h6>
<h6 ng-if="!ctrl.annotationTimeTo">Description</h6>
<h6 ng-if="ctrl.annotationTimeTo">Description Start</h6>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form">
<textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotation.text"></textarea>
<textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotationTextFrom"></textarea>
</div>
</div>
<div ng-if="ctrl.annotationTimeTo">
<div>
<h6>Description Stop</h6>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form">
<textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotationTextTo"></textarea>
</div>
</div>
</div>

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

@ -83,7 +83,13 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
// Select time for new annotation
if (ctrl.inAddAnnotationMode) {
ctrl.showAddAnnotationModal(event);
let timeRange = {
from: event.pos.x,
to: null
};
ctrl.showAddAnnotationModal(timeRange);
ctrl.inAddAnnotationMode = false;
}
}, scope);
@ -647,12 +653,20 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
}
elem.bind("plotselected", function (event, ranges) {
scope.$apply(function() {
timeSrv.setTime({
from : moment.utc(ranges.xaxis.from),
to : moment.utc(ranges.xaxis.to),
if (ctrl.inAddAnnotationMode) {
// Select time range for new annotation
let timeRange = ranges.xaxis;
ctrl.showAddAnnotationModal(timeRange);
plot.clearSelection();
ctrl.inAddAnnotationMode = false;
} else {
scope.$apply(function() {
timeSrv.setTime({
from : moment.utc(ranges.xaxis.from),
to : moment.utc(ranges.xaxis.to),
});
});
});
}
});
scope.$on('$destroy', function() {

9
public/app/plugins/panel/graph/module.ts
View File

@ -308,14 +308,13 @@ class GraphCtrl extends MetricsPanelCtrl {
}
// Get annotation info from dialog and push it to backend
pushAnnotation(annotation) {
return this.annotationsSrv.postAnnotation(annotation);
pushAnnotations(annotations) {
return this.annotationsSrv.postAnnotation(annotations);
}
showAddAnnotationModal(event) {
showAddAnnotationModal(timeRange) {
let addAnnotationScope = this.$scope.$new();
let annotationTimeUnix = Math.round(event.pos.x);
addAnnotationScope.annotationTimeUnix = annotationTimeUnix;
addAnnotationScope.annotationTimeRange = timeRange;
this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/addAnnotationModal.html',