feat(alerting): made very basic threshold viz work again

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

@@ -131,10 +131,45 @@ export class AlertTabCtrl {
       return memo;
     }, []);
 
-    this.panelCtrl.editingAlert = true;
+    ///this.panelCtrl.editingAlert = true;
+    this.syncThresholds();
     this.panelCtrl.render();
   }
 
+  syncThresholds() {
+    var threshold: any = {};
+    if (this.panel.thresholds && this.panel.thresholds.length > 0) {
+      threshold = this.panel.thresholds[0];
+    } else {
+      this.panel.thresholds = [threshold];
+    }
+
+    var updated = false;
+    for (var condition of this.conditionModels) {
+      if (condition.type === 'query') {
+        var value = condition.evaluator.params[0];
+        if (!_.isNumber(value)) {
+          continue;
+        }
+
+        if (value !== threshold.from) {
+          threshold.from = value;
+          updated = true;
+        }
+
+        if (condition.evaluator.type === '<' && threshold.to !== -Infinity) {
+          threshold.to = -Infinity;
+          updated = true;
+        } else if (condition.evaluator.type === '>' && threshold.to !== Infinity) {
+          threshold.to = Infinity;
+          updated = true;
+        }
+      }
+    }
+
+    return updated;
+  }
+
   buildDefaultCondition() {
     return {
       type: 'query',
@@ -180,8 +215,10 @@ export class AlertTabCtrl {
     this.initModel();
   }
 
-  thresholdsUpdated() {
-    this.panelCtrl.render();
+  thresholdUpdated() {
+    if (this.syncThresholds()) {
+      this.panelCtrl.render();
+    }
   }
 
   test() {

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

@@ -184,7 +184,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
           // give space to alert editing
           if (ctrl.editingAlert) {
             if (!thresholdControls) {
-              elem.css('margin-right', '220px');
+              elem.css('margin-right', '110px');
               thresholdControls = new ThresholdControls(ctrl);
             }
           } else if (thresholdControls) {
@@ -327,74 +327,28 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
         }
 
         function addGridThresholds(options, panel) {
-          if (!panel.alert) {
+          if (!panel.thresholds || panel.thresholds.length === 0) {
             return;
           }
 
-          var crit = panel.alert.crit;
-          var warn = panel.alert.warn;
-          var critEdge = Infinity;
-
-          if (_.isNumber(crit.value)) {
-            if (crit.op === '<') {
-              critEdge = -Infinity;
+          for (var i = 0; i < panel.thresholds.length; i++) {
+            var threshold = panel.thresholds[i];
+            if (!_.isNumber(threshold.from)) {
+              continue;
             }
 
             // fill
             options.grid.markings.push({
-              yaxis: {from: crit.value, to: critEdge},
+              yaxis: {from: threshold.from, to: threshold.to},
               color: 'rgba(234, 112, 112, 0.10)',
             });
 
             // line
             options.grid.markings.push({
-              yaxis: {from: crit.value, to: crit.value},
+              yaxis: {from: threshold.from, to: threshold.from},
               color: '#ed2e18'
             });
           }
-
-          if (_.isNumber(warn.value)) {
-            //var warnEdge = crit.value || Infinity;
-            var warnEdge;
-            if (crit.value) {
-              warnEdge = crit.value;
-            } else {
-              warnEdge = warn.op === '<' ? -Infinity : Infinity;
-            }
-
-            // fill
-            options.grid.markings.push({
-              yaxis: {from: warn.value, to: warnEdge},
-              color: 'rgba(216, 200, 27, 0.10)',
-            });
-
-            // line
-            options.grid.markings.push({
-              yaxis: {from: warn.value, to: warn.value},
-              color: '#F79520'
-            });
-          }
-
-          // if (_.isNumber(panel.grid.threshold1)) {
-          //   var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
-          //   options.grid.markings.push({
-          //     yaxis: { from: panel.grid.threshold1, to: limit1 },
-          //     color: panel.grid.threshold1Color
-          //   });
-          //
-          //   if (_.isNumber(panel.grid.threshold2)) {
-          //     var limit2;
-          //     if (panel.grid.thresholdLine) {
-          //       limit2 = panel.grid.threshold2;
-          //     } else {
-          //       limit2 = panel.grid.threshold1 > panel.grid.threshold2 ?  -Infinity : +Infinity;
-          //     }
-          //     options.grid.markings.push({
-          //       yaxis: { from: panel.grid.threshold2, to: limit2 },
-          //       color: panel.grid.threshold2Color
-          //     });
-          //   }
-          // }
         }
 
         function addAnnotations(options) {

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

@@ -105,6 +105,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     // other style overrides
     seriesOverrides: [],
     alerting: {},
+    thresholds: [],
   };
 
   /** @ngInject */

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

@@ -70,7 +70,7 @@
       <div class="gf-form">
         <span class="gf-form-label">Value</span>
         <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdsUpdated()"></input>
+        <input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
       </div>
       <div class="gf-form">
         <label class="gf-form-label">

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

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