From 49673c509d54e522171bf8afc9aaf9ca01a3c1f3 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 25 Jan 2018 11:05:59 +0100 Subject: [PATCH] fixes broken phantomjs rendering when migrating from govendor to dep we broke the phantomjs rendering. ref #10602 --- .gitignore | 4 +- docs/sources/reference/sharing.md | 2 +- pkg/setting/setting.go | 2 +- scripts/grunt/options/phantomjs.js | 2 +- scripts/grunt/release_task.js | 2 +- tools/phantomjs/render.js | 86 ++++++++++++++++++++++++++++++ 6 files changed, 92 insertions(+), 6 deletions(-) create mode 100644 tools/phantomjs/render.js diff --git a/.gitignore b/.gitignore index deb1c1f882a..72f6684ef20 100644 --- a/.gitignore +++ b/.gitignore @@ -10,8 +10,8 @@ awsconfig /public_gen /public/vendor/npm /tmp -vendor/phantomjs/phantomjs -vendor/phantomjs/phantomjs.exe +tools/phantomjs/phantomjs +tools/phantomjs/phantomjs.exe profile.out coverage.txt diff --git a/docs/sources/reference/sharing.md b/docs/sources/reference/sharing.md index badd3b5712a..20aea1acd2e 100644 --- a/docs/sources/reference/sharing.md +++ b/docs/sources/reference/sharing.md @@ -39,7 +39,7 @@ Click a panel title to open the panel menu, then click share in the panel menu t ### Direct Link Rendered Image -You also get a link to service side rendered PNG of the panel. Useful if you want to share an image of the panel. Please note that for OSX and Windows, you will need to ensure that a `phantomjs` binary is available under `vendor/phantomjs/phantomjs`. For Linux, a `phantomjs` binary is included - however, you should ensure that any requisite libraries (e.g. libfontconfig) are available. +You also get a link to service side rendered PNG of the panel. Useful if you want to share an image of the panel. Please note that for OSX and Windows, you will need to ensure that a `phantomjs` binary is available under `tools/phantomjs/phantomjs`. For Linux, a `phantomjs` binary is included - however, you should ensure that any requisite libraries (e.g. libfontconfig) are available. Example of a link to a server-side rendered PNG: diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 8cdb94bd413..d236446eb71 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -578,7 +578,7 @@ func NewConfigContext(args *CommandLineArgs) error { // PhantomJS rendering ImagesDir = filepath.Join(DataPath, "png") - PhantomDir = filepath.Join(HomePath, "vendor/phantomjs") + PhantomDir = filepath.Join(HomePath, "tools/phantomjs") analytics := Cfg.Section("analytics") ReportingEnabled = analytics.Key("reporting_enabled").MustBool(true) diff --git a/scripts/grunt/options/phantomjs.js b/scripts/grunt/options/phantomjs.js index af7deff305c..8c4e8dbd254 100644 --- a/scripts/grunt/options/phantomjs.js +++ b/scripts/grunt/options/phantomjs.js @@ -3,7 +3,7 @@ module.exports = function(config,grunt) { grunt.registerTask('phantomjs', 'Copy phantomjs binary to vendor/', function() { - var dest = './vendor/phantomjs/phantomjs'; + var dest = './tools/phantomjs/phantomjs'; var confDir = './node_modules/phantomjs-prebuilt/lib/'; if (process.platform === "win32") { diff --git a/scripts/grunt/release_task.js b/scripts/grunt/release_task.js index 28208ed0086..4fbc41cfb08 100644 --- a/scripts/grunt/release_task.js +++ b/scripts/grunt/release_task.js @@ -26,7 +26,7 @@ module.exports = function(grunt) { }); grunt.config('copy.backend_files', { expand: true, - src: ['conf/**', 'vendor/phantomjs/*', 'scripts/*'], + src: ['conf/**', 'tools/phantomjs/*', 'scripts/*'], options: { mode: true}, dest: '<%= tempDir %>' }); diff --git a/tools/phantomjs/render.js b/tools/phantomjs/render.js new file mode 100644 index 00000000000..6ae9b5773b0 --- /dev/null +++ b/tools/phantomjs/render.js @@ -0,0 +1,86 @@ +(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= png= width= height= renderKey="; + + 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) { + msgStack.push('TRACE:'); + trace.forEach(function(t) { + msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : '')); + }); + } + 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 { + totalWaitMs += waitBetweenReadyCheckMs; + setTimeout(checkIsReady, waitBetweenReadyCheckMs); + } + } + + setTimeout(checkIsReady, waitBetweenReadyCheckMs); + }); + })(); \ No newline at end of file