Skip to content

N
nexpie-grafana-theme
Commit 362860f6 by Alexander Zobnin
Options

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

parent 32d34aed
Showing with 77 additions and 26 deletions
public/app/features/dashboard/addAnnotationModalCtrl.ts
...@@ -4,9 +4,12 @@ import angular from 'angular'; ...@@ -4,9 +4,12 @@ import angular from 'angular';
import moment from 'moment'; import moment from 'moment';
export class AddAnnotationModalCtrl { export class AddAnnotationModalCtrl {
annotationTime: any;
annotationTimeFormat = 'YYYY-MM-DD HH:mm:ss'; annotationTimeFormat = 'YYYY-MM-DD HH:mm:ss';
annotation: any; annotationTimeFrom: any;
annotationTimeTo: any = null;
annotationTitle: string;
annotationTextFrom: string;
annotationTextTo: string;
graphCtrl: any; graphCtrl: any;
/** @ngInject */ /** @ngInject */
...@@ -14,20 +17,39 @@ export class AddAnnotationModalCtrl { ...@@ -14,20 +17,39 @@ export class AddAnnotationModalCtrl {
this.graphCtrl = $scope.ctrl; this.graphCtrl = $scope.ctrl;
$scope.ctrl = this; $scope.ctrl = this;
this.annotation = { this.annotationTimeFrom = moment($scope.annotationTimeRange.from).format(this.annotationTimeFormat);
time: null, if ($scope.annotationTimeRange.to) {
title: "", this.annotationTimeTo = moment($scope.annotationTimeRange.to).format(this.annotationTimeFormat);
text: "" }
};
this.annotationTime = moment(this.$scope.annotationTimeUnix).format(this.annotationTimeFormat);
} }
addAnnotation() { addAnnotation() {
let time = moment(this.annotationTime, this.annotationTimeFormat); let dashboardId = this.graphCtrl.dashboard.id;
this.annotation.time = time.valueOf(); let panelId = this.graphCtrl.panel.id;
let timeFrom = moment(this.annotationTimeFrom, this.annotationTimeFormat).valueOf();
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.pushAnnotation(this.annotation) this.graphCtrl.pushAnnotations(annotations)
.then(response => { .then(response => {
console.log(response); console.log(response);
this.close(); this.close();
......
public/app/features/dashboard/partials/addAnnotationModal.html
...@@ -27,23 +27,39 @@ ...@@ -27,23 +27,39 @@
</p> </p>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Title</span> <span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="ctrl.annotation.title" class="gf-form-input max-width-20"> <input type="text" ng-model="ctrl.annotationTitle" class="gf-form-input max-width-20">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Time</span> <span class="gf-form-label width-8" ng-if="!ctrl.annotationTimeTo">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 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 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.annotationTextFrom"></textarea>
</div> </div>
</div> </div>
<div ng-if="ctrl.annotationTimeTo">
<div> <div>
<h6> <h6>Description Stop</h6>
Description
</h6>
</div> </div>
<div class="gf-form-group share-modal-options"> <div class="gf-form-group share-modal-options">
<div class="gf-form"> <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.annotationTextTo"></textarea>
</div>
</div> </div>
</div> </div>
......
public/app/plugins/panel/graph/graph.ts
...@@ -83,7 +83,13 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) { ...@@ -83,7 +83,13 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
// Select time for new annotation // Select time for new annotation
if (ctrl.inAddAnnotationMode) { if (ctrl.inAddAnnotationMode) {
ctrl.showAddAnnotationModal(event); let timeRange = {
from: event.pos.x,
to: null
};
ctrl.showAddAnnotationModal(timeRange);
ctrl.inAddAnnotationMode = false;
} }
}, scope); }, scope);
...@@ -647,12 +653,20 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) { ...@@ -647,12 +653,20 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv) {
} }
elem.bind("plotselected", function (event, ranges) { elem.bind("plotselected", function (event, ranges) {
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() { scope.$apply(function() {
timeSrv.setTime({ timeSrv.setTime({
from : moment.utc(ranges.xaxis.from), from : moment.utc(ranges.xaxis.from),
to : moment.utc(ranges.xaxis.to), to : moment.utc(ranges.xaxis.to),
}); });
}); });
}
}); });
scope.$on('$destroy', function() { scope.$on('$destroy', function() {
......
public/app/plugins/panel/graph/module.ts
...@@ -308,14 +308,13 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -308,14 +308,13 @@ class GraphCtrl extends MetricsPanelCtrl {
} }
// Get annotation info from dialog and push it to backend // Get annotation info from dialog and push it to backend
pushAnnotation(annotation) { pushAnnotations(annotations) {
return this.annotationsSrv.postAnnotation(annotation); return this.annotationsSrv.postAnnotation(annotations);
} }
showAddAnnotationModal(event) { showAddAnnotationModal(timeRange) {
let addAnnotationScope = this.$scope.$new(); let addAnnotationScope = this.$scope.$new();
let annotationTimeUnix = Math.round(event.pos.x); addAnnotationScope.annotationTimeRange = timeRange;
addAnnotationScope.annotationTimeUnix = annotationTimeUnix;
this.publishAppEvent('show-modal', { this.publishAppEvent('show-modal', {
src: 'public/app/features/dashboard/partials/addAnnotationModal.html', src: 'public/app/features/dashboard/partials/addAnnotationModal.html',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment