Skip to content

Commit ec640bd

Browse files
torkelotorkelo
committed
feat(alerting): more work on alerting ui
1 parent 1500c0e commit ec640bd

File tree

5 files changed

+49
-31
lines changed

5 files changed

+49
-31
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
169169
var right = panel.yaxes[1];
170170
if (left.show && left.label) { gridMargin.left = 20; }
171171
if (right.show && right.label) { gridMargin.right = 20; }
172-
173172
}
174173

175174
// Function for rendering panel

‎public/app/plugins/panel/graph/jquery.flot.alerts.ts

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,17 @@ function getHandleTemplate(type, op, value) {
2222
`;
2323
}
2424

25+
var dragGhostElem = document.createElement('div');
26+
27+
function dragStartHandler(evt) {
28+
evt.dataTransfer.setDragImage(dragGhostElem, -99999, -99999);
29+
}
30+
31+
function dragEndHandler() {
32+
console.log('drag end');
33+
}
34+
35+
var past;
2536

2637
function drawAlertHandles(plot) {
2738
var options = plot.getOptions();
@@ -36,23 +47,27 @@ function drawAlertHandles(plot) {
3647
var height = plot.height();
3748

3849
function renderHandle(type, model) {
39-
var $handle = $placeholder.find(`.alert-handle-${type}`);
50+
var $handle = $placeholder.find(`.alert-handle-wrapper--${type}`);
4051

4152
if (!_.isNumber(model.level)) {
4253
$handle.remove();
4354
return;
4455
}
4556

4657
if ($handle.length === 0) {
58+
console.log('not found');
4759
$handle = $(getHandleTemplate(type, model.op, model.level));
60+
$handle.attr('draggable', true);
61+
$handle.bind('dragend', dragEndHandler);
62+
$handle.bind('dragstart', dragStartHandler);
4863
$placeholder.append($handle);
64+
console.log('registering drag events');
4965
} else {
66+
console.log('reusing!');
5067
$handle.html(getHandleTemplate(type, model.op, model.level));
5168
}
5269

5370
var levelCanvasPos = plot.p2c({x: 0, y: model.level});
54-
console.log('canvas level pos', levelCanvasPos.top);
55-
5671
var levelTopPos = Math.min(Math.max(levelCanvasPos.top, 0), height) - 6;
5772
$handle.css({top: levelTopPos});
5873
}
@@ -62,6 +77,7 @@ function drawAlertHandles(plot) {
6277
}
6378

6479
function shutdown() {
80+
console.log('shutdown');
6581
}
6682

6783
function init(plot, classes) {

‎public/app/plugins/panel/graph/partials/tab_alerting.html

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,28 +36,28 @@ <h5 class="section-heading">Alert Query</h5>
3636
</div>
3737
</div>
3838

39-
<div class="gf-form-group section">
40-
<h5 class="section-heading">Levels</h5>
41-
<div class="gf-form-inline">
42-
<div class="gf-form">
43-
<span class="gf-form-label">
44-
<i class="icon-gf icon-gf-warn alert-icon-warn"></i>
45-
Warn if
46-
</span>
47-
<metric-segment-model property="ctrl.alert.warn.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
48-
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.warn.level" ng-change="ctrl.levelsUpdated()"></input>
49-
</div>
50-
<div class="gf-form">
51-
<span class="gf-form-label">
52-
<i class="icon-gf icon-gf-warn alert-icon-critical"></i>
53-
Critcal if
54-
</span>
55-
<metric-segment-model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
56-
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.critical.level" ng-change="ctrl.levelsUpdated()"></input>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
39+
<!-- <div class="gf&#45;form&#45;group section"> -->
40+
<!-- <h5 class="section&#45;heading">Levels</h5> -->
41+
<!-- <div class="gf&#45;form&#45;inline"> -->
42+
<!-- <div class="gf&#45;form"> -->
43+
<!-- <span class="gf&#45;form&#45;label"> -->
44+
<!-- <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;warn"></i> -->
45+
<!-- Warn if -->
46+
<!-- </span> -->
47+
<!-- <metric&#45;segment&#45;model property="ctrl.alert.warn.op" options="ctrl.levelOpList" custom="false" css&#45;class="query&#45;segment&#45;operator"></metric&#45;segment&#45;model> -->
48+
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.warn.level" ng&#45;change="ctrl.levelsUpdated()"></input> -->
49+
<!-- </div> -->
50+
<!-- <div class="gf&#45;form"> -->
51+
<!-- <span class="gf&#45;form&#45;label"> -->
52+
<!-- <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;critical"></i> -->
53+
<!-- Critcal if -->
54+
<!-- </span> -->
55+
<!-- <metric&#45;segment&#45;model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css&#45;class="query&#45;segment&#45;operator"></metric&#45;segment&#45;model> -->
56+
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;7" type="number" ng&#45;model="ctrl.alert.critical.level" ng&#45;change="ctrl.levelsUpdated()"></input> -->
57+
<!-- </div> -->
58+
<!-- </div> -->
59+
<!-- </div> -->
60+
<!-- </div> -->
6161

6262
<div class="editor-row">
6363
<div class="gf-form-group section">

‎public/sass/components/_panel_graph.scss

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -317,9 +317,10 @@
317317

318318
.alert-handle-wrapper {
319319
position: absolute;
320+
user-select: none;
320321

321322
&--warn {
322-
right: -221px;
323+
right: -111px;
323324
width: 238px;
324325

325326
.alert-handle-line {
@@ -334,7 +335,7 @@
334335
}
335336

336337
&--critical {
337-
right: -105px;
338+
right: -54px;
338339
width: 123px;
339340

340341
.alert-handle-line {
@@ -353,7 +354,7 @@
353354
z-index: 10;
354355
position: relative;
355356
float: right;
356-
padding: 0.4rem;;
357+
padding: 0.4rem 0.6rem 0.4rem 0.4rem;
357358
background-color: $btn-inverse-bg;
358359
box-shadow: $search-shadow;
359360
cursor: pointer;
@@ -364,11 +365,13 @@
364365
border-width: 0 1px 1px 0;
365366
border-style: solid;
366367
border-color: $black;
368+
text-align: right;
367369

368370
.icon-gf {
369371
font-size: 17px;
370372
position: relative;
371-
top: 2px;
373+
top: 0px;
374+
float: left;
372375
}
373376
}
374377

‎public/vendor/flot/jquery.flot.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1322,7 +1322,7 @@ Licensed under the MIT license.
13221322

13231323
placeholder.css("padding", 0) // padding messes up the positioning
13241324
.children().filter(function(){
1325-
return !$(this).hasClass("flot-overlay") && !$(this).hasClass('flot-base');
1325+
return $(this).hasClass("flot-text");
13261326
}).remove();
13271327

13281328
if (placeholder.css("position") == 'static')

0 commit comments

Comments
 (0)