Skip to content

Commit fbb8f8e

Browse files
torkelotorkelo
committed
feat(alerting): making progress on alert handles
1 parent 2639c38 commit fbb8f8e

File tree

5 files changed

+51
-35
lines changed

5 files changed

+51
-35
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@
77
* **Templating**: Update panel repeats for variables that change on time refresh, closes [#5021](https://github.com/grafana/grafana/issues/5021)
88
* **Elasticsearch**: Support to set Precision Threshold for Unique Count metric, closes [#4689](https://github.com/grafana/grafana/issues/4689)
99

10-
# 3.1.1 (2016-08-01)
10+
#b 3.1.1 (unreleased / v3.1.x branch)
1111
* **IFrame embedding**: Fixed issue of using full iframe height, fixes [#5605](https://github.com/grafana/grafana/issues/5606)
1212
* **Panel PNG rendering**: Fixed issue detecting render completion, fixes [#5605](https://github.com/grafana/grafana/issues/5606)
1313
* **Elasticsearch**: Fixed issue with templating query and json parse error, fixes [#5615](https://github.com/grafana/grafana/issues/5615)
1414
* **Tech**: Upgraded JQuery to 2.2.4 to fix Security vulnerabilitie in 2.1.4, fixes [#5627](https://github.com/grafana/grafana/issues/5627)
1515
* **Graphite**: Fixed issue with mixed data sources and Graphite, fixes [#5617](https://github.com/grafana/grafana/issues/5617)
1616
* **Templating**: Fixed issue with template variable query was issued multiple times during dashboard load, fixes [#5637](https://github.com/grafana/grafana/issues/5637)
1717
* **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)
18-
* **Templating**: Row/Panel repeat issue when saving dashboard caused dupes to appear, fixes [#5591](https://github.com/grafana/grafana/issues/5591)
1918

2019
# 3.1.0 stable (2016-07-12)
2120

‎public/app/features/alerting/alert_tab_ctrl.ts

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,13 @@ export class AlertTabCtrl {
6363

6464
// set panel alert edit mode
6565
this.$scope.$on("$destroy", () => {
66-
this.panelCtrl.editingAlert = false;
66+
this.panelCtrl.editingThresholds = false;
6767
this.panelCtrl.render();
6868
});
6969

70+
// subscribe to graph threshold handle changes
71+
this.panelCtrl.events.on('threshold-changed', this.graphThresholdChanged.bind(this));
72+
7073
// build notification model
7174
this.notifications = [];
7275
this.alertNotifications = [];
@@ -139,12 +142,19 @@ export class AlertTabCtrl {
139142
return memo;
140143
}, []);
141144

142-
this.panelCtrl.editingAlert = true;
145+
if (this.alert.enabled) {
146+
this.panelCtrl.editingThresholds = true;
147+
}
148+
143149
this.syncThresholds();
144150
this.panelCtrl.render();
145151
}
146152

147153
syncThresholds() {
154+
if (this.panel.type !== 'graph') {
155+
return;
156+
}
157+
148158
var threshold: any = {};
149159
if (this.panel.thresholds && this.panel.thresholds.length > 0) {
150160
threshold = this.panel.thresholds[0];
@@ -160,16 +170,13 @@ export class AlertTabCtrl {
160170
continue;
161171
}
162172

163-
if (value !== threshold.from) {
164-
threshold.from = value;
173+
if (value !== threshold.value) {
174+
threshold.value = value;
165175
updated = true;
166176
}
167177

168-
if (condition.evaluator.type === '<' && threshold.to !== -Infinity) {
169-
threshold.to = -Infinity;
170-
updated = true;
171-
} else if (condition.evaluator.type === '>' && threshold.to !== Infinity) {
172-
threshold.to = Infinity;
178+
if (condition.evaluator.type !== threshold.op) {
179+
threshold.op = condition.evaluator.type;
173180
updated = true;
174181
}
175182
}
@@ -178,6 +185,15 @@ export class AlertTabCtrl {
178185
return updated;
179186
}
180187

188+
graphThresholdChanged(evt) {
189+
for (var condition of this.alert.conditions) {
190+
if (condition.type === 'query') {
191+
condition.evaluator.params[0] = evt.threshold.value;
192+
break;
193+
}
194+
}
195+
}
196+
181197
buildDefaultCondition() {
182198
return {
183199
type: 'query',

‎public/app/plugins/panel/graph/graph.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,10 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
182182
}
183183

184184
// give space to alert editing
185-
if (ctrl.editingAlert) {
185+
if (ctrl.editingThresholds) {
186186
if (!thresholdControls) {
187-
elem.css('margin-right', '110px');
187+
var thresholdMargin = panel.thresholds.length > 1 ? '220px' : '110px';
188+
elem.css('margin-right', thresholdMargin);
188189
thresholdControls = new ThresholdControls(ctrl);
189190
}
190191
} else if (thresholdControls) {

‎public/app/plugins/panel/graph/thresholds.ts

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,24 @@ export class ThresholdControls {
1414
this.thresholds = this.panelCtrl.panel.thresholds;
1515
}
1616

17-
getHandleInnerHtml(type, op, value) {
17+
getHandleInnerHtml(handleName, op, value) {
1818
if (op === '>') { op = '&gt;'; }
1919
if (op === '<') { op = '&lt;'; }
2020

2121
return `
2222
<div class="alert-handle-line">
2323
</div>
2424
<div class="alert-handle">
25-
<i class="icon-gf icon-gf-${type} alert-icon-${type}"></i>
26-
${value}
25+
${op} ${value}
2726
</div>`;
2827
}
2928

30-
getFullHandleHtml(type, op, value) {
31-
var innerTemplate = this.getHandleInnerHtml(type, op, value);
32-
return `
33-
<div class="alert-handle-wrapper alert-handle-wrapper--${type}">
34-
${innerTemplate}
35-
</div>
36-
`;
29+
getFullHandleHtml(handleName, op, value) {
30+
var innerTemplate = this.getHandleInnerHtml(handleName, op, value);
31+
return `<div class="alert-handle-wrapper alert-handle-wrapper--${handleName}">${innerTemplate}</div>`;
3732
}
3833

39-
setupDragging(handleElem, threshold) {
34+
setupDragging(handleElem, threshold, handleIndex) {
4035
var isMoving = false;
4136
var lastY = null;
4237
var posTop;
@@ -59,7 +54,7 @@ export class ThresholdControls {
5954
// calculate graph level
6055
var graphValue = plot.c2p({left: 0, top: posTop}).y;
6156
graphValue = parseInt(graphValue.toFixed(0));
62-
threshold.from = graphValue;
57+
threshold.value = graphValue;
6358

6459
var valueCanvasPos = plot.p2c({x: 0, y: graphValue});
6560

@@ -69,6 +64,7 @@ export class ThresholdControls {
6964
// trigger digest and render
7065
panelCtrl.$scope.$apply(function() {
7166
panelCtrl.render();
67+
panelCtrl.events.emit('threshold-changed', {threshold: threshold, index: handleIndex});
7268
});
7369
}
7470

@@ -88,9 +84,10 @@ export class ThresholdControls {
8884
}
8985
}
9086

91-
renderHandle(type, model, defaultHandleTopPos) {
92-
var handleElem = this.placeholder.find(`.alert-handle-wrapper--${type}`);
93-
var value = model.from;
87+
renderHandle(handleIndex, model, defaultHandleTopPos) {
88+
var handleName = 'T' + (handleIndex+1);
89+
var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
90+
var value = model.value;
9491
var valueStr = value;
9592
var handleTopPos = 0;
9693

@@ -104,11 +101,11 @@ export class ThresholdControls {
104101
}
105102

106103
if (handleElem.length === 0) {
107-
handleElem = $(this.getFullHandleHtml(type, model.op, valueStr));
104+
handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr));
108105
this.placeholder.append(handleElem);
109-
this.setupDragging(handleElem, model);
106+
this.setupDragging(handleElem, model, handleIndex);
110107
} else {
111-
handleElem.html(this.getHandleInnerHtml(type, model.op, valueStr));
108+
handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr));
112109
}
113110

114111
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === '');
@@ -121,7 +118,10 @@ export class ThresholdControls {
121118
this.height = plot.height();
122119

123120
if (this.thresholds.length > 0) {
124-
this.renderHandle('crit', this.thresholds[0], 10);
121+
this.renderHandle(0, this.thresholds[0], 10);
122+
}
123+
if (this.thresholds.length > 1) {
124+
this.renderHandle(1, this.thresholds[1], this.height-30);
125125
}
126126
}
127127
}

‎public/sass/components/_panel_graph.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@
334334
border-width: 0 1px 1px 0;
335335
border-style: solid;
336336
border-color: $black;
337-
text-align: right;
337+
text-align: left;
338338
color: $text-muted;
339339

340340
.icon-gf {
@@ -353,7 +353,7 @@
353353
position: relative;
354354
}
355355

356-
&--warn {
356+
&--T2 {
357357
right: -222px;
358358
width: 238px;
359359

@@ -363,7 +363,7 @@
363363
}
364364
}
365365

366-
&--crit{
366+
&--T1{
367367
right: -105px;
368368
width: 123px;
369369

0 commit comments

Comments
 (0)