feat(thresholds): new thresholds options are looking ok

public/app/features/alerting/partials/notification_edit.html

@@ -60,7 +60,7 @@
 		</div>
 	</div>
 
-  <div class="gf-form-button-group">
+  <div class="gf-form-button-row">
     <button ng-click="ctrl.save()" class="btn btn-success">Save</button>
   </div>
 </div>

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

@@ -354,28 +354,36 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
               }
             }
 
-            var fillColor, lineColor;
-            switch(threshold.severity) {
+            switch(threshold.colorMode) {
               case 'critical': {
-                fillColor = 'rgba(234, 112, 112, 0.12)';
-                lineColor = 'rgba(237, 46, 24, 0.60)';
+                threshold.fillColor = 'rgba(234, 112, 112, 0.12)';
+                threshold.lineColor = 'rgba(237, 46, 24, 0.60)';
                 break;
               }
               case 'warning': {
-                fillColor = 'rgba(235, 138, 14, 0.12)';
-                lineColor = 'rgba(247, 149, 32, 0.60)';
+                threshold.fillColor = 'rgba(235, 138, 14, 0.12)';
+                threshold.lineColor = 'rgba(247, 149, 32, 0.60)';
                 break;
               }
               case 'ok': {
-                fillColor = 'rgba(11, 237, 50, 0.090)';
-                lineColor = 'rgba(6,163,69, 0.60)';
+                threshold.fillColor = 'rgba(11, 237, 50, 0.090)';
+                threshold.lineColor = 'rgba(6,163,69, 0.60)';
+                break;
+              }
+              case 'custom': {
+                threshold.fillColor = threshold.fillColor;
+                threshold.lineColor = threshold.lineColor;
                 break;
               }
             }
 
             // fill
-            options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: fillColor});
-            options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: lineColor});
+            if (threshold.fill) {
+              options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: threshold.fillColor});
+            }
+            if (threshold.line) {
+              options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: threshold.lineColor});
+            }
           }
         }
 

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

@@ -143,23 +143,44 @@
 						<select class="gf-form-input" ng-model="threshold.op" ng-options="f for f in ['>', '<']" 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.severity" ng-options="f for f in ['critical', 'warning', 'ok']" ng-change="ctrl.render()"></select>
+						<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>
 
-		<button class="btn btn-inverse" ng-click="ctrl.addThreshold()">
-			<i class="fa fa-plus"></i>&nbsp;Add Threshold
-		</button>
+			<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>
 	</div>
 
 </div>