Skip to content

Comments

[8.19] [Security Solution] Solution navigation architecture revision (#217890)#221923

Merged
semd merged 16 commits intoelastic:8.19from
semd:backport/8.19/pr-217890
May 30, 2025
Merged

[8.19] [Security Solution] Solution navigation architecture revision (#217890)#221923
semd merged 16 commits intoelastic:8.19from
semd:backport/8.19/pr-217890

Conversation

@semd
Copy link
Contributor

@semd semd commented May 29, 2025

Backport

This will backport the following commits from main to 8.19:

Questions ?

Please refer to the Backport tool documentation

@semd
[Security Solution] Solution navigation architecture revision (elasti…
e505174 
…c#217890)

## Summary

This PR updates and simplifies the general architecture of the Security
Solution links, removing unnecessary code.

The new architecture leverages the static `navigationTree` files. This
approach was discussed and agreed with @tsullivan (Shared-UX team) and
introduced in [this PR](elastic#215969).

With these changes, the `navigationTree` becomes the SSoT (Single Source
of Truth) for the links hierarchy. This is done by registering the
Security Solution plugin `deepLinks` using the regular
`ApplicationLinks` information, but following the same hierarchy as the
`navigationTree`. This ensures consistency across the app and keeps the
code DRY.

>[!note]
These changes only affect the new _Solution navigation_. The _Classic
navigation_ remains unchanged and isolated, as it is expected to be
deprecated and removed in the near future.

### Architecture change

- The "links switchers", which were functions to programmatically change
the links hierarchy, have been removed.
- The `NavigationLinks` from which we were generating the
`navigationTree` programatically have also been dropped.
- The SecuritySolution plugin `deepLinks` are now generated using the
`ApplicationLinks` for the link configuration (title, path...) and the
current `navigationTree` for the hierarchy.

#### Previous architecture
![Old Security Serverless links
architecture](https://github.com/user-attachments/assets/0c9db269-bd67-4967-9ca1-bec5e874abff)

#### New architecture
![New Security Serverless links
architecture](https://github.com/user-attachments/assets/9ff24ff8-3ce9-455e-ad76-4baa6b11daa1)

>[!important]
The landing pages (Rules, Explore, Assets...) were made inaccessible
recently by the shared-ux team
([PR](elastic#210893)) in the new
Solution navigation as part of an effort to unify with the rest of
solutions. This fact also helped simplify the architecture.

>[!tip]
We have multiple static `navigationTree` definitions, which are used
depending on the serverless product tier. Right now, we have the
"default" `navigationTree` used in the _essentials_ and _complete_
tiers, and the "AI" `navigationTree` used in the new _searchAiLake_
tier.

This approach ensures consistency for the links' locations across
Kibana: the "left navigation", the "breadcrumbs", and the "global
search" will always be aligned.

### Screenshots

#### ECH navigations

| Classic nav | Solution nav |
|-|-|
|<img width="248" alt="classic"
src="https://github.com/user-attachments/assets/bb9e722e-316e-4c04-9978-068c35680382"
/>|<img width="248" alt="solution_nav"
src="https://github.com/user-attachments/assets/a993ce49-b780-4405-b829-4d36023ae627"
/>|

#### Serverless navigations

| Regular tiers | AI for SOC |
|-|-|
|<img width="248" alt="regular_serverless_nav"
src="https://github.com/user-attachments/assets/d782bf49-6c76-4414-a807-35245a5e9883"
/>|<img width="248" alt="ai_nav"
src="https://github.com/user-attachments/assets/25d9950d-77c8-4d44-ab53-4b07423713af"
/>|

#### Example of hierarchy for the `Endpoints` page:

##### Classic nav

![classic_nav_hierarchy](https://github.com/user-attachments/assets/d4c41c0a-f24f-469d-843c-10ff5b3c5174)

##### Solution nav

![solution_nav_hierarchy](https://github.com/user-attachments/assets/e7f753e2-a499-4130-9bd0-9d22788d612b)

### Other changes

- `NavLinks` are no longer used by the Solution navigation and have been
deprecated. They are only used in the Classic navigation now and will be
removed along with it.
- `ExternalPageNames` are no longer used and have been removed.
- `ApplicationLinks` observables moved to a singleton class.
- Link-related hooks have been moved to their own `links_hooks.ts` file.

### Next steps

When the Classic navigation is deprecated, we'll be able to:

- Define a flat structure of `ApplicationLinks` and remove the concept
of `category` in them.
- Remove Classic Security navigation components.
- Remove all the landing pages and their components in the navigation
package.

The
[docs](https://docs.elastic.dev/security-solution/dev-docs/app-links)
will be updated once this is merged.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit c9f2f7c)

# Conflicts:
#	src/platform/packages/shared/deeplinks/security/deep_links.ts
#	x-pack/platform/plugins/private/translations/translations/fr-FR.json
#	x-pack/platform/plugins/private/translations/translations/ja-JP.json
#	x-pack/platform/plugins/private/translations/translations/zh-CN.json
#	x-pack/solutions/observability/plugins/logs_explorer/.storybook/__mocks__/package_icon.tsx
#	x-pack/solutions/security/packages/navigation/src/constants.ts
#	x-pack/solutions/security/packages/navigation/src/i18n_strings.ts
#	x-pack/solutions/security/packages/navigation/src/navigation_tree/ml_navigation_tree.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/links/app_links.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/categories.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/links/sections/assets_links.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/links/sections/assets_translations.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/links/sections/lazy_icons.tsx
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/links/sections/ml_links.ts
#	x-pack/solutions/security/plugins/security_solution/public/app/solution_navigation/links/sections/ml_translations.ts
#	x-pack/solutions/security/plugins/security_solution/public/common/components/security_route_page_wrapper/index.test.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/components/security_route_page_wrapper/index.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/utils/timeline/use_show_timeline.test.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/utils/timeline/use_show_timeline_for_path.ts
#	x-pack/solutions/security/plugins/security_solution/public/configurations/routes.tsx
#	x-pack/solutions/security/plugins/security_solution/public/detections/pages/alert_summary/index.tsx
#	x-pack/solutions/security/plugins/security_solution/public/lazy_sub_plugins.tsx
#	x-pack/solutions/security/plugins/security_solution/tsconfig.json
#	x-pack/solutions/security/plugins/security_solution_ess/public/navigation/__snapshots__/side_navigation.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution_ess/public/navigation/side_navigation.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/common/lazy_icons.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/__snapshots__/side_navigation.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/ai_navigation/callout.test.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/ai_navigation/callout.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/ai_navigation/icon.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/ai_navigation/translations.ts
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/index.ts
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/navigation.test.ts
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/security_side_navigation.tsx
#	x-pack/solutions/security/plugins/security_solution_serverless/public/navigation/side_navigation.ts
#	x-pack/test/security_solution_cypress/cypress/screens/serverless_security_header.ts
@semd semd requested a review from kibanamachine as a code owner May 29, 2025 11:46
@semd semd added the backport This PR is a backport of another PR label May 29, 2025
@semd semd enabled auto-merge (squash) May 29, 2025 11:46
@semd semd mentioned this pull request May 29, 2025
Merged
@semd
Copy link
Contributor Author

semd commented May 29, 2025

@elasticmachine merge upstream

@semd
Copy link
Contributor Author

semd commented May 29, 2025

@elasticmachine merge upstream

@elasticmachine
Copy link
Contributor

elasticmachine commented May 30, 2025 •
edited
Loading

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 7322 7277 -45
securitySolutionEss 119 133 +14
securitySolutionServerless 152 161 +9
total -22

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/security-solution-navigation 49 48 -1
securitySolution 122 121 -1
total -2

Async chunks

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

id before after diff
securitySolution 9.3MB 9.2MB -57.8KB
securitySolutionServerless 67.6KB 67.6KB -14.0B
total -57.8KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
securitySolution 32 31 -1

Page load bundle

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

id before after diff
securitySolution 86.9KB 84.1KB -2.8KB
securitySolutionEss 34.3KB 30.0KB -4.3KB
securitySolutionServerless 46.6KB 38.9KB -7.6KB
total -14.7KB
Unknown metric groups

API count

id before after diff
@kbn/core-chrome-browser 210 209 -1
@kbn/security-solution-navigation 54 52 -2
securitySolution 190 189 -1
total -4

async chunk count

id before after diff
securitySolution 121 98 -23

ESLint disabled line counts

id before after diff
securitySolution 575 554 -21
securitySolutionServerless 32 11 -21
total -42

Total ESLint disabled count

id before after diff
securitySolution 660 639 -21
securitySolutionServerless 32 11 -21
total -42

History

@semd semd merged commit 3e563e2 into elastic:8.19 May 30, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@angorayc angorayc angorayc approved these changes

@tomsonpl tomsonpl tomsonpl approved these changes

@kibanamachine kibanamachine Awaiting requested review from kibanamachine kibanamachine is a code owner

Assignees

No one assigned

Labels

backport This PR is a backport of another PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@semd @elasticmachine @angorayc @tomsonpl @kibanamachine