Graph: fixed PNG rendering of panels with legend table to the right, grafana#2185

Author: torkelo

CHANGELOG.md

@@ -28,6 +28,9 @@
 - Search HTTP API response has changed (simplified), tags list moved to seperate HTTP resource URI
 - Datasource HTTP api breaking change, ADD datasource is now POST /api/datasources/, update is now PUT /api/datasources/:id
 
+**Fixes**
+- [Issue #2185](https://github.com/grafana/grafana/issues/2185). Graph: fixed PNG rendering of panels with legend table to the right
+
 # 2.0.3 (unreleased - 2.0.x branch)
 
 **Fixes**

pkg/components/renderer/renderer.go

@@ -54,7 +54,7 @@ func RenderToPng(params *RenderOpts) (string, error) {
 	}()
 
 	select {
-	case <-time.After(10 * time.Second):
+	case <-time.After(15 * time.Second):
 		if err := cmd.Process.Kill(); err != nil {
 			log.Error(4, "failed to kill: %v", err)
 		}

public/app/features/dashboard/dashboardCtrl.js

@@ -84,6 +84,7 @@ function (angular, $, config) {
     };
 
     $scope.broadcastRefresh = function() {
+      $rootScope.performance.panelsRendered = 0;
       $rootScope.$broadcast('refresh');
     };
 

public/app/features/dashboard/dynamicDashboardSrv.js

@@ -164,6 +164,7 @@ function (angular, _) {
 
       _.each(selected, function(option, index) {
         var copy = self.getPanelClone(panel, row, index);
+        copy.span = 12 / selected.length;
         copy.scopedVars = copy.scopedVars || {};
         copy.scopedVars[variable.name] = option;
       });

public/app/features/panel/panelSrv.js

@@ -86,6 +86,10 @@ function (angular, _, config) {
         return datasourceSrv.get($scope.panel.datasource);
       };
 
+      $scope.panelRenderingComplete = function() {
+        $rootScope.performance.panelsRendered++;
+      };
+
       $scope.get_data = function() {
         if ($scope.otherPanelInFullscreenMode()) { return; }
 

public/app/panels/dashlist/module.js

@@ -66,6 +66,7 @@ function (angular, app, _, config, PanelMeta) {
 
       return backendSrv.search(params).then(function(result) {
         $scope.dashList = result;
+        $scope.panelRenderingComplete();
       });
     };
 

public/app/panels/graph/graph.js

@@ -247,22 +247,26 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
 
           sortedSeries = _.sortBy(data, function(series) { return series.zindex; });
 
-          function callPlot() {
+          function callPlot(incrementRenderCounter) {
             try {
               $.plot(elem, sortedSeries, options);
             } catch (e) {
               console.log('flotcharts error', e);
             }
+
+            if (incrementRenderCounter) {
+              scope.panelRenderingComplete();
+            }
           }
 
           if (shouldDelayDraw(panel)) {
             // temp fix for legends on the side, need to render twice to get dimensions right
-            callPlot();
-            setTimeout(callPlot, 50);
+            callPlot(false);
+            setTimeout(function() { callPlot(true); }, 50);
             legendSideLastValue = panel.legend.rightSide;
           }
           else {
-            callPlot();
+            callPlot(true);
           }
         }
 

public/app/panels/singlestat/singleStatPanel.js

@@ -20,6 +20,7 @@ function (angular, app, _, $) {
 
         scope.$on('render', function() {
           render();
+          scope.panelRenderingComplete();
         });
 
         function setElementHeight() {

public/app/panels/text/module.js

@@ -61,6 +61,7 @@ function (angular, app, _, require, PanelMeta) {
       else if ($scope.panel.mode === 'text') {
         $scope.renderText($scope.panel.content);
       }
+      $scope.panelRenderingComplete();
     };
 
     $scope.renderText = function(content) {

public/test/specs/graph-specs.js

@@ -36,6 +36,7 @@ define([
               }
             };
 
+            scope.panelRenderingComplete = sinon.spy();
             scope.appEvent = sinon.spy();
             scope.onAppEvent = sinon.spy();
             scope.hiddenSeries = {};

vendor/phantomjs/render.js

@@ -34,10 +34,12 @@ page.open(params.url, function (status) {
 
   function checkIsReady() {
     var canvas = page.evaluate(function() {
-      return $('canvas').length > 0;
+      var body = angular.element(document.body);   // 1
+      var rootScope = body.scope().$root;
+      return rootScope.performance.panelsRendered > 0;
     });
 
-    if (canvas || tries === 100) {
+    if (canvas || tries === 1000) {
       page.render(params.png);
       phantom.exit();
     }