From 0b0f6b08480931c0564aac404ed66ca85cfa654b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 26 Jul 2016 14:35:42 +0200 Subject: [PATCH] feat(alerting): made very basic threshold viz work again --- .../app/plugins/panel/graph/alert_tab_ctrl.ts | 43 ++++++++++++- public/app/plugins/panel/graph/graph.js | 62 +++---------------- public/app/plugins/panel/graph/module.ts | 1 + .../panel/graph/partials/tab_alerting.html | 2 +- public/app/plugins/panel/graph/thresholds.ts | 9 +-- 5 files changed, 55 insertions(+), 62 deletions(-) diff --git a/public/app/plugins/panel/graph/alert_tab_ctrl.ts b/public/app/plugins/panel/graph/alert_tab_ctrl.ts index 7cd8246889e..a8cac86a6ad 100644 --- a/public/app/plugins/panel/graph/alert_tab_ctrl.ts +++ b/public/app/plugins/panel/graph/alert_tab_ctrl.ts @@ -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() { diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index eb657b55335..13172b06019 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -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) { diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index ed0e0430592..d2fda8878df 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -105,6 +105,7 @@ class GraphCtrl extends MetricsPanelCtrl { // other style overrides seriesOverrides: [], alerting: {}, + thresholds: [], }; /** @ngInject */ diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html index 16c385af18d..463e2cb4154 100644 --- a/public/app/plugins/panel/graph/partials/tab_alerting.html +++ b/public/app/plugins/panel/graph/partials/tab_alerting.html @@ -70,7 +70,7 @@
Value - +