Skip to content

N
nexpie-grafana-theme
Commit 57103ec9 by Torkel Ödegaard
Options

fix: refactoring #10922

parent 4b4e3853
Showing with 36 additions and 44 deletions
public/app/core/components/grafana_app.ts
...@@ -87,6 +87,11 @@ export function grafanaAppDirective(playlistSrv, contextSrv, $timeout, $rootScop ...@@ -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) { ...@@ -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 @@ ...@@ -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-right: 2px solid $gray-1;
border-bottom: 2px solid $gray-4; border-bottom: 2px solid $gray-1;
} }
} }
......
public/sass/components/_panel_graph.scss
...@@ -70,19 +70,19 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -175,7 +181,7 @@
&.total, &.total,
&.avg { &.avg {
&::before { &::before {
content: ""; content: '';
} }
} }
} }
......
tools/phantomjs/render.js
(function() { (function() {
'use strict'; 'use strict';
var page = require('webpage').create(); var page = require('webpage').create();
var args = require('system').args; var args = require('system').args;
var params = {}; var params = {};
var regexp = /^([^=]+)=([^$]+)/; var regexp = /^([^=]+)=([^$]+)/;
args.forEach(function(arg) { args.forEach(function(arg) {
var parts = arg.match(regexp); var parts = arg.match(regexp);
if (!parts) { return; } if (!parts) { return; }
params[parts[1]] = parts[2]; params[parts[1]] = parts[2];
}); });
var usage = "url=<url> png=<filename> width=<width> height=<height> renderKey=<key>"; var usage = "url=<url> png=<filename> width=<width> height=<height> renderKey=<key>";
if (!params.url || !params.png || !params.renderKey || !params.domain) { if (!params.url || !params.png || !params.renderKey || !params.domain) {
console.log(usage); console.log(usage);
phantom.exit(); phantom.exit();
} }
phantom.addCookie({ phantom.addCookie({
'name': 'renderKey', 'name': 'renderKey',
'value': params.renderKey, 'value': params.renderKey,
'domain': params.domain, 'domain': params.domain,
}); });
page.viewportSize = { page.viewportSize = {
width: params.width || '800', width: params.width || '800',
height: params.height || '400' height: params.height || '400'
}; };
var timeoutMs = (parseInt(params.timeout) || 10) * 1000; var timeoutMs = (parseInt(params.timeout) || 10) * 1000;
var waitBetweenReadyCheckMs = 50; var waitBetweenReadyCheckMs = 50;
var totalWaitMs = 0; var totalWaitMs = 0;
page.open(params.url, function (status) { page.open(params.url, function (status) {
console.log('Loading a web page: ' + params.url + ' status: ' + status, timeoutMs); console.log('Loading a web page: ' + params.url + ' status: ' + status, timeoutMs);
page.onError = function(msg, trace) { page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg]; var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) { if (trace && trace.length) {
...@@ -47,32 +47,32 @@ ...@@ -47,32 +47,32 @@
} }
console.error(msgStack.join('\n')); console.error(msgStack.join('\n'));
}; };
function checkIsReady() { function checkIsReady() {
var panelsRendered = page.evaluate(function() { var panelsRendered = page.evaluate(function() {
if (!window.angular) { return false; } if (!window.angular) { return false; }
var body = window.angular.element(document.body); var body = window.angular.element(document.body);
if (!body.injector) { return false; } if (!body.injector) { return false; }
if (!body.injector()) { return false; } if (!body.injector()) { return false; }
var rootScope = body.injector().get('$rootScope'); var rootScope = body.injector().get('$rootScope');
if (!rootScope) {return false;} if (!rootScope) {return false;}
var panels = angular.element('div.panel:visible').length; var panels = angular.element('div.panel:visible').length;
return rootScope.panelsRendered >= panels; return rootScope.panelsRendered >= panels;
}); });
if (panelsRendered || totalWaitMs > timeoutMs) { if (panelsRendered || totalWaitMs > timeoutMs) {
var bb = page.evaluate(function () { var bb = page.evaluate(function () {
return document.getElementsByClassName("main-view")[0].getBoundingClientRect(); return document.getElementsByClassName("main-view")[0].getBoundingClientRect();
}); });
page.clipRect = { page.clipRect = {
top: bb.top, top: bb.top,
left: bb.left, left: bb.left,
width: bb.width, width: bb.width,
height: bb.height height: bb.height
}; };
page.render(params.png); page.render(params.png);
phantom.exit(); phantom.exit();
} else { } else {
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
setTimeout(checkIsReady, waitBetweenReadyCheckMs); setTimeout(checkIsReady, waitBetweenReadyCheckMs);
} }
} }
setTimeout(checkIsReady, waitBetweenReadyCheckMs); setTimeout(checkIsReady, waitBetweenReadyCheckMs);
}); });
})(); })();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment