[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)

https://github.com/elastic/security-team/issues/7031

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

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

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!

after verifying with the UIUX team, I'm now using the list icon instead of expand

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 · 2024-12-30T19:49:14Z

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

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

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

this is now fixed in 688d35f! The issue was that the parent component in the flyout was re-rendering when opening the preview panel. Memoizing it fixed the issue!

PhilippeOberti · 2024-12-30T19:51:10Z

@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

this is now fixed in 12a859b ! I was trying to be smart when selecting the index, but I realized we had already done the simpler logic in the hook that we were using before so I went ahead and used the same

PhilippeOberti · 2024-12-30T19:51:57Z

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

this is now fixed in d990e45 ! I had to add another new property to allow the session view component to close the preview panel. Only a few new lines of code...

…e detailed panel as a flyout preview panel

seanrathier

left one comment for consideration, otherwise lgtm.

seanrathier · 2025-01-03T15:13:27Z

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

+   * view of the tree from the preview panel.
+   */
+  useEffect(() => {
+    if (resetJumpToEntityId && resetJumpToCursor) {


Do we really need this useEffect? Can we guard setting this state

Suggested change

if (resetJumpToEntityId && resetJumpToCursor) {

if (resetJumpToEntityId && resetJumpToCursor && (resetJumpToEntityId !== jumpToEntityId || resetJumpToCursor !== jumpToCursor) {

opauloh

LGTM thanks for addressing the comments!

elasticmachine · 2025-01-08T01:20:16Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: d463cea

Failed CI Steps

Jest Tests #15

Test Failures

[job] [logs] Jest Tests #15 / useUpdateTags should call onSuccess when bulk update tags succeeds
[job] [logs] Jest Tests #15 / useUpdateTags should call onSuccess when update tags succeeds
[job] [logs] Jest Tests #15 / useUpdateTags should call show error toast when bulk update tags fails
[job] [logs] Jest Tests #15 / useUpdateTags should call show error toast when update tags fails

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	6523	6532	+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`	22.1MB	22.2MB	+18.0KB
`sessionView`	392.1KB	355.2KB	-36.9KB
total			-18.9KB

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 #264556 failed a11d971
💔 Build #264512 failed 0209ca8
💚 Build #263441 succeeded 12a859b
💚 Build #261611 succeeded 2d2b681
💚 Build #261177 succeeded 06f6971

kibanamachine · 2025-01-08T04:48:30Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12664268766

…e in expandable flyout (elastic#200270) ## Summary This [PR](elastic#192531) 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](elastic#194012)) 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) https://github.com/user-attachments/assets/015b32fc-69bb-4526-a42d-accad085ad43 ####. New UI (in flyout) https://github.com/user-attachments/assets/9a3eacbf-bf2b-43d4-8e74-ea933ee0d498 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 ![Screenshot 2024-12-16 at 5 05 05 PM](https://github.com/user-attachments/assets/e5a937fa-7eaf-46b3-be11-d56224daf821) - generate alerts with data for session view (`yarn test:generate -n http://elastic:changeme@localhost:9200 -k http://elastic:changeme@localhost:5601`) --------- Co-authored-by: Paulo Silva <[email protected]> (cherry picked from commit d4a3c96)

kibanamachine · 2025-01-08T04:53:37Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…erience in expandable flyout (#200270) (#205834) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Alert details] - improving session view experience in expandable flyout (#200270)](#200270)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Philippe Oberti <[email protected]>

…e in expandable flyout (elastic#200270) ## Summary This [PR](elastic#192531) 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](elastic#194012)) 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) https://github.com/user-attachments/assets/015b32fc-69bb-4526-a42d-accad085ad43 ####. New UI (in flyout) https://github.com/user-attachments/assets/9a3eacbf-bf2b-43d4-8e74-ea933ee0d498 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 ![Screenshot 2024-12-16 at 5 05 05 PM](https://github.com/user-attachments/assets/e5a937fa-7eaf-46b3-be11-d56224daf821) - generate alerts with data for session view (`yarn test:generate -n http://elastic:changeme@localhost:9200 -k http://elastic:changeme@localhost:5601`) --------- Co-authored-by: Paulo Silva <[email protected]>

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 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

PhilippeOberti force-pushed the expandable-flyout-session-view branch from 2d2b681 to 12a859b Compare December 30, 2024 19:47

PhilippeOberti requested a review from opauloh December 30, 2024 19:52

PhilippeOberti added 6 commits January 2, 2025 10:15

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

be7dec5

…e detailed panel as a flyout preview panel

PR comments

c1d4fdf

close panel when user goes into TTY output mode

e40d2dd

fix broken search

e8e2456

fix alert details preview panel not opening because of wrong index

b642806

use list icon provided by UIUX (instead of expand)

a8a9a9b

PhilippeOberti force-pushed the expandable-flyout-session-view branch from 12a859b to a8a9a9b Compare January 2, 2025 16:19

seanrathier approved these changes Jan 3, 2025

View reviewed changes

opauloh approved these changes Jan 6, 2025

View reviewed changes

opauloh and others added 3 commits January 6, 2025 13:02

Merge branch 'main' into expandable-flyout-session-view

0209ca8

Merge branch 'main' into expandable-flyout-session-view

a11d971

Merge branch 'main' into expandable-flyout-session-view

d463cea

PhilippeOberti merged commit d4a3c96 into elastic:main Jan 8, 2025
8 checks passed

PhilippeOberti deleted the expandable-flyout-session-view branch January 8, 2025 04:48

kibanamachine mentioned this pull request Jan 8, 2025

[8.x] [Security Solution][Alert details] - improving session view experience in expandable flyout (#200270) #205834

Merged

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

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh Dec 19, 2024

PhilippeOberti Dec 19, 2024

PhilippeOberti Jan 2, 2025

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 30, 2024

PhilippeOberti commented Dec 30, 2024

PhilippeOberti commented Dec 30, 2024

seanrathier left a comment

seanrathier Jan 3, 2025

opauloh left a comment

elasticmachine commented Jan 8, 2025

API count

kibanamachine commented Jan 8, 2025

kibanamachine commented Jan 8, 2025

	if (resetJumpToEntityId && resetJumpToCursor) {
	if (resetJumpToEntityId && resetJumpToCursor && (resetJumpToEntityId !== jumpToEntityId \|\| resetJumpToCursor !== jumpToCursor) {

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

[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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

opauloh commented Dec 19, 2024

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

opauloh commented Dec 19, 2024

PhilippeOberti commented Dec 30, 2024

PhilippeOberti commented Dec 30, 2024

PhilippeOberti commented Dec 30, 2024

seanrathier left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

opauloh left a comment

Choose a reason for hiding this comment

elasticmachine commented Jan 8, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

kibanamachine commented Jan 8, 2025

kibanamachine commented Jan 8, 2025

💚 All backports created successfully

Questions ?

PhilippeOberti commented Nov 14, 2024 •

edited

Loading