feat(alerting): more work on alerting ui

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

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) {

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

@@ -36,28 +36,28 @@
     </div>
   </div>
 
-  <div class="gf-form-group section">
-    <h5 class="section-heading">Levels</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <span class="gf-form-label">
-          <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
-          Warn if
-        </span>
-        <metric-segment-model property="ctrl.alert.warn.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.warn.level" ng-change="ctrl.levelsUpdated()"></input>
-      </div>
-      <div class="gf-form">
-        <span class="gf-form-label">
-          <i class="icon-gf icon-gf-warn alert-icon-critical"></i>
-          Critcal if
-        </span>
-        <metric-segment-model property="ctrl.alert.critical.op" options="ctrl.levelOpList" custom="false" css-class="query-segment-operator"></metric-segment-model>
-        <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.alert.critical.level" ng-change="ctrl.levelsUpdated()"></input>
-      </div>
-    </div>
-  </div>
-</div>
+<!--   <div class="gf&#45;form&#45;group section"> -->
+<!--     <h5 class="section&#45;heading">Levels</h5> -->
+<!--     <div class="gf&#45;form&#45;inline"> -->
+<!--       <div class="gf&#45;form"> -->
+<!--         <span class="gf&#45;form&#45;label"> -->
+<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;warn"></i> -->
+<!--           Warn if -->
+<!--         </span> -->
+<!--         <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> -->
+<!--         <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> -->
+<!--       </div> -->
+<!--       <div class="gf&#45;form"> -->
+<!--         <span class="gf&#45;form&#45;label"> -->
+<!--           <i class="icon&#45;gf icon&#45;gf&#45;warn alert&#45;icon&#45;critical"></i> -->
+<!--           Critcal if -->
+<!--         </span> -->
+<!--         <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> -->
+<!--         <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> -->
+<!--       </div> -->
+<!--     </div> -->
+<!--   </div> -->
+<!-- </div> -->
 
 <div class="editor-row">
   <div class="gf-form-group section">

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;
     }
   }
 

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')