[Security Solution][Timeline] - Store flyout information in the url #148800

michaelolo24 · 2023-01-12T12:37:33Z

Summary

The purpose of this PR is to give users the ability to share a given alert on the alert's page. This is possible via two changes. First, the simple state of the details flyout is now stored in a url query param eventFlyout=(...flyoutState), when opened. Secondly, the addition of a Share Alert button which allows users to share a link directly to the alert page filtered for the given alert and the flyout opened.

Caveats

The share button is much more reliable than copying the url from the browser url bar.

Ideally storing the url state in the url should have been enough, but because of the potential for relative time ranges in the global kql query bar (which are also stored in the url), it it is possible to share a url by copying the browser url that doesn't actually open the given alert.

As an example: A user with a relative time range of last 24 hours opens an alert that was created this morning with a colleague. The colleague doesn't actually visit the link till the following afternoon. When the user visits the link, they may see the flyout open, but may not actually see the associated alert in the alert table. This is because the relative time range of last 24 hours doesn't contain the alert that was opened the previous morning. The flyout may open because it is not constrained by the relative time range, but the primary alert table may easily be out of sync. Given this, the Share Alert button creates a custom url alerts/alertId?index='blah'&timestamp='...' which redirects the user to the specific alert and time range of their given alert.

Storing of the alert flyout url state only works on the alerts page. The url state is not stored on the cases or rules pages.

Although this flyout is used in multiple locations, we only want to preserve it on this singular page to keep the user flow simple, and also allow us to more smoothly transition to the future flyout experience.

Demo

Sharing via the browser url

Screen.Recording.2023-03-24.at.11.18.57.AM.mov

Sharing via the `Share alert` button

Screen.Recording.2023-03-31.at.1.20.59.PM.mov

Follow up work

Revert/Delete the changes of the old Alerts Page POC:
#154477

elasticmachine · 2023-01-12T13:13:11Z

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

elasticmachine · 2023-01-12T13:13:13Z

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

PhilippeOberti

code LGTM, tested with and without alerts, the flyout seems to handle it just fine!

If I understand correctly, at the moment we do not save which tab within the flyout is displayed. I guess this will happen with the new expanded flyout work right?

michaelolo24 · 2023-01-30T12:26:11Z

code LGTM, tested with and without alerts, the flyout seems to handle it just fine!

If I understand correctly, at the moment we do not save which tab within the flyout is displayed. I guess this will happen with the new expanded flyout work right?

Yep, that's the plan!

kibana-ci · 2023-03-27T12:04:20Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: a9199a5f2d24858a42a26bab67c68b5e31a36b69
Interpreting CI Failures

Failed CI Steps

History

💔 Build #115442 failed 682d081eee454b1ff90b18260033185ade90bd00
💔 Build #115339 failed d03d76b95f4d72192e63d29239cba03f46b91051
💛 Build #115160 was flaky f3da48ea2e49fe9b91e80d8f6116b01762f377cb
💚 Build #106083 succeeded ca0b2e0288f84d6e5271f26cc88f5ad5c03ced70
💔 Build #103748 failed 35a978e6dadbbe880ece6bc9e77951797cc2862a

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

cc @michaelolo24

kibana-ci · 2023-04-06T15:02:59Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3818	3790	-28

Async chunks

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

id	before	after	diff
`securitySolution`	15.9MB	15.9MB	-26.6KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`securitySolution`	433	436	+3

Total ESLint disabled count

id	before	after	diff
`securitySolution`	513	516	+3

History

💚 Build #118325 succeeded d0e8a7a
💚 Build #118301 succeeded 723d5ea
💚 Build #118177 succeeded 91f6d1e12cbd1cb21d6c53dbfb2860201ffea2ee
💔 Build #118163 failed 636ce069082a906a222b57ca76416312c21fe712
💔 Build #118114 failed 6c979f65bfb2033893865d817d05fd6e3a471ad9

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

cc @michaelolo24

PhilippeOberti

Tested again, LGTM! Thanks for adding some e2e tests.

You could potentially add some short documentation to the couple of hooks you added, but maybe their names are clear enough, plus this will be replaced by the expandable flyout soon..

dplumlee

Pulled down and tested, all looks good to me!

michaelolo24 · 2023-04-06T19:04:53Z

Tested again, LGTM! Thanks for adding some e2e tests.

You could potentially add some short documentation to the couple of hooks you added, but maybe their names are clear enough, plus this will be replaced by the expandable flyout soon..

Thanks! I'll add that in the follow up PR on Monday that removes the old alert details page as well

## Summary This PR introduces the field `kibana.alert.url` to the alerts generated by al alert rule types. Functionality was added in [this PR](#148800) for 8.8 to allow users to link directly to the alert flyout. To be able to provide users with this field via our connectors, we are adding the url under the field `kibana.alert.url`. To test, create an alert of any type and you should see this field set in the alert flyout: <img width="838" alt="image" src="https://user-images.githubusercontent.com/17211684/233993880-fc7fd790-105e-4c16-947e-e2f5a2965936.png"> The url provided is a redirect path that contains the necessary information (space, id, index, and timestamp) to be able to redirect the user to a filtered alert page for the given alert and the detail flyout opened. This allows us to retain flexibility in the future for any changes that may occur with the alert flyout or an alert page. More on that can be found in the earlier pr: #148800 ### Testing 1. The `kibana.alert.url` field makes use of the `publicBaseUrl` configuration which must be set in your kibana.dev.yml for this field to be generated. Add the following to your yaml file. Note that if you use a `basePath`, it will have to be appended to the end of your `publicBaseUrl` path. ``` server.publicBaseUrl: 'http://localhost:5601' ``` with basePath: ``` server.basePath: '/someBasePath' server.publicBaseUrl: 'http://localhost:5601/someBasePath' ``` 2. Generate data and enable any rule type to get alerts. 3. Go to the alert page, click expand detail, and search for `kibana.alert.url` in the table. 4. Visit that url and you should see a filtered alert page with the details flyout opened ***Caveat - when grouping is enabled, the details flyout will not open as the table that it is attached to is not actually loaded at that point in time. When the table is loaded by either disabling grouping or opening the group, the details flyout will open

michaelolo24 self-assigned this Jan 12, 2023

michaelolo24 force-pushed the alert-details-url-state branch 3 times, most recently from 8fa6b2a to 2486573 Compare January 12, 2023 13:12

michaelolo24 marked this pull request as ready for review January 12, 2023 13:13

michaelolo24 requested review from a team as code owners January 12, 2023 13:13

PhilippeOberti approved these changes Jan 17, 2023

View reviewed changes

michaelolo24 force-pushed the alert-details-url-state branch from aa5adb0 to ca0b2e0 Compare February 7, 2023 14:06

michaelolo24 added 8.8 candidate v8.8.0 and removed 8.7 candidate v8.7.0 labels Mar 23, 2023

michaelolo24 force-pushed the alert-details-url-state branch 2 times, most recently from f3da48e to d03d76b Compare March 24, 2023 15:18

michaelolo24 added the ci:cloud-deploy Create or update a Cloud deployment label Mar 24, 2023

michaelolo24 force-pushed the alert-details-url-state branch from 682d081 to a9199a5 Compare March 27, 2023 11:44

michaelolo24 marked this pull request as draft March 31, 2023 17:14

michaelolo24 force-pushed the alert-details-url-state branch 2 times, most recently from 1e55b3d to a2bb6f8 Compare April 5, 2023 11:22

michaelolo24 added 13 commits April 6, 2023 08:29

store flyout information in the url

dd8ae54

close flyout when navigating away

b7dfa68

WIP: create shareable alert link

2eac170

WIP:add useLocation mock and comment

1fadfce

remove unused imports

24c129f

migrate to euicopy

653a856

mock location for other test

641f4d1

WIP: create alert details redirect

9a44b93

add index field and make query params

19c3a1b

Adding tests and cleaning up code

0fe8ba0

remove only on describe block

ce49ab0

add index name to component

9e4f433

fix last cypress test

723d5ea

michaelolo24 force-pushed the alert-details-url-state branch from bac2f5c to 723d5ea Compare April 6, 2023 12:29

michaelolo24 marked this pull request as ready for review April 6, 2023 12:50

michaelolo24 requested a review from a team as a code owner April 6, 2023 12:50

remove isOnAlertsPage check

d0e8a7a

lgestc approved these changes Apr 6, 2023

View reviewed changes

michaelolo24 added 2 commits April 6, 2023 10:27

rename url param to eventFlyout

dd2f700

update comment

7577149

PhilippeOberti approved these changes Apr 6, 2023

View reviewed changes

dplumlee approved these changes Apr 6, 2023

View reviewed changes

michaelolo24 mentioned this pull request Apr 6, 2023

[Security Solution][Investigations] - Remove POC code #154477

Closed

michaelolo24 merged commit 56566ff into elastic:main Apr 6, 2023

kibanamachine added the backport:skip This commit does not require backporting label Apr 6, 2023

michaelolo24 mentioned this pull request Apr 21, 2023

[Security Solution][Investigations] - Add kibana.alert.url #155069

Merged

nastasha-solomon mentioned this pull request Apr 25, 2023

Alerts can be shared via a shareable URL elastic/security-docs#3184

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Timeline] - Store flyout information in the url #148800

[Security Solution][Timeline] - Store flyout information in the url #148800

michaelolo24 commented Jan 12, 2023 •

edited

Loading

elasticmachine commented Jan 12, 2023

elasticmachine commented Jan 12, 2023

PhilippeOberti left a comment •

edited

Loading

michaelolo24 commented Jan 30, 2023

kibana-ci commented Mar 27, 2023 •

edited

Loading

kibana-ci commented Apr 6, 2023 •

edited

Loading

ESLint disabled line counts

Total ESLint disabled count

PhilippeOberti left a comment

dplumlee left a comment

michaelolo24 commented Apr 6, 2023

[Security Solution][Timeline] - Store flyout information in the url #148800

[Security Solution][Timeline] - Store flyout information in the url #148800

Conversation

michaelolo24 commented Jan 12, 2023 • edited Loading

Summary

Caveats

Demo

Sharing via the browser url

Sharing via the Share alert button

Follow up work

elasticmachine commented Jan 12, 2023

elasticmachine commented Jan 12, 2023

PhilippeOberti left a comment • edited Loading

Choose a reason for hiding this comment

michaelolo24 commented Jan 30, 2023

kibana-ci commented Mar 27, 2023 • edited Loading

⏳ Build in-progress, with failures

Failed CI Steps

History

kibana-ci commented Apr 6, 2023 • edited Loading

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

ESLint disabled line counts

Total ESLint disabled count

History

PhilippeOberti left a comment

Choose a reason for hiding this comment

dplumlee left a comment

Choose a reason for hiding this comment

michaelolo24 commented Apr 6, 2023

michaelolo24 commented Jan 12, 2023 •

edited

Loading

Sharing via the `Share alert` button

PhilippeOberti left a comment •

edited

Loading

kibana-ci commented Mar 27, 2023 •

edited

Loading

kibana-ci commented Apr 6, 2023 •

edited

Loading