Implement new nav hierarchy for stateful/cloud by mgiota · Pull Request #192805 · elastic/kibana

mgiota · 2024-09-13T07:44:49Z

~~Depends on #193526, WON'T FIX~~

Fixes #192803
Fixes #191509

This PR updates the nav hierarchy for stateful/cloud and changes the accordion to panelOpener. The menu items have been updated according to the Figma file and the discussions happening in this issue. I took a video below of how the new navigation looks like with the new changes

Screen.Recording.2024-09-19.at.01.10.49.mov

What was changed

AI & ML menu is removed and split into
- AI Assistant
- Machine learning: this menu was already present in the footer, it was moved in the body (after Infrastucture)
Applications now opens a panelOpener instead of an accordion
- Synthetics was moved to a new section
- “User Experience” was renamed to “User experience”
Infrastucture now opens a panelOpener instead of an accordion
- Universal Profiling was moved to a separate section below
- Metrics Explorer was renamed to Metrics explorer
Machine learning now opens a panelOpener instead of an accordion
- Supplied Configurations was added under the Machine learning > Anomaly Detection section.
- The machine learning link: 'securitySolutionUI:machine_learning-landing' was completely removed. Clicking on the Machine learning link will slide out the panel instead (same behavior with clicking on the icon). More details about why I removed this here
- Use sentence/case for the menu items
Other tools now opens a panelOpener instead of an accordion
- Logs anomalies was added here
- Logs categories was added here
- Visualize library was added
Clicking on the 1st level menu items (Applications, Infrastructure, Machine learning, Other tools) toggles the panel on the right (arrowRight).
- The icon was changed from the four small squares to the right-facing caret
- The sub-nav menu slides out to the right whenever the label OR the icon are clicked
Getting started in the footer was renamed to Add data
Data Set Quality was added under Stack Management > Data section below Index Management

Functional Tests

Some tests have been added that test:

toggling of the panel when clicking on the link button
AI assistant changes
Infrastructure changes
Other Tools changes
Machine Learning changes

What this PR doesn't do

I faced some issues with the footer, so footer will be separately handled in this issue

obltmachine · 2024-09-13T07:45:06Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx

mgiota · 2024-09-17T11:31:11Z

@elasticmachine merge upstream

mgiota · 2024-09-17T13:11:40Z

@elasticmachine merge upstream

elasticmachine · 2024-09-18T13:08:54Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

mgiota · 2024-09-18T13:12:16Z

x-pack/plugins/translations/translations/fr-FR.json

This menu item was renamed to Add data, so I added a new key xpack.observability.obltNav.addData and this was removed.

mgiota · 2024-09-18T13:15:14Z

x-pack/plugins/translations/translations/fr-FR.json

AI & ML menu item was removed. It is now splitted into 2 separate menu items AI Assistant and Machine Learning and thus not needed anymore.

mgiota · 2024-09-18T13:24:24Z

x-pack/plugins/translations/translations/fr-FR.json

Change point detection appears here under Machine Learning

mgiota · 2024-09-18T13:25:54Z

x-pack/plugins/translations/translations/fr-FR.json

ML notifications appear here

mgiota · 2024-10-01T19:26:26Z

@elasticmachine merge upstream

sebelga

Tested locally and works well! 🎉 I added a comment for the functional tests, can you remove the extra ones? Thanks!

x-pack/test/functional_solution_sidenav/tests/observability_sidenav.ts

sebelga · 2024-10-02T10:48:28Z

x-pack/test/functional_solution_sidenav/tests/observability_sidenav.ts

+          expect(isOpen).to.be(false);
+        }
+
+        // check the AI Assistant


I think that you can remove from this line (L81) to L114.

This file is for smoke tests to make sure the side nav exists, links can be clicked and panels can be open and closed. Those additional tests should be part of the Oblt functional tests.

We don't want to have to fix in 2 places the functional tests whenever the oblt nav changes. 😊

@sebelga I removed the additional tests in this commit.

Here we have a few functional tests x-pack/test/observability_functional/apps/observability. I can create a new sidenav folder and move my tests there. Does this sound good?

and move my tests there. Does this sound good?

That's sounds like a good place to me 👍 thanks!

o11y nav tests added in this commit

sebelga

LGTM! Thanks for making the changes 👍

mgiota · 2024-10-02T20:20:39Z

@elasticmachine merge upstream

dominiqueclarke · 2024-10-03T13:51:22Z

x-pack/plugins/observability_solution/observability/public/navigation_tree.ts

+        ],
+      },
+    ],
+    footer: [


You mentioned you ran into issues with the footer. Did you want to keep this?

kibana-ci · 2024-10-03T18:11:35Z

💚 Build Succeeded

Buildkite Build
Commit: 5f945a5
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-192805-5f945a536549

Metrics [docs]

Async chunks

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

id	before	after	diff
`navigation`	23.8KB	24.1KB	+238.0B
`observability`	467.1KB	467.4KB	+341.0B
`serverless`	24.5KB	24.7KB	+237.0B
total			+816.0B

Page load bundle

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

id	before	after	diff
`core`	455.9KB	455.7KB	-155.0B

History

💔 Build #239019 failed bf28378
💚 Build #238946 succeeded cc99a46
💔 Build #238851 failed 120e1c2
💚 Build #238583 succeeded e542e88
💛 Build #238552 was flaky 14b14b1

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

cc @mgiota

dominiqueclarke

LGTM

kibanamachine · 2024-10-04T08:03:13Z

Starting backport for target branches: 8.x

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

<strike>Depends on elastic#193526, WON'T FIX</strike> Fixes elastic#192803 Fixes elastic#191509 This PR updates the nav hierarchy for stateful/cloud and changes the `accordion` to `panelOpener`. The menu items have been updated according to the Figma file and the discussions happening in this [issue](elastic#192050). I took a video below of how the new navigation looks like with the new changes https://github.com/user-attachments/assets/e73c8dd9-b674-4146-bcde-443490569502 ## What was changed - AI & ML menu is removed and split into - `AI Assistant` - `Machine learning`: this menu was already present in the footer, it was moved in the body (after Infrastucture) - `Applications` now opens a `panelOpener` instead of an `accordion` - Synthetics was moved to a new section - “User Experience” was renamed to “User experience” - `Infrastucture` now opens a `panelOpener` instead of an `accordion` - Universal Profiling was moved to a separate section below - Metrics Explorer was renamed to Metrics explorer - `Machine learning` now opens a `panelOpener` instead of an `accordion` - `Supplied Configurations` was added under the Machine learning > Anomaly Detection section. - The machine learning `link: 'securitySolutionUI:machine_learning-landing'` was completely removed. Clicking on the `Machine learning` link will slide out the panel instead (same behavior with clicking on the icon). More details about why I removed this [here](elastic#192805 (comment)) - Use sentence/case for the menu items - `Other tools` now opens a `panelOpener` instead of an `accordion` - Logs anomalies was added here - Logs categories was added here - Visualize library was added - Clicking on the 1st level menu items (Applications, Infrastructure, Machine learning, Other tools) toggles the panel on the right (arrowRight). - The icon was changed from the four small squares to the right-facing caret - The sub-nav menu slides out to the right whenever the label OR the icon are clicked - `Getting started` in the footer was renamed to `Add data` - `Data Set Quality` was added under `Stack Management > Data` section below `Index Management` ## Functional Tests Some tests have been added that test: - toggling of the panel when clicking on the link button - `AI assistant` changes - `Infrastructure` changes - `Other Tools` changes - `Machine Learning` changes ## What this PR doesn't do I faced some issues with the footer, so footer will be separately handled in this [issue](elastic#192865) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Sébastien Loix <sebastien.loix@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co> (cherry picked from commit ab71509)

kibanamachine · 2024-10-04T08:07:39Z

💚 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

# Backport This will backport the following commits from `main` to `8.x`: - [Implement new nav hierarchy for stateful/cloud (#192805)](#192805)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Panagiota Mitsopoulou <panagiota.mitsopoulou@elastic.co>

<strike>Depends on elastic#193526, WON'T FIX</strike> Fixes elastic#192803 Fixes elastic#191509 This PR updates the nav hierarchy for stateful/cloud and changes the `accordion` to `panelOpener`. The menu items have been updated according to the Figma file and the discussions happening in this [issue](elastic#192050). I took a video below of how the new navigation looks like with the new changes https://github.com/user-attachments/assets/e73c8dd9-b674-4146-bcde-443490569502 ## What was changed - AI & ML menu is removed and split into - `AI Assistant` - `Machine learning`: this menu was already present in the footer, it was moved in the body (after Infrastucture) - `Applications` now opens a `panelOpener` instead of an `accordion` - Synthetics was moved to a new section - “User Experience” was renamed to “User experience” - `Infrastucture` now opens a `panelOpener` instead of an `accordion` - Universal Profiling was moved to a separate section below - Metrics Explorer was renamed to Metrics explorer - `Machine learning` now opens a `panelOpener` instead of an `accordion` - `Supplied Configurations` was added under the Machine learning > Anomaly Detection section. - The machine learning `link: 'securitySolutionUI:machine_learning-landing'` was completely removed. Clicking on the `Machine learning` link will slide out the panel instead (same behavior with clicking on the icon). More details about why I removed this [here](elastic#192805 (comment)) - Use sentence/case for the menu items - `Other tools` now opens a `panelOpener` instead of an `accordion` - Logs anomalies was added here - Logs categories was added here - Visualize library was added - Clicking on the 1st level menu items (Applications, Infrastructure, Machine learning, Other tools) toggles the panel on the right (arrowRight). - The icon was changed from the four small squares to the right-facing caret - The sub-nav menu slides out to the right whenever the label OR the icon are clicked - `Getting started` in the footer was renamed to `Add data` - `Data Set Quality` was added under `Stack Management > Data` section below `Index Management` ## Functional Tests Some tests have been added that test: - toggling of the panel when clicking on the link button - `AI assistant` changes - `Infrastructure` changes - `Other Tools` changes - `Machine Learning` changes ## What this PR doesn't do I faced some issues with the footer, so footer will be separately handled in this [issue](elastic#192865) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Sébastien Loix <sebastien.loix@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>

mgiota force-pushed the change_navigation branch 2 times, most recently from 6baf228 to 3321350 Compare September 13, 2024 09:49

change nav hierarchy for stateful cloud to use panelOpener

34f378e

mgiota force-pushed the change_navigation branch from 3321350 to 34f378e Compare September 13, 2024 10:55

mgiota commented Sep 13, 2024

View reviewed changes

packages/shared-ux/chrome/navigation/src/ui/components/navigation_item_open_panel.tsx Outdated Show resolved Hide resolved

Merge branch 'main' of github.com:elastic/kibana into change_navigation

93ce699

Merge branch 'main' into change_navigation

7d98044

elasticmachine and others added 4 commits September 17, 2024 15:11

Merge branch 'main' into change_navigation

36e4e5a

Fix toggle panel from main button

4126228

Fix icon

bec5a72

Update func test helper to open/close panel with the link button

f7d3ccb

mgiota marked this pull request as ready for review September 18, 2024 12:15

mgiota requested review from a team as code owners September 18, 2024 12:15

botelastic bot added ci:project-deploy-observability Create an Observability project Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. labels Sep 18, 2024

mgiota force-pushed the change_navigation branch from 65918e6 to 4585899 Compare September 18, 2024 13:09

mgiota commented Sep 18, 2024

View reviewed changes

x-pack/plugins/translations/translations/fr-FR.json Outdated

Copy link
Copy Markdown

Contributor Author

mgiota Sep 18, 2024 •

edited

Loading

Choose a reason for hiding this comment

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

ML notifications appear here

mgiota force-pushed the change_navigation branch from 4585899 to 2e3aab9 Compare September 18, 2024 18:02

alvarezmelissa87 mentioned this pull request Sep 18, 2024

[ML] Anomaly Detection: Adds a page to list supplied job configurations #191564

Merged

9 tasks

remove unused i18n keys

f1bdd6c

mgiota force-pushed the change_navigation branch from 2e3aab9 to f1bdd6c Compare September 18, 2024 18:23

add machine learning supplied configurations

6832603

mgiota added 2 commits October 1, 2024 22:20

update infrastructure breadcrumb

67d34b8

update to sentence case

8d3ab8f

elasticmachine and others added 2 commits October 1, 2024 21:26

Merge branch 'main' into change_navigation

14b14b1

add more test cases

e542e88

mgiota force-pushed the change_navigation branch from d79ea87 to e542e88 Compare October 1, 2024 20:57

mgiota mentioned this pull request Oct 2, 2024

[Observability stateful sidenav] Add functional tests #191509

Closed

sebelga reviewed Oct 2, 2024

View reviewed changes

mgiota added 2 commits October 2, 2024 18:10

remove unnecessary comments

f4ece0b

remove additional tests from sidenav tests

120e1c2

sebelga approved these changes Oct 2, 2024

View reviewed changes

elasticmachine and others added 2 commits October 2, 2024 22:20

Merge branch 'main' into change_navigation

cc99a46

add o11y sidenav functional tests

bf28378

dominiqueclarke reviewed Oct 3, 2024

View reviewed changes

Merge branch 'main' into change_navigation

5f945a5

dominiqueclarke self-requested a review October 3, 2024 17:12

dominiqueclarke approved these changes Oct 3, 2024

View reviewed changes

mgiota added the v9.0.0 label Oct 4, 2024

mgiota merged commit ab71509 into elastic:main Oct 4, 2024

kibanamachine mentioned this pull request Oct 4, 2024

[8.x] Implement new nav hierarchy for stateful/cloud (#192805) #194912

Merged

mgiota mentioned this pull request Feb 11, 2025

[Solution nav] Use flyout for Stack Management in Search and Observability solutions #208632

Merged

2 tasks

mgiota deleted the change_navigation branch October 1, 2025 06:08

Conversation

mgiota commented Sep 13, 2024 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What was changed

Functional Tests

What this PR doesn't do

Uh oh!

obltmachine commented Sep 13, 2024

🤖 GitHub comments

Uh oh!

Uh oh!

mgiota commented Sep 17, 2024

Uh oh!

mgiota commented Sep 17, 2024

Uh oh!

elasticmachine commented Sep 18, 2024

Uh oh!

mgiota Sep 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mgiota Sep 18, 2024

Choose a reason for hiding this comment

Uh oh!

mgiota Sep 18, 2024

Choose a reason for hiding this comment

Uh oh!

mgiota Sep 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mgiota commented Oct 1, 2024

Uh oh!

sebelga left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sebelga Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

mgiota Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

sebelga Oct 2, 2024

Choose a reason for hiding this comment

Uh oh!

mgiota Oct 3, 2024

Choose a reason for hiding this comment

Uh oh!

sebelga left a comment

Choose a reason for hiding this comment

Uh oh!

mgiota commented Oct 2, 2024

Uh oh!

dominiqueclarke Oct 3, 2024

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Oct 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

History

Uh oh!

dominiqueclarke left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Oct 4, 2024

Uh oh!

kibanamachine commented Oct 4, 2024

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

mgiota commented Sep 13, 2024 •

edited by kibanamachine

Loading

mgiota Sep 18, 2024 •

edited

Loading

mgiota Sep 18, 2024 •

edited

Loading

kibana-ci commented Oct 3, 2024 •

edited

Loading