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

public/app/features/dashboard/addAnnotationModalCtrl.ts

@@ -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();
+
+    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 => {
       console.log(response);
       this.close();

public/app/features/dashboard/partials/addAnnotationModal.html

@@ -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 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 ng-if="ctrl.annotationTimeTo">
             <div>
-            <h6>
-              Description
-            </h6>
+              <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.annotation.text"></textarea>
+                <textarea rows="3" class="gf-form-input width-27" ng-model="ctrl.annotationTextTo"></textarea>
+              </div>
             </div>
           </div>
 

public/app/plugins/panel/graph/graph.ts

@@ -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) {
+        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() {

public/app/plugins/panel/graph/module.ts

@@ -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',