[Observability] Serverless navigation

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: 22555
   serverlessSecurity: 41807
   sessionView: 77750

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,26 @@
+/*
+ * 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 React from 'react';
+import { CoreStart } from '@kbn/core/public';
+import type {
+  SideNavComponent,
+  SideNavCompProps,
+} from '@kbn/core-chrome-browser/src/project_navigation';
+import { ServerlessObservabilityPluginStartDependencies } from '../../types';
+import { ObservabilitySideNavigation } from './side_navigation';
+import { KibanaServicesProvider } from '../../services';
+
+export const getObservabilitySideNavComponent = (
+  core: CoreStart,
+  pluginsStart: ServerlessObservabilityPluginStartDependencies
+): SideNavComponent => {
+  return (_props: SideNavCompProps) => (
+    <KibanaServicesProvider core={core} pluginsStart={pluginsStart}>
+      <ObservabilitySideNavigation />
+    </KibanaServicesProvider>
+  );
+};

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

@@ -0,0 +1,85 @@
+/*
+ * 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 React from 'react';
+import { SolutionNav } from '@kbn/shared-ux-page-solution-nav';
+
+export function ObservabilitySideNavigation() {
+  return (
+    <SolutionNav
+      items={[
+        {
+          id: 'services-infra',
+          name: undefined,
+          items: [
+            {
+              id: 'services',
+              name: 'Services',
+            },
+            {
+              id: 'infra',
+              name: 'Infrastructure',
+            },
+          ],
+        },
+
+        {
+          id: 'alerts-cases-slos',
+          name: undefined,
+          items: [
+            {
+              id: 'alerts',
+              name: 'Alerts',
+            },
+            {
+              id: 'Cases',
+              name: 'Cases',
+            },
+            {
+              id: 'slos',
+              name: 'SLOs',
+            },
+          ],
+        },
+
+        {
+          id: 'signals',
+          name: 'Signals',
+          items: [
+            {
+              id: 'traces',
+              name: 'Traces',
+            },
+            {
+              id: 'logs',
+              name: 'Logs',
+            },
+          ],
+        },
+
+        {
+          id: 'toolbox',
+          name: 'Toolbox',
+          items: [
+            {
+              id: 'visualization',
+              name: 'Visualization',
+            },
+            {
+              id: 'dashboards',
+              name: 'Dashboards',
+            },
+          ],
+        },
+      ]}
+      canBeCollapsed={false}
+      name={'Observability'}
+      icon={'logoObservability'}
+      closeFlyoutButtonPosition={'inside'}
+    />
+  );
+}

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,
@@ -25,8 +26,10 @@ export class ServerlessObservabilityPlugin
 
   public start(
     _core: CoreStart,
-    { observabilityShared }: ServerlessObservabilityPluginStartDependencies
+    _setupDeps: ServerlessObservabilityPluginStartDependencies
   ): ServerlessObservabilityPluginStart {
+    const { serverless, observabilityShared } = _setupDeps;
+    serverless.setSideNavComponent(getObservabilitySideNavComponent(_core, _setupDeps));
     observabilityShared.setIsSidebarEnabled(false);
     return {};
   }

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

@@ -0,0 +1,26 @@
+/*
+ * 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,
+  useKibana as useKibanaReact,
+} from '@kbn/kibana-react-plugin/public';
+import type { ServerlessObservabilityPluginStartDependencies } from './types';
+
+export 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>;
+};
+
+export const useKibana = () => useKibanaReact<Services>();

x-pack/plugins/serverless_observability/tsconfig.json

@@ -19,5 +19,8 @@
     "@kbn/config-schema",
     "@kbn/serverless",
     "@kbn/observability-shared-plugin",
+    "@kbn/core-chrome-browser",
+    "@kbn/shared-ux-page-solution-nav",
+    "@kbn/kibana-react-plugin",
   ]
 }