From f03e8292a27bebb0591165e4710cec9a85f1e139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 14 Jun 2016 17:00:51 +0200
Subject: [PATCH] feat(alerting): progress on threshold unification

---
 .../app/plugins/panel/graph/alert_tab_ctrl.ts | 44 +++++--------------
 public/app/plugins/panel/graph/graph.js       |  8 ++--
 .../panel/graph/partials/tab_alerting.html    | 16 +++----
 public/app/plugins/panel/graph/thresholds.ts  |  2 +-
 4 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/public/app/plugins/panel/graph/alert_tab_ctrl.ts b/public/app/plugins/panel/graph/alert_tab_ctrl.ts
index 4ee59248257..c47d58631b8 100644
--- a/public/app/plugins/panel/graph/alert_tab_ctrl.ts
+++ b/public/app/plugins/panel/graph/alert_tab_ctrl.ts
@@ -62,37 +62,20 @@ export class AlertTabCtrl {
     });
   }
 
-  getThresholdWithDefaults(thresholds, type, copyFrom) {
+  getThresholdWithDefaults(thresholds, type) {
     var threshold = thresholds[type] || {};
-    var defaultValue = (copyFrom[type] || {}).value || undefined;
-
     threshold.op = threshold.op || '>';
-    threshold.value = threshold.value || defaultValue;
+    threshold.value = threshold.value || undefined;
     return threshold;
   }
 
-  initThresholdsOnlyMode() {
-    if (!this.panel.thresholds) {
-      return;
-    }
-
-    this.thresholds = this.panel.thresholds;
-
-    // set threshold defaults
-    this.thresholds.warn = this.getThresholdWithDefaults(this.thresholds, 'warn', {});
-    this.thresholds.crit = this.getThresholdWithDefaults(this.thresholds, 'crit', {});
-
-    this.panelCtrl.editingAlert = true;
-    this.panelCtrl.render();
-  }
-
   initModel() {
     var alert = this.alert = this.panel.alert = this.panel.alert || {};
 
     // set threshold defaults
     alert.thresholds = alert.thresholds || {};
-    alert.thresholds.warn = this.getThresholdWithDefaults(alert.thresholds, 'warn', this.panel.thresholds);
-    alert.thresholds.crit = this.getThresholdWithDefaults(alert.thresholds, 'crit', this.panel.thresholds);
+    alert.thresholds.warn = this.getThresholdWithDefaults(alert.thresholds, 'warn');
+    alert.thresholds.crit = this.getThresholdWithDefaults(alert.thresholds, 'crit');
 
     alert.frequency = alert.frequency || '60s';
     alert.handler = alert.handler || 1;
@@ -150,21 +133,18 @@ export class AlertTabCtrl {
   }
 
   delete() {
-    delete this.alert;
-    delete this.panel.alert;
-    // clear thresholds
-    if (this.panel.thresholds) {
-      this.panel.thresholds = {};
-    }
+    // keep threshold object (instance used by graph handles)
+    var thresholds = this.alert.thresholds;
+    thresholds.warn.value = undefined;
+    thresholds.crit.value = undefined;
+
+    // reset model but keep thresholds instance
+    this.alert = this.panel.alert = {thresholds: thresholds};
     this.initModel();
   }
 
   enable() {
-    if (this.thresholds) {
-      delete this.thresholds;
-      this.panelCtrl.
-    }
-    this.panel.alert = {};
+    this.alert.enabled = true;
     this.initModel();
   }
 
diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js
index 381565e8f3f..b76956ff6e8 100755
--- a/public/app/plugins/panel/graph/graph.js
+++ b/public/app/plugins/panel/graph/graph.js
@@ -333,13 +333,11 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
         }
 
         function addGridThresholds(options, panel) {
-          var thresholds = panel.thresholds;
-
-          // use alert thresholds if there are any
-          if (panel.alert) {
-            thresholds = panel.alert.thresholds;
+          if (!panel.alert || !panel.alert.thresholds) {
+            return;
           }
 
+          var thresholds = panel.alert.thresholds;
           var crit = thresholds.crit;
           var warn = thresholds.warn;
           var critEdge = Infinity;
diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html
index 38873ec829e..c07886aeddf 100644
--- a/public/app/plugins/panel/graph/partials/tab_alerting.html
+++ b/public/app/plugins/panel/graph/partials/tab_alerting.html
@@ -1,5 +1,5 @@
 
-<div ng-if="ctrl.thresholds">
+<div ng-if="!ctrl.alert.enabled">
   <div class="gf-form-group">
     <h5 class="section-heading">Visual Thresholds</h5>
     <div class="gf-form-inline">
@@ -8,22 +8,22 @@
           <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
           Critcal if
         </span>
-        <metric-segment-model property="ctrl.thresholds.crit.op" options="ctrl.operatorList" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdsUpdated()"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.thresholds.crit.value" ng-change="ctrl.thresholdsUpdated()"></input>
+        <metric-segment-model property="ctrl.alert.thresholds.crit.op" options="ctrl.operatorList" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdsUpdated()"></metric-segment-model>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.thresholds.crit.value" ng-change="ctrl.thresholdsUpdated()"></input>
       </div>
       <div class="gf-form">
         <span class="gf-form-label">
           <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
           Warn if
         </span>
-        <metric-segment-model property="ctrl.thresholds.warn.op" options="ctrl.operatorList" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdsUpdated()"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.thresholds.warn.value" ng-change="ctrl.thresholdsUpdated()"></input>
+        <metric-segment-model property="ctrl.alert.thresholds.warn.op" options="ctrl.operatorList" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdsUpdated()"></metric-segment-model>
+        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.thresholds.warn.value" ng-change="ctrl.thresholdsUpdated()"></input>
       </div>
     </div>
   </div>
 </div>
 
-<div ng-if="ctrl.alert">
+<div ng-if="ctrl.alert.enabled">
   <div class="editor-row">
     <div class="gf-form-group section" >
       <h5 class="section-heading">Alert Query</h5>
@@ -135,8 +135,8 @@
 
 <div class="editor-row">
   <div class="gf-form-button-row">
-    <button class="btn btn-danger" ng-click="ctrl.delete()" ng-show="ctrl.alert">Delete</button>
-    <button class="btn btn-inverse" ng-click="ctrl.enable()" ng-hide="ctrl.alert">
+    <button class="btn btn-danger" ng-click="ctrl.delete()" ng-show="ctrl.alert.enabled">Delete</button>
+    <button class="btn btn-inverse" ng-click="ctrl.enable()" ng-hide="ctrl.alert.enabled">
       <i class="icon-gf icon-gf-alert"></i>
       Create Alert
     </button>
diff --git a/public/app/plugins/panel/graph/thresholds.ts b/public/app/plugins/panel/graph/thresholds.ts
index efd3dbe89fb..1630b2a29d8 100644
--- a/public/app/plugins/panel/graph/thresholds.ts
+++ b/public/app/plugins/panel/graph/thresholds.ts
@@ -11,7 +11,7 @@ export class ThresholdControls {
   thresholds: any;
 
   constructor(private panelCtrl) {
-    this.thresholds = this.panelCtrl.thresholds;
+    this.thresholds = this.panelCtrl.panel.alert.thresholds;
   }
 
   getHandleInnerHtml(type, op, value) {