[Security Solution] [UX bug] Event/Alert Details View not wide enough on Table view/JSON view

[MikePaquette]

Kibana version: 7.12.0 BC1

Elasticsearch version: 7.12.0 BC1

Server OS version: Elastic Cloud

Browser version: Chrome Version 88.0.4324.182 (Official Build) (x86_64)

Browser OS version: macOS Mojave 10.14.6

Original install method (e.g. download page, yum, from source, etc.): Elastic Cloud

Describe the bug:
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 horizontal width of the flyout is small enough that for low-res displays (e.g., 1366x768), the "Table" display in Alert Details is very narrow, showing only a few fields at a time, limiting its usefulness. Further the "JSON" view requires lots of horizontal scrolling to see the fields.

Steps to reproduce:

1. Open Kibana on a laptop resolution screen (1366x768)
2. Activate some detection rules appropriately to create detection alerts
3. Open Detections page
4. View the Alerts table at the bottom of the page
5. Click on the View Details icon ">"
6. View the Alert Details on the right side of the page
7. Click Table tab
8. Scroll and notice that few fields can be shown at once due to the column wrapping format

Expected behavior:
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.

Screenshots (if relevant):

Errors in browser console (if relevant): None

Provide logs and/or server output (if relevant): None

Any additional context: With emphasis on providing good UX, I am listing this as critical for 7.12.0

cc: @lindseypoli @XavierM @paulewing

[elasticmachine]

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

[elasticmachine]

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

[monina-n]

First thing I want to make known is there is an ongoing collaborative discussion between designers on how to standardize the details flyout and improve the UX, which is a part of this issue and the overall discussion of improving the entire alert experience. So, we’re definitely thinking through and considering larger changes on how to improve the flyout!

For this bug, to provide a more ideal experience with what we have so far, our UX suggestion is to increase the default width of the flyout to be much wider (1.5x - 2x) so the values don’t wrap as much. Depending on bandwidth, a stretch goal would change the details flyout to be an adjustable size (similar to the Timeline flyout).

If after these two changes we’re still finding the table to be difficult to use, we can discuss more on other changes to improve this interaction!

cc @michaelolo24

[hmnichols]

I do not think a different fixed width is a better experience than what was in the previous version.

In 7.10 the user had a very large width to read and manage the data in the table and JSON view. It was the full width of the screen.

In 7.11, this new flyout at any width other than the full width of the screen will provide less real estate than the previous experience.

[monina-n]

I've set up a meeting later this week with the team to discuss together how to approach this bug and address the different concerns. I'll update the issue afterwards on our decision and the plan going forward. If you'd like me forward you the invite, please ping me on slack!

cc @michaelolo24 @paulewing @MikePaquette @lindseypoli

[monina-n]

After our alert details flyout sync this morning, we’ve come up with four options (ranked) of how we can address this bug in 7.12.

1. Making the panel resizable -> most preferred out of all options
2. Panel sizing default: medium
3. Panel sizing default: large
4. Adding a full-screen option to the table view

@michaelolo24 will update this issue when he looks into each of the options and sees what is achievable in 7.12

Meeting Recording / Passcode: U4mJd8J+

[michaelolo24]

Thanks for the notes @monina-n. After looking into it further, looks like the Eui Resizable Container (https://elastic.github.io/eui/#/layout/resizable-container) won't serve as a drop in replacement as it requires resizing between two children. (When you resize the flyout then the timeline would shrink...so it wouldn't really behave as a flyout anymore). Looks like there's an outstanding issue here that goes into a bit more detail: elastic/eui#287

Given that, I'm moving forward with option 2 (the medium panel size) for 7.12.

[MadameSheema]

@karanbirsingh-qasource can you please validate this issue on BC3? Thanks 😊

[ghost]

Hi @MadameSheema

We have validated this issue on 7.12.0 BC3 and found that issue is Fixed for Mac browser and still occurring for windows Browser.

Please find below complete build and testing details.

Build Details:

Version: 7.12.0 BC3
Platform: ON-PREM
Commit:08417cbd6c15e4c866651a7dcdfeded58845206d
Build:39134

Browser Version:

Mac Safari : 13.1.2 (13609.3.5.1.5)
Mac Chrome : 89.0.4389.72
Windows Firefox : 86.0
Windows Chrome: 89.0.4389.72

Machine Details:

• Windows

OS Version: Window 10 1909
Screen Resolution: 1366 X 768

• Mac

OS Version : High Sierra 10.13.6
Screen Resolution: 1680 X 1050

Note:

• Both machine being used for this issue are real hardware machine and not virtual machine .
• Browser zoom was kept at 100% for windows and kept as default actual size for mac browsers.

---

Observation:

• Windows Not Fixed 🔴

  • Chrome
    

  • Firefox
    
    

• Mac Fixed 🟢

  • Chrome
    
    
  • Safari
    
    

Please let us known if something else need to be tested.

thanks !!

[MadameSheema]

@karanbirsingh-qasource can you please confirm if in Mac -> Firefox was fixed as well?

@MikePaquette with the current fix is enough to don't treat this issue as a critical?

ping @michaelolo24

[MikePaquette]

Hi @MadameSheema

with the current fix is enough to don't treat this issue as a critical?

Yes, the current fix is enough to address the critical issue, thanks to the team for testing it well!

I did notice that for some alerts, there is still a lot of "space" between the columns, but I'm guessing that the column width is set to allow the maximum length field name without wrapping? A future optimization might include a different column sizing algorithm, to allow the. "value" column to be even wider within the flyout. cc: @monina-n

[MadameSheema]

Changing the impact of the ticket to low since the issue has been partially fixed.

[ghost]

e confirm if in Mac -> Firefox was fixed as

Issue is not occurring on Mac Firefox Browser.
Version: 86.0

[MadameSheema]

The issue still happening on windows browsers.

[ghost]

The issue still happening on windows browsers.

yes , checked on 7.12.0 BC5

Firefox: 86.0.1
Chrome: 89.0.4389.90 
Edge:  89.0.774.57

[XavierM]

At this moment, we did the best as we can with the EuiInMemoryTable component. If people fill strongly about it please create an enhancement ticket so we can improve it in a later release.

[agg-mb]

I have created an enhancement ticket (feature request) here:
#179254