Implement new o11y nav hierarchy for serverless #193510

mgiota · 2024-09-20T07:17:27Z

Fixes #192804

This PR updates the nav hierarchy on serverless and changes the accordion to panelOpener. The menu items have been updated according to the Figma file. Here's a Video of how nav hierarchy looks like on serverless with the new changes:

Screen.Recording.2024-10-07.at.13.39.30.mov

What was changed

AI & ML menu is removed and split into
- AI Assistant
- Machine learning
Applications now opens a panelOpener instead of an accordion
- Service Inventory was renamed to Service inventory to meet the use of sentence-case requirement
- Synthetics was moved to a new section
Infrastructure
- Infrastructure Inventory was renamed to Infrastructure inventory to match the sentence-case requirement
Machine learning: this menu was not present at all on serverless

Notes for the Reviewer

Stack Management on security and search don't use any panelOpener, they use a landing page instead. In order to be consistent with the rest solutions, I kept Stack Management as is.
Machine Learning menu item was not present at all on serverless. I need a confirmation, that it is fine to bring it in as it is from stateful cc @vinaychandrasekhar

obltmachine · 2024-09-20T07:17:40Z

🤖 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!)

mgiota · 2024-10-07T08:52:48Z

@elasticmachine merge upstream

elasticmachine · 2024-10-07T11:37:18Z

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

kibana-ci · 2024-10-07T12:11:36Z

💔 Build Failed

Failed CI Steps

Quick Checks

History

💔 Build #239797 failed 5664ed7

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

cc @mgiota

mgiota · 2024-10-30T21:09:59Z

@elasticmachine merge upstream

mgiota · 2024-11-02T00:17:09Z

@elasticmachine merge upstream

mgiota · 2024-11-04T13:06:54Z

@elasticmachine merge upstream

wayneseymour

Just one question.
I do like the existOrFail call, but wondering if the last click needs an assertion call.

wayneseymour · 2024-11-04T13:12:07Z

x-pack/test_serverless/functional/services/ml/observability_navigation.ts

      timeout: 60 * 1000,
    });
-    await testSubjects.click(`~nav-item-observability_project_nav.aiops.ml:${id}`);
+    await testSubjects.click(`~panelNavItem-id-ml:${id}`);


Perhaps similar to line #19, is this a good place for a missingOrFail() call?

@wayneseymour I see your point and makes sense what you say, I totally agree! FYI I didn't write these tests, I am adapting them to meet some new navigation changes (we replaced accordion with slideOpener).

I checked the file that is using the navigateToAnomalyDetection helper, and there are indeed quite a few assertion calls, so I think we should be fine.

I also checked security navigation tests and they use the same pattern. Navigation helpers find the nav items and click on them. Then the actual test files do all the assertions.

Ok cool beans. Have you tested this against MKI?

No. Do you have any instructions on how I can test against MKI?

Indeed!

https://docs.google.com/document/d/1tiax7xoDYwFXYZjRTgVKkVMjN-SQzBWk4yn1JY6Z5UY/edit?pli=1&tab=t.0#heading=h.f6esfmqe4nh5

@wayneseymour I need some help here, I am stuck and I don't want to block this PR more. I tried to test against MKI using the approach my team shared with me, but with that approach it looks like tests are not being run from my local Kibana. Here's what I used:

TEST_CLOUD_HOST_NAME=console.qa.cld.elstc.co TEST_CLOUD=1 NODE_TLS_REJECT_UNAUTHORIZED=0 TEST_ES_URL="https://testing-internal/:NEW-PASSWORD@es-host:443" TEST_KIBANA_URL="https://testing-internal/:NEW-PASSWORD@kbn-host" node --no-warnings scripts/functional_test_runner --exclude-tag skipMKI --exclude-tag failsOnMKI --config x-pack/test_serverless/functional/test_suites/observability/config.ts

For es-host and kbn-host I used the ones from the project I created on console.qa cloud and for PASSWORD I used the one I got calling the reset credential api. So when I used above command from my local branch to run navigation functional tests, I could easily tell that it is not reading my local kibana source code, since I could see the old navigation.

I am trying now to follow the steps in the document you shared with me. I cloned the qaf repo locally. What do I do next? How do I use the qaf command?

I found the docker image location on the buildkite job page (docker.elastic.co/kibana-ci/kibana-serverless:pr-193510-11cd7adb5e79). What do I do next?

@wayneseymour I managed to set up qaf locally and I was able to run the tests against MKI using the docker image from my PR. Can I have the final approval for this PR?

I ran serverless navigation and ml tests, and they are green!

yngrdyn

Test changes LGTM

maryam-saeidi

LGTM! Added some clarification questions.

maryam-saeidi · 2024-11-05T10:00:00Z

x-pack/plugins/serverless_observability/public/navigation_tree.ts

+        },
+        { link: 'inventory', spaceBefore: 'm' },
+        {
+          id: 'apm',


I am not very familiar with nav menu, what is this id used for? When do we need to have an id for a navigation item?

If you don't provide the id, the link will be the id. If there are no link like here as it is the parent group, the default id is auto generated based on the position of the node in the tree (e.g. group_0_child_1_group3), which is not very human friendly. You might want to override that by a clearer id that you can use in your tests.

maryam-saeidi · 2024-11-05T12:25:37Z

x-pack/plugins/serverless_observability/public/navigation_tree.ts

-                },
-                {
-                  link: 'ml:anomalyExplorer',
+                  link: 'apm:services',


How does this link work?

mgiota · 2024-11-08T10:06:10Z

@elasticmachine merge upstream

elasticmachine · 2024-11-08T10:06:14Z

merge conflict between base and head

…on_serverless

elasticmachine · 2024-11-08T11:15:50Z

💚 Build Succeeded

Buildkite Build
Commit: 292a8e7
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-193510-292a8e765dfe

Metrics [docs]

Page load bundle

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

id	before	after	diff
`serverlessObservability`	27.2KB	28.9KB	+1.7KB

History

💚 Build #248036 succeeded 11cd7ad
💚 Build #248035 succeeded 38a6d9d
💔 Build #247857 failed c4e9e30
💔 Build #247285 failed e1f730d
💔 Build #247271 failed 832322b

cc @mgiota

wayneseymour

x-pack/test_serverless/functional/services/ml/observability_navigation.ts LGTM

kibanamachine · 2024-11-08T12:19:11Z

Starting backport for target branches: 8.x

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

@vinaychandrasekhar

Fixes elastic#192804 This PR updates the nav hierarchy on serverless and changes the `accordion` to `panelOpener`. The menu items have been updated according to the [Figma file](https://www.figma.com/design/IAR7FjBaSCDWypNYL83fzy/Observability-Navigation?node-id=1232-10087&node-type=frame&t=AMlUqaK2UhhiyqGi-0). Here's a Video of how nav hierarchy looks like on serverless with the new changes: https://github.com/user-attachments/assets/55d04969-379e-4cd1-8e25-d50382cf51e0 ## What was changed - AI & ML menu is removed and split into - `AI Assistant` - `Machine learning` - `Applications` now opens a `panelOpener` instead of an `accordion` - `Service Inventory` was renamed to `Service inventory` to meet the use of sentence-case requirement - Synthetics was moved to a new section - `Infrastructure` - `Infrastructure Inventory` was renamed to `Infrastructure inventory` to match the sentence-case requirement - `Machine learning`: this menu was not present at all on serverless ## Notes for the Reviewer - `Stack Management` on security and search don't use any `panelOpener`, they use a landing page instead. In order to be consistent with the rest solutions, I kept Stack Management as is. - `Machine Learning` menu item was not present at all on serverless. I need a confirmation, that it is fine to bring it in as it is from stateful cc @vinaychandrasekhar --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit 0e736e3)

kibanamachine · 2024-11-08T12:24:23Z

💚 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

@vinaychandrasekhar

Fixes elastic#192804 This PR updates the nav hierarchy on serverless and changes the `accordion` to `panelOpener`. The menu items have been updated according to the [Figma file](https://www.figma.com/design/IAR7FjBaSCDWypNYL83fzy/Observability-Navigation?node-id=1232-10087&node-type=frame&t=AMlUqaK2UhhiyqGi-0). Here's a Video of how nav hierarchy looks like on serverless with the new changes: https://github.com/user-attachments/assets/55d04969-379e-4cd1-8e25-d50382cf51e0 ## What was changed - AI & ML menu is removed and split into - `AI Assistant` - `Machine learning` - `Applications` now opens a `panelOpener` instead of an `accordion` - `Service Inventory` was renamed to `Service inventory` to meet the use of sentence-case requirement - Synthetics was moved to a new section - `Infrastructure` - `Infrastructure Inventory` was renamed to `Infrastructure inventory` to match the sentence-case requirement - `Machine learning`: this menu was not present at all on serverless ## Notes for the Reviewer - `Stack Management` on security and search don't use any `panelOpener`, they use a landing page instead. In order to be consistent with the rest solutions, I kept Stack Management as is. - `Machine Learning` menu item was not present at all on serverless. I need a confirmation, that it is fine to bring it in as it is from stateful cc @vinaychandrasekhar --------- Co-authored-by: Elastic Machine <[email protected]>

@vinaychandrasekhar

) # Backport This will backport the following commits from `main` to `8.x`: - [Implement new o11y nav hierarchy for serverless (#193510)](#193510)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Panagiota Mitsopoulou <[email protected]>

change o11y nav hierarchy for serverless

c80d225

elasticmachine and others added 3 commits October 7, 2024 10:52

Merge branch 'main' into change_navigation_serverless

b030a64

add machine learning menu item

8d5bd8f

add AI assistant

5664ed7

mgiota marked this pull request as ready for review October 7, 2024 11:18

mgiota requested a review from a team as a code owner October 7, 2024 11:18

mgiota self-assigned this Oct 7, 2024

mgiota added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Team:obs-ux-management Observability Management User Experience Team labels Oct 7, 2024

mgiota added the v9.0.0 label Oct 7, 2024

fix i18n check

b080ee8

botelastic bot added the ci:project-deploy-observability Create an Observability project label Oct 7, 2024

more i18n fixes

1edc895

mgiota force-pushed the change_navigation_serverless branch from 5531ade to 1edc895 Compare October 7, 2024 19:21

elasticmachine and others added 3 commits October 30, 2024 22:10

Merge branch 'main' into change_navigation_serverless

832322b

fix i18n checks

e1f730d

fix failing tests

3d995f2

mgiota requested a review from a team as a code owner November 2, 2024 00:15

elasticmachine and others added 2 commits November 2, 2024 01:17

Merge branch 'main' into change_navigation_serverless

c4e9e30

fix ml failing tests

38a6d9d

mgiota requested a review from a team as a code owner November 4, 2024 13:06

Merge branch 'main' into change_navigation_serverless

11cd7ad

wayneseymour requested changes Nov 4, 2024

View reviewed changes

yngrdyn approved these changes Nov 4, 2024

View reviewed changes

mgiota requested a review from wayneseymour November 5, 2024 08:19

maryam-saeidi self-requested a review November 5, 2024 09:51

maryam-saeidi approved these changes Nov 5, 2024

View reviewed changes

mgiota added the ci:build-serverless-image label Nov 7, 2024

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

292a8e7

…on_serverless

wayneseymour approved these changes Nov 8, 2024

View reviewed changes

mgiota merged commit 0e736e3 into elastic:main Nov 8, 2024
23 checks passed

kibanamachine mentioned this pull request Nov 8, 2024

[8.x] Implement new o11y nav hierarchy for serverless (#193510) #199467

Merged

kibanamachine added the v8.17.0 label Nov 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement new o11y nav hierarchy for serverless #193510

Implement new o11y nav hierarchy for serverless #193510

mgiota commented Sep 20, 2024 •

edited by kibanamachine

Loading

obltmachine commented Sep 20, 2024

mgiota commented Oct 7, 2024

elasticmachine commented Oct 7, 2024

kibana-ci commented Oct 7, 2024 •

edited

Loading

mgiota commented Oct 30, 2024

mgiota commented Nov 2, 2024

mgiota commented Nov 4, 2024

wayneseymour left a comment

wayneseymour Nov 4, 2024

mgiota Nov 5, 2024

wayneseymour Nov 6, 2024

mgiota Nov 6, 2024 •

edited

Loading

wayneseymour Nov 6, 2024

mgiota Nov 7, 2024 •

edited

Loading

mgiota Nov 8, 2024

mgiota Nov 8, 2024

yngrdyn left a comment

maryam-saeidi left a comment

maryam-saeidi Nov 5, 2024

sebelga Nov 6, 2024

maryam-saeidi Nov 5, 2024

mgiota commented Nov 8, 2024

elasticmachine commented Nov 8, 2024

elasticmachine commented Nov 8, 2024 •

edited

Loading

wayneseymour left a comment

kibanamachine commented Nov 8, 2024

kibanamachine commented Nov 8, 2024

Implement new o11y nav hierarchy for serverless #193510

Implement new o11y nav hierarchy for serverless #193510

Conversation

mgiota commented Sep 20, 2024 • edited by kibanamachine Loading

What was changed

Notes for the Reviewer

obltmachine commented Sep 20, 2024

🤖 GitHub comments

mgiota commented Oct 7, 2024

elasticmachine commented Oct 7, 2024

kibana-ci commented Oct 7, 2024 • edited Loading

💔 Build Failed

Failed CI Steps

History

mgiota commented Oct 30, 2024

mgiota commented Nov 2, 2024

mgiota commented Nov 4, 2024

wayneseymour left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgiota Nov 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgiota Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yngrdyn left a comment

Choose a reason for hiding this comment

maryam-saeidi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgiota commented Nov 8, 2024

elasticmachine commented Nov 8, 2024

elasticmachine commented Nov 8, 2024 • edited Loading

💚 Build Succeeded

Metrics [docs]

Page load bundle

History

wayneseymour left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 8, 2024

kibanamachine commented Nov 8, 2024

💚 All backports created successfully

Questions ?

mgiota commented Sep 20, 2024 •

edited by kibanamachine

Loading

kibana-ci commented Oct 7, 2024 •

edited

Loading

mgiota Nov 6, 2024 •

edited

Loading

mgiota Nov 7, 2024 •

edited

Loading

elasticmachine commented Nov 8, 2024 •

edited

Loading