feat(alerting): disable visual thresholds while alert is enabled

package.json

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "zone.js": "^0.6.6",
-    "autoprefixer": "^6.3.3",
+    "autoprefixer": "^6.4.0",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.35.1",
     "expect.js": "~0.2.0",

pkg/services/alerting/conditions/evaluator.go

@@ -19,9 +19,9 @@ type DefaultAlertEvaluator struct {
 
 func (e *DefaultAlertEvaluator) Eval(series *tsdb.TimeSeries, reducedValue float64) bool {
 	switch e.Type {
-	case ">":
+	case "gt":
 		return reducedValue > e.Threshold
-	case "<":
+	case "lt":
 		return reducedValue < e.Threshold
 	}
 

pkg/services/alerting/conditions/query_test.go

@@ -18,7 +18,7 @@ func TestQueryCondition(t *testing.T) {
 		queryConditionScenario("Given avg() and > 100", func(ctx *queryConditionTestContext) {
 
 			ctx.reducer = `{"type": "avg"}`
-			ctx.evaluator = `{"type": ">", "params": [100]}`
+			ctx.evaluator = `{"type": "gt "params": [100]}`
 
 			Convey("Can read query condition from json model", func() {
 				ctx.exec()

public/app/features/alerting/alert_tab_ctrl.ts

@@ -172,7 +172,9 @@ export class AlertTabCtrl {
 
   delete() {
     this.panel.alert = {enabled: false};
-    this.initModel();
+    this.panel.thresholds = [];
+    this.conditionModels = [];
+    this.panelCtrl.render();
   }
 
   enable() {

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

@@ -3,6 +3,7 @@
 import './graph';
 import './legend';
 import './series_overrides_ctrl';
+import './thresholds_form';
 
 import template from './template';
 import angular from 'angular';
@@ -327,14 +328,6 @@ class GraphCtrl extends MetricsPanelCtrl {
     fileExport.exportSeriesListToCsvColumns(this.seriesList);
   }
 
-  addThreshold() {
-    this.panel.thresholds.push({value: undefined, colorMode: "critical", op: 'gt', fill: true, line: true});
-  }
-
-  removeThreshold(index) {
-    this.panel.thresholds.splice(index, 1);
-    this.render();
-  }
 }
 
 export {GraphCtrl, GraphCtrl as PanelCtrl}

public/app/plugins/panel/graph/tab_display.html

@@ -10,7 +10,9 @@
 				</a>
 			</li>
 			<li ng-class="{active: ctrl.subTabIndex === 2}">
-				<a ng-click="ctrl.subTabIndex = 2">Thresholds</a>
+				<a ng-click="ctrl.subTabIndex = 2">
+					Thresholds <span class="muted">({{ctrl.panel.thresholds.length}})</span>
+				</a>
 			</li>
 		</ul>
 	</aside>
@@ -131,56 +133,7 @@
 	</div>
 
 	<div class="edit-tab-content" ng-if="ctrl.subTabIndex === 2">
-		<div class="gf-form-group">
-			<h5>Thresholds</h5>
-			<div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.thresholds">
-				<div class="gf-form">
-					<label class="gf-form-label">T{{$index+1}}</label>
-				</div>
-
-				<div class="gf-form">
-					<div class="gf-form-select-wrapper">
-						<select class="gf-form-input" ng-model="threshold.op" ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()"></select>
-					</div>
-					<input type="number" ng-model="threshold.value" class="gf-form-input width-8" ng-change="ctrl.render()" placeholder="value">
-				</div>
-
-				<div class="gf-form">
-					<label class="gf-form-label">Color</label>
-					<div class="gf-form-select-wrapper">
-						<select class="gf-form-input" ng-model="threshold.colorMode" ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()"></select>
-					</div>
-				</div>
-
-				<gf-form-switch class="gf-form" label="Fill" checked="threshold.fill" on-change="ctrl.render()"></gf-form-switch>
-				<div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
-					<label class="gf-form-label">Fill color</label>
-					<span class="gf-form-label">
-						<spectrum-picker ng-model="threshold.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
-					</span>
-				</div>
-
-				<gf-form-switch class="gf-form" label="Line" checked="threshold.line" on-change="ctrl.render()"></gf-form-switch>
-				<div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
-					<label class="gf-form-label">Line color</label>
-					<span class="gf-form-label">
-						<spectrum-picker ng-model="threshold.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
-					</span>
-				</div>
-
-				<div class="gf-form">
-					<label class="gf-form-label">
-						<i class="fa fa-trash pointer" ng-click="ctrl.removeThreshold($index)"></i>
-					</label>
-				</div>
-			</div>
-
-			<div class="gf-form-button-row">
-				<button class="btn btn-inverse" ng-click="ctrl.addThreshold()">
-					<i class="fa fa-plus"></i>&nbsp;Add Threshold
-				</button>
-			</div>
-		</div>
+		<graph-threshold-form panel-ctrl="ctrl"></graph-threshold-form>
 	</div>
 
 </div>

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

@@ -0,0 +1,124 @@
+///<reference path="../../../headers/common.d.ts" />
+
+
+import _ from 'lodash';
+import coreModule from 'app/core/core_module';
+
+export class ThresholdFormCtrl {
+  panelCtrl: any;
+  panel: any;
+  disabled: boolean;
+
+  /** @ngInject */
+  constructor($scope) {
+    this.panel = this.panelCtrl.panel;
+
+    if (this.panel.alert && this.panel.alert.enabled) {
+      this.disabled = true;
+    }
+
+    $scope.$on("$destroy", () => {
+      this.panelCtrl.editingThresholds = false;
+      this.panelCtrl.render();
+    });
+
+    this.panelCtrl.editingThresholds = true;
+  }
+
+  addThreshold() {
+    this.panel.thresholds.push({value: undefined, colorMode: "critical", op: 'gt', fill: true, line: true});
+    this.panelCtrl.render();
+  }
+
+  removeThreshold(index) {
+    this.panel.thresholds.splice(index, 1);
+    this.panelCtrl.render();
+  }
+
+  render() {
+    this.panelCtrl.render();
+  }
+}
+
+var template = `
+<div class="gf-form-group">
+  <h5>Thresholds</h5>
+  <p class="muted" ng-show="ctrl.disabled">
+    Visual thresholds options <strong>disabled.</strong>
+    Visit the Alert tab update your thresholds. <br>
+    To re-enable thresholds, the alert rule must be deleted from this panel.
+  </p>
+  <div ng-class="{'thresholds-form-disabled': ctrl.disabled}">
+    <div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.thresholds">
+      <div class="gf-form">
+        <label class="gf-form-label">T{{$index+1}}</label>
+      </div>
+
+      <div class="gf-form">
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="threshold.op"
+                  ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select>
+        </div>
+        <input type="number" ng-model="threshold.value" class="gf-form-input width-8"
+               ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled">
+      </div>
+
+      <div class="gf-form">
+        <label class="gf-form-label">Color</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="threshold.colorMode"
+                  ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
+          </select>
+        </div>
+      </div>
+
+      <gf-form-switch class="gf-form" label="Fill" checked="threshold.fill"
+                      on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
+
+      <div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
+        <label class="gf-form-label">Fill color</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="threshold.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
+        </span>
+      </div>
+
+      <gf-form-switch class="gf-form" label="Line" checked="threshold.line"
+                      on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
+
+      <div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
+        <label class="gf-form-label">Line color</label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="threshold.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
+        </span>
+      </div>
+
+      <div class="gf-form">
+        <label class="gf-form-label">
+          <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
+            <i class="fa fa-trash"></i>
+          </a>
+        </label>
+      </div>
+    </div>
+
+    <div class="gf-form-button-row">
+      <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
+        <i class="fa fa-plus"></i>&nbsp;Add Threshold
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+coreModule.directive('graphThresholdForm', function() {
+  return {
+    restrict: 'E',
+    template: template,
+    controller: ThresholdFormCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: {
+      panelCtrl: "="
+    }
+  };
+});

public/sass/base/_type.scss

@@ -48,6 +48,11 @@ a.text-success:hover,
 a.text-success:focus { color: darken($successText, 10%); }
 a { cursor: pointer; }
 
+a[disabled] {
+  cursor: default;
+  pointer-events: none !important;
+}
+
 .text-left           { text-align: left; }
 .text-right          { text-align: right; }
 .text-center         { text-align: center; }

public/sass/components/_panel_graph.scss

@@ -400,3 +400,7 @@
     }
   }
 }
+
+.thresholds-form-disabled {
+  filter: blur(3px);
+}

public/sass/components/_switch.scss

@@ -88,4 +88,13 @@ $switch-height: 1.5rem;
   input:checked + label::after {
     transform: rotateY(0);
   }
+
+}
+
+gf-form-switch[disabled]  {
+  .gf-form-label,
+  .gf-form-switch input + label {
+    cursor: default;
+    pointer-events: none !important;
+  }
 }