📝 Summary

This issue will address adding the Solution Navigation sidebar in the Observability solution. This addresses the problem of the Observability navigation being hidden within the Global Kibana sidebar. Additionally, it enables us to reveal more of the features of the Observability solution within the navigation.

What this issue doesn't solve:

• consolidation of Settings pages
• inner-app navigation
• in page breadcrumbs

✔️ Acceptance criteria

Registration

• The observability plugin provides in its setup contract a function, which...
  • allows for registration of a navigation section in the unified navigation sidebar.
  • takes as the argument an Observable of a navigation section descriptor to allow apps to push updates to the navigation section.
• The navigation section descriptor contains the following pieces of information:
  • the label of the section
  • an array of navigation entries with...
    • the label of the entry
    • the app id used to generate URLs
    • the path within the app to navigate to when activating the entry
• A registering app ensures that the navigation section descriptor contains entries which the user has the permissions to see.
• A registering app can register multiple sections by calling the registration function repeatedly.

Page template

• The observability plugin provides in its start contract a component, which is a specialized variant of the EuiPageTemplate.
• It renders the sidebar with the overview link and the registered sections.
• It updates the sidebar if any of the registered observables emits a new navigation section descriptors.
• It allows for the consuming apps to provide props to render their content, specifically
  • data-test-subj
  • restrictWidth
  • bottomBar
  • bottomBarProps
  • template
  • paddingSize
  • pageHeader
  • pageBodyProps
  • pageContentProps
  • pageContentBodyProps
• The sidebar integrates with Kibana's ScopedHistory to ensure activating any of the entries doesn't cause a page reload.
• A navigation entry is rendered as being "active" when the current browser location matches the registered app and path for the entry.
• A navigation entry is a valid link which can be opened in a new tab or window.
• The observability overview page uses the page template component to render the sidebar and its content.

🎨 Mock-ups

🔎 Background information

Assuming all apps have implemented support for this navigation (in separate PRs) and all apps are enabled and accessible for the user, the structure will be the following:

• Overview
• Logs
  • Stream
  • Anomalies
  • Categories
• Metrics
  • Inventory
  • Metrics Explorer
• APM
  • Services
  • Traces
  • Service Map
• Uptime
  • Monitoring Overview
  • Certificates
• User Experience
  • Dashboard

Bolded items are not links

⏭️ Follow-up tasks

• Register a navigation section for each observability app:
  • Logs UI
  • Metrics UI
  • APM
  • Uptime
  • User Experience
• Use the observability page template in each observability app:
  • Logs UI
  • Metrics UI
  • APM
  • Uptime
  • User Experience

🔗 Related resources

• Design Issue #31
• Figma Prototype

cc: @Kerry350 @weltenwort