feat(thresholds): new thresholds options are looking ok

torkelo · torkelo · commit 7c0675798ef2 · 2016-08-10T17:32:34.000+02:00
diff --git a/public/app/features/alerting/partials/notification_edit.html b/public/app/features/alerting/partials/notification_edit.html
@@ -60,7 +60,7 @@ <h3 class="page-heading">Email addresses</h3>
 		</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>
diff --git a/public/app/plugins/panel/graph/graph.js b/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});
+            }
           }
         }
 
diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html
@@ -143,23 +143,44 @@ <h5>Thresholds</h5>
 						<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>

Original file line number	Diff line number	Diff line change
`@@ -354,28 +354,36 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {`
`354`	`354`	`}`
`355`	`355`	`}`
`356`	`356`
`357`		`- var fillColor, lineColor;`
`358`		`- switch(threshold.severity) {`
	`357`	`+ switch(threshold.colorMode) {`
`359`	`358`	`case 'critical': {`
`360`		`- fillColor = 'rgba(234, 112, 112, 0.12)';`
`361`		`- lineColor = 'rgba(237, 46, 24, 0.60)';`
	`359`	`+ threshold.fillColor = 'rgba(234, 112, 112, 0.12)';`
	`360`	`+ threshold.lineColor = 'rgba(237, 46, 24, 0.60)';`
`362`	`361`	`break;`
`363`	`362`	`}`
`364`	`363`	`case 'warning': {`
`365`		`- fillColor = 'rgba(235, 138, 14, 0.12)';`
`366`		`- lineColor = 'rgba(247, 149, 32, 0.60)';`
	`364`	`+ threshold.fillColor = 'rgba(235, 138, 14, 0.12)';`
	`365`	`+ threshold.lineColor = 'rgba(247, 149, 32, 0.60)';`
`367`	`366`	`break;`
`368`	`367`	`}`
`369`	`368`	`case 'ok': {`
`370`		`- fillColor = 'rgba(11, 237, 50, 0.090)';`
`371`		`- lineColor = 'rgba(6,163,69, 0.60)';`
	`369`	`+ threshold.fillColor = 'rgba(11, 237, 50, 0.090)';`
	`370`	`+ threshold.lineColor = 'rgba(6,163,69, 0.60)';`
	`371`	`+ break;`
	`372`	`+ }`
	`373`	`+ case 'custom': {`
	`374`	`+ threshold.fillColor = threshold.fillColor;`
	`375`	`+ threshold.lineColor = threshold.lineColor;`
`372`	`376`	`break;`
`373`	`377`	`}`
`374`	`378`	`}`
`375`	`379`
`376`	`380`	`// fill`
`377`		`- options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: fillColor});`
`378`		`- options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: lineColor});`
	`381`	`+ if (threshold.fill) {`
	`382`	`+ options.grid.markings.push({yaxis: {from: threshold.value, to: limit}, color: threshold.fillColor});`
	`383`	`+ }`
	`384`	`+ if (threshold.line) {`
	`385`	`+ options.grid.markings.push({yaxis: {from: threshold.value, to: threshold.value}, color: threshold.lineColor});`
	`386`	`+ }`
`379`	`387`	`}`
`380`	`388`	`}`
`381`	`389`