mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
fix: refactoring #10922
This commit is contained in:
parent
4b4e38531b
commit
57103ec98a
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 @@
|
|||||||
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 @@
|
|||||||
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 @@
|
|||||||
&.total,
|
&.total,
|
||||||
&.avg {
|
&.avg {
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,42 +1,42 @@
|
|||||||
(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 @@
|
|||||||
}
|
}
|
||||||
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 @@
|
|||||||
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
|
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
|
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
Loading…
Reference in New Issue
Block a user