[Observability] Add side navigation for serverless observability (#15…

…7360)

## Summary

The PR introduces the first iteration of the side navigation bar for
serverless observability. Part of
#153777

### Run locally

```
yarn serverless-oblt
```

#### Screenshots 


![image](https://github.com/elastic/kibana/assets/3369346/b4a8a4d8-f18e-41e8-bf0e-798a75848885)



https://github.com/elastic/kibana/assets/3369346/39ded143-0d4b-4ea6-9534-0ca87b80662d




### Fixes
- Fix rendering the icon for the nested navigation items  
-
24ee4dc

### Notes

- There is an issue where the selected navigation item is not properly
highlighted and loses focus when the user clicks anywhere else on the
page. (atm out of the scope of the PR)
- The navigation tree is subject to change as there is an ongoing
discussion about the naming and order

---------

Co-authored-by: Søren Louv-Jansen <soren.louv@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

config/serverless.oblt.yml

@@ -8,6 +8,9 @@ xpack.securitySolution.enabled: false
 ## Enable the Serverless Obsersability plugin
 xpack.serverless.observability.enabled: true
 
+# Onboarding
+xpack.observability_onboarding.ui.enabled: true
+
 ## Configure plugins
 xpack.infra.logs.app_target: discover
 

packages/kbn-optimizer/limits.yml

@@ -116,7 +116,7 @@ pageLoadAssetSize:
   security: 65433
   securitySolution: 66738
   serverless: 16573
-  serverlessObservability: 16582
+  serverlessObservability: 30000
   serverlessSearch: 25600
   serverlessSecurity: 41807
   sessionView: 77750

packages/shared-ux/chrome/navigation/src/ui/navigation_bucket.tsx

@@ -54,6 +54,9 @@ const navigationNodeToEuiItem = (
       navigationNodeToEuiItem(_item, { navigateToUrl, basePath, activeNavItemId })
     ),
     ['data-test-subj']: `nav-item-${subjId}`,
+    ...(item.icon && {
+      icon: <EuiIcon type={item.icon} size="s" />,
+    }),
   };
 };
 

x-pack/plugins/serverless_observability/kibana.jsonc

@@ -7,15 +7,8 @@
     "id": "serverlessObservability",
     "server": true,
     "browser": true,
-    "configPath": [
-      "xpack",
-      "serverless",
-      "observability"
-    ],
-    "requiredPlugins": [
-      "serverless",
-      "observabilityShared"
-    ],
+    "configPath": ["xpack", "serverless", "observability"],
+    "requiredPlugins": ["serverless", "observabilityShared", "kibanaReact"],
     "optionalPlugins": [],
     "requiredBundles": []
   }

x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx

@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CoreStart } from '@kbn/core/public';
+import {
+  ChromeNavigationNodeViewModel,
+  Navigation,
+  NavigationKibanaProvider,
+} from '@kbn/shared-ux-chrome-navigation';
+import React from 'react';
+
+// #TODO translate titles?
+const navItems: ChromeNavigationNodeViewModel[] = [
+  {
+    id: 'services-infra',
+    items: [
+      { id: 'services', title: 'Services', href: '/app/apm/services' },
+      {
+        id: 'infra',
+        title: 'Infrastructure',
+        href: '/app/metrics/inventory',
+      },
+    ],
+  },
+  {
+    id: 'alerts-cases-slos',
+    items: [
+      {
+        id: 'alerts',
+        title: 'Alerts',
+        href: '/app/observability/alerts',
+      },
+      {
+        id: 'Cases',
+        title: 'Cases',
+        href: '/app/observability/cases',
+      },
+      {
+        id: 'slos',
+        title: 'SLOs',
+        href: '/app/observability/slos',
+      },
+    ],
+  },
+  {
+    id: 'signals',
+    title: 'Signals',
+    items: [
+      {
+        id: 'traces',
+        title: 'Traces',
+        href: '/app/apm/traces',
+      },
+      {
+        id: 'logs',
+        title: 'Logs',
+        href: '/app/logs/stream',
+      },
+    ],
+  },
+  {
+    id: 'toolbox',
+    title: 'Toolbox',
+    items: [
+      {
+        id: 'visualization',
+        title: 'Visualization',
+        href: '/app/visualize',
+      },
+      {
+        id: 'dashboards',
+        title: 'Dashboards',
+        href: '/app/dashboards',
+      },
+    ],
+  },
+  {
+    id: 'on-boarding',
+    items: [
+      {
+        id: 'get-started',
+        title: 'Get started',
+        icon: 'launch',
+        href: '/app/observabilityOnboarding',
+      },
+    ],
+  },
+];
+
+export const getObservabilitySideNavComponent = (core: CoreStart) => () => {
+  const activeNavItemId = 'observability_project_nav.root';
+
+  return (
+    <NavigationKibanaProvider core={core}>
+      <Navigation
+        navigationTree={[
+          {
+            id: 'observability_project_nav',
+            items: navItems,
+            title: 'Observability',
+            icon: 'logoObservability',
+          },
+        ]}
+        activeNavItemId={activeNavItemId}
+        homeHref="/app/enterprise_search/content/setup_guide"
+        linkToCloud="projects"
+        platformConfig={{ devTools: { enabled: false } }}
+      />
+    </NavigationKibanaProvider>
+  );
+};

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

@@ -6,6 +6,7 @@
  */
 
 import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { getObservabilitySideNavComponent } from './components/side_navigation';
 import {
   ServerlessObservabilityPluginSetup,
   ServerlessObservabilityPluginStart,
@@ -24,10 +25,12 @@ export class ServerlessObservabilityPlugin
   }
 
   public start(
-    _core: CoreStart,
-    { observabilityShared }: ServerlessObservabilityPluginStartDependencies
+    core: CoreStart,
+    setupDeps: ServerlessObservabilityPluginStartDependencies
   ): ServerlessObservabilityPluginStart {
+    const { observabilityShared, serverless } = setupDeps;
     observabilityShared.setIsSidebarEnabled(false);
+    serverless.setSideNavComponent(getObservabilitySideNavComponent(core));
     return {};
   }
 

x-pack/plugins/serverless_observability/public/services.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CoreStart } from '@kbn/core/public';
+import React from 'react';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import type { ServerlessObservabilityPluginStartDependencies } from './types';
+
+type Services = CoreStart & ServerlessObservabilityPluginStartDependencies;
+
+export const KibanaServicesProvider: React.FC<{
+  core: CoreStart;
+  pluginsStart: ServerlessObservabilityPluginStartDependencies;
+}> = ({ core, pluginsStart, children }) => {
+  const services: Services = { ...core, ...pluginsStart };
+  return <KibanaContextProvider services={services}>{children}</KibanaContextProvider>;
+};

x-pack/plugins/serverless_observability/tsconfig.json

@@ -19,5 +19,7 @@
     "@kbn/config-schema",
     "@kbn/serverless",
     "@kbn/observability-shared-plugin",
+    "@kbn/kibana-react-plugin",
+    "@kbn/shared-ux-chrome-navigation",
   ]
 }