[Security Solution] Extra space is displaying under alerts table when alerts are less than the number to which pagination count is set

[ghost]

Describe the bug
Extra space is displaying under alerts table when alerts are less than the number to which pagination count is set

Build Details:

Version: 8.2.0 SNAPSHOT
Commit:a743498436a863e142592cb535b43f44c448851a
Build:51431

preconditions

1. Alerts should be created

Steps to Reproduce

1. Navigate to Alerts page
2. Scroll down the page
3. Alerts should be less than the number to which pagination count is set
4. Observe that Extra space is displaying under alerts table

Actual Result
Extra space is displaying under alerts table when alerts are less than the number to which pagination count is set

Expected Result
Extra space should not be displayed under alerts table when alerts are less than the number to which pagination count is set

Screen-Shot

alerts.page.mp4

[elasticmachine]

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

[MadameSheema]

@michaelolo24 can you please confirm if the behaviour described here is expected? Thanks!! :)

[elasticmachine]

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

[michaelolo24]

No, it's not expected as the size of the table adjusts as expected when filters are applied. @deepikakeshav-qasource Is it always reproducible or does it happen intermittently?

[ghost]

Hi @michaelolo24 ,

This issue is occurring intermittently!!

Thanks!!

[michaelolo24]

Thank you @deepikakeshav-qasource! @chandlerprall this might be an issue with the resize observer? Would you like our team to dig into it or do you have bandwith? It's low priority if that helps

[chandlerprall]

@michaelolo24 I can take an initial look next week

[michaelolo24]

Great, thanks!

[chandlerprall]

I've not been able to reproduce this after multiple attempts in Chrome, Firefox, or Safari on both main and 8.2 branches. No matter how many rows I filter down to, nor the page size I set, I cannot get the grid to have extra height.

[ghost]

Hi @chandlerprall ,

We have tried to reproduce this issue today on 8.2.0 BC4 and it reproduced but inconsistently as we tried on 02 builds but on one build its occurred

Please find the below testing details:
Build Details:

Version : 8.2.0 BC4
Build : 52005
Commit : 9a5003d8cf0062bf24ef64d6712b44823888cc03

Screenshot

First Build

Second Build

Alerts.-.Kibana.-.Google.Chrome.2022-05-03.16-33-43.mp4

Thanks!!

[kqualters-elastic]

@chandlerprall @deepikakeshav-qasource I can reproduce this consistently by throttling my cpu in Chrome

[kqualters-elastic]

Based on the bug not appearing at all with 0 throttling and triggering immediately with 6x cpu throttling, I think it might be related to the use of useState set functions being used in places like setTimeout, try/catch, etc that seems to be a problem all throughout kibana tbh. https://github.com/elastic/eui/blob/main/src/components/datagrid/utils/grid_height_width.ts#L180 https://medium.com/swlh/react-state-batch-update-b1b61bd28cd2 and similar to #131023 perhaps

[janmonschke]

@kqualters-elastic @chandlerprall Another issue could also be the fact that the resizing-effect is only called once after 100ms. If the browser for some reason takes longer than that, the size will never adjust. I'm guessing a setInterval that periodically checks for changes will lead to layout thrashing. I wonder what the useResizeObserver here is used for (https://github.com/elastic/eui/blob/805960c93333ecf6d46927a5cbe480a0232a6d55/src/components/datagrid/utils/grid_height_width.ts#L163). Is it used to re-evaluate the hook?

[PhilippeOberti]

closing this issue as it is very old and not reproducible anymore