fix: refactoring #10922

public/app/core/components/grafana_app.ts

@@ -87,6 +87,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop
         elem.toggleClass('playlist-active', newValue === true);
         elem.toggleClass('playlist-active', newValue === true);
       });
       });
 
 
+      // check if we are in server side render
+      if (document.cookie.indexOf('renderKey') !== -1) {
+        body.addClass('body--phantomjs');
+      }
+
       // tooltip removal fix
       // tooltip removal fix
       // manage page classes
       // manage page classes
       var pageClass;
       var pageClass;

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

@@ -234,24 +234,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           elem.append(seriesElements);
           elem.append(seriesElements);
         }
         }
 
 
-        // Phantomjs has rendering issue for CSS float property, so when legend values are present, legend takes
-        // all graph width and rendering fails. So it should be handled to avoid rendering timeout.
-        // See issue #10526 https://github.com/grafana/grafana/issues/10526
-        if (panel.legend.rightSide) {
-          const legendWidth = elem.parent().width();
-          const panelWidth = elem.parent().width();
-          let maxLegendElementWidth = _.max(_.map(seriesElements, el => $(el).width()));
-          maxLegendElementWidth = _.isNumber(maxLegendElementWidth) ? maxLegendElementWidth : 0;
-          const widthDiff = Math.abs(panelWidth - maxLegendElementWidth);
-          // Set width to content size, but table takes all space anyway, so width shouldn't be more
-          // than 40% of panel in this case.
-          if (widthDiff < panelWidth * 0.1 || legendWidth > panelWidth * 0.9) {
-            const maxTableWidthPercent = 0.4;
-            const maxWidth = Math.min(Math.ceil(maxLegendElementWidth * 1.05), panelWidth * maxTableWidthPercent);
-            elem.css('max-width', maxWidth);
-          }
-        }
-
         if (!panel.legend.rightSide) {
         if (!panel.legend.rightSide) {
           addScrollbar();
           addScrollbar();
         } else {
         } else {

public/sass/components/_dashboard_grid.scss

@@ -41,8 +41,8 @@
 
 
 .theme-dark {
 .theme-dark {
   .react-grid-item > .react-resizable-handle::after {
   .react-grid-item > .react-resizable-handle::after {
-    border-right: 2px solid $gray-4;
-    border-bottom: 2px solid $gray-4;
+    border-right: 2px solid $gray-1;
+    border-bottom: 2px solid $gray-1;
   }
   }
 }
 }
 
 

public/sass/components/_panel_graph.scss

@@ -70,19 +70,19 @@
   font-size: 85%;
   font-size: 85%;
   text-align: left;
   text-align: left;
   &.current::before {
   &.current::before {
-    content: "Current: ";
+    content: 'Current: ';
   }
   }
   &.max::before {
   &.max::before {
-    content: "Max: ";
+    content: 'Max: ';
   }
   }
   &.min::before {
   &.min::before {
-    content: "Min: ";
+    content: 'Min: ';
   }
   }
   &.total::before {
   &.total::before {
-    content: "Total: ";
+    content: 'Total: ';
   }
   }
   &.avg::before {
   &.avg::before {
-    content: "Avg: ";
+    content: 'Avg: ';
   }
   }
 }
 }
 
 
@@ -106,6 +106,12 @@
   padding-left: 6px;
   padding-left: 6px;
 }
 }
 
 
+.body--phantomjs {
+  .graph-legend-table {
+    display: table;
+  }
+}
+
 .graph-legend-table {
 .graph-legend-table {
   tbody {
   tbody {
     display: block;
     display: block;
@@ -124,7 +130,7 @@
       float: none;
       float: none;
 
 
       .graph-legend-alias::after {
       .graph-legend-alias::after {
-        content: "(right-y)";
+        content: '(right-y)';
         padding: 0 5px;
         padding: 0 5px;
         color: $text-color-weak;
         color: $text-color-weak;
       }
       }
@@ -175,7 +181,7 @@
     &.total,
     &.total,
     &.avg {
     &.avg {
       &::before {
       &::before {
-        content: "";
+        content: '';
       }
       }
     }
     }
   }
   }