IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(thresholds): new thresholds options are looking ok

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-08-10 17:32:34 +02:00
parent 0f8c8517e3
commit 7c0675798e
3 changed files with 45 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/alerting/partials/notification_edit.html
View File

@ -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>

28
public/app/plugins/panel/graph/graph.js
View File

@ -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});
}
}
}

31
public/app/plugins/panel/graph/tab_display.html
View File

@ -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>