Skip to content

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

Merged
christineweng merged 5 commits intoelastic:mainfrom
christineweng:flyout-history
Dec 10, 2024
Merged

[Security Solution][Expandable flyout] Introducing Flyout history in document flyout#184970
christineweng merged 5 commits intoelastic:mainfrom
christineweng:flyout-history

Conversation

@christineweng
Copy link
Copy Markdown
Contributor

@christineweng christineweng commented Jun 6, 2024 •
edited by kibanamachine
Loading

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

image

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

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

@christineweng christineweng self-assigned this Jun 6, 2024
@christineweng christineweng added the ci:cloud-persist-deployment Persist cloud deployment indefinitely label Aug 28, 2024
@christineweng christineweng force-pushed the flyout-history branch 3 times, most recently from f4006ac to 270e441 Compare August 28, 2024 21:00
@christineweng
Copy link
Copy Markdown
Contributor Author

christineweng commented Aug 28, 2024

/ci

@christineweng christineweng added the ci:cloud-deploy Create or update a Cloud deployment label Aug 28, 2024
@christineweng
Copy link
Copy Markdown
Contributor Author

christineweng commented Aug 28, 2024

/ci

@kibana-ci
Copy link
Copy Markdown

kibana-ci commented Aug 28, 2024 •
edited
Loading

💔 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 270e441de7dfe939078b273589ed34e6573d5c5c
  • 💔 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 christineweng removed the ci:cloud-persist-deployment Persist cloud deployment indefinitely label Sep 10, 2024
@christineweng christineweng removed the ci:cloud-deploy Create or update a Cloud deployment label Oct 24, 2024
@christineweng 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 christineweng added backport This PR is a backport of another PR 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 Threat Hunting Investigations Team v8.18.0 labels Nov 22, 2024
@christineweng
Copy link
Copy Markdown
Contributor Author

christineweng commented Dec 3, 2024

/ci

@christineweng
Copy link
Copy Markdown
Contributor Author

christineweng commented Dec 3, 2024

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

@christineweng christineweng marked this pull request as ready for review December 3, 2024 04:00
@christineweng christineweng requested review from a team as code owners December 3, 2024 04:00
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Dec 3, 2024

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

PhilippeOberti
PhilippeOberti reviewed Dec 3, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

christineweng
christineweng commented Dec 5, 2024
View reviewed changes
PhilippeOberti
PhilippeOberti approved these changes Dec 9, 2024
View reviewed changes
Copy link
Copy Markdown
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
machadoum approved these changes Dec 10, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@machadoum machadoum left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EA code changes LGTM!

Thank you!

@christineweng christineweng enabled auto-merge (squash) December 10, 2024 19:44
@christineweng christineweng merged commit 5b6887d into elastic:main Dec 10, 2024
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Dec 10, 2024

Starting backport for target branches: 8.x

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

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Dec 10, 2024

💛 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

cc @christineweng

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Dec 10, 2024

💔 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 christineweng mentioned this pull request Dec 10, 2024
Merged
@christineweng
Copy link
Copy Markdown
Contributor Author

christineweng commented Dec 10, 2024

💚 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

christineweng added a commit to christineweng/kibana that referenced this pull request Dec 10, 2024
@christineweng
[Security Solution][Expandable flyout] Introducing Flyout history in …
5568e0e 
…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
@kibanamachine kibanamachine mentioned this pull request Dec 10, 2024
Merged
5 tasks
christineweng added a commit that referenced this pull request Dec 11, 2024
@christineweng
[8.x] [Security Solution][Expandable flyout] Introducing Flyout histo…
c4658e7 
…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)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"christineweng","email":"18648970+christineweng@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-10T21:43:28Z","message":"[Security
Solution][Expandable flyout] Introducing Flyout history in document
flyout (#184970)\n\n## Summary\r\n\r\nThis PR introduced flyout history
in expandable flyouts to keep tracked\r\nof previously opened flyouts.
The history button is available when\r\nfeature flag
`newExpandableFlyoutNavigationEnabled` is enabled.\r\n\r\nFlag is
currently default `False` \r\n\r\n### Changes
in\r\n[kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout)\r\npackage\r\n\r\n-
When `openFlyout` is called, the **right** panel will be appended
to\r\nthe `history` slice in redux.\r\n- History can be accessed via
`useExpandableFlyoutHistory`
API\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68)\r\n\r\n\r\n###
Changes to expandable flyouts in security solution\r\n\r\n- When feature
flag is on, opening more than 1 flyout will show a\r\nhistory icon.
Currently max at 10 entries\r\n- When user clicks a flyout from the
history, it does not add on top on\r\nhistory, instead the position will
be moved up. There is no
duplicate\r\nentries.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525)\r\n\r\n**To
illustrate how ordering works:**\r\n-> History: [host1, user1,
alert1]\r\n-> clicks alert1 \r\n-> History: [alert1, host1, user1]
\r\nKeep in mind this is slightly different in the actual
implementation, as\r\nwe do not display the current entry (i.e. alert1
in this example)\r\n\r\n### Other changes in order to support flyout
history\r\n- Added a preview panel for network. Previously we reused the
panel for\r\nboth network flyout and network preview. A dedicated
network preview\r\nwith out history is now available\r\n- Replaced
`openRightPanel` with `openFlyout` in applicable places\r\n- Added
`isPreview` and `isPreviewMode` checks in EA flyouts\r\n\r\n## How to
test\r\n- Enable feature flag
`newExpandableFlyoutNavigationEnabled`\r\n\r\n<details>\r\n<summary>✅
Alerts page</summary>\r\nAvailable for alert, host, user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Explore pages (event table)</summary>\r\nAvailable for events, host,
user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Cases</summary>\r\nNote: the rule and entity link still go to a page,
this will be\r\naddressed in a separate
PR\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486\"\r\n/>\r\n</details>\r\n\r\n\r\n<details>\r\n<summary>✅
Discover in severless</summary>\r\n- enable
`discover.experimental.enabledProfiles:\r\n['security-root-profile']`\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in alert preview
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in preview mode
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93\"\r\n/>\r\n</details>\r\n\r\n\r\n##
WIP\r\n- [x] Investigate performance with process history\r\n- [ ] Final
ui of the entries - pending UIUX team\r\n\r\n\r\n### Checklist\r\n\r\n-
[x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"5b6887dd3df7e92dce72bf58ff80e999d501a721","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","v9.0.0","Team:Threat
Hunting","release_note:feature","Team:Threat
Hunting:Investigations","v8.18.0"],"number":184970,"url":"https://github.com/elastic/kibana/pull/184970","mergeCommit":{"message":"[Security
Solution][Expandable flyout] Introducing Flyout history in document
flyout (#184970)\n\n## Summary\r\n\r\nThis PR introduced flyout history
in expandable flyouts to keep tracked\r\nof previously opened flyouts.
The history button is available when\r\nfeature flag
`newExpandableFlyoutNavigationEnabled` is enabled.\r\n\r\nFlag is
currently default `False` \r\n\r\n### Changes
in\r\n[kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout)\r\npackage\r\n\r\n-
When `openFlyout` is called, the **right** panel will be appended
to\r\nthe `history` slice in redux.\r\n- History can be accessed via
`useExpandableFlyoutHistory`
API\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68)\r\n\r\n\r\n###
Changes to expandable flyouts in security solution\r\n\r\n- When feature
flag is on, opening more than 1 flyout will show a\r\nhistory icon.
Currently max at 10 entries\r\n- When user clicks a flyout from the
history, it does not add on top on\r\nhistory, instead the position will
be moved up. There is no
duplicate\r\nentries.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525)\r\n\r\n**To
illustrate how ordering works:**\r\n-> History: [host1, user1,
alert1]\r\n-> clicks alert1 \r\n-> History: [alert1, host1, user1]
\r\nKeep in mind this is slightly different in the actual
implementation, as\r\nwe do not display the current entry (i.e. alert1
in this example)\r\n\r\n### Other changes in order to support flyout
history\r\n- Added a preview panel for network. Previously we reused the
panel for\r\nboth network flyout and network preview. A dedicated
network preview\r\nwith out history is now available\r\n- Replaced
`openRightPanel` with `openFlyout` in applicable places\r\n- Added
`isPreview` and `isPreviewMode` checks in EA flyouts\r\n\r\n## How to
test\r\n- Enable feature flag
`newExpandableFlyoutNavigationEnabled`\r\n\r\n<details>\r\n<summary>✅
Alerts page</summary>\r\nAvailable for alert, host, user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Explore pages (event table)</summary>\r\nAvailable for events, host,
user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Cases</summary>\r\nNote: the rule and entity link still go to a page,
this will be\r\naddressed in a separate
PR\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486\"\r\n/>\r\n</details>\r\n\r\n\r\n<details>\r\n<summary>✅
Discover in severless</summary>\r\n- enable
`discover.experimental.enabledProfiles:\r\n['security-root-profile']`\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in alert preview
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in preview mode
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93\"\r\n/>\r\n</details>\r\n\r\n\r\n##
WIP\r\n- [x] Investigate performance with process history\r\n- [ ] Final
ui of the entries - pending UIUX team\r\n\r\n\r\n### Checklist\r\n\r\n-
[x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"5b6887dd3df7e92dce72bf58ff80e999d501a721"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/184970","number":184970,"mergeCommit":{"message":"[Security
Solution][Expandable flyout] Introducing Flyout history in document
flyout (#184970)\n\n## Summary\r\n\r\nThis PR introduced flyout history
in expandable flyouts to keep tracked\r\nof previously opened flyouts.
The history button is available when\r\nfeature flag
`newExpandableFlyoutNavigationEnabled` is enabled.\r\n\r\nFlag is
currently default `False` \r\n\r\n### Changes
in\r\n[kbn-expandable-flyout](https://github.com/elastic/kibana/tree/main/packages/kbn-expandable-flyout)\r\npackage\r\n\r\n-
When `openFlyout` is called, the **right** panel will be appended
to\r\nthe `history` slice in redux.\r\n- History can be accessed via
`useExpandableFlyoutHistory`
API\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/081d6d6f-3c10-40f0-8882-73bc8c275e68)\r\n\r\n\r\n###
Changes to expandable flyouts in security solution\r\n\r\n- When feature
flag is on, opening more than 1 flyout will show a\r\nhistory icon.
Currently max at 10 entries\r\n- When user clicks a flyout from the
history, it does not add on top on\r\nhistory, instead the position will
be moved up. There is no
duplicate\r\nentries.\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/3bc68519-5eea-4fb7-9386-f6688b28b525)\r\n\r\n**To
illustrate how ordering works:**\r\n-> History: [host1, user1,
alert1]\r\n-> clicks alert1 \r\n-> History: [alert1, host1, user1]
\r\nKeep in mind this is slightly different in the actual
implementation, as\r\nwe do not display the current entry (i.e. alert1
in this example)\r\n\r\n### Other changes in order to support flyout
history\r\n- Added a preview panel for network. Previously we reused the
panel for\r\nboth network flyout and network preview. A dedicated
network preview\r\nwith out history is now available\r\n- Replaced
`openRightPanel` with `openFlyout` in applicable places\r\n- Added
`isPreview` and `isPreviewMode` checks in EA flyouts\r\n\r\n## How to
test\r\n- Enable feature flag
`newExpandableFlyoutNavigationEnabled`\r\n\r\n<details>\r\n<summary>✅
Alerts page</summary>\r\nAvailable for alert, host, user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/e74a6444-763f-4e18-8370-f6c0c83e0d4c\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Explore pages (event table)</summary>\r\nAvailable for events, host,
user, rule name and
ip's\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/d2b9f0b9-a788-4174-bc80-8ac9c51fb16a\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>✅
Cases</summary>\r\nNote: the rule and entity link still go to a page,
this will be\r\naddressed in a separate
PR\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/fa7a5c86-d1e3-4dad-80ed-405c52efc486\"\r\n/>\r\n</details>\r\n\r\n\r\n<details>\r\n<summary>✅
Discover in severless</summary>\r\n- enable
`discover.experimental.enabledProfiles:\r\n['security-root-profile']`\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/ebd5de5d-1ed3-42ad-bb6f-1beccdc48e62\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in alert preview
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/53e82ded-0db8-4639-afa1-c5cf224cf193\"\r\n/>\r\n</details>\r\n\r\n<details>\r\n<summary>❌
Disabled in preview mode
</summary>\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a12b741f-2558-4fb5-852f-282af6e10f93\"\r\n/>\r\n</details>\r\n\r\n\r\n##
WIP\r\n- [x] Investigate performance with process history\r\n- [ ] Final
ui of the entries - pending UIUX team\r\n\r\n\r\n### Checklist\r\n\r\n-
[x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials\r\n- [x] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"5b6887dd3df7e92dce72bf58ff80e999d501a721"}},{"branch":"8.x","label":"v8.18.0","labelRegex":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Dec 12, 2024
@christineweng @CAWilson94
[Security Solution][Expandable flyout] Introducing Flyout history in …
f9a6be1 
…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
@nastasha-solomon nastasha-solomon mentioned this pull request Jan 31, 2025
Closed
@PhilippeOberti PhilippeOberti mentioned this pull request Feb 7, 2025
Merged
3 tasks
PhilippeOberti added a commit that referenced this pull request Feb 19, 2025
@PhilippeOberti
[Security Solution][Expandable flyout] show last open in the history (#…
dd471d1 
…210286)

## Summary

This PR makes a small UI addition to the expandable flyout package
history functionality [merged not long
ago](#184970).

We are snow saving the time at which a panel was opened, along side the
panel's information. This allows us to show when previous flyout panels
were opened, making it users easier for users to know which
host/user/network/alerts/event document they recently looked at.

The primary logic change happens in the expandable flyout package. Most
of the other code changes are in Security Solution unit tests.

#### Before

![Screenshot 2025-02-07 at 5 07
48 PM](https://github.com/user-attachments/assets/8f0b79b7-a3db-4d01-8d3c-a4a9b632e9cf)

#### After

![Screenshot 2025-02-13 at 11 03
31 AM](https://github.com/user-attachments/assets/64cd5df2-a0b6-4eee-8555-53aedda1db8f)

You'll notice in the screenshot above that another small improvement was
added: we're limiting the width of the text rendered and show an
ellipsis. This will prevent really long texts to have the popover really
wide or to be rendered over multiple lines

### 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/src/platform/packages/shared/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
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 19, 2025
@PhilippeOberti
[Security Solution][Expandable flyout] show last open in the history (e…
322345e 
…lastic#210286)

## Summary

This PR makes a small UI addition to the expandable flyout package
history functionality [merged not long
ago](elastic#184970).

We are snow saving the time at which a panel was opened, along side the
panel's information. This allows us to show when previous flyout panels
were opened, making it users easier for users to know which
host/user/network/alerts/event document they recently looked at.

The primary logic change happens in the expandable flyout package. Most
of the other code changes are in Security Solution unit tests.

#### Before

![Screenshot 2025-02-07 at 5 07
48 PM](https://github.com/user-attachments/assets/8f0b79b7-a3db-4d01-8d3c-a4a9b632e9cf)

#### After

![Screenshot 2025-02-13 at 11 03
31 AM](https://github.com/user-attachments/assets/64cd5df2-a0b6-4eee-8555-53aedda1db8f)

You'll notice in the screenshot above that another small improvement was
added: we're limiting the width of the text rendered and show an
ellipsis. This will prevent really long texts to have the popover really
wide or to be rendered over multiple lines

### 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/src/platform/packages/shared/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 dd471d1)
PhilippeOberti added a commit to PhilippeOberti/kibana that referenced this pull request Feb 19, 2025
@PhilippeOberti
[Security Solution][Expandable flyout] show last open in the history (e…
7d7a91e 
…lastic#210286)

## Summary

This PR makes a small UI addition to the expandable flyout package
history functionality [merged not long
ago](elastic#184970).

We are snow saving the time at which a panel was opened, along side the
panel's information. This allows us to show when previous flyout panels
were opened, making it users easier for users to know which
host/user/network/alerts/event document they recently looked at.

The primary logic change happens in the expandable flyout package. Most
of the other code changes are in Security Solution unit tests.

#### Before

![Screenshot 2025-02-07 at 5 07
48 PM](https://github.com/user-attachments/assets/8f0b79b7-a3db-4d01-8d3c-a4a9b632e9cf)

#### After

![Screenshot 2025-02-13 at 11 03
31 AM](https://github.com/user-attachments/assets/64cd5df2-a0b6-4eee-8555-53aedda1db8f)

You'll notice in the screenshot above that another small improvement was
added: we're limiting the width of the text rendered and show an
ellipsis. This will prevent really long texts to have the popover really
wide or to be rendered over multiple lines

### 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/src/platform/packages/shared/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 dd471d1)

# Conflicts:
#	x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/host_right/index.test.tsx
#	x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/service_right/index.test.tsx
#	x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/index.test.tsx
@christineweng christineweng mentioned this pull request Feb 19, 2025
Merged
2 tasks
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
@PhilippeOberti @CAWilson94
[Security Solution][Expandable flyout] show last open in the history (e…
6104924 
…lastic#210286)

## Summary

This PR makes a small UI addition to the expandable flyout package
history functionality [merged not long
ago](elastic#184970).

We are snow saving the time at which a panel was opened, along side the
panel's information. This allows us to show when previous flyout panels
were opened, making it users easier for users to know which
host/user/network/alerts/event document they recently looked at.

The primary logic change happens in the expandable flyout package. Most
of the other code changes are in Security Solution unit tests.

#### Before

![Screenshot 2025-02-07 at 5 07
48 PM](https://github.com/user-attachments/assets/8f0b79b7-a3db-4d01-8d3c-a4a9b632e9cf)

#### After

![Screenshot 2025-02-13 at 11 03
31 AM](https://github.com/user-attachments/assets/64cd5df2-a0b6-4eee-8555-53aedda1db8f)

You'll notice in the screenshot above that another small improvement was
added: we're limiting the width of the text rendered and show an
ellipsis. This will prevent really long texts to have the popover really
wide or to be rendered over multiple lines

### 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/src/platform/packages/shared/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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@machadoum machadoum machadoum approved these changes

@PhilippeOberti PhilippeOberti PhilippeOberti approved these changes

@abhishekbhatia1710 abhishekbhatia1710 Awaiting requested review from abhishekbhatia1710 abhishekbhatia1710 was automatically assigned from elastic/security-entity-analytics

Assignees

@christineweng christineweng

Labels

backport This PR is a backport of another PR release_note:feature Makes this part of the condensed release notes Team:Threat Hunting:Investigations Security Solution Threat Hunting Investigations Team Team:Threat Hunting Security Solution Threat Hunting Team v8.18.0 v9.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@christineweng @kibana-ci @elasticmachine @kibanamachine @machadoum @PhilippeOberti