IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 20:54:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(alerting): made very basic threshold viz work again

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-07-26 14:35:42 +02:00
parent 0d9b98da6d
commit 0b0f6b0848
5 changed files with 55 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/app/plugins/panel/graph/alert_tab_ctrl.ts
View File

@ -131,10 +131,45 @@ export class AlertTabCtrl {
return memo;
}, []);
this.panelCtrl.editingAlert = true;
///this.panelCtrl.editingAlert = true;
this.syncThresholds();
this.panelCtrl.render();
}
syncThresholds() {
var threshold: any = {};
if (this.panel.thresholds && this.panel.thresholds.length > 0) {
threshold = this.panel.thresholds[0];
} else {
this.panel.thresholds = [threshold];
}
var updated = false;
for (var condition of this.conditionModels) {
if (condition.type === 'query') {
var value = condition.evaluator.params[0];
if (!_.isNumber(value)) {
continue;
}
if (value !== threshold.from) {
threshold.from = value;
updated = true;
}
if (condition.evaluator.type === '<' && threshold.to !== -Infinity) {
threshold.to = -Infinity;
updated = true;
} else if (condition.evaluator.type === '>' && threshold.to !== Infinity) {
threshold.to = Infinity;
updated = true;
}
}
}
return updated;
}
buildDefaultCondition() {
return {
type: 'query',
@ -180,8 +215,10 @@ export class AlertTabCtrl {
this.initModel();
}
thresholdsUpdated() {
this.panelCtrl.render();
thresholdUpdated() {
if (this.syncThresholds()) {
this.panelCtrl.render();
}
}
test() {

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

@ -184,7 +184,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
// give space to alert editing
if (ctrl.editingAlert) {
if (!thresholdControls) {
elem.css('margin-right', '220px');
elem.css('margin-right', '110px');
thresholdControls = new ThresholdControls(ctrl);
}
} else if (thresholdControls) {
@ -327,74 +327,28 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
}
function addGridThresholds(options, panel) {
if (!panel.alert) {
if (!panel.thresholds || panel.thresholds.length === 0) {
return;
}
var crit = panel.alert.crit;
var warn = panel.alert.warn;
var critEdge = Infinity;
if (_.isNumber(crit.value)) {
if (crit.op === '<') {
critEdge = -Infinity;
for (var i = 0; i < panel.thresholds.length; i++) {
var threshold = panel.thresholds[i];
if (!_.isNumber(threshold.from)) {
continue;
}
// fill
options.grid.markings.push({
yaxis: {from: crit.value, to: critEdge},
yaxis: {from: threshold.from, to: threshold.to},
color: 'rgba(234, 112, 112, 0.10)',
});
// line
options.grid.markings.push({
yaxis: {from: crit.value, to: crit.value},
yaxis: {from: threshold.from, to: threshold.from},
color: '#ed2e18'
});
}
if (_.isNumber(warn.value)) {
//var warnEdge = crit.value || Infinity;
var warnEdge;
if (crit.value) {
warnEdge = crit.value;
} else {
warnEdge = warn.op === '<' ? -Infinity : Infinity;
}
// fill
options.grid.markings.push({
yaxis: {from: warn.value, to: warnEdge},
color: 'rgba(216, 200, 27, 0.10)',
});
// line
options.grid.markings.push({
yaxis: {from: warn.value, to: warn.value},
color: '#F79520'
});
}
// if (_.isNumber(panel.grid.threshold1)) {
// var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
// options.grid.markings.push({
// yaxis: { from: panel.grid.threshold1, to: limit1 },
// color: panel.grid.threshold1Color
// });
//
// if (_.isNumber(panel.grid.threshold2)) {
// var limit2;
// if (panel.grid.thresholdLine) {
// limit2 = panel.grid.threshold2;
// } else {
// limit2 = panel.grid.threshold1 > panel.grid.threshold2 ? -Infinity : +Infinity;
// }
// options.grid.markings.push({
// yaxis: { from: panel.grid.threshold2, to: limit2 },
// color: panel.grid.threshold2Color
// });
// }
// }
}
function addAnnotations(options) {

1
public/app/plugins/panel/graph/module.ts
View File

@ -105,6 +105,7 @@ class GraphCtrl extends MetricsPanelCtrl {
// other style overrides
seriesOverrides: [],
alerting: {},
thresholds: [],
};
/** @ngInject */

2
public/app/plugins/panel/graph/partials/tab_alerting.html
View File

@ -70,7 +70,7 @@
<div class="gf-form">
<span class="gf-form-label">Value</span>
<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-segment-operator" on-change="ctrl.thresholdUpdated()"></metric-segment-model>
<input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdsUpdated()"></input>
<input class="gf-form-input max-width-7" type="number" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
</div>
<div class="gf-form">
<label class="gf-form-label">

9
public/app/plugins/panel/graph/thresholds.ts
View File

@ -8,10 +8,10 @@ export class ThresholdControls {
plot: any;
placeholder: any;
height: any;
alert: any;
thresholds: any;
constructor(private panelCtrl) {
this.alert = this.panelCtrl.panel.alert;
this.thresholds = this.panelCtrl.panel.thresholds;
}
getHandleInnerHtml(type, op, value) {
@ -120,8 +120,9 @@ export class ThresholdControls {
this.placeholder = plot.getPlaceholder();
this.height = plot.height();
this.renderHandle('crit', this.alert.crit, 10);
this.renderHandle('warn', this.alert.warn, this.height-30);
if (this.thresholds.length > 0) {
this.renderHandle('crit', this.thresholds[0], 10);
}
}
}