refactoring: changing how graph height and legend height is calculated, using flex box seems to actually work, #10079

public/app/features/panel/panel_directive.ts

@@ -20,7 +20,7 @@ var panelTemplate = `
     </div>
 
     <div class="panel-content">
-      <ng-transclude></ng-transclude>
+      <ng-transclude class="panel-height-helper"></ng-transclude>
     </div>
   </div>
 

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

@@ -92,48 +92,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
         }
       }, scope);
 
-      function getLegendHeight(panelHeight) {
-        const LEGEND_PADDING = 23;
-
-        if (!panel.legend.show || panel.legend.rightSide) {
-          return 0;
-        }
-
-        let legendHeight = getLegendContainerHeight() + LEGEND_PADDING;
-        return Math.min(legendHeight, Math.floor(panelHeight/2));
-      }
-
-      function getLegendContainerHeight() {
-        try {
-          let graphWrapperElem = elem.parent().parent();
-          let legendElem = graphWrapperElem.find('.graph-legend-wrapper');
-          let legendHeight = legendElem.height();
-          return legendHeight;
-        } catch (e) {
-          console.log(e);
-          return 0;
-        }
-      }
-
-      function setElementHeight() {
-        try {
-          var height = ctrl.height - getLegendHeight(ctrl.height);
-          elem.css('height', height + 'px');
-
-          return true;
-        } catch (e) { // IE throws errors sometimes
-          console.log(e);
-          return false;
-        }
-      }
-
       function shouldAbortRender() {
         if (!data) {
           return true;
         }
 
-        if (!setElementHeight()) { return true; }
-
         if (panelWidth === 0) {
           return true;
         }
@@ -152,6 +115,10 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
           $("<div class='axisLabel right-yaxis-label flot-temp-elem'></div>").text(panel.yaxes[1].label).appendTo(elem);
         }
 
+        if (ctrl.dataWarning) {
+          $(`<div class="datapoints-warning flot-temp-elem">${ctrl.dataWarning.title}</div>`).appendTo(elem);
+        }
+
         thresholdManager.draw(plot);
       }
 

public/app/plugins/panel/graph/legend.ts

@@ -10,7 +10,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
 
   return {
     link: function(scope, elem) {
-      var $container = $('<section class="graph-legend"></section>');
       var firstRender = true;
       var ctrl = scope.ctrl;
       var panel = ctrl.panel;
@@ -20,7 +19,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
       var legendScrollbar;
 
       scope.$on("$destroy", function() {
-        legendScrollbar.destroy();
+        if (!legendScrollbar) {
+          legendScrollbar.destroy();
+        }
       });
 
       ctrl.events.on('render-legend', () => {
@@ -73,9 +74,9 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         var el = $(e.currentTarget);
         var index = getSeriesIndexForElement(el);
         var seriesInfo = seriesList[index];
-        var scrollPosition = $($container.children('tbody')).scrollTop();
+        var scrollPosition = $(elem.children('tbody')).scrollTop();
         ctrl.toggleSeries(seriesInfo, e);
-        $($container.children('tbody')).scrollTop(scrollPosition);
+        $(elem.children('tbody')).scrollTop(scrollPosition);
       }
 
       function sortLegend(e) {
@@ -117,22 +118,21 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         }
 
         if (firstRender) {
-          elem.append($container);
-          $container.on('click', '.graph-legend-icon', openColorSelector);
-          $container.on('click', '.graph-legend-alias', toggleSeries);
-          $container.on('click', 'th', sortLegend);
+          elem.on('click', '.graph-legend-icon', openColorSelector);
+          elem.on('click', '.graph-legend-alias', toggleSeries);
+          elem.on('click', 'th', sortLegend);
           firstRender = false;
         }
 
         seriesList = data;
 
-        $container.empty();
+        elem.empty();
 
         // Set min-width if side style and there is a value, otherwise remove the CSS propery
         var width = panel.legend.rightSide && panel.legend.sideWidth ? panel.legend.sideWidth + "px" : "";
-        $container.css("min-width", width);
+        elem.css("min-width", width);
 
-        $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
+        elem.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
 
         var tableHeaderElem;
         if (panel.legend.alignAsTable) {
@@ -162,7 +162,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         if (!panel.legend.rightSide) {
           renderLegendElement(tableHeaderElem);
           updateLegendDecimals();
-          $container.empty();
+          elem.empty();
         } else {
           updateLegendDecimals();
         }
@@ -214,26 +214,17 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
         var seriesElements = renderSeriesLegendElements();
 
         if (panel.legend.alignAsTable) {
-          var maxHeight = ctrl.height;
-
-          if (!panel.legend.rightSide) {
-            maxHeight = maxHeight/2;
-          }
-
-          var topPadding = 6;
           var tbodyElem = $('<tbody></tbody>');
-          tbodyElem.css("max-height", maxHeight - topPadding);
           tbodyElem.append(tableHeaderElem);
           tbodyElem.append(seriesElements);
-          $container.append(tbodyElem);
+          elem.append(tbodyElem);
         } else {
-          var maxLegendHeight = ctrl.height / 2;
-          $container.css("max-height", maxLegendHeight - 6);
-          $container.append(seriesElements);
+          elem.append(seriesElements);
+        }
 
-          if (!legendScrollbar) {
-            legendScrollbar = new PerfectScrollbar($container[0]);
-          }
+        if (!legendScrollbar) {
+          legendScrollbar = new PerfectScrollbar(elem[0]);
+        } else {
           legendScrollbar.update();
         }
       }

public/app/plugins/panel/graph/template.ts

@@ -1,22 +1,10 @@
 var template = `
-<div class="graph-wrapper" ng-class="{'graph-legend-rightside': ctrl.panel.legend.rightSide}">
-  <div class="graph-canvas-wrapper">
-
-    <div class="datapoints-warning" ng-if="ctrl.dataWarning">
-      <span class="small" bs-tooltip="ctrl.dataWarning.tip">{{ctrl.dataWarning.title}}</span>
-    </div>
-
-    <div grafana-graph class="histogram-chart" ng-dblclick="ctrl.zoomOut()">
-    </div>
-
+<div class="graph-panel" ng-class="{'graph-panel--legend-right': ctrl.panel.legend.rightSide}">
+  <div class="graph-panel__chart" grafana-graph ng-dblclick="ctrl.zoomOut()">
   </div>
 
-  <div class="graph-legend-wrapper" graph-legend></div>
-  </div>
-
-<div class="clearfix"></div>
+  <div class="graph-legend" graph-legend></div>
+</div>
 `;
 
 export default template;
-
-

public/sass/components/_panel_graph.scss

@@ -1,10 +1,39 @@
-.graph-canvas-wrapper {
-  position: relative;
-  cursor: crosshair;
+.graph-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &--legend-right {
+    flex-direction: row;
+
+    // .graph-panel__chart {
+      //   display: table-cell;
+      //   width: 100%;
+      //   position: relative;
+    // }
+
+    .graph-legend {
+      max-height: 100%;
+      position: relative;
+      left: 4px;
+      margin: 0 0 0 1rem;
+    }
+
+    .graph-legend-series {
+      display: block;
+      padding-left: 0px;
+    }
+
+    .graph-legend-table .graph-legend-series {
+      display: table-row;
+    }
+  }
 }
 
-.histogram-chart {
+.graph-panel__chart {
   position: relative;
+  cursor: crosshair;
+  flex-grow: 1;
 }
 
 .datapoints-warning {
@@ -23,6 +52,8 @@
 
 .graph-legend {
   @include clearfix();
+  flex: 0 1 auto;
+  max-height: 30%;
   margin: 0 $spacer;
   text-align: center;
   width: calc(100% - $spacer);
@@ -161,39 +192,6 @@
   }
 }
 
-.graph-legend-rightside {
-
-  &.graph-wrapper {
-    display: table;
-    width: 100%;
-  }
-
-  .graph-canvas-wrapper {
-    display: table-cell;
-    width: 100%;
-    position: relative;
-  }
-
-  .graph-legend-wrapper {
-    display: table-cell;
-    vertical-align: top;
-    position: relative;
-    left: 4px;
-  }
-
-  .graph-legend {
-    margin: 0 0 0 1rem;
-  }
-
-  .graph-legend-series {
-    display: block;
-    padding-left: 0px;
-  }
-
-  .graph-legend-table .graph-legend-series {
-    display: table-row;
-  }
-}
 
 .graph-legend-series-hidden {
   .graph-legend-value,