feat(alerting): making progress on alert handles

This commit is contained in:
Torkel Ödegaard 2016-08-10 21:37:10 +02:00
parent 2639c38912
commit fbb8f8e691
5 changed files with 51 additions and 35 deletions

View File

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

View File

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

View File

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

View File

@ -14,7 +14,7 @@ export class ThresholdControls {
this.thresholds = this.panelCtrl.panel.thresholds;
}
getHandleInnerHtml(type, op, value) {
getHandleInnerHtml(handleName, op, value) {
if (op === '>') { op = '&gt;'; }
if (op === '<') { op = '&lt;'; }
@ -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);
}
}
}

View File

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