diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js index 23c9cd65a9f..13dcf76857d 100755 --- a/public/app/plugins/panel/graph/graph.js +++ b/public/app/plugins/panel/graph/graph.js @@ -169,7 +169,6 @@ function (angular, $, moment, _, kbn, GraphTooltip) { var right = panel.yaxes[1]; if (left.show && left.label) { gridMargin.left = 20; } if (right.show && right.label) { gridMargin.right = 20; } - } // Function for rendering panel diff --git a/public/app/plugins/panel/graph/jquery.flot.alerts.ts b/public/app/plugins/panel/graph/jquery.flot.alerts.ts index 65229b31065..1ce4783cdf9 100644 --- a/public/app/plugins/panel/graph/jquery.flot.alerts.ts +++ b/public/app/plugins/panel/graph/jquery.flot.alerts.ts @@ -22,6 +22,17 @@ function getHandleTemplate(type, op, value) { `; } +var dragGhostElem = document.createElement('div'); + +function dragStartHandler(evt) { + evt.dataTransfer.setDragImage(dragGhostElem, -99999, -99999); +} + +function dragEndHandler() { + console.log('drag end'); +} + +var past; function drawAlertHandles(plot) { var options = plot.getOptions(); @@ -36,7 +47,7 @@ function drawAlertHandles(plot) { var height = plot.height(); function renderHandle(type, model) { - var $handle = $placeholder.find(`.alert-handle-${type}`); + var $handle = $placeholder.find(`.alert-handle-wrapper--${type}`); if (!_.isNumber(model.level)) { $handle.remove(); @@ -44,15 +55,19 @@ function drawAlertHandles(plot) { } if ($handle.length === 0) { + console.log('not found'); $handle = $(getHandleTemplate(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)); } var levelCanvasPos = plot.p2c({x: 0, y: model.level}); - console.log('canvas level pos', levelCanvasPos.top); - var levelTopPos = Math.min(Math.max(levelCanvasPos.top, 0), height) - 6; $handle.css({top: levelTopPos}); } @@ -62,6 +77,7 @@ function drawAlertHandles(plot) { } function shutdown() { + console.log('shutdown'); } function init(plot, classes) { diff --git a/public/app/plugins/panel/graph/partials/tab_alerting.html b/public/app/plugins/panel/graph/partials/tab_alerting.html index a81bbe2f996..a90c3b78209 100644 --- a/public/app/plugins/panel/graph/partials/tab_alerting.html +++ b/public/app/plugins/panel/graph/partials/tab_alerting.html @@ -36,28 +36,28 @@ -
-
Levels
-
-
- - - Warn if - - - -
-
- - - Critcal if - - - -
-
-
- + + + + + + + + + + + + + + + + + + + + + +
diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 20b9376b7dd..4eb8b703534 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -317,9 +317,10 @@ .alert-handle-wrapper { position: absolute; + user-select: none; &--warn { - right: -221px; + right: -111px; width: 238px; .alert-handle-line { @@ -334,7 +335,7 @@ } &--critical { - right: -105px; + right: -54px; width: 123px; .alert-handle-line { @@ -353,7 +354,7 @@ z-index: 10; position: relative; float: right; - padding: 0.4rem;; + padding: 0.4rem 0.6rem 0.4rem 0.4rem; background-color: $btn-inverse-bg; box-shadow: $search-shadow; cursor: pointer; @@ -364,11 +365,13 @@ border-width: 0 1px 1px 0; border-style: solid; border-color: $black; + text-align: right; .icon-gf { font-size: 17px; position: relative; - top: 2px; + top: 0px; + float: left; } } diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js index 380030a77c9..e2c460ddbd0 100644 --- a/public/vendor/flot/jquery.flot.js +++ b/public/vendor/flot/jquery.flot.js @@ -1322,7 +1322,7 @@ Licensed under the MIT license. placeholder.css("padding", 0) // padding messes up the positioning .children().filter(function(){ - return !$(this).hasClass("flot-overlay") && !$(this).hasClass('flot-base'); + return $(this).hasClass("flot-text"); }).remove(); if (placeholder.css("position") == 'static')