[Security Solution] "Rule Execution logs" page shifts downwards on clicking on any duration for the first time only

[ghost]

Describe the bug:
"Rule Execution logs" page shifts downwards on clicking on any duration (for instance: Today, This week, This month, This year) for the first time only.

Kibana/Elasticsearch Stack version:

Version: 8.2.0 BC4
Build: 52005
Commit: 9a5003d8cf0062bf24ef64d6712b44823888cc03

Pre-conditions:

1. Elastic Search should be up and running
2. Kibana should be up and running

Steps to reproduce:

1. Navigate to Rules tab under Security
2. Click on 'Create new rule' button.
3. Enter all the fields
4. Save and Activate the rule
5. Wait to get the rule succeed
6. Scroll down on the rule page
7. Click on 'Rule execution logs' tab
8. Click on Date picker.
9. Select any duration (for instance: Today, This week, This month, This year).

Current behavior:

• "Rule Execution logs" page shifts downwards on clicking on any duration (for instance: Today, This week, This month, This year) for the first time only.

Expected behavior:

• "Rule Execution logs" page should remain static on clicking on any duration (for instance: Today, This week, This month, This year) for the first time.

Screenshots:

Rules.-.Kibana.-.Google.Chrome.2022-04-26.12-24-21.mp4

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[spong]

Yeah, this is an annoying result of not having a fixed component height or keeping the previous data while loading. This is partially fixed in #130072 as we are now setting keepPreviousData, so subsequent loads aren't as jittery (notice the page nav is pretty clean), however the page hop will still exist when reloading to content with less overall height. e.g.

@yiyangliu9286, what would be your preferred solution here -- shall we add a fixed height to the tab content container between Alerts/Exception/Rule execution logs?

[yiyangliu9286]

@spong thanks for asking this question! I'd say we shouldn't persist any page hop / page shifts downwards behaviour from happening. If I understand it correctly, do you mean that if we add a fixed height to the tab content container that will solve this issue?

[spong]

Yeah, it's the dynamic page height that's causing this hop, so a fixed min-height on the tab containers will take care of the happy path in most situations.

For example, I added a min-height: 800 to the tab container and this is how it behaves when scrolled to the bottom of the pages and switching tabs:

You'll still notice some hop when switching from Execution Log -> Exceptions, but it's far better than the above (current) behavior.

Two things to note here though:

1. even with min-height, hop is still going to exist when bouncing between tabs (or data fetches on the same tab) when the height goes from > 800 to min-height. You'll see this when viewing the alerts or execution log table with large rows per page, but it does feel better with a min-height since you have to scroll up a bit to even get the tabs into the viewport.
2. Exceptions tab is within its own scroll pane, so it isn't really affected once a min-height is in place. That said, it does behave differently than Alerts/Execution Log tables, and users can only see one or two exceptions at a time, so we may want to just remove this dedicated scroll pane wrapper? What do you think @yiyangliu9286?

[spong]

Hmmm....so one thing we could do here is have a default min-height (perhaps 800px), and then update it to be whatever the max tab content height is (e.g. when viewing the Alerts tab w/ 100 rows per page) -- that should take care of the remaining jitter. Another tweak that might be nice here is making the tabs a sticky header when scrolling.

[banderror]

Just thinking out loud: min-height could work well with infinite scroll within the logs table (instead of good old pagination), but that would require an unknown (I guess could be very high) LOE to implement this. I don't think EUI supports infinite scroll. But there are UIs in KIbana like the Logs app and Agent Logs view.

I'm not suggesting infinite scroll as a fix for this bug 🙂

[yiyangliu9286]

Thanks for all the suggestions and feedback @spong @banderror, I am wondering so it looks like setting a min-height should be our best way to solve this, correct?

@spong You mentioned that

even with min-height, hop is still going to exist when bouncing between tabs (or data fetches on the same tab) when the height goes from > 800 to min-height...when viewing the alerts or execution log table with large rows per page.

So it is possible to then set the min-height to potentially larger than 800 to allow viewing the alerts or execution log table with large rows per page be able to fit into that min-height that we set?

And for Exceptions tab, I think it's safe to just remove its own scroll pane because a scroll within a scroll feel a little bit confusing for users as well.

[spong]

So it is possible to then set the min-height to potentially larger than 800 to allow viewing the alerts or execution log table with large rows per page be able to fit into that min-height that we set?

Yeah, we can do that programmatically when tab content is loaded, however the height will be recalculated when large rows per page content is loaded, so they're displaying without issue now, it would just be more-so for removing the last bit of jitter when switching between a tab with a lot of content to one with none, but it's not a huge issue since the max hop distance can't be that much anyway (between the tab current location and new 800 min-height). E.g. this is the remaining jitter with the above changes:

And for Exceptions tab, I think it's safe to just remove its own scroll pane because a scroll within a scroll feel a little bit confusing for users as well.

Resolved in 917d9cf 🎉

[ghost]

Hi @MadameSheema @spong,

We have validated above issue on 8.3.0 SNAPSHOT build and it's working fine ✅.

• "Rule Execution logs" page doesn't shift downwards on clicking on any time duration for the first time.

Build info

Version: 8.3.0 SNAPSHOT
Build: 52512
Commit: df225b213b188c81888141cee2ec191424fc0649

Screenshot:

Rules.-.Kibana.-.Google.Chrome.2022-05-11.15-33-35.mp4

Hence, We are closing this issue and marking as QA Validated.

Thanks!

[ghost]

Hi @MadameSheema @spong,

We have validated above issue on 8.2.1 BC1 build and it's working fine ✅.

• "Rule Execution logs" page doesn't shift downwards on clicking on any time duration for the first time.

Build info:

Version: 8.2.1 BC1
Build: 52170
Commit: 88889128ccda6f7e13983b0087e9aaa183818473

Screenshots:

Rules.-.Kibana.-.Google.Chrome.2022-05-19.11-25-32.mp4

Thanks!

[ghost]

Hi @MadameSheema @spong,

We have validated above issue on 8.2.1 BC2 Staging build and it's working fine ✅.

• "Rule Execution logs" page doesn't shift downwards on clicking on any time duration for the first time.

Build info:

Version: 8.2.1 BC2
Build: 52192
Commit: d4427fadd63ee9face4438cb3a4e17aaec93afe4

Screenshots:

Rules.-.Kibana.-.Google.Chrome.2022-05-20.14-06-46.mp4

Thanks!

[ghost]

Hi @MadameSheema @spong,

We have validated above issue on 8.3.0 BC2 and it's working fine ✅.

• "Rule Execution logs" page doesn't shift downwards on clicking on any time duration for the first time.

Build info:

Version: 8.3.0 BC2
Build: 53231
Commit: 25476b531ba9f32292bde85508d342aa5e1c29eb

Screenshots:

VM.Prachi.1.-.ec2-54-90-253-174.compute-1.amazonaws.com.-.Remote.Desktop.Connection.2022-06-03.13-24-13.mp4

Thanks!