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);
|
||||
});
|
||||
|
||||
// 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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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=<url> png=<filename> width=<width> height=<height> renderKey=<key>";
|
||||
|
||||
|
||||
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);
|
||||
});
|
||||
})();
|
||||
})();
|
||||
|
Loading…
Reference in New Issue
Block a user