From 362860f6873973b64a19e3508fa70bc4a0399619 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Mon, 10 Apr 2017 12:38:28 +0300
Subject: [PATCH] graph(add annotation): able to select region (start and stop
 time) #1286

---
 .../dashboard/addAnnotationModalCtrl.ts       | 46 ++++++++++++++-----
 .../partials/addAnnotationModal.html          | 32 +++++++++----
 public/app/plugins/panel/graph/graph.ts       | 26 ++++++++---
 public/app/plugins/panel/graph/module.ts      |  9 ++--
 4 files changed, 82 insertions(+), 31 deletions(-)

diff --git a/public/app/features/dashboard/addAnnotationModalCtrl.ts b/public/app/features/dashboard/addAnnotationModalCtrl.ts
index 0967eda14b1..7c3962074cf 100644
--- a/public/app/features/dashboard/addAnnotationModalCtrl.ts
+++ b/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();
 
-    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();
diff --git a/public/app/features/dashboard/partials/addAnnotationModal.html b/public/app/features/dashboard/partials/addAnnotationModal.html
index f16656bba77..1ea3b7d7a6f 100644
--- a/public/app/features/dashboard/partials/addAnnotationModal.html
+++ b/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>
-              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>
 
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 3a75c189dbd..5aaf5324156 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/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) {
-        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() {
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index b8ab763550b..5a24f39cf80 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/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',