Onboarding fleet integration by angorayc · Pull Request #8 · semd/kibana

angorayc · 2024-10-02T11:15:25Z

Summary

Please use this branch to see the complete version: elastic#193131

Fleet changes:

[SecuritySolution] Onboarding hub with Fleet integration elastic/kibana#194028
[SecuritySolution] Allow custom sorting on integration cards elastic/kibana#195397

It shows featured cards without the search box on the recommended tab; and shows all the cards and a search box on other tabs:

Featured cards:

AWS
GCP
Azure
Elastic Defend
CrowdStrike (to promote our extended protections/3rd party EDR support)
Wiz (or another cloud integration to promote extended protections)
Network Packet Capture
Osquery Manager
Cloud Asset Inventory (need to confirm that's confirmed for 8.16) - Currently Not Found any integration matched

It persists the search term across tabs when the search box is visible:

When clicking on back button, cancellation button, and save button, it should go back to the security onboarding hub:

Screen.Recording.2024-10-08.at.13.15.12.mov

Screen.Recording.2024-10-08.at.13.13.17.mov

semd · 2024-10-03T19:09:58Z

+    onSaveNavigateTo: [APP_UI_ID, { path: ONBOARDING_PATH }],
+  };
+  const url =
+    card.url.indexOf(APP_INTEGRATIONS_PATH) >= 0 && onboardingLink


What's the difference between APP_INTEGRATIONS_PATH and integrationRootUrl?

getAppUrl should take basePath into account

semd · 2024-10-03T19:13:48Z

+      } else if (url.startsWith('http') || url.startsWith('https')) {
+        window.open(url, '_blank');


Why do we assume that absolute URLs need to open in a new tab? Just curiosity

It seemed that the card details url varies, I follow their original implementation here and just update the route's state to avoid broken links:

https://github.com/elastic/kibana/pull/194028/files#diff-8b3cc54ced6b784857beabd4caf73fa9307b865cfa886e2d4c5652fbdcdb0374R169-R180

semd · 2024-10-07T13:13:43Z

+  const installed = packageData?.items?.filter(
+    (pkg) =>
+      pkg.status === installationStatuses.Installed ||
+      pkg.status === installationStatuses.InstallFailed


What does this package status mean? Should we count them as successfully installed?

In the Fleet page, they regard these two status as installed: https://github.com/elastic/kibana/blob/7ea0ddc038337181df055f3439969706601d7103/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/home/index.tsx#L63-L71

So I'm following the same implementation to have the consistent count

@angorayc

## Summary Issue: #189487 This PR is the final implementation of the Onboarding page redesign. It has been developed in collaboration with @angorayc and @agusruidiazgd, using this branch as a feature branch. It already includes 2 smaller PRs that have already been reviewed and approved by the @elastic/security-threat-hunting-explore team: - semd#8 - semd#9 ### Changes - Onboarding page architecture refactor ([issue](#174766)) - Fixes #183765 (from [this Meta issue](#183760)) --- - The progress bar has been removed <img width="903" alt="progress bar" src="https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea"> --- - Card styles updated: - Icons updated to custom SVGs to have the correct color - Icon with circle background - Card internal content border removed | Old | New | | - | - | |<img width="1172" alt="Old styles" src="https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016">|<img width="1172" alt="New styles" src="https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372">| --- - Completed card styles updated: - Icon with green circle background | Old | New | | - | - | |<img width="1172" alt="Old styles complete" src="https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451">|<img width="1172" alt="New styles complete" src="https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d">| --- - Improved "Add data with integrations" card | Old | New | | - | - | |<img width="1174" alt="old integrations card" src="https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5">|<img width="1174" alt="new integrations card" src="https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf">| --- - New "Configure AI assistant" card in a new "Discover Elastic AI" group https://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Angela Chuang <yi-chun.chuang@elastic.co> Co-authored-by: Agustina Nahir Ruidiaz <agustina.ruidiaz@elastic.co>

@angorayc

## Summary Issue: elastic#189487 This PR is the final implementation of the Onboarding page redesign. It has been developed in collaboration with @angorayc and @agusruidiazgd, using this branch as a feature branch. It already includes 2 smaller PRs that have already been reviewed and approved by the @elastic/security-threat-hunting-explore team: - semd#8 - semd#9 ### Changes - Onboarding page architecture refactor ([issue](elastic#174766)) - Fixes elastic#183765 (from [this Meta issue](elastic#183760)) --- - The progress bar has been removed <img width="903" alt="progress bar" src="https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea"> --- - Card styles updated: - Icons updated to custom SVGs to have the correct color - Icon with circle background - Card internal content border removed | Old | New | | - | - | |<img width="1172" alt="Old styles" src="https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016">|<img width="1172" alt="New styles" src="https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372">| --- - Completed card styles updated: - Icon with green circle background | Old | New | | - | - | |<img width="1172" alt="Old styles complete" src="https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451">|<img width="1172" alt="New styles complete" src="https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d">| --- - Improved "Add data with integrations" card | Old | New | | - | - | |<img width="1174" alt="old integrations card" src="https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5">|<img width="1174" alt="new integrations card" src="https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf">| --- - New "Configure AI assistant" card in a new "Discover Elastic AI" group https://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Angela Chuang <yi-chun.chuang@elastic.co> Co-authored-by: Agustina Nahir Ruidiaz <agustina.ruidiaz@elastic.co> (cherry picked from commit d39c75a)

@timestamp

Closes elastic#258318 Closes elastic#258319 ## Summary Adds logic to the alert episodes table to display `.alert_actions` information. This includes: - New action-specific API paths. - Snooze - **Per group hash.** - Button in the actions column opens a popover where an `until` can be picked. - **When snoozed** - A bell shows up in the status column. - Mouse over the bell icon to see until when the snooze is in effect. - Unsnooze - **Per group hash.** - Clicking the button removes the snooze. - Ack/Unack - **Per episode.** - Button in the actions column - When "acked", an icon shows in the status column. - Tags - This PR only handles displaying tags. They need to be created via API. - Resolve/Unresolve - **Per group hash.** - Button inside the ellipsis always - The status is turned to `inactive` **regardless of the "real" status.** <img width="1704" height="672" alt="Screenshot 2026-03-25 at 16 04 12" src="https://github.com/user-attachments/assets/5ef4111a-6e0c-4114-a60e-ce5f81a86ac6" /> ## Testing <details> <summary>POST mock episodes</summary> ``` POST _bulk { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:00:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:01:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "pending" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:02:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:03:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "inactive" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:04:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:05:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:06:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-001", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:07:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:08:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "active" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:09:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "recovering" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:10:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "recovering" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:11:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:12:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "recovering" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:13:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-2", "episode": { "id": "ep-002", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:14:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-003", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:15:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-1", "episode": { "id": "ep-003", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:16:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-4", "episode": { "id": "ep-004", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:17:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-4", "episode": { "id": "ep-004", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:18:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-4", "episode": { "id": "ep-004", "status": "recovering" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:19:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-4", "episode": { "id": "ep-004", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:20:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-5", "episode": { "id": "ep-005", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:21:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-5", "episode": { "id": "ep-005", "status": "pending" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:22:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-5", "episode": { "id": "ep-005", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:23:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-9", "episode": { "id": "ep-006", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:24:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-9", "episode": { "id": "ep-006", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:25:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-9", "episode": { "id": "ep-006", "status": "active" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:26:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-1" }, "group_hash": "gh-9", "episode": { "id": "ep-006", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:14:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-2" }, "group_hash": "gh-7", "episode": { "id": "ep-007", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:15:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-2" }, "group_hash": "gh-7", "episode": { "id": "ep-007", "status": "inactive" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:16:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-3" }, "group_hash": "gh-8", "episode": { "id": "ep-008", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:17:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-3" }, "group_hash": "gh-8", "episode": { "id": "ep-008", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:18:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-3" }, "group_hash": "gh-8", "episode": { "id": "ep-008", "status": "recovering" }, "status": "recovered" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:20:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-4" }, "group_hash": "gh-9", "episode": { "id": "ep-009", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:21:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-4" }, "group_hash": "gh-9", "episode": { "id": "ep-009", "status": "pending" }, "status": "no_data" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:23:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-5" }, "group_hash": "gh-10", "episode": { "id": "ep-010", "status": "pending" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:24:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-5" }, "group_hash": "gh-10", "episode": { "id": "ep-010", "status": "active" }, "status": "breached" } { "create": { "_index": ".rule-events" }} { "@timestamp": "2026-01-27T16:25:00.000Z", "source": "internal", "type": "alert", "rule": { "id": "rule-5" }, "group_hash": "gh-10", "episode": { "id": "ep-010", "status": "active" }, "status": "no_data" } ``` </details> - In the POST above, episodes 1 and 3, and episodes 6 and 9 have the same group hashes. - Go to `https://localhost:5601/app/observability/alerts-v2` and try all buttons. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

angorayc added 25 commits October 1, 2024 13:37

add fleet integration

b2a2873

add installation status

b226a3c

installation status

c6b1992

clean up

5053567

integration badge

e64e0aa

add customised cancellation link

f66bbd8

agent still required

a3ffd1e

display only 9 cards in the first tab

25943e0

cancellation link

172345f

types

94fd73f

add empty state styles

1800b07

update complete badge

ef9d5ad

unit tests

b6857c3

update installStatus in IntegrationCardItem

ea3266f

agentless available callout

80b6ee3

update routes state

2487395

update onSave link in fleet

0ff541b

update unit tests

9621486

fix apm link

0856719

fixup

ca0da36

clean up

69c71cc

update installation label

8da2fc8

types

3733369

add comments in fleet

49e182e

tests

03adb15