[Security Solution] UI breaks when click on full screen icon under Timeline

[ghost]

Describe the bug
UI breaks when click on full screen icon under Timeline

Build info

VERSION : 8.4.0 SNAPSHOT
BUILD: 54789
COMMIT: af3a3cba9a7fa3b3e0d2e4766a1db11a5ff4f192

Preconditions

1. Kibana should be running
2. Alerts should be created

Steps to Reproduce

1. Navigate to security > Alerts page
2. Click on timeline investigate
3. Click on full screen icon
4. Observe that UI breaks when click on full screen icon under Timeline

Actual Result
UI breaks when click on full screen icon under Timeline

Expected Result
Page should not break when click on full screen icon under Timeline

Screen-cast

timeline.mp4

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[kqualters-elastic]

This is a strange bug, seems like the issue is being caused by https://github.com/elastic/kibana/blob/main/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss which has existed for a year no problem and was previously only active in styles when within the observability app

Can be seen here on siem dev without that rule being applied at all, even though the selector of .kbnBody.euiBody--headerIsFixed.euiDataGrid__restrictBody .euiOverlayMask--belowHeader .euiFlyout would still apply. Not sure why/how this started "leaking" across plugins when it hasn't for a year, but seems like that's what's going on.

[logeekal]

Hello @kqualters-elastic , @MadameSheema I checked out latest main but I do not see the issue? Could you please point out if I am missing something

Screen.Recording.2022-07-28.at.16.21.16.mov

?

[kqualters-elastic]

@logeekal the underlying content is hidden now, which is better (and suggests that the bug was created outside of security solution code), but it still shouldn't have that gap of 72px of gray space at the top.

see https://kibana.siem.estc.dev/ for an example

[logeekal]

Hello @kqualters-elastic , It looks like (not 100% sure) the problem has been there but it was hidden and it resurfaced with this line of code 4 months ago. It adds euiDataGrid__restrictBody class to the body element which applies the above css as you have mentioned.

Before that, above mentioned css was not being applied, instead, below style( see screenshot) is being applied. Because of this, full screen timeline aligns perfectly to the header, which doesn't seem like a bug.( See the video for more details )

Screen.Recording.2022-07-29.at.12.56.22.mov

Error exists in SIEM as well when we take below steps:

1. Navigate to Observability -> Alerts
2. This loads the styles of Observability plugin
3. Now navigate to Security -> Alerts and note the error.

[MadameSheema]

@logeekal can you please clarify in which release(s) the fix is going to be present? The issue is labeled to target 8.4.0 but on the PR the version label is 8.5.0. Thanks

[MadameSheema]

Pending to be validated.

[logeekal]

In PR, I have mentioned labels v8.5.0 and backport:prev-minor. In that case backport:prev-minor should take care of v8.4.0, right?

Sorry If that caused confusion.

[MadameSheema]

Np!! My bad!! Missed the label, I'm used to the old way 🫣

Sorry @logeekal and thanks for the clarification 😊

[MadameSheema]

Pending to be validated on BC4.

[logeekal]

no problem.. 👍

[ghost]

Hi Team,

We have validated this issue on LATEST 8.4.0 SNAPSHOT build and observed that issue is Fixed.

Please find the below Testing Details:

Build info

Version:8.4.0 SNAPSHOT
Commit:976a669f92e0e516a87fefabf0642105e58065b4

Screen-cast

timeline.mp4

cc: @MadameSheema

Thanks!!

[MadameSheema]

Fixed in BC4!