[Security Solution][Expandable flyout] Introducing Flyout history in document flyout #184970

christineweng · 2024-06-06T20:51:01Z

Summary

This PR introduced flyout history in expandable flyouts to keep tracked of previously opened flyouts. The history button is available when feature flag newExpandableFlyoutNavigationEnabled is enabled.

Flag is currently default False

Changes in kbn-expandable-flyout package

When openFlyout is called, the right panel will be appended to the history slice in redux.
History can be accessed via useExpandableFlyoutHistory API

Changes to expandable flyouts in security solution

When feature flag is on, opening more than 1 flyout will show a history icon. Currently max at 10 entries
When user clicks a flyout from the history, it does not add on top on history, instead the position will be moved up. There is no duplicate entries.

To illustrate how ordering works:
-> History: [host1, user1, alert1]
-> clicks alert1
-> History: [alert1, host1, user1]
Keep in mind this is slightly different in the actual implementation, as we do not display the current entry (i.e. alert1 in this example)

Other changes in order to support flyout history

Added a preview panel for network. Previously we reused the panel for both network flyout and network preview. A dedicated network preview with out history is now available
Replaced openRightPanel with openFlyout in applicable places
Added isPreview and isPreviewMode checks in EA flyouts

How to test

Enable feature flag newExpandableFlyoutNavigationEnabled

✅ Alerts page

Available for alert, host, user, rule name and ip's

✅ Explore pages (event table)

Available for events, host, user, rule name and ip's

✅ Cases

Note: the rule and entity link still go to a page, this will be addressed in a separate PR

✅ Discover in severless

- enable `discover.experimental.enabledProfiles: ['security-root-profile']`

❌ Disabled in alert preview

❌ Disabled in preview mode

WIP

Investigate performance with process history
Final ui of the entries - pending UIUX team

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios

christineweng · 2024-08-28T21:01:13Z

/ci

christineweng · 2024-08-28T23:06:26Z

/ci

kibana-ci · 2024-08-28T23:58:26Z

💔 Build Failed

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #1 / should not render expand details button if flyout is not expandable
[job] [logs] Jest Tests #1 / should not render expand details button if flyout is not expandable
[job] [logs] Jest Tests #1 / should render actions if there are actions available
[job] [logs] Jest Tests #1 / should render actions if there are actions available
[job] [logs] Jest Tests #1 / should render empty component if panel is not expandable and no action is available
[job] [logs] Jest Tests #1 / should render empty component if panel is not expandable and no action is available
[job] [logs] Jest Tests #1 / when flyout is expandable should render collapse button
[job] [logs] Jest Tests #1 / when flyout is expandable should render collapse button
[job] [logs] Jest Tests #1 / when flyout is expandable should render expand button
[job] [logs] Jest Tests #1 / when flyout is expandable should render expand button
[job] [logs] Jest Tests #15 / FormattedIp if enableIpDetailsFlyout, should open NetworkDetails expandable flyout
[job] [logs] Jest Tests #15 / FormattedIp if enableIpDetailsFlyout, should open NetworkDetails expandable flyout
[job] [logs] Jest Tests #15 / HostName should open expandable flyout in timeline
[job] [logs] Jest Tests #15 / HostName should open expandable flyout in timeline
[job] [logs] Jest Tests #15 / HostName should open expandable flyout on table
[job] [logs] Jest Tests #15 / HostName should open expandable flyout on table
[job] [logs] Jest Tests #10 / reducer should handle closeFlyout action should remove all panels
[job] [logs] Jest Tests #10 / reducer should handle closeFlyout action should remove all panels
[job] [logs] Jest Tests #10 / reducer should handle closePreviewPanel action should not remove preview panels for a different key
[job] [logs] Jest Tests #10 / reducer should handle closePreviewPanel action should not remove preview panels for a different key
[job] [logs] Jest Tests #10 / reducer should handle closePreviewPanel action should remove all preview panels
[job] [logs] Jest Tests #10 / reducer should handle closePreviewPanel action should remove all preview panels
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should add panels to a new key
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should add panels to a new key
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should add panels to empty state
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should add panels to empty state
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should override all panels in the state
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should override all panels in the state
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should remove all panels despite only passing a single section
[job] [logs] Jest Tests #10 / reducer should handle openFlyout action should remove all panels despite only passing a single section
[job] [logs] Jest Tests #10 / reducer should handle openLeftPanel action should replace only left panel
[job] [logs] Jest Tests #10 / reducer should handle openLeftPanel action should replace only left panel
[job] [logs] Jest Tests #10 / reducer should handle openRightPanel action should add right panel to a different key
[job] [logs] Jest Tests #10 / reducer should handle openRightPanel action should add right panel to a different key
[job] [logs] Jest Tests #10 / reducer should handle openRightPanel action should add right panel to empty state
[job] [logs] Jest Tests #10 / reducer should handle openRightPanel action should add right panel to empty state
[job] [logs] Jest Tests #5 / RowAction should always show expandable flyout if the page is attackDiscovery
[job] [logs] Jest Tests #5 / RowAction should always show expandable flyout if the page is attackDiscovery
[job] [logs] Jest Tests #15 / UserName should open expandable flyout in timeline
[job] [logs] Jest Tests #15 / UserName should open expandable flyout in timeline
[job] [logs] Jest Tests #15 / UserName should open expandable flyout on table
[job] [logs] Jest Tests #15 / UserName should open expandable flyout on table

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	1030	1032	+2
`securitySolution`	5725	5727	+2
total			+4

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
`@kbn/expandable-flyout`	17	21	+4

Async chunks

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

id	before	after	diff
`discover`	855.8KB	859.1KB	+3.2KB
`securitySolution`	18.0MB	18.0MB	+17.9KB
total			+21.1KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/expandable-flyout`	42	50	+8

History

💔 Build #230610 failed 270e441
💔 Build #230604 failed f4006ac89caa0a5e9943d2dc0f00ef1e44b016d2
💔 Build #230585 failed 187aa15b3700c7f91e9b3453d31c78183e4de69d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @christineweng

christineweng · 2024-12-03T03:54:27Z

/ci

christineweng · 2024-12-03T03:58:44Z

Files by Code Owner

elastic/security-entity-analytics

x-pack/plugins/security_solution/public/flyout/entity_details/host_right/index.test.tsx
x-pack/plugins/security_solution/public/flyout/entity_details/host_right/index.tsx
x-pack/plugins/security_solution/public/flyout/entity_details/user_right/index.test.tsx
x-pack/plugins/security_solution/public/flyout/entity_details/user_right/index.tsx

elastic/security-threat-hunting-investigations

Rest

elasticmachine · 2024-12-03T04:00:33Z

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

elasticmachine · 2024-12-03T04:00:34Z

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

PhilippeOberti

this work is awesome! I left a few comments, some of them are very minor, some could require some discussion...

I did some desk testing and everything looked good, except at some point I got a weird behavior where I had both the security solution flyout and the timeline flyout opened at the same time, and making changes to the timeline flyout was adding entries to the history array of the security solution flyout... Really weird!
When I tried to make a recording, I refreshed the page then couldn't reproduce this again...

packages/kbn-expandable-flyout/src/store/state.ts

x-pack/plugins/security_solution/public/flyout/document_details/shared/utils.tsx

x-pack/plugins/security_solution/public/flyout/document_details/shared/utils.test.tsx

.../plugins/security_solution/public/timelines/components/timeline/body/renderers/host_name.tsx

.../plugins/security_solution/public/timelines/components/timeline/body/renderers/user_name.tsx

x-pack/plugins/security_solution/public/flyout/shared/components/flyout_history_row.test.tsx

x-pack/plugins/security_solution/public/flyout/shared/components/flyout_history_row.tsx

x-pack/plugins/security_solution/common/experimental_features.ts

PhilippeOberti

thanks for making all the changes, this looks great! Everything LGTM I tested again locally and couldn't find any issues!

I have a few ideas of further UI improvements, we can discuss them and log them into a ticket!

machadoum

EA code changes LGTM!

Thank you!

kibanamachine · 2024-12-10T21:43:47Z

Starting backport for target branches: 8.x

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

elasticmachine · 2024-12-10T21:44:30Z

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #6 / EQL Tab rendering should render the timeline table

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	6348	6352	+4

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
`@kbn/expandable-flyout`	14	15	+1

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.7MB	14.7MB	+5.3KB

Page load bundle

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

id	before	after	diff
`securitySolution`	87.9KB	87.9KB	+40.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/expandable-flyout`	41	43	+2

History

💔 Build #258499 failed c238450
💛 Build #257587 was flaky e19c913
💚 Build #257501 succeeded 623673b
💛 Build #257173 was flaky 9307ef7
💚 Build #256522 succeeded cf2afcf

cc @christineweng

kibanamachine · 2024-12-10T21:48:51Z

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 184970

Questions ?

Please refer to the Backport tool documentation

christineweng · 2024-12-10T22:21:26Z

💚 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

…document flyout (elastic#184970) ## Summary This PR introduced flyout history in expandable flyouts to keep tracked of previously opened flyouts. The history button is available when feature flag `newExpandableFlyoutNavigationEnabled` is enabled. Flag is currently default `False` ### Changes in [kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout) package - When `openFlyout` is called, the **right** panel will be appended to the `history` slice in redux. - History can be accessed via `useExpandableFlyoutHistory` API ![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68) ### Changes to expandable flyouts in security solution - When feature flag is on, opening more than 1 flyout will show a history icon. Currently max at 10 entries - When user clicks a flyout from the history, it does not add on top on history, instead the position will be moved up. There is no duplicate entries. ![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525) **To illustrate how ordering works:** -> History: [host1, user1, alert1] -> clicks alert1 -> History: [alert1, host1, user1] Keep in mind this is slightly different in the actual implementation, as we do not display the current entry (i.e. alert1 in this example) ### Other changes in order to support flyout history - Added a preview panel for network. Previously we reused the panel for both network flyout and network preview. A dedicated network preview with out history is now available - Replaced `openRightPanel` with `openFlyout` in applicable places - Added `isPreview` and `isPreviewMode` checks in EA flyouts ## How to test - Enable feature flag `newExpandableFlyoutNavigationEnabled` <details> <summary>✅ Alerts page</summary> Available for alert, host, user, rule name and ip's <img src="https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c" /> </details> <details> <summary>✅ Explore pages (event table)</summary> Available for events, host, user, rule name and ip's <img src="https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a" /> </details> <details> <summary>✅ Cases</summary> Note: the rule and entity link still go to a page, this will be addressed in a separate PR <img src="https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486" /> </details> <details> <summary>✅ Discover in severless</summary> - enable `discover.experimental.enabledProfiles: ['security-root-profile']` <img src="https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62" /> </details> <details> <summary>❌ Disabled in alert preview </summary> <img src="https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193" /> </details> <details> <summary>❌ Disabled in preview mode </summary> <img src="https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93" /> </details> ## WIP - [x] Investigate performance with process history - [ ] Final ui of the entries - pending UIUX team ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios (cherry picked from commit 5b6887d) # Conflicts: # x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/host_name.test.tsx # x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/user_name.test.tsx

…ry in document flyout (#184970) (#203702) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Expandable flyout] Introducing Flyout history in document flyout (#184970)](#184970)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)

…document flyout (elastic#184970) ## Summary This PR introduced flyout history in expandable flyouts to keep tracked of previously opened flyouts. The history button is available when feature flag `newExpandableFlyoutNavigationEnabled` is enabled. Flag is currently default `False` ### Changes in [kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout) package - When `openFlyout` is called, the **right** panel will be appended to the `history` slice in redux. - History can be accessed via `useExpandableFlyoutHistory` API ![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68) ### Changes to expandable flyouts in security solution - When feature flag is on, opening more than 1 flyout will show a history icon. Currently max at 10 entries - When user clicks a flyout from the history, it does not add on top on history, instead the position will be moved up. There is no duplicate entries. ![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525) **To illustrate how ordering works:** -> History: [host1, user1, alert1] -> clicks alert1 -> History: [alert1, host1, user1] Keep in mind this is slightly different in the actual implementation, as we do not display the current entry (i.e. alert1 in this example) ### Other changes in order to support flyout history - Added a preview panel for network. Previously we reused the panel for both network flyout and network preview. A dedicated network preview with out history is now available - Replaced `openRightPanel` with `openFlyout` in applicable places - Added `isPreview` and `isPreviewMode` checks in EA flyouts ## How to test - Enable feature flag `newExpandableFlyoutNavigationEnabled` <details> <summary>✅ Alerts page</summary> Available for alert, host, user, rule name and ip's <img src="https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c" /> </details> <details> <summary>✅ Explore pages (event table)</summary> Available for events, host, user, rule name and ip's <img src="https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a" /> </details> <details> <summary>✅ Cases</summary> Note: the rule and entity link still go to a page, this will be addressed in a separate PR <img src="https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486" /> </details> <details> <summary>✅ Discover in severless</summary> - enable `discover.experimental.enabledProfiles: ['security-root-profile']` <img src="https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62" /> </details> <details> <summary>❌ Disabled in alert preview </summary> <img src="https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193" /> </details> <details> <summary>❌ Disabled in preview mode </summary> <img src="https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93" /> </details> ## WIP - [x] Investigate performance with process history - [ ] Final ui of the entries - pending UIUX team ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios

christineweng self-assigned this Jun 6, 2024

christineweng added the ci:cloud-persist-deployment Persist cloud deployment indefinitely label Aug 28, 2024

christineweng force-pushed the flyout-history branch 3 times, most recently from f4006ac to 270e441 Compare August 28, 2024 21:00

christineweng added the ci:cloud-deploy Create or update a Cloud deployment label Aug 28, 2024

christineweng removed the ci:cloud-persist-deployment Persist cloud deployment indefinitely label Sep 10, 2024

christineweng force-pushed the flyout-history branch from 8fc3b2d to f5fb866 Compare October 24, 2024 20:27

christineweng removed the ci:cloud-deploy Create or update a Cloud deployment label Oct 24, 2024

christineweng changed the title ~~[Security Solution][POC] Flyout history in flyout navigation~~ [Security Solution][Expandable flyout] Introducing Flyout history in document flyout Nov 13, 2024

christineweng force-pushed the flyout-history branch from f5fb866 to 8cef7f7 Compare November 13, 2024 22:45

christineweng added backport v9.0.0 Team:Threat Hunting Security Solution Threat Hunting Team release_note:feature Makes this part of the condensed release notes Team:Threat Hunting:Investigations Security Solution Investigations Team v8.18.0 labels Nov 22, 2024

christineweng force-pushed the flyout-history branch from 8cef7f7 to 1481cf3 Compare November 22, 2024 20:03

christineweng force-pushed the flyout-history branch from 1481cf3 to 728b17f Compare December 3, 2024 03:51

christineweng marked this pull request as ready for review December 3, 2024 04:00

christineweng requested review from a team as code owners December 3, 2024 04:00

christineweng requested a review from abhishekbhatia1710 December 3, 2024 04:00

christineweng requested a review from PhilippeOberti December 3, 2024 04:01

add flyout history

cf2afcf

christineweng force-pushed the flyout-history branch from 728b17f to cf2afcf Compare December 3, 2024 15:15

PhilippeOberti reviewed Dec 3, 2024

View reviewed changes

christineweng force-pushed the flyout-history branch from 9307ef7 to 623673b Compare December 5, 2024 15:27

PR comments

e19c913

christineweng force-pushed the flyout-history branch from 623673b to e19c913 Compare December 5, 2024 17:20

christineweng commented Dec 5, 2024

View reviewed changes

x-pack/plugins/security_solution/common/experimental_features.ts Outdated Show resolved Hide resolved

update flag and add no history placeholder

a876cbe

PhilippeOberti approved these changes Dec 9, 2024

View reviewed changes

Merge branch 'main' into flyout-history

c238450

machadoum approved these changes Dec 10, 2024

View reviewed changes

Merge branch 'main' of github.com:elastic/kibana into flyout-history

31c7389

christineweng enabled auto-merge (squash) December 10, 2024 19:44

christineweng merged commit 5b6887d into elastic:main Dec 10, 2024
9 checks passed

christineweng mentioned this pull request Dec 10, 2024

[8.x] [Security Solution][Expandable flyout] Introducing Flyout history in document flyout (#184970) #203702

Merged

kibanamachine mentioned this pull request Dec 10, 2024

[Security Solution] Fixes exception item comment validation on newline chars \n #202063

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Expandable flyout] Introducing Flyout history in document flyout #184970

[Security Solution][Expandable flyout] Introducing Flyout history in document flyout #184970

christineweng commented Jun 6, 2024 •

edited by kibanamachine

Loading

christineweng commented Aug 28, 2024

christineweng commented Aug 28, 2024

kibana-ci commented Aug 28, 2024 •

edited

Loading

API count

christineweng commented Dec 3, 2024

christineweng commented Dec 3, 2024

elasticmachine commented Dec 3, 2024

elasticmachine commented Dec 3, 2024

PhilippeOberti left a comment

PhilippeOberti left a comment

machadoum left a comment

kibanamachine commented Dec 10, 2024

elasticmachine commented Dec 10, 2024

API count

kibanamachine commented Dec 10, 2024

christineweng commented Dec 10, 2024

[Security Solution][Expandable flyout] Introducing Flyout history in document flyout #184970

[Security Solution][Expandable flyout] Introducing Flyout history in document flyout #184970

Conversation

christineweng commented Jun 6, 2024 • edited by kibanamachine Loading

Summary

Changes in kbn-expandable-flyout package

Changes to expandable flyouts in security solution

Other changes in order to support flyout history

How to test

WIP

Checklist

christineweng commented Aug 28, 2024

christineweng commented Aug 28, 2024

kibana-ci commented Aug 28, 2024 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

API count

History

christineweng commented Dec 3, 2024

christineweng commented Dec 3, 2024

Files by Code Owner

elastic/security-entity-analytics

elastic/security-threat-hunting-investigations

elasticmachine commented Dec 3, 2024

elasticmachine commented Dec 3, 2024

PhilippeOberti left a comment

Choose a reason for hiding this comment

PhilippeOberti left a comment

Choose a reason for hiding this comment

machadoum left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 10, 2024

elasticmachine commented Dec 10, 2024

💛 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 Dec 10, 2024

💔 All backports failed

Manual backport

Questions ?

christineweng commented Dec 10, 2024

💚 All backports created successfully

Questions ?

christineweng commented Jun 6, 2024 •

edited by kibanamachine

Loading

kibana-ci commented Aug 28, 2024 •

edited

Loading