diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 70a1bda3e8b..798a40cb1bf 100644 --- a/public/app/core/components/grafana_app.ts +++ b/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; diff --git a/public/app/plugins/panel/graph/legend.ts b/public/app/plugins/panel/graph/legend.ts index 2c4f7c6b01b..cd43ac58469 100644 --- a/public/app/plugins/panel/graph/legend.ts +++ b/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 { diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 8af9a173312..0a27df75164 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/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; } } diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index d03c8e0efb3..d60b298d3d4 100644 --- a/public/sass/components/_panel_graph.scss +++ b/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: ''; } } } diff --git a/tools/phantomjs/render.js b/tools/phantomjs/render.js index 6ae9b5773b0..77527585589 100644 --- a/tools/phantomjs/render.js +++ b/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= 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) { @@ -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); }); - })(); \ No newline at end of file + })();