From fbb8f8e691d412c2009cffb62671f1e88c199c4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 10 Aug 2016 21:37:10 +0200 Subject: [PATCH] feat(alerting): making progress on alert handles --- CHANGELOG.md | 3 +- .../app/features/alerting/alert_tab_ctrl.ts | 34 ++++++++++++----- public/app/plugins/panel/graph/graph.js | 5 ++- public/app/plugins/panel/graph/thresholds.ts | 38 +++++++++---------- public/sass/components/_panel_graph.scss | 6 +-- 5 files changed, 51 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c796577ec66..d2461e1efd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ * **Templating**: Update panel repeats for variables that change on time refresh, closes [#5021](https://github.com/grafana/grafana/issues/5021) * **Elasticsearch**: Support to set Precision Threshold for Unique Count metric, closes [#4689](https://github.com/grafana/grafana/issues/4689) -# 3.1.1 (2016-08-01) +#b 3.1.1 (unreleased / v3.1.x branch) * **IFrame embedding**: Fixed issue of using full iframe height, fixes [#5605](https://github.com/grafana/grafana/issues/5606) * **Panel PNG rendering**: Fixed issue detecting render completion, fixes [#5605](https://github.com/grafana/grafana/issues/5606) * **Elasticsearch**: Fixed issue with templating query and json parse error, fixes [#5615](https://github.com/grafana/grafana/issues/5615) @@ -15,7 +15,6 @@ * **Graphite**: Fixed issue with mixed data sources and Graphite, fixes [#5617](https://github.com/grafana/grafana/issues/5617) * **Templating**: Fixed issue with template variable query was issued multiple times during dashboard load, fixes [#5637](https://github.com/grafana/grafana/issues/5637) * **Zoom**: Fixed issues with zoom in and out on embedded (iframed) panel, fixes [#4489](https://github.com/grafana/grafana/issues/4489), [#5666](https://github.com/grafana/grafana/issues/5666) -* **Templating**: Row/Panel repeat issue when saving dashboard caused dupes to appear, fixes [#5591](https://github.com/grafana/grafana/issues/5591) # 3.1.0 stable (2016-07-12) diff --git a/public/app/features/alerting/alert_tab_ctrl.ts b/public/app/features/alerting/alert_tab_ctrl.ts index dd035b8d4df..403a4a0fb8a 100644 --- a/public/app/features/alerting/alert_tab_ctrl.ts +++ b/public/app/features/alerting/alert_tab_ctrl.ts @@ -63,10 +63,13 @@ export class AlertTabCtrl { // set panel alert edit mode this.$scope.$on("$destroy", () => { - this.panelCtrl.editingAlert = false; + this.panelCtrl.editingThresholds = false; this.panelCtrl.render(); }); + // subscribe to graph threshold handle changes + this.panelCtrl.events.on('threshold-changed', this.graphThresholdChanged.bind(this)); + // build notification model this.notifications = []; this.alertNotifications = []; @@ -139,12 +142,19 @@ export class AlertTabCtrl { return memo; }, []); - this.panelCtrl.editingAlert = true; + if (this.alert.enabled) { + this.panelCtrl.editingThresholds = true; + } + this.syncThresholds(); this.panelCtrl.render(); } syncThresholds() { + if (this.panel.type !== 'graph') { + return; + } + var threshold: any = {}; if (this.panel.thresholds && this.panel.thresholds.length > 0) { threshold = this.panel.thresholds[0]; @@ -160,16 +170,13 @@ export class AlertTabCtrl { continue; } - if (value !== threshold.from) { - threshold.from = value; + if (value !== threshold.value) { + threshold.value = 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; + if (condition.evaluator.type !== threshold.op) { + threshold.op = condition.evaluator.type; updated = true; } } @@ -178,6 +185,15 @@ export class AlertTabCtrl { return updated; } + graphThresholdChanged(evt) { + for (var condition of this.alert.conditions) { + if (condition.type === 'query') { + condition.evaluator.params[0] = evt.threshold.value; + break; + } + } + } + buildDefaultCondition() { return { type: 'query', diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 40c57df0ec0..212d06f949a 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -182,9 +182,10 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) { } // give space to alert editing - if (ctrl.editingAlert) { + if (ctrl.editingThresholds) { if (!thresholdControls) { - elem.css('margin-right', '110px'); + var thresholdMargin = panel.thresholds.length > 1 ? '220px' : '110px'; + elem.css('margin-right', thresholdMargin); thresholdControls = new ThresholdControls(ctrl); } } else if (thresholdControls) { diff --git a/public/app/plugins/panel/graph/thresholds.ts b/public/app/plugins/panel/graph/thresholds.ts index 77ec585bb50..35dd34f35de 100644 --- a/public/app/plugins/panel/graph/thresholds.ts +++ b/public/app/plugins/panel/graph/thresholds.ts @@ -14,7 +14,7 @@ export class ThresholdControls { this.thresholds = this.panelCtrl.panel.thresholds; } - getHandleInnerHtml(type, op, value) { + getHandleInnerHtml(handleName, op, value) { if (op === '>') { op = '>'; } if (op === '<') { op = '<'; } @@ -22,21 +22,16 @@ export class ThresholdControls {
- - ${value} + ${op} ${value}
`; } - getFullHandleHtml(type, op, value) { - var innerTemplate = this.getHandleInnerHtml(type, op, value); - return ` -
- ${innerTemplate} -
- `; + getFullHandleHtml(handleName, op, value) { + var innerTemplate = this.getHandleInnerHtml(handleName, op, value); + return `
${innerTemplate}
`; } - setupDragging(handleElem, threshold) { + setupDragging(handleElem, threshold, handleIndex) { var isMoving = false; var lastY = null; var posTop; @@ -59,7 +54,7 @@ export class ThresholdControls { // calculate graph level var graphValue = plot.c2p({left: 0, top: posTop}).y; graphValue = parseInt(graphValue.toFixed(0)); - threshold.from = graphValue; + threshold.value = graphValue; var valueCanvasPos = plot.p2c({x: 0, y: graphValue}); @@ -69,6 +64,7 @@ export class ThresholdControls { // trigger digest and render panelCtrl.$scope.$apply(function() { panelCtrl.render(); + panelCtrl.events.emit('threshold-changed', {threshold: threshold, index: handleIndex}); }); } @@ -88,9 +84,10 @@ export class ThresholdControls { } } - renderHandle(type, model, defaultHandleTopPos) { - var handleElem = this.placeholder.find(`.alert-handle-wrapper--${type}`); - var value = model.from; + renderHandle(handleIndex, model, defaultHandleTopPos) { + var handleName = 'T' + (handleIndex+1); + var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`); + var value = model.value; var valueStr = value; var handleTopPos = 0; @@ -104,11 +101,11 @@ export class ThresholdControls { } if (handleElem.length === 0) { - handleElem = $(this.getFullHandleHtml(type, model.op, valueStr)); + handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr)); this.placeholder.append(handleElem); - this.setupDragging(handleElem, model); + this.setupDragging(handleElem, model, handleIndex); } else { - handleElem.html(this.getHandleInnerHtml(type, model.op, valueStr)); + handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr)); } handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === ''); @@ -121,7 +118,10 @@ export class ThresholdControls { this.height = plot.height(); if (this.thresholds.length > 0) { - this.renderHandle('crit', this.thresholds[0], 10); + this.renderHandle(0, this.thresholds[0], 10); + } + if (this.thresholds.length > 1) { + this.renderHandle(1, this.thresholds[1], this.height-30); } } } diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index abca94e4140..c29e77f2523 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -334,7 +334,7 @@ border-width: 0 1px 1px 0; border-style: solid; border-color: $black; - text-align: right; + text-align: left; color: $text-muted; .icon-gf { @@ -353,7 +353,7 @@ position: relative; } - &--warn { + &--T2 { right: -222px; width: 238px; @@ -363,7 +363,7 @@ } } - &--crit{ + &--T1{ right: -105px; width: 123px;