Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Onboarding fleet integration #8

Merged
merged 35 commits into from
Oct 10, 2024
Merged

Onboarding fleet integration #8

merged 35 commits into from
Oct 10, 2024

Conversation

angorayc
Copy link
Collaborator

@angorayc angorayc commented Oct 2, 2024 •
edited
Loading

Summary

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

Fleet changes:

  1. [SecuritySolution] Onboarding hub with Fleet integration elastic/kibana#194028
  2. [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:

  1. AWS
  2. GCP
  3. Azure
  4. Elastic Defend
  5. CrowdStrike (to promote our extended protections/3rd party EDR support)
  6. Wiz (or another cloud integration to promote extended protections)
  7. Network Packet Capture
  8. Osquery Manager
  9. Cloud Asset Inventory (need to confirm that's confirmed for 8.16) - Currently Not Found any integration matched
Screenshot 2024-10-08 at 13 31 12

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
semd reviewed Oct 3, 2024
View reviewed changes
...s/security_solution/public/onboarding/components/onboarding_body/cards/integrations/utils.ts Outdated
onSaveNavigateTo: [APP_UI_ID, { path: ONBOARDING_PATH }],
};
const url =
card.url.indexOf(APP_INTEGRATIONS_PATH) >= 0 && onboardingLink
Copy link
Owner

Choose a reason for hiding this comment

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

What's the difference between APP_INTEGRATIONS_PATH and integrationRootUrl?

Copy link
Collaborator Author

@angorayc angorayc Oct 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

getAppUrl should take basePath into account

semd
semd reviewed Oct 3, 2024
View reviewed changes
...s/security_solution/public/onboarding/components/onboarding_body/cards/integrations/utils.ts Outdated
Comment on lines 121 to 122
} else if (url.startsWith('http') || url.startsWith('https')) {
window.open(url, '_blank');
Copy link
Owner

Choose a reason for hiding this comment

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

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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

@angorayc angorayc marked this pull request as ready for review October 7, 2024 12:59
@angorayc angorayc requested a review from semd October 7, 2024 12:59
semd
semd reviewed Oct 7, 2024
View reviewed changes
...blic/onboarding/components/onboarding_body/cards/integrations/integrations_check_complete.ts
const installed = packageData?.items?.filter(
(pkg) =>
pkg.status === installationStatuses.Installed ||
pkg.status === installationStatuses.InstallFailed
Copy link
Owner

Choose a reason for hiding this comment

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

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

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

@semd semd merged commit b16a1f7 into semd:refactor/onboarding_hub_new_architecture Oct 10, 2024
@semd semd mentioned this pull request Oct 10, 2024
Merged
semd added a commit to elastic/kibana that referenced this pull request Oct 11, 2024
@semd @elasticmachine
@kibanamachine @angorayc @agusruidiazgd
[Security Solution] Onboarding redesign (#192247)
d39c75a 
## 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>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 11, 2024
@semd
[Security Solution] Onboarding redesign (elastic#192247)
c4e8a3d 
## 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@semd semd semd approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@angorayc @semd