feat(alerting): progress on threshold unification

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();
   }
 

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;

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>

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) {