mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(alerting): making progress on alert handles
This commit is contained in:
parent
2639c38912
commit
fbb8f8e691
@ -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)
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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) {
|
||||
|
@ -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 {
|
||||
<div class="alert-handle-line">
|
||||
</div>
|
||||
<div class="alert-handle">
|
||||
<i class="icon-gf icon-gf-${type} alert-icon-${type}"></i>
|
||||
${value}
|
||||
${op} ${value}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
getFullHandleHtml(type, op, value) {
|
||||
var innerTemplate = this.getHandleInnerHtml(type, op, value);
|
||||
return `
|
||||
<div class="alert-handle-wrapper alert-handle-wrapper--${type}">
|
||||
${innerTemplate}
|
||||
</div>
|
||||
`;
|
||||
getFullHandleHtml(handleName, op, value) {
|
||||
var innerTemplate = this.getHandleInnerHtml(handleName, op, value);
|
||||
return `<div class="alert-handle-wrapper alert-handle-wrapper--${handleName}">${innerTemplate}</div>`;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user