diff --git a/public/app/plugins/panel/graph/jquery.flot.alerts.ts b/public/app/plugins/panel/graph/jquery.flot.alerts.ts
index 1ce4783cdf9..630f58f85e9 100644
--- a/public/app/plugins/panel/graph/jquery.flot.alerts.ts
+++ b/public/app/plugins/panel/graph/jquery.flot.alerts.ts
@@ -6,18 +6,24 @@ import _ from 'lodash';
var options = {};
-function getHandleTemplate(type, op, value) {
+function getHandleInnerHtml(type, op, value) {
if (op === '>') { op = '>'; }
if (op === '<') { op = '<'; }
- return `
+ return `
+
+
+
+
+ ${op} ${value}
+
`;
+}
+
+function getFullHandleHtml(type, op, value) {
+ var innerTemplate = getHandleInnerHtml(type, op, value);
+ return `
-
-
-
-
- ${op} ${value}
-
+ ${innerTemplate}
`;
}
@@ -32,14 +38,12 @@ function dragEndHandler() {
console.log('drag end');
}
-var past;
-
function drawAlertHandles(plot) {
var options = plot.getOptions();
var $placeholder = plot.getPlaceholder();
if (!options.alerting.editing) {
- $placeholder.find(".alert-handle").remove();
+ $placeholder.find(".alert-handle-wrapper").remove();
return;
}
@@ -55,16 +59,15 @@ function drawAlertHandles(plot) {
}
if ($handle.length === 0) {
- console.log('not found');
- $handle = $(getHandleTemplate(type, model.op, model.level));
+ console.log('creating handle');
+ $handle = $(getFullHandleHtml(type, model.op, model.level));
$handle.attr('draggable', true);
$handle.bind('dragend', dragEndHandler);
$handle.bind('dragstart', dragStartHandler);
$placeholder.append($handle);
- console.log('registering drag events');
} else {
- console.log('reusing!');
- $handle.html(getHandleTemplate(type, model.op, model.level));
+ console.log('reusing handle!');
+ $handle.html(getHandleInnerHtml(type, model.op, model.level));
}
var levelCanvasPos = plot.p2c({x: 0, y: model.level});
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss
index 4eb8b703534..c2c574d48dc 100644
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -320,7 +320,7 @@
user-select: none;
&--warn {
- right: -111px;
+ right: -222px;
width: 238px;
.alert-handle-line {
@@ -335,7 +335,7 @@
}
&--critical {
- right: -54px;
+ right: -105px;
width: 123px;
.alert-handle-line {