[Reporting] Use the real dimensions when taking a screenshot by ersin-erdal · Pull Request #242127 · elastic/kibana

ersin-erdal · 2025-11-06T12:24:18Z

Current reporting jobs get the dimensions of the element we want to screenshot in the params and uses them to set the viewport dimensions and the image dimensions. This causes the skewed images problem when there is another element next to the element we want to screenshot.
F.I.:
UI passes the element dimensions: 1200x760

When there is no another element next to the target element, viewport: 1200x760 and screenshot size 1200x760. No problem.
When there is an element (100px wide) next to the target element viewport: 1200x760, screenshot size becomes: 1100x760. And when we want to add that image back into a PDF we use the params we got from the UI: 1200x760. Therefore the image becomes stretched.

This PR solves this problem by using the real dimensions of the target element, by getting them during the execution.

To verify:

Generate a PDF report for a dashboard, the screenshot in it shouldn't be stretched.
Generate a PDF report for a dashboard in a solution view, the screenshot in it shouldn't be stretched.

To use a solution view: Stack Management > spaces then edit the space you are in, Select a solution view other than classic
Generate a PDF report for a dashboard in a solution view with the new grid layout, the screenshot in it shouldn't be stretched.

Same as the above just use the below config in your kibana.yml

feature_flags.overrides:
  core.chrome.layoutType: 'grid'

elasticmachine · 2025-11-10T12:25:37Z

Pinging @elastic/response-ops (Team:ResponseOps)

nreese

kibana-presentation changes LGTM - just an updated to a baseline snapshot image
code review only

pmuellr

LGTM, but I think we should wait for #242780 to be merged, so we can test PDF/print

darnautov · 2025-11-14T10:49:18Z

x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/driver.test.ts

+
+    const layout = new PreserveLayout({} as Size);
+
+    const testSpy = jest.spyOn(layout, 'setPdfImageSize');


I noticed this file is missing

afterEach(() => { jest.resetAllMocks(); });

Could you please add it?

darnautov · 2025-11-14T11:09:59Z

src/platform/packages/private/kbn-reporting/public/share/shared/get_png_pdf_job_params.ts

 import type { JobParamsProviderOptions } from '../share_context_menu';

 const getBaseParams = (objectType: string) => {
+  const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);


❓ Do we actually need the second part? I assume we don’t need to account for scrollbar width when taking screenshots

Suggested change

const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

const viewportWidth = document.documentElement.clientWidth;

This is for the old browsers. Looks like document.documentElement.clientWidth doesn't work for some old browsers.

elasticmachine · 2025-11-15T22:51:04Z

💚 Build Succeeded

Buildkite Build
Commit: ab634bd

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`reporting`	125.8KB	126.0KB	+219.0B

History

💔 Build #361550 failed 9189abc
💚 Build #359359 succeeded 67db352
💔 Build #359177 failed fc017fc
💔 Build #358976 failed 63e1a2f

…#242127) Resolves: elastic#238028 Current reporting jobs get the dimensions of the element we want to screenshot in the params and uses them to set the viewport dimensions and the image dimensions. This causes the skewed images problem when there is another element next to the element we want to screenshot. F.I.: UI passes the element dimensions: 1200x760 - When there is **no another** element next to the target element, viewport: 1200x760 and screenshot size 1200x760. No problem. - When there is an element (100px wide) next to the target element viewport: 1200x760, screenshot size becomes: 1100x760. And when we want to add that image back into a PDF we use the params we got from the UI: 1200x760. Therefore the image becomes stretched. This PR solves this problem by using the real dimensions of the target element, by getting them during the execution. ## To verify: - Generate a PDF report for a dashboard, the screenshot in it shouldn't be stretched. - Generate a PDF report for a dashboard in a solution view, the screenshot in it shouldn't be stretched. <br> To use a solution view: `Stack Management > spaces` then edit the space you are in, `Select a solution view other than classic` - Generate a PDF report for a dashboard in a solution view with the new grid layout, the screenshot in it shouldn't be stretched. <br> Same as the above just use the below config in your kibana.yml ``` feature_flags.overrides: core.chrome.layoutType: 'grid' ```

[Reporting] Use the real dimensions when taking a screenshot

63e1a2f

ersin-erdal added release_note:fix backport:skip This PR does not require backporting Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// Feature:Reporting:Screenshot Reporting issues pertaining to PNG/PDF file export labels Nov 6, 2025

ersin-erdal and others added 4 commits November 6, 2025 21:34

fix unit tests

d220c49

fix functional test

fc017fc

update the map

916c6e1

Merge branch 'main' into skewed-reporting-screenshots

67db352

ersin-erdal marked this pull request as ready for review November 10, 2025 12:25

ersin-erdal requested review from a team as code owners November 10, 2025 12:25

nreese approved these changes Nov 10, 2025

View reviewed changes

ersin-erdal requested a review from Dosant November 13, 2025 09:52

pmuellr approved these changes Nov 14, 2025

View reviewed changes

darnautov reviewed Nov 14, 2025

View reviewed changes

ersin-erdal and others added 2 commits November 14, 2025 21:17

add reset mocks

9189abc

Merge branch 'main' into skewed-reporting-screenshots

ab634bd

Merge branch 'main' into skewed-reporting-screenshots

387b8fa

darnautov approved these changes Nov 18, 2025

View reviewed changes

Merge branch 'main' into skewed-reporting-screenshots

2130945

ersin-erdal merged commit acb1205 into elastic:main Nov 18, 2025
12 checks passed

kibanamachine added the v9.3.0 label Nov 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Reporting] Use the real dimensions when taking a screenshot#242127

[Reporting] Use the real dimensions when taking a screenshot#242127
ersin-erdal merged 9 commits intoelastic:mainfrom
ersin-erdal:skewed-reporting-screenshots

ersin-erdal commented Nov 6, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Nov 10, 2025

Uh oh!

nreese left a comment

Uh oh!

pmuellr left a comment

Uh oh!

darnautov Nov 14, 2025

Uh oh!

darnautov Nov 14, 2025

Uh oh!

ersin-erdal Nov 14, 2025

Uh oh!

elasticmachine commented Nov 15, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants


		const layout = new PreserveLayout({} as Size);

		const testSpy = jest.spyOn(layout, 'setPdfImageSize');

	const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	const viewportWidth = document.documentElement.clientWidth;

Conversation

ersin-erdal commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

To verify:

Uh oh!

elasticmachine commented Nov 10, 2025

Uh oh!

nreese left a comment

Choose a reason for hiding this comment

Uh oh!

pmuellr left a comment

Choose a reason for hiding this comment

Uh oh!

darnautov Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

darnautov Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

ersin-erdal Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 15, 2025

💚 Build Succeeded

Metrics [docs]

Async chunks

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ersin-erdal commented Nov 6, 2025 •

edited

Loading