[Security Solution][Alert details] - improving session view experience in expandable flyout #200270

PhilippeOberti · 2024-11-14T22:24:35Z

Summary

This PR started the move of the analyzer and session view components from the table to the flyout. Shortly after we added an advanced settings (via this PR) to allow users to switch back and forth between the old table view and the flyout view.

This current PR focuses on the session view component and enhances its user experience, when rendered in the expandable flyout.

No changes should be made for the user in the table as well as the other usages of the session view component (like for example the Kubernetes dashboard).

Old UI (in table)

Screen.Recording.2024-12-16.at.4.56.50.PM.mov

####. New UI (in flyout)

Screen.Recording.2024-12-16.at.4.55.37.PM.mov

As can seen in the video above, when the session view component is opened in the expandable flyout, we show the tree view and the detailed panel separated. This allow for better use of the horizontal space, especially visible on a wide monitor. This is also combined with the fact that the flyout is resizable (and can take the whole screen) and the preview panel is also resizable, to provide more space to the detailed panel.

Note: the session view full screen functionality is lost, but this is by design. As mentioned above, the user can resize the flyout's width to take the full screen, and the flyout's vertical space is already near full height.

Code decisions

To guarantee as much as possible that the usage of the Session View component in the table or in the other places (like the Kubernetes dashboard) were not impacted by this PR, only additive changes were made. All these changes are also protected behind if conditions, that should only be run when the correct props are being passed in.
Some components (like the content of each of the tabs of the detailed panels - Process, Metadata and Alerts) as well as a hook, are exposed outisde of the session_view plugin, to be reused in the expandable flyout directly.

Code changes were kept to a bare minimum in the session_view plugin!

What to test

functionality of the Session View component should be exactly the same when used in the table as when used in the flyout:
- clicking on a row in the tree should update the detailed panel accordingly
- jumping to a process from the detailed panel should correctly update the tree
- viewing the details of an alert should work
- the
the UI will be mostly the same, with some small tweaks:
- viewing an alert details now opens a preview panel instead of the flyout. The user can go back to the previous panel by clicking on the Back button in the top-left corner
- the alerts tab does not show the number of alerts as it previously was. We might be able to get this to work later, but after discussing with Product this is an acceptable solution as the feature is still behind an Advanced Settings
- the Open details has been replaced by a expand icon button, to be more consistent with the rest of the UI in the flyout

Notes:

there is a small update in the analyzer graph to the icon used in the open detail button. We're now using the expand icon to be consistent with the Session View component (which already has another eye icon)

How to test

turn on the securitySolution:enableVisualizationsInFlyout Advanced Settings
generate alerts with data for session view (yarn test:generate -n http://elastic:changeme@localhost:9200 -k http://elastic:changeme@localhost:5601)

elasticmachine · 2024-12-17T00:07:41Z

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

...ck/solutions/security/plugins/security_solution/public/resolver/view/controls/show_panel.tsx

x-pack/solutions/security/plugins/security_solution/public/flyout/index.tsx

christineweng · 2024-12-17T21:21:51Z

...ty/plugins/security_solution/public/flyout/document_details/left/components/session_view.tsx

+          scopeId,
+          jumpToEntityId,
+          jumpToCursor,
+        },


I noticed there is no preview banner here (not saying the Preview analyzer details makes sense...) but we should align both to have the same UI, wdyt?

aaaah yup I missed that, on it!

well, actually I wonder if in this case it makes sense... We're not really previewing any data, we're just using the preview as a navigation...

so now I wonder if we should remove it from the analyzer graph instead... 🤔

...ty/plugins/security_solution/public/flyout/document_details/left/components/session_view.tsx

x-pack/solutions/security/plugins/session_view/public/components/process_tree_node/index.tsx

x-pack/solutions/security/plugins/session_view/public/components/session_view/index.tsx

…e detailed panel as a flyout preview panel

elasticmachine · 2024-12-18T00:15:14Z

💚 Build Succeeded

Buildkite Build
Commit: 2d2b681

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	6434	6443	+9

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`sessionView`	134	141	+7

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	14.8MB	14.8MB	+15.9KB
`sessionView`	392.1KB	355.1KB	-36.9KB
total			-21.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`sessionView`	8.4KB	48.7KB	+40.3KB

Unknown metric groups

API count

id	before	after	diff
`sessionView`	134	144	+10

History

💚 Build #261177 succeeded 06f6971

opauloh · 2024-12-19T00:00:09Z

I noticed there's an issue with the search when paginating the search results, where the highlighted search doesn't follow the pagination and it freezes the Session View details preview

Screen.Recording.2024-12-18.at.8.27.14.PM.mov

On the non-preview version, paginating on the search should open the details on the details panel:

Screen.Recording.2024-12-18.at.8.33.30.PM.mov

I will try to investigate the issue, but maybe could we consider moving search logic to the context?

PhilippeOberti · 2024-12-19T00:04:55Z

I noticed there's an issue with the search when paginating the search results, where the highlighted search doesn't follow the pagination and it freezes the Session View details preview

Screen.Recording.2024-12-18.at.8.27.14.PM.mov
On the non-preview version, paginating on the search should open the details on the details panel:

Screen.Recording.2024-12-18.at.8.33.30.PM.mov
I will try to investigate the issue, but maybe could we consider moving search logic to the context?

Ha! Thanks for finding this I actually did not test the search functionality. I will be taking a look at it tomorrow!

opauloh · 2024-12-19T00:09:33Z

@christineweng I guess that was introduced earlier, it seems it's trying to fetch .ds-logs-endpoint.events.process-default index when it should be querying from alerts indice

PhilippeOberti · 2024-12-19T00:11:26Z

@christineweng I guess that was introduced earlier, it seems it's trying to fetch .ds-logs-endpoint.events.process-default index when it should be querying from alerts indice

interesting, I thought I had fixed that one, I will double check tomorrow to make sure I'm using the correct indices when showing the detailed panel for the session view component and the correct ones when showing the alert details panel!

opauloh · 2024-12-19T00:22:17Z

Minor but when toggling the TTY view could we hide the Details panel button on the preview flyout mode?

PhilippeOberti · 2024-12-19T00:23:25Z

Minor but when toggling the TTY view could we hide the Details panel button on the preview flyout mode?

should be possible yes (I think), I'll take a look tomorrow as well!

opauloh · 2024-12-19T00:29:15Z

x-pack/solutions/security/plugins/session_view/public/components/session_view/index.tsx

-              {DETAIL_PANEL}
-            </EuiButton>
+            {openDetailsInExpandableFlyout ? (
+              <EuiButtonIcon onClick={toggleDetailPanelInFlyout} iconType="expand" />


Should we maybe remove the button on the preview flyout mode? since it can be closed by clicking on the close button on the flyout (what doesn't have on the details panel), and it can be expanded by clicking on the process.

I think the expand icon might lead users to think it's a fullscreen option, also it doesn't do anything when the preview is already expanded.

Screen.Recording.2024-12-18.at.9.25.08.PM.mov

we can, but this was added to be consistent with the analyzer graph component, and was a request by the UIUX team. I'll check with Product and UIUX if they have a preference. I'll get back to you on it!

opauloh · 2024-12-19T00:33:34Z

@PhilippeOberti other than the freezing issue commented here, feel free to address the other issues / nits as follow-up issues if required

Thanks for the detailed documentation and precise comments 💯

PhilippeOberti requested a review from christineweng November 14, 2024 22:24

PhilippeOberti force-pushed the expandable-flyout-session-view branch 3 times, most recently from 81477ae to 4069ba9 Compare November 25, 2024 23:24

PhilippeOberti force-pushed the expandable-flyout-session-view branch 4 times, most recently from b7ad4a4 to 171a9ac Compare December 6, 2024 22:38

PhilippeOberti force-pushed the expandable-flyout-session-view branch 4 times, most recently from 5107c10 to 06f6971 Compare December 17, 2024 00:05

PhilippeOberti marked this pull request as ready for review December 17, 2024 00:07

PhilippeOberti requested review from a team as code owners December 17, 2024 00:07

PhilippeOberti added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 Team:Threat Hunting:Investigations Security Solution Investigations Team backport:version Backport to applied version labels v8.18.0 labels Dec 17, 2024

PhilippeOberti requested a review from opauloh December 17, 2024 00:08

PhilippeOberti force-pushed the expandable-flyout-session-view branch from 06f6971 to 5efd87f Compare December 17, 2024 05:36

christineweng reviewed Dec 17, 2024

View reviewed changes

PhilippeOberti added 2 commits December 17, 2024 16:03

[Security Solution][Alert Details] - SessionView changes to render th…

1119875

…e detailed panel as a flyout preview panel

PR comments

2d2b681

PhilippeOberti force-pushed the expandable-flyout-session-view branch from 5efd87f to 2d2b681 Compare December 17, 2024 22:15

christineweng approved these changes Dec 17, 2024

View reviewed changes

opauloh reviewed Dec 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Alert details] - improving session view experience in expandable flyout #200270

[Security Solution][Alert details] - improving session view experience in expandable flyout #200270

PhilippeOberti commented Nov 14, 2024 •

edited

Loading

elasticmachine commented Dec 17, 2024

christineweng Dec 17, 2024

PhilippeOberti Dec 17, 2024

PhilippeOberti Dec 17, 2024

PhilippeOberti Dec 17, 2024

elasticmachine commented Dec 18, 2024

API count

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh Dec 19, 2024

PhilippeOberti Dec 19, 2024

opauloh commented Dec 19, 2024

[Security Solution][Alert details] - improving session view experience in expandable flyout #200270

Are you sure you want to change the base?

[Security Solution][Alert details] - improving session view experience in expandable flyout #200270

Conversation

PhilippeOberti commented Nov 14, 2024 • edited Loading

Summary

Old UI (in table)

Code decisions

What to test

Notes:

How to test

elasticmachine commented Dec 17, 2024

christineweng Dec 17, 2024

Choose a reason for hiding this comment

PhilippeOberti Dec 17, 2024

Choose a reason for hiding this comment

PhilippeOberti Dec 17, 2024

Choose a reason for hiding this comment

PhilippeOberti Dec 17, 2024

Choose a reason for hiding this comment

elasticmachine commented Dec 18, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh Dec 19, 2024

Choose a reason for hiding this comment

PhilippeOberti Dec 19, 2024

Choose a reason for hiding this comment

opauloh commented Dec 19, 2024

PhilippeOberti commented Nov 14, 2024 •

edited

Loading