feat(alerting): thesholds unification

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

@@ -62,8 +62,8 @@ export class AlertTabCtrl {
     });
   }
 
-  getThresholdWithDefaults(thresholds, type) {
-    var threshold = thresholds[type] || {};
+  getThresholdWithDefaults(threshold) {
+    threshold = threshold || {};
     threshold.op = threshold.op || '>';
     threshold.value = threshold.value || undefined;
     return threshold;
@@ -73,13 +73,8 @@ export class AlertTabCtrl {
     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');
-    alert.thresholds.crit = this.getThresholdWithDefaults(alert.thresholds, 'crit');
-
-    alert.frequency = alert.frequency || '60s';
-    alert.handler = alert.handler || 1;
-    alert.notifications = alert.notifications || [];
+    alert.warn = this.getThresholdWithDefaults(alert.warn);
+    alert.crit = this.getThresholdWithDefaults(alert.crit);
 
     alert.query = alert.query || {};
     alert.query.refId = alert.query.refId || 'A';
@@ -90,6 +85,10 @@ export class AlertTabCtrl {
     alert.transform.type = alert.transform.type || 'aggregation';
     alert.transform.method = alert.transform.method || 'avg';
 
+    alert.frequency = alert.frequency || '60s';
+    alert.handler = alert.handler || 1;
+    alert.notifications = alert.notifications || [];
+
     var defaultName = this.panel.title + ' alert';
     alert.name = alert.name || defaultName;
     alert.description = alert.description || defaultName;
@@ -133,13 +132,11 @@ export class AlertTabCtrl {
   }
 
   delete() {
-    // keep threshold object (instance used by graph handles)
-    var thresholds = this.alert.thresholds;
-    thresholds.warn.value = undefined;
-    thresholds.crit.value = undefined;
+    this.alert.enabled = false;
+    this.alert.warn.value = undefined;
+    this.alert.crit.value = undefined;
 
     // reset model but keep thresholds instance
-    this.alert = this.panel.alert = {thresholds: thresholds};
     this.initModel();
   }
 

public/app/plugins/panel/graph/graph.js

@@ -333,13 +333,12 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
         }
 
         function addGridThresholds(options, panel) {
-          if (!panel.alert || !panel.alert.thresholds) {
+          if (!panel.alert) {
             return;
           }
 
-          var thresholds = panel.alert.thresholds;
-          var crit = thresholds.crit;
-          var warn = thresholds.warn;
+          var crit = panel.alert.crit;
+          var warn = panel.alert.warn;
           var critEdge = Infinity;
           var warnEdge = crit.value;
 

public/app/plugins/panel/graph/partials/tab_alerting.html

@@ -8,16 +8,16 @@
           <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
           Critcal if
         </span>
-        <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>
+        <metric-segment-model property="ctrl.alert.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.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.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>
+        <metric-segment-model property="ctrl.alert.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.warn.value" ng-change="ctrl.thresholdsUpdated()"></input>
       </div>
     </div>
   </div>
@@ -70,16 +70,16 @@
             <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
             Critcal if
           </span>
-          <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>
+          <metric-segment-model property="ctrl.alert.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.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.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>
+          <metric-segment-model property="ctrl.alert.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.warn.value" ng-change="ctrl.thresholdsUpdated()"></input>
         </div>
       </div>
     </div>

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

@@ -8,10 +8,10 @@ export class ThresholdControls {
   plot: any;
   placeholder: any;
   height: any;
-  thresholds: any;
+  alert: any;
 
   constructor(private panelCtrl) {
-    this.thresholds = this.panelCtrl.panel.alert.thresholds;
+    this.alert = this.panelCtrl.panel.alert;
   }
 
   getHandleInnerHtml(type, op, value) {
@@ -120,10 +120,8 @@ export class ThresholdControls {
     this.placeholder = plot.getPlaceholder();
     this.height = plot.height();
 
-    this.renderHandle('crit', this.thresholds.crit, 10);
-    this.renderHandle('warn', this.thresholds.warn, this.height-30);
+    this.renderHandle('crit', this.alert.crit, 10);
+    this.renderHandle('warn', this.alert.warn, this.height-30);
   }
-    debugger;
-
 }