mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(thresholds): new thresholds options are looking ok
This commit is contained in:
parent
0f8c8517e3
commit
7c0675798e
@ -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>
|
||||
|
@ -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});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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> Add Threshold
|
||||
</button>
|
||||
<div class="gf-form-button-row">
|
||||
<button class="btn btn-inverse" ng-click="ctrl.addThreshold()">
|
||||
<i class="fa fa-plus"></i> Add Threshold
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user