[Observability] Serverless navigation

[sorenlouv]

On Serverless we want to display a dedicated Observability nav instead of the existing nav.

Links:

• Figma designs (internal - updated June 29, 2023)
• Meta issue (internal)

Implementation details
The menu should be registered via serverless.oblt.yml.
Existing implementations of serverless nav:

• [Security Solution][Serverless] Left navigation #156600
• Add side navigation component for serverless search #156465

Kibana can be started in serverless mode with:

yarn start --serverless=oblt

View more screens

Observability navigation item list

Label	Link	Extra
Discover	/app/discover
Dashboards	/app/dashboards
Alerts	/app/alerts
SLOs	/app/slos
AIOps	/app/aiops/anomaly-detection	Group of nav items, collapsed by default
⮑ Anomaly detection	/app/aiops/anomaly-detection
⮑ Spike analysis	/app/aiops/spike-analysis	Tech preview badge
⮑ Change point detection	/app/aiops/change-point-detection	Tech preview badge
⮑ Job notifications	/app/aiops/job-notifications
Applications	/app/applications/services	Group of nav items, collapsed by default
⮑ Services	/app/applications/services
⮑ Traces	/app/applications/traces
⮑ Dependencies	/app/applications/dependencies
Cases	/app/cases
Visualizations	/app/visualizations
Add data	/app/add-data

Observability project settings list

Label	Link	Extra
Management	/app/management
Integrations	/app/integrations
Integrations	/app/fleet
Users and roles	TBD	Links to Cloud console project settings, show external link
Performance	TBD	Links to Cloud console project settings, show external link
Billing and subscription	TBD	Links to Cloud console project settings, show external link

TODO

Preview Give feedback

1. Merge the initial draft of side navigation
2. Update default route for serveless to be - [Serverless] Set observability onboarding as default page #158440
3. Set navLinkStatus - [Observability] Set navLinkStatus for deeplinks  #159681
4. Update the navigation tree once the designs are up to date
5. Cypress tests for navigation - Cypress for observability serverless #160674

Related tickets:

• [Navigation] Side nav doesn't apply base path on serverless #158376
• Active navigation node title must be styled correctly #157817
• Translatable strings for navigation node titles #157809 - in the first version we didn't translate the string

Links

• Left navigation for Kibana
• Shard UX Serverles Side Nav Technical doc (internal)

[elasticmachine]

Pinging @elastic/apm-ui (Team:APM)

[kpatticha]

Latest example of adding side nav for security #156465

[kpatticha]

Has it been decided to keep /app/observability/overview as the default route for opening serverless observability, or is there a plan to change it ?

If the overview nav item is not included in the designs, which route is intended to be set as the default?

cc @chrisdistasio @gbamparop @isaclfreire

[chrisdistasio]

adding @formgeist

i do not believe that the current o11y overview will be the default route, but it's not yet determined what the route will be.

@formgeist can you confirm?

[formgeist]

@kpatticha /overview won't be part of Serverless. I think we will have Discover be the default route, but that's presented as "Logs" in the designs above. The name will change to Discover in the updated navigation structure. Once I have the updated designs, I'll make sure to add them to this description. The links are not changing, but the labelling and layout will be changed.

[gbamparop]

@formgeist I thought that this would be the landing page for Observability #154928 cc @drewpost

[chrisdistasio]

@gbamparop i think maybe that would only be the page if there is no data?

[formgeist]

@gbamparop yeah, as @chrisdistasio said the Logs onboarding is the first page users will land on once they've created a Serverless project and there's no data. The general homepage / landingpage (not sure which term we should use here) is that Discover is the new Observability homepage instead of the overview page we have in the current product. When users click "Observability" in the breadcrumbs, it should direct them to Discover.

Discover will still need to show the Logs onboarding if users choose to skip it upon first visit, but we have an overall issue to figure out empty states for this https://github.com/elastic/logs-dev/issues/41

[kpatticha]

@formgeist do you have any updates about the designs?

[kpatticha]

Related tickets:

• [Navigation] Side nav doesn't apply base path on serverless #158376
• Active navigation node title must be styled correctly #157817
• Translatable strings for navigation node titles #157809 - in the first version we didn't translate the string

[formgeist]

@formgeist do you have any updates about the designs?

@kpatticha do you mean the updated sidebar navigation or the empty states?

[kpatticha]

@formgeist I was referring to the sidebar navigation

[formgeist]

@kpatticha still work in progress, expect to have the final designs by next week. they're currently in review with the Obs leads looking at the labels and structure.

[kpatticha]

@formgeist thanks 🙏

[formgeist]

@kpatticha @gbamparop Things are still in review (through a number of iterations), but I'm hoping to provide you with the final version of the navigation structure next week. We're planning on user-testing them over the next weeks so any insights might change the order or structure, but I think it's worth considering moving ahead with adding the proposed structure and then following up if there are any changes. WDYT?

[gbamparop]

@kpatticha @gbamparop Things are still in review (through a number of iterations), but I'm hoping to provide you with the final version of the navigation structure next week. We're planning on user-testing them over the next weeks so any insights might change the order or structure, but I think it's worth considering moving ahead with adding the proposed structure and then following up if there are any changes. WDYT?

Thanks for the update @formgeist. I think it makes sense to move ahead if it's final at least before user testing. We might consider targeting IC June instead of merging it in for 8.9 if this doesn't make a difference to you or others.

Would you be using Kibana to demo it if we implement the changes or still to through the designs?

[formgeist]

@gbamparop No problem, I'll update this issue with the final version this week once I have sign-off from the Obs leads.

We might consider targeting IC June instead of merging it in for 8.9 if this doesn't make a difference to you or others.

Doesn't matter for us, but I assume this changes when it'll be available even for internal preview if it's not part of the Serverless project type that we can build from Kibana locally now? Or is that different?

Would you be using Kibana to demo it if we implement the changes or still to through the designs?

We will be using design prototypes for the user testing, so no rush getting this done in code.

[gbamparop]

I assume this changes when it'll be available even for internal preview if it's not part of the Serverless project type that we can build from Kibana locally now? Or is that different?

Serverless work is tracked with ICs anyways so I think this will be aligned.

[sebelga]

For the visibility to the team I cross link my comment here.
Once the PR is merged all (internal) navigation links will have to use deeplink ids. If the deeplink is marked as hidden by the app it won't render in the navigation tree UI.

If an app is not mounted, its deeplinks won't be registered so even if the Observability navigation definition declares it, it won't render. Let me know if there are any question on that behaviour 👍

[kpatticha]

On serverless the links are hidden until we set navLinkStatus. Related ticket
#159681

[formgeist]

@kpatticha @gbamparop I've updated the description to include the latest navigation structure design along with a list of the navigation items and their proposed route names. Let me know if you have any questions

[gbamparop]

The ML requirements are being discussed in this doc (internal). This PR will integrate ML in serverless, let's reach out to the @elastic/ml-ui in case we need help with the links.

[jgowdyelastic]

In reference to the ML PR mentioned above, one of the changes it contains is to update how the ML plugin registers its deeplinks.
As @sebelga mentioned above, we will only register links to features which are available in the project, this allows us to filter nav menu for available ML features with no extra logic.
In my PR I've updated the observability and search nav menus to add a Machine Learning section, this is just the default ML nav menu, with all non-available features automatically hidden.
I'm expecting these ML nav menus to be changed by each plugin, I just thought it'd be good to include an initial example in my PR.

How it currently looks in observability in my PR.

[kpatticha]

reopening to adjust the tree according to the mockups linked today

[kpatticha]

I'm closing the issue as I added test coverage for #160674

The only missing links are

Label	Link	Extra
Users and roles	TBD	Links to Cloud console project settings, show external link
Performance	TBD	Links to Cloud console project settings, show external link
Billing and subscription	TBD	Links to Cloud console project settings, show external link

They will be added by the shared ux #160942