Uptime not handling different sized screenshots (mobile) particularly well

[paulb-elastic]

Kibana 7.14 (local, checked with build just now)

When using mobile device emulation in a Synthetics test, for example with:

playwrightOptions: {
	userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
	viewport: {
		width: 375,
		height: 667,
	},
	deviceScaleFactor: 2,
	isMobile: true,
	hasTouch: true,
}

Uptime has trouble showing the different sized image in some places.

Hovers and clicks to see the big (non thumbnail) image seems to be ok

Click to expand

Test result history seems ok:

Click to expand

Clicking through to a test result seems ok

Click to expand

However, expanding the step does not give enough space for the image:

(in this animation, I have scrolled all the way to the bottom of the screen, but the image is being chopped off.

[vigneshshanmugam]

@paulb-elastic This is a bug because of the way our Synthetics agent chops the given image based on the dimensions of the device, When we construct squares from the given dimensions, if the block results in floating point number, we chop that value off and always go for the nearest truncated value to make sure the underlying library is able to construct block - As a result we are missing few dimensions of the image which is shown in the final screenshot output.

I mentioned in the fix - elastic/synthetics#340, but should have pinged the team about it.

[vigneshshanmugam]

Should not have jumped in early without seeing the full screenshots. This is not related to synthetics agent, Probably a UI bug.

I was referring to the black borders around the image which you wont see for any desktop screenshots.

[andrewvc]

I'm still seeing this on 7.15. I accidentally tested this as part of the 7.15 test plan:

[justinkambic]

@andrewvc how does it look when you expand the row? IIRC the original complaint in this issue was that the image rendered way incorrectly for "portrait" aspect ratios (per the GIF in the issue description). While the image in the row does look somewhat goofy compared to desktop screenshots, we never changed that rendering as a part of this fix. I think if we did make it so the rows didn't grow at all for the thumbnail, it might be really tough to make out detail.

[paulb-elastic]

We confirmed that the original issue (of not being able to see the full height of the image) is still working in 7.15.

[paulb-elastic]

elastic/synthetics#371 raised to cover the separate issue of the border that is sometimes visible with some viewports.