feat(alerting): making progress on alert handles

CHANGELOG.md

@@ -7,7 +7,7 @@
 * **Templating**: Update panel repeats for variables that change on time refresh, closes [#5021](https://github.com/grafana/grafana/issues/5021)
 * **Elasticsearch**: Support to set Precision Threshold for Unique Count metric, closes [#4689](https://github.com/grafana/grafana/issues/4689)
 
-# 3.1.1 (2016-08-01)
+#b 3.1.1 (unreleased / v3.1.x branch)
 * **IFrame embedding**: Fixed issue of using full iframe height, fixes [#5605](https://github.com/grafana/grafana/issues/5606)
 * **Panel PNG rendering**: Fixed issue detecting render completion, fixes [#5605](https://github.com/grafana/grafana/issues/5606)
 * **Elasticsearch**: Fixed issue with templating query and json parse error, fixes [#5615](https://github.com/grafana/grafana/issues/5615)
@@ -15,7 +15,6 @@
 * **Graphite**: Fixed issue with mixed data sources and Graphite, fixes [#5617](https://github.com/grafana/grafana/issues/5617)
 * **Templating**: Fixed issue with template variable query was issued multiple times during dashboard load, fixes [#5637](https://github.com/grafana/grafana/issues/5637)
 * **Zoom**: Fixed issues with zoom in and out on embedded (iframed) panel, fixes [#4489](https://github.com/grafana/grafana/issues/4489), [#5666](https://github.com/grafana/grafana/issues/5666)
-* **Templating**: Row/Panel repeat issue when saving dashboard caused dupes to appear, fixes [#5591](https://github.com/grafana/grafana/issues/5591)
 
 # 3.1.0 stable (2016-07-12)
 

public/app/features/alerting/alert_tab_ctrl.ts

@@ -63,10 +63,13 @@ export class AlertTabCtrl {
 
     // set panel alert edit mode
     this.$scope.$on("$destroy", () => {
-      this.panelCtrl.editingAlert = false;
+      this.panelCtrl.editingThresholds = false;
       this.panelCtrl.render();
     });
 
+    // subscribe to graph threshold handle changes
+    this.panelCtrl.events.on('threshold-changed', this.graphThresholdChanged.bind(this));
+
     // build notification model
     this.notifications = [];
     this.alertNotifications = [];
@@ -139,12 +142,19 @@ export class AlertTabCtrl {
       return memo;
     }, []);
 
-    this.panelCtrl.editingAlert = true;
+    if (this.alert.enabled) {
+      this.panelCtrl.editingThresholds = true;
+    }
+
     this.syncThresholds();
     this.panelCtrl.render();
   }
 
   syncThresholds() {
+    if (this.panel.type !== 'graph') {
+      return;
+    }
+
     var threshold: any = {};
     if (this.panel.thresholds && this.panel.thresholds.length > 0) {
       threshold = this.panel.thresholds[0];
@@ -160,16 +170,13 @@ export class AlertTabCtrl {
           continue;
         }
 
-        if (value !== threshold.from) {
+        if (value !== threshold.value) {
-          threshold.from = value;
+          threshold.value = value;
           updated = true;
         }
 
-        if (condition.evaluator.type === '<' && threshold.to !== -Infinity) {
+        if (condition.evaluator.type !== threshold.op) {
-          threshold.to = -Infinity;
+          threshold.op = condition.evaluator.type;
-          updated = true;
-        } else if (condition.evaluator.type === '>' && threshold.to !== Infinity) {
-          threshold.to = Infinity;
           updated = true;
         }
       }
@@ -178,6 +185,15 @@ export class AlertTabCtrl {
     return updated;
   }
 
+  graphThresholdChanged(evt) {
+    for (var condition of this.alert.conditions) {
+      if (condition.type === 'query') {
+        condition.evaluator.params[0] = evt.threshold.value;
+        break;
+      }
+    }
+  }
+
   buildDefaultCondition() {
     return {
       type: 'query',

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

@@ -182,9 +182,10 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
           }
 
           // give space to alert editing
-          if (ctrl.editingAlert) {
+          if (ctrl.editingThresholds) {
             if (!thresholdControls) {
-              elem.css('margin-right', '110px');
+              var thresholdMargin = panel.thresholds.length > 1 ? '220px' : '110px';
+              elem.css('margin-right', thresholdMargin);
               thresholdControls = new ThresholdControls(ctrl);
             }
           } else if (thresholdControls) {

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

@@ -14,7 +14,7 @@ export class ThresholdControls {
     this.thresholds = this.panelCtrl.panel.thresholds;
   }
 
-  getHandleInnerHtml(type, op, value) {
+ getHandleInnerHtml(handleName, op, value) {
     if (op === '>') { op = '>'; }
     if (op === '<') { op = '&lt;'; }
 
@@ -22,21 +22,16 @@ export class ThresholdControls {
     <div class="alert-handle-line">
     </div>
     <div class="alert-handle">
-    <i class="icon-gf icon-gf-${type} alert-icon-${type}"></i>
+      ${op} ${value}
-     ${value}
     </div>`;
   }
 
-  getFullHandleHtml(type, op, value) {
+  getFullHandleHtml(handleName, op, value) {
-    var innerTemplate = this.getHandleInnerHtml(type, op, value);
+    var innerTemplate = this.getHandleInnerHtml(handleName, op, value);
-    return `
+    return `<div class="alert-handle-wrapper alert-handle-wrapper--${handleName}">${innerTemplate}</div>`;
-    <div class="alert-handle-wrapper alert-handle-wrapper--${type}">
-    ${innerTemplate}
-    </div>
-    `;
   }
 
-  setupDragging(handleElem, threshold) {
+  setupDragging(handleElem, threshold, handleIndex) {
     var isMoving = false;
     var lastY = null;
     var posTop;
@@ -59,7 +54,7 @@ export class ThresholdControls {
       // calculate graph level
       var graphValue = plot.c2p({left: 0, top: posTop}).y;
       graphValue = parseInt(graphValue.toFixed(0));
-      threshold.from = graphValue;
+      threshold.value = graphValue;
 
       var valueCanvasPos = plot.p2c({x: 0, y: graphValue});
 
@@ -69,6 +64,7 @@ export class ThresholdControls {
       // trigger digest and render
       panelCtrl.$scope.$apply(function() {
         panelCtrl.render();
+        panelCtrl.events.emit('threshold-changed', {threshold: threshold, index: handleIndex});
       });
     }
 
@@ -88,9 +84,10 @@ export class ThresholdControls {
     }
   }
 
-  renderHandle(type, model, defaultHandleTopPos) {
+  renderHandle(handleIndex, model, defaultHandleTopPos) {
-    var handleElem = this.placeholder.find(`.alert-handle-wrapper--${type}`);
+    var handleName = 'T' + (handleIndex+1);
-    var value = model.from;
+    var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
+    var value = model.value;
     var valueStr = value;
     var handleTopPos = 0;
 
@@ -104,11 +101,11 @@ export class ThresholdControls {
     }
 
     if (handleElem.length === 0) {
-      handleElem = $(this.getFullHandleHtml(type, model.op, valueStr));
+      handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr));
       this.placeholder.append(handleElem);
-      this.setupDragging(handleElem, model);
+      this.setupDragging(handleElem, model, handleIndex);
     } else {
-      handleElem.html(this.getHandleInnerHtml(type, model.op, valueStr));
+      handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr));
     }
 
     handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === '');
@@ -121,7 +118,10 @@ export class ThresholdControls {
     this.height = plot.height();
 
     if (this.thresholds.length > 0) {
-      this.renderHandle('crit', this.thresholds[0], 10);
+      this.renderHandle(0, this.thresholds[0], 10);
+    }
+    if (this.thresholds.length > 1) {
+      this.renderHandle(1, this.thresholds[1], this.height-30);
     }
   }
 }

public/sass/components/_panel_graph.scss

@@ -334,7 +334,7 @@
     border-width: 0 1px 1px 0;
     border-style: solid;
     border-color: $black;
-    text-align: right;
+    text-align: left;
     color: $text-muted;
 
     .icon-gf {
@@ -353,7 +353,7 @@
     position: relative;
   }
 
-  &--warn {
+  &--T2 {
     right: -222px;
     width: 238px;
 
@@ -363,7 +363,7 @@
     }
   }
 
-  &--crit{
+  &--T1{
     right: -105px;
     width: 123px;