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);
       });
 
+      // check if we are in server side render
+      if (document.cookie.indexOf('renderKey') !== -1) {
+        body.addClass('body--phantomjs');
+      }
+
       // tooltip removal fix
       // manage page classes
       var pageClass;

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

@@ -234,24 +234,6 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
           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) {
           addScrollbar();
         } else {

public/sass/components/_dashboard_grid.scss

@@ -41,8 +41,8 @@
 
 .theme-dark {
   .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%;
   text-align: left;
   &.current::before {
-    content: "Current: ";
+    content: 'Current: ';
   }
   &.max::before {
-    content: "Max: ";
+    content: 'Max: ';
   }
   &.min::before {
-    content: "Min: ";
+    content: 'Min: ';
   }
   &.total::before {
-    content: "Total: ";
+    content: 'Total: ';
   }
   &.avg::before {
-    content: "Avg: ";
+    content: 'Avg: ';
   }
 }
 
@@ -106,6 +106,12 @@
   padding-left: 6px;
 }
 
+.body--phantomjs {
+  .graph-legend-table {
+    display: table;
+  }
+}
+
 .graph-legend-table {
   tbody {
     display: block;
@@ -124,7 +130,7 @@
       float: none;
 
       .graph-legend-alias::after {
-        content: "(right-y)";
+        content: '(right-y)';
         padding: 0 5px;
         color: $text-color-weak;
       }
@@ -175,7 +181,7 @@
     &.total,
     &.avg {
       &::before {
-        content: "";
+        content: '';
       }
     }
   }

tools/phantomjs/render.js

@@ -1,42 +1,42 @@
 (function() {
     'use strict';
-  
+
     var page = require('webpage').create();
     var args = require('system').args;
     var params = {};
     var regexp = /^([^=]+)=([^$]+)/;
-  
+
     args.forEach(function(arg) {
       var parts = arg.match(regexp);
       if (!parts) { return; }
       params[parts[1]] = parts[2];
     });
-  
+
     var usage = "url=<url> png=<filename> width=<width> height=<height> renderKey=<key>";
-  
+
     if (!params.url || !params.png ||  !params.renderKey || !params.domain) {
       console.log(usage);
       phantom.exit();
     }
-  
+
     phantom.addCookie({
       'name': 'renderKey',
       'value': params.renderKey,
       'domain': params.domain,
     });
-  
+
     page.viewportSize = {
       width: params.width || '800',
       height: params.height || '400'
     };
-  
+
     var timeoutMs = (parseInt(params.timeout) || 10) * 1000;
     var waitBetweenReadyCheckMs = 50;
     var totalWaitMs = 0;
-  
+
     page.open(params.url, function (status) {
       console.log('Loading a web page: ' + params.url + ' status: ' + status, timeoutMs);
-  
+
       page.onError = function(msg, trace) {
         var msgStack = ['ERROR: ' + msg];
         if (trace && trace.length) {
@@ -47,32 +47,32 @@
         }
         console.error(msgStack.join('\n'));
       };
-  
+
       function checkIsReady() {
         var panelsRendered = page.evaluate(function() {
           if (!window.angular) { return false; }
           var body = window.angular.element(document.body);
           if (!body.injector) { return false; }
           if (!body.injector()) { return false; }
-  
+
           var rootScope = body.injector().get('$rootScope');
           if (!rootScope) {return false;}
           var panels = angular.element('div.panel:visible').length;
           return rootScope.panelsRendered >= panels;
         });
-  
+
         if (panelsRendered || totalWaitMs > timeoutMs) {
           var bb = page.evaluate(function () {
             return document.getElementsByClassName("main-view")[0].getBoundingClientRect();
           });
-  
+
           page.clipRect = {
             top:    bb.top,
             left:   bb.left,
             width:  bb.width,
             height: bb.height
           };
-  
+
           page.render(params.png);
           phantom.exit();
         } else {
@@ -80,7 +80,7 @@
           setTimeout(checkIsReady, waitBetweenReadyCheckMs);
         }
       }
-  
+
       setTimeout(checkIsReady, waitBetweenReadyCheckMs);
     });
-  })();
+  })();