Skip to content

Commit 89ca15f

Browse files
torkelotorkelo
committed
feat(thresholds): lots of progress on thresholds
1 parent 72a67b3 commit 89ca15f

File tree

8 files changed

+130
-99
lines changed

8 files changed

+130
-99
lines changed

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

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -76,26 +76,6 @@ export class AlertTabCtrl {
7676
}));
7777
}
7878

79-
evaluatorTypeChanged(evaluator) {
80-
// ensure params array is correct length
81-
switch (evaluator.type) {
82-
case "lt":
83-
case "gt": {
84-
evaluator.params = [evaluator.params[0]];
85-
break;
86-
}
87-
case "within_range":
88-
case "outside_range": {
89-
evaluator.params = [evaluator.params[0], evaluator.params[1]];
90-
break;
91-
}
92-
case "no_value": {
93-
evaluator.params = [];
94-
}
95-
}
96-
97-
this.thresholdUpdated();
98-
}
9979

10080
notificationAdded() {
10181
var model = _.findWhere(this.notifications, {name: this.addNotificationSegment.value});
@@ -200,10 +180,35 @@ export class AlertTabCtrl {
200180
this.initModel();
201181
}
202182

203-
thresholdUpdated() {
204-
if (ThresholdMapper.alertToGraphThresholds(this.panel)) {
205-
this.panelCtrl.render();
183+
evaluatorParamsChanged() {
184+
ThresholdMapper.alertToGraphThresholds(this.panel);
185+
this.panelCtrl.render();
186+
}
187+
188+
severityChanged() {
189+
ThresholdMapper.alertToGraphThresholds(this.panel);
190+
this.panelCtrl.render();
191+
}
192+
193+
evaluatorTypeChanged(evaluator) {
194+
// ensure params array is correct length
195+
switch (evaluator.type) {
196+
case "lt":
197+
case "gt": {
198+
evaluator.params = [evaluator.params[0]];
199+
break;
200+
}
201+
case "within_range":
202+
case "outside_range": {
203+
evaluator.params = [evaluator.params[0], evaluator.params[1]];
204+
break;
205+
}
206+
case "no_value": {
207+
evaluator.params = [];
208+
}
206209
}
210+
211+
this.evaluatorParamsChanged();
207212
}
208213

209214
test() {

‎public/app/features/alerting/partials/alert_tab.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h5 class="section-heading">Alert Config</h5>
3434
<div class="gf-form">
3535
<span class="gf-form-label">Severity</span>
3636
<div class="gf-form-select-wrapper width-13">
37-
<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
37+
<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels" ng-change="ctrl.severityChanged()">
3838
</select>
3939
</div>
4040
</div>
@@ -59,9 +59,9 @@ <h5 class="section-heading">Conditions</h5>
5959
</div>
6060
<div class="gf-form">
6161
<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
62-
<input class="gf-form-input max-width-7" type="number" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
62+
<input class="gf-form-input max-width-7" type="number" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"></input>
6363
<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
64-
<input class="gf-form-input max-width-7" type="number" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.thresholdUpdated()"></input>
64+
<input class="gf-form-input max-width-7" type="number" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"></input>
6565
</div>
6666
<div class="gf-form">
6767
<label class="gf-form-label">

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
3737
var legendSideLastValue = null;
3838
var rootScope = scope.$root;
3939
var panelWidth = 0;
40-
var thresholdControls;
40+
var thresholdControls = new ThresholdControls(ctrl);
4141

4242
rootScope.onAppEvent('setCrosshair', function(event, info) {
4343
// do not need to to this if event is from this panel
@@ -161,9 +161,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
161161
rightLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[1].label, rightLabel) / 2) + 'px';
162162
}
163163

164-
if (thresholdControls) {
165-
thresholdControls.draw(plot);
166-
}
164+
thresholdControls.draw(plot);
167165
}
168166

169167
function processOffsetHook(plot, gridMargin) {
@@ -182,17 +180,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
182180
}
183181

184182
// give space to alert editing
185-
if (ctrl.editingThresholds) {
186-
if (!thresholdControls) {
187-
var thresholdMargin = panel.thresholds.length > 1 ? '220px' : '110px';
188-
elem.css('margin-right', thresholdMargin);
189-
thresholdControls = new ThresholdControls(ctrl);
190-
}
191-
} else if (thresholdControls) {
192-
elem.css('margin-right', '0');
193-
thresholdControls.cleanUp();
194-
thresholdControls = null;
195-
}
183+
thresholdControls.prepare(elem);
196184

197185
var stack = panel.stack ? true : null;
198186

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ class GraphCtrl extends MetricsPanelCtrl {
328328
}
329329

330330
addThreshold() {
331-
this.panel.thresholds.push({value: undefined, color: "rgba(255,0,0,0.2)"});
331+
this.panel.thresholds.push({value: undefined, colorMode: "critical", op: 'gt', fill: true, line: true});
332332
}
333333

334334
removeThreshold(index) {

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

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,25 @@ export class ThresholdControls {
99
placeholder: any;
1010
height: any;
1111
thresholds: any;
12+
needsCleanup: boolean;
1213

13-
constructor(private panelCtrl) {
14-
this.thresholds = this.panelCtrl.panel.thresholds;
15-
}
14+
constructor(private panelCtrl) {}
1615

17-
getHandleInnerHtml(handleName, op, value) {
18-
if (op === '>') { op = '&gt;'; }
19-
if (op === '<') { op = '&lt;'; }
16+
getHandleHtml(handleIndex, model, valueStr) {
17+
var colorClass = 'crit';
18+
if (model.colorMode === 'warning') {
19+
colorClass = 'warn';
20+
}
2021

21-
return `
22-
<div class="alert-handle-line">
22+
return `<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
23+
<div class="alert-handle-line alert-handle-line--${colorClass}">
24+
</div>
25+
<div class="alert-handle" data-handle-index="${handleIndex}">
26+
<i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
27+
<span class="alert-handle-value">${valueStr}</span>
2328
</div>
24-
<div class="alert-handle">
25-
${op} ${value}
2629
</div>`;
27-
}
2830

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>`;
3231
}
3332

3433
setupDragging(handleElem, threshold, handleIndex) {
@@ -78,15 +77,18 @@ export class ThresholdControls {
7877
});
7978
}
8079

80+
initDragging(evt) {
81+
var handleIndex = $(evt.currentTarget).data("handleIndex");
82+
console.log('alert handle index', handleIndex);
83+
}
84+
8185
cleanUp() {
82-
if (this.placeholder) {
83-
this.placeholder.find(".alert-handle-wrapper").remove();
84-
}
86+
this.placeholder.find(".alert-handle-wrapper").remove();
87+
this.needsCleanup = false;
8588
}
8689

87-
renderHandle(handleIndex, model, defaultHandleTopPos) {
88-
var handleName = 'T' + (handleIndex+1);
89-
var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
90+
renderHandle(handleIndex, defaultHandleTopPos) {
91+
var model = this.thresholds[handleIndex];
9092
var value = model.value;
9193
var valueStr = value;
9294
var handleTopPos = 0;
@@ -100,29 +102,48 @@ export class ThresholdControls {
100102
handleTopPos = Math.min(Math.max(valueCanvasPos.top, 0), this.height) - 6;
101103
}
102104

103-
if (handleElem.length === 0) {
104-
handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr));
105-
this.placeholder.append(handleElem);
106-
this.setupDragging(handleElem, model, handleIndex);
107-
} else {
108-
handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr));
109-
}
105+
var handleElem = $(this.getHandleHtml(handleIndex, model, valueStr));
106+
this.placeholder.append(handleElem);
110107

111108
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === '');
112109
handleElem.css({top: handleTopPos});
113110
}
114111

112+
prepare(elem) {
113+
if (this.panelCtrl.editingThresholds) {
114+
var thresholdMargin = this.panelCtrl.panel.thresholds.length > 1 ? '220px' : '110px';
115+
elem.css('margin-right', thresholdMargin);
116+
} else if (this.needsCleanup) {
117+
elem.css('margin-right', '0');
118+
}
119+
}
120+
115121
draw(plot) {
122+
this.thresholds = this.panelCtrl.panel.thresholds;
116123
this.plot = plot;
117124
this.placeholder = plot.getPlaceholder();
125+
126+
if (this.needsCleanup) {
127+
this.cleanUp();
128+
}
129+
130+
// if no thresholds or not editing alerts skip rendering handles
131+
if (this.thresholds.length === 0 || !this.panelCtrl.editingThresholds) {
132+
return;
133+
}
134+
118135
this.height = plot.height();
119136

120137
if (this.thresholds.length > 0) {
121-
this.renderHandle(0, this.thresholds[0], 10);
138+
this.renderHandle(0, 10);
122139
}
123140
if (this.thresholds.length > 1) {
124-
this.renderHandle(1, this.thresholds[1], this.height-30);
141+
this.renderHandle(1, this.height-30);
125142
}
143+
144+
this.placeholder.off('mousedown', '.alert-handle');
145+
this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this));
146+
this.needsCleanup = true;
126147
}
127148
}
128149

‎public/sass/_variables.dark.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,12 @@ $component-active-bg: $brand-primary !default;
9090
// Panel
9191
// -------------------------
9292
$panel-bg: $dark-2;
93-
$panel-border: solid 1px $dark-3;
93+
$panel-border: solid 1px $dark-3;
9494

95-
$divider-border-color: #555;
95+
$divider-border-color: #555;
9696

9797
// Graphite Target Editor
98-
$tight-form-border: #050505;
98+
$tight-form-border: #050505;
9999
$tight-form-bg: $dark-3;
100100

101101
$tight-form-func-bg: #333;
@@ -152,6 +152,9 @@ $btn-link-color: $gray-3;
152152

153153
$iconContainerBackground: $black;
154154

155+
$btn-divider-left: $dark-5;
156+
$btn-divider-right: $dark-1;
157+
155158
// Forms
156159
// -------------------------
157160
$input-bg: $dark-4;
@@ -185,7 +188,6 @@ $dropdownLinkColorActive: $white;
185188
$dropdownLinkBackgroundActive: $dark-4;
186189
$dropdownLinkBackgroundHover: $dark-4;
187190

188-
189191
// COMPONENT VARIABLES
190192
// --------------------------------------------------
191193

‎public/sass/_variables.light.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ $component-active-bg: $brand-primary !default;
9999
$panel-bg: $gray-7;
100100
$panel-border: solid 1px $gray-6;
101101

102-
$divider-border-color: $gray-2;
102+
$divider-border-color: $gray-2;
103103

104104
// Graphite Target Editor
105105
$tight-form-border: $gray-4;
@@ -157,6 +157,9 @@ $btn-inverse-text-color: $dark-4;
157157

158158
$btn-link-color: $gray-1;
159159

160+
$btn-divider-left: $dark-5;
161+
$btn-divider-right: $dark-1;
162+
160163
$iconContainerBackground: $white;
161164

162165
// Forms

0 commit comments

Comments
 (0)