[Security Solution] [UX feature request] Make Event/Alert Details View resizable for Table view/JSON view

[agg-mb]

Describe the feature:
When viewing the Detection Alerts page, and interacting with the Alerts table at the bottom, when the ">" (View Details) icon is clicked, the Alert Details flyout appears on the right.
The flyout should be resizable by dragging the border of the flyout.
When viewing the table view, multiple fields should be shown, ideally the experience will be similar to the 7.10 and earlier behavior where the expansion "drawer" would display a larger number of fields on average.
Acceptance criteria - if the flyout is of fixed width, it should be at least 50% wider than in 7.12.0 BC1. If the flyout can be changed to adjustable size, that would provide a better user experience.

The following flyout widths can be changed using the developer console which yields to a bigger flyout of the table view after expanding the details (e.g. 100% and 10% instead of 40/60):
<div class="euiFlexItem css-kpsrin-euiFlexItem-growZero" data-test-subj="rightSection" style="height: 100%; width: 100%;">
And for this line to 0%:
<div class="euiFlexItem css-9sbomz-euiFlexItem-grow-1" data-test-subj="leftSection" style="height: 100%; width: 0%;">
Describe a specific use case for the feature:
Investigating security alerts is usually done by using the table view. When an investigator opens the table view, the usefulness of the provided view is very limited.
That's when the draggable border comes into play and the investigator can

Suggested workarounds:

• Option 1: Provide a tampermonkey script that can be used to enlarge the right flyout (and allow it in the CSP (Content Security Policy) setting via a hash whitelisting if needed).
• Option 2: Provide a method to view the flyout in full screen, e.g. in a separate tab.
• Option 3: Make it possible to generally set a maxwidth for the flyout in the options, either dynamically by percentage (width: 80%) or using absolute values, e.g. width:1366px.

Screenshots:

See also:
#92465

[elasticmachine]

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

[agg-mb]

For anyone interested – I have implemented workaround no. 1 which didn't need any CSP policy hash whitelisting. But I hope for a long-term fix by elastic.
I am willing to share the tampermonkey script if anyone needs it.

[PhilippeOberti]

hey @agg-mb, thanks for opening this issue!

It is indeed something we've been thinking about for a while. We've had a few customers complaining about the width of the right section of our expandable flyout where the table and json tabs are. We had done some work a few months back to increase it, but from the feedback we're getting it is still not enough.

I'll take a look at the 3 points you mentioned. Also I've had my eyes on the new resizable flyout from EUI (still in beta) which could be really cool! The interaction with the left section (when the flyout is expanded) makes things a bit more complex, so we want to think this through and not rush the implementation! We also need to find a solution that works with pretty much any screen sizes and resolutions...

We're also trying to have most users use the Overview tab instead of the Table and Json tabs. So while we're working on a good solution to increase the flyout's width, here's one question for you: could you briefly describe the reason(s) you need to go to the Table or Json tabs so often? Is there anything we could add/change in the Overview tab to make your life easier?

Thanks again for you feedback, we really appreciate it, keep it coming! 😄

[elasticmachine]

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

[agg-mb]

Hello @PhilippeOberti, thanks for the quick reply.
I agree that a resizable flyout would be the best option.
Honestly, in my opinion the complexity is quite low because all the "drag" object has to do is set the width of the left flyout like this: flyoutLeftWidth = 100% - flyoutRightWidth and/or the other way around. But maybe I am missing a point there. At least that's what I found out when writing the Tampermonkey script.
By the way, the flyouts are relative already (percentage), so it should be working with any screen size and resolution.

I use the Table a lot because the Table tab is showing additional fields that the Overview tab is not showing. Although the downside is that according to my information it's not possible to e.g. filter out kibana.*, so I don't get shown irrelevant information, such as kibana.alert.ancestors.depth etc.
For missing fields, sometimes I want to see the full file path, winlog username or winlog.event_data.SourceUser or some other fields, that are not always shown.
Also, I can do a "wildcard search"/searching for a random string within the Table view, so this is very useful for me. E.g. for "target" which will show me the target user name or target file path etc., i.e. winlog.event_data.TargetImage, winlog.event_data.TargetUser…

As I said, I have now been using the Tampermonkey script and it's working very well! When I hit expand details, it hides the left flyout and changes the width of the left flyout to 0% and the right flyout to 100%.

[PhilippeOberti]

That's awesome, thanks for the descriptive answer @agg-mb! I will relay the use case to our product manager!

I will also bring back the topic to our UIUX regarding the width, we need to get the conversation started again!

The reason I saw some complexity, is because i wanted things to work in all scenarios. The biggest challenge I was seeing was the left panel was often getting way too small to be readable and I was trying to avoid that as much as possible, without having widths being handled differently when the flyout was in expanded or collapsed mode.
I should maybe just settle down to a solution that works most of the time and accept that sometimes the UI will look weird... If the value to have the Table and Json tabs more usable is higher then it's worth it.

I will try to get back to it within a few weeks, and will report back potential solutions here. If you don't mind commenting on them that will be super useful!
Thanks! 🙏

[agg-mb]

Hello @PhilippeOberti thanks for the exciting lookouts!

I can understand why it may seem overwhelming at first, but maybe just hide the element at a certain threshold (e.g. 20%) when it gets too small and make the other flyout max out in width. Or set a maximum that can be dragged, so there won't be a scenario of 1% and 99%.

I'd gladly comment on your potential solutions and exert some positive influence on the future considerations if I get the chance to.

BR and have a nice day!

[PhilippeOberti]

I can understand why it may seem overwhelming at first, but maybe just hide the element at a certain threshold (e.g. 20%) when it gets too small and make the other flyout max out in width. Or set a maximum that can be dragged, so there won't be a scenario of 1% and 99%.

I had tried a bunch of things like that yeah, but couldn't get to something I really liked and UIUX and Product were no fans either...
I'll present some solutions again, we'll get there! 😆

[PhilippeOberti]

@agg-mb this was implemented back in September (see this PR) and will be deployed in 8.16. You can see that users now have the ability to resize the collapsed flyout. the expanded flyout as well as the internal left and right section when the flyout is expanded.
While the UX is not as good as we'd like it to be, I believe this is a step in the right direction. We will keep working on it as we get feedback from users.
Kinda related, around the same time I also implemented a push vs overlay modes for the flyout (see this PR). This is especially useful for users with wide screens.

Please don't hesitate to provide feedback as you use the new functionality!
Thanks!