-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Security Solution] [UX feature request] Make Event/Alert Details View resizable for Table view/JSON view #179254
Comments
Pinging @elastic/security-solution (Team: SecuritySolution) |
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. |
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 Thanks again for you feedback, we really appreciate it, keep it coming! 😄 |
Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations) |
Hello @PhilippeOberti, thanks for the quick reply. I use the 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%. |
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 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! |
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! |
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... |
@agg-mb this was implemented back in September (see this PR) and will be deployed in Please don't hesitate to provide feedback as you use the new functionality! |
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:
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
The text was updated successfully, but these errors were encountered: