[poc][serverless] Unified Navigation

.github/CODEOWNERS

@@ -551,6 +551,10 @@ packages/kbn-securitysolution-t-grid @elastic/security-solution-platform
 packages/kbn-securitysolution-utils @elastic/security-solution-platform
 packages/kbn-server-http-tools @elastic/kibana-core
 packages/kbn-server-route-repository @elastic/apm-ui
+x-pack/plugins/serverless @elastic/appex-sharedux
+x-pack/plugins/serverless_observability @elastic/appex-sharedux
+x-pack/plugins/serverless_search @elastic/appex-sharedux
+x-pack/plugins/serverless_security @elastic/appex-sharedux
 test/plugin_functional/plugins/session_notifications @elastic/kibana-core
 x-pack/plugins/session_view @elastic/awp-viz
 packages/kbn-set-map @elastic/kibana-operations

config/serverless.es.yml

@@ -0,0 +1,10 @@
+xpack.apm.enabled: false
+xpack.canvas.enabled: false
+xpack.reporting.enabled: false
+xpack.uptime.enabled: false
+xpack.watcher.enabled: false
+
+enterpriseSearch.enabled: true
+xpack.serverless.search.enabled: true
+
+uiSettings.overrides.defaultRoute: /app/enterprise_search/content/search_indices

config/serverless.oblt.yml

@@ -0,0 +1,9 @@
+enterpriseSearch.enabled: false
+xpack.canvas.enabled: false
+xpack.cloudSecurityPosture.enabled: false
+xpack.reporting.enabled: false
+xpack.securitySolution.enabled: false
+
+xpack.serverless.observability.enabled: true
+
+uiSettings.overrides.defaultRoute: /app/observability/overview

config/serverless.security.yml

@@ -0,0 +1,10 @@
+enterpriseSearch.enabled: false
+xpack.apm.enabled: false
+xpack.canvas.enabled: false
+xpack.observability.enabled: false
+xpack.reporting.enabled: false
+xpack.uptime.enabled: false
+
+xpack.serverless.security.enabled: true
+
+uiSettings.overrides.defaultRoute: /app/security/get_started

config/serverless.yml

@@ -1 +1,14 @@
+newsfeed.enabled: false
+xpack.security.showNavLinks: false
+xpack.serverless.plugin.enabled: true
 xpack.fleet.enableExperimental: ['fleetServerStandalone']
+
+# Management team plugins
+xpack.upgrade_assistant.enabled: false
+xpack.rollup.enabled: false
+xpack.watcher.enabled: false
+xpack.ccr.enabled: false
+xpack.ilm.enabled: false
+xpack.remote_clusters.enabled: false
+xpack.snapshot_restore.enabled: false
+xpack.license_management.enabled: false

docs/developer/plugin-list.asciidoc

@@ -689,6 +689,22 @@ Kibana.
 |Welcome to the Kibana Security Solution plugin! This README will go over getting started with development and testing.
 
 
+|{kib-repo}blob/{branch}/x-pack/plugins/serverless/README.md[serverless]
+|A Kibana plugin
+
+
+|{kib-repo}blob/{branch}/x-pack/plugins/serverless_observability/README.md[serverlessObservability]
+|A witty, fitting description to come.
+
+
+|{kib-repo}blob/{branch}/x-pack/plugins/serverless_search/README.md[serverlessSearch]
+|A witty, fitting description to come.
+
+
+|{kib-repo}blob/{branch}/x-pack/plugins/serverless_security/README.md[serverlessSecurity]
+|A witty, fitting description to come.
+
+
 |{kib-repo}blob/{branch}/x-pack/plugins/session_view/README.md[sessionView]
 |Session View is meant to provide a visualization into what is going on in a particular Linux environment where the agent is running. It looks likes a terminal emulator; however, it is a tool for introspecting process activity and understanding user and service behaviour in your Linux servers and infrastructure. It is a time-ordered series of process executions displayed in a tree over time.
 

package.json

@@ -54,6 +54,7 @@
     "lint:es": "node scripts/eslint",
     "lint:style": "node scripts/stylelint",
     "makelogs": "node scripts/makelogs",
+    "serverless": "node scripts/kibana --dev --serverless",
     "serverless-es": "node scripts/kibana --dev --serverless=es",
     "serverless-oblt": "node scripts/kibana --dev --serverless=oblt",
     "serverless-security": "node scripts/kibana --dev --serverless=security",
@@ -553,6 +554,10 @@
     "@kbn/securitysolution-utils": "link:packages/kbn-securitysolution-utils",
     "@kbn/server-http-tools": "link:packages/kbn-server-http-tools",
     "@kbn/server-route-repository": "link:packages/kbn-server-route-repository",
+    "@kbn/serverless": "link:x-pack/plugins/serverless",
+    "@kbn/serverless-observability": "link:x-pack/plugins/serverless_observability",
+    "@kbn/serverless-search": "link:x-pack/plugins/serverless_search",
+    "@kbn/serverless-security": "link:x-pack/plugins/serverless_security",
     "@kbn/session-notifications-plugin": "link:test/plugin_functional/plugins/session_notifications",
     "@kbn/session-view-plugin": "link:x-pack/plugins/session_view",
     "@kbn/set-map": "link:packages/kbn-set-map",

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.test.ts

@@ -126,6 +126,7 @@ describe('start', () => {
             Array [
               Array [
                 "kbnBody",
+                "kbnBody--classicLayout",
                 "kbnBody--noHeaderBanner",
                 "kbnBody--chromeHidden",
                 "kbnVersion-1-2-3",
@@ -143,6 +144,7 @@ describe('start', () => {
             Array [
               Array [
                 "kbnBody",
+                "kbnBody--classicLayout",
                 "kbnBody--noHeaderBanner",
                 "kbnBody--chromeHidden",
                 "kbnVersion-8-0-0",

packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx

@@ -26,14 +26,15 @@ import type {
   ChromeGlobalHelpExtensionMenuLink,
   ChromeHelpExtension,
   ChromeUserBanner,
+  ChromeStyle,
 } from '@kbn/core-chrome-browser';
 import type { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 import { KIBANA_ASK_ELASTIC_LINK } from './constants';
 import { DocTitleService } from './doc_title';
 import { NavControlsService } from './nav_controls';
 import { NavLinksService } from './nav_links';
 import { RecentlyAccessedService } from './recently_accessed';
-import { Header } from './ui';
+import { Header, SolutionHeader } from './ui';
 import type { InternalChromeStart } from './types';
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -119,6 +120,8 @@ export class ChromeService {
     const customNavLink$ = new BehaviorSubject<ChromeNavLink | undefined>(undefined);
     const helpSupportUrl$ = new BehaviorSubject<string>(KIBANA_ASK_ELASTIC_LINK);
     const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true');
+    const chromeStyle$ = new BehaviorSubject<ChromeStyle>('classic');
+    const solutionNavigation$ = new BehaviorSubject<JSX.Element | undefined>(undefined);
 
     const getKbnVersionClass = () => {
       // we assume that the version is valid and has the form 'X.X.X'
@@ -135,6 +138,9 @@ export class ChromeService {
       map(([headerBanner, isVisible]) => {
         return [
           'kbnBody',
+          chromeStyle$.getValue() === 'classic'
+            ? 'kbnBody--classicLayout'
+            : 'kbnBody--projectLayout',
           headerBanner ? 'kbnBody--hasHeaderBanner' : 'kbnBody--noHeaderBanner',
           isVisible ? 'kbnBody--chromeVisible' : 'kbnBody--chromeHidden',
           getKbnVersionClass(),
@@ -163,6 +169,16 @@ export class ChromeService {
 
     const getIsNavDrawerLocked$ = isNavDrawerLocked$.pipe(takeUntil(this.stop$));
 
+    const setChromeStyle = (style: ChromeStyle) => {
+      chromeStyle$.next(style);
+    };
+
+    const setSolutionNavigation = (navigation: JSX.Element) => {
+      solutionNavigation$.next(navigation);
+    };
+
+    const getChromeStyle$ = chromeStyle$.pipe(takeUntil(this.stop$));
+
     const isIE = () => {
       const ua = window.navigator.userAgent;
       const msie = ua.indexOf('MSIE '); // IE 10 or older
@@ -203,41 +219,75 @@ export class ChromeService {
       });
     }
 
+    const getHeaderComponent = () => {
+      const Component = ({
+        style$,
+        navigation$,
+      }: {
+        style$: typeof chromeStyle$;
+        navigation$: typeof solutionNavigation$;
+      }) => {
+        if (style$.getValue() === 'solution') {
+          const navigation = navigation$.getValue();
+          if (navigation) {
+            return (
+              <SolutionHeader
+                {...{
+                  application,
+                  globalHelpExtensionMenuLinks$,
+                }}
+                navigation={navigation}
+                actionMenu$={application.currentActionMenu$}
+                breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+                helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
+                helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
+                navControlsRight$={navControls.getRight$()}
+                kibanaDocLink={docLinks.links.kibana.guide}
+                kibanaVersion={injectedMetadata.getKibanaVersion()}
+              />
+            );
+          }
+        }
+
+        return (
+          <Header
+            loadingCount$={http.getLoadingCount$()}
+            application={application}
+            headerBanner$={headerBanner$.pipe(takeUntil(this.stop$))}
+            badge$={badge$.pipe(takeUntil(this.stop$))}
+            basePath={http.basePath}
+            breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
+            breadcrumbsAppendExtension$={breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$))}
+            customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))}
+            kibanaDocLink={docLinks.links.kibana.guide}
+            forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
+            globalHelpExtensionMenuLinks$={globalHelpExtensionMenuLinks$}
+            helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
+            helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
+            homeHref={http.basePath.prepend('/app/home')}
+            isVisible$={this.isVisible$}
+            kibanaVersion={injectedMetadata.getKibanaVersion()}
+            navLinks$={navLinks.getNavLinks$()}
+            recentlyAccessed$={recentlyAccessed.get$()}
+            navControlsLeft$={navControls.getLeft$()}
+            navControlsCenter$={navControls.getCenter$()}
+            navControlsRight$={navControls.getRight$()}
+            navControlsExtension$={navControls.getExtension$()}
+            onIsLockedUpdate={setIsNavDrawerLocked}
+            isLocked$={getIsNavDrawerLocked$}
+            customBranding$={customBranding$}
+          />
+        );
+      };
+      return <Component {...{ style$: chromeStyle$, navigation$: solutionNavigation$ }} />;
+    };
+
     return {
       navControls,
       navLinks,
       recentlyAccessed,
       docTitle,
-
-      getHeaderComponent: () => (
-        <Header
-          loadingCount$={http.getLoadingCount$()}
-          application={application}
-          headerBanner$={headerBanner$.pipe(takeUntil(this.stop$))}
-          badge$={badge$.pipe(takeUntil(this.stop$))}
-          basePath={http.basePath}
-          breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))}
-          breadcrumbsAppendExtension$={breadcrumbsAppendExtension$.pipe(takeUntil(this.stop$))}
-          customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))}
-          kibanaDocLink={docLinks.links.kibana.guide}
-          forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()}
-          globalHelpExtensionMenuLinks$={globalHelpExtensionMenuLinks$}
-          helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))}
-          helpSupportUrl$={helpSupportUrl$.pipe(takeUntil(this.stop$))}
-          homeHref={http.basePath.prepend('/app/home')}
-          isVisible$={this.isVisible$}
-          kibanaVersion={injectedMetadata.getKibanaVersion()}
-          navLinks$={navLinks.getNavLinks$()}
-          recentlyAccessed$={recentlyAccessed.get$()}
-          navControlsLeft$={navControls.getLeft$()}
-          navControlsCenter$={navControls.getCenter$()}
-          navControlsRight$={navControls.getRight$()}
-          navControlsExtension$={navControls.getExtension$()}
-          onIsLockedUpdate={setIsNavDrawerLocked}
-          isLocked$={getIsNavDrawerLocked$}
-          customBranding$={customBranding$}
-        />
-      ),
+      getHeaderComponent,
 
       getIsVisible$: () => this.isVisible$,
 
@@ -302,6 +352,9 @@ export class ChromeService {
       },
 
       getBodyClasses$: () => bodyClasses$.pipe(takeUntil(this.stop$)),
+      setChromeStyle,
+      getChromeStyle$: () => getChromeStyle$,
+      setSolutionNavigation,
     };
   }
 

packages/core/chrome/core-chrome-browser-internal/src/ui/index.ts

@@ -7,5 +7,6 @@
  */
 
 export { Header } from './header';
+export { SolutionHeader } from './solution';
 export { LoadingIndicator } from './loading_indicator';
 export type { NavType } from './header';

packages/core/chrome/core-chrome-browser-internal/src/ui/solution/header.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Router } from 'react-router-dom';
+import { EuiHeader, EuiHeaderLogo, EuiHeaderSection, EuiHeaderSectionItem } from '@elastic/eui';
+import {
+  ChromeBreadcrumb,
+  ChromeGlobalHelpExtensionMenuLink,
+  ChromeHelpExtension,
+  ChromeNavControl,
+} from '@kbn/core-chrome-browser/src';
+import { Observable } from 'rxjs';
+import { MountPoint } from '@kbn/core-mount-utils-browser';
+import { InternalApplicationStart } from '@kbn/core-application-browser-internal';
+import { HeaderBreadcrumbs } from '../header/header_breadcrumbs';
+import { HeaderActionMenu } from '../header/header_action_menu';
+import { HeaderHelpMenu } from '../header/header_help_menu';
+import { HeaderNavControls } from '../header/header_nav_controls';
+
+interface Props {
+  breadcrumbs$: Observable<ChromeBreadcrumb[]>;
+  actionMenu$: Observable<MountPoint | undefined>;
+  kibanaDocLink: string;
+  globalHelpExtensionMenuLinks$: Observable<ChromeGlobalHelpExtensionMenuLink[]>;
+  helpExtension$: Observable<ChromeHelpExtension | undefined>;
+  helpSupportUrl$: Observable<string>;
+  kibanaVersion: string;
+  application: InternalApplicationStart;
+  navigation: JSX.Element;
+  navControlsRight$: Observable<ChromeNavControl[]>;
+}
+
+export const SolutionHeader = ({
+  application,
+  kibanaDocLink,
+  kibanaVersion,
+  navigation,
+  ...observables
+}: Props) => {
+  const renderLogo = () => (
+    <EuiHeaderLogo
+      iconType="logoElastic"
+      href="#"
+      onClick={(e) => e.preventDefault()}
+      aria-label="Go to home page"
+    />
+  );
+
+  return (
+    <>
+      <EuiHeader position="fixed">
+        <EuiHeaderSection grow={false}>
+          <EuiHeaderSectionItem border="right">{renderLogo()}</EuiHeaderSectionItem>
+          <EuiHeaderSectionItem>
+            <HeaderBreadcrumbs breadcrumbs$={observables.breadcrumbs$} />
+          </EuiHeaderSectionItem>
+        </EuiHeaderSection>
+        <EuiHeaderSection side="right">
+          <EuiHeaderSectionItem>
+            <HeaderHelpMenu
+              globalHelpExtensionMenuLinks$={observables.globalHelpExtensionMenuLinks$}
+              helpExtension$={observables.helpExtension$}
+              helpSupportUrl$={observables.helpSupportUrl$}
+              kibanaDocLink={kibanaDocLink}
+              kibanaVersion={kibanaVersion}
+              navigateToUrl={application.navigateToUrl}
+            />
+          </EuiHeaderSectionItem>
+          <EuiHeaderSectionItem border="left">
+            <HeaderActionMenu actionMenu$={observables.actionMenu$} />
+          </EuiHeaderSectionItem>
+
+          <EuiHeaderSectionItem>
+            <HeaderNavControls navControls$={observables.navControlsRight$} />
+          </EuiHeaderSectionItem>
+        </EuiHeaderSection>
+      </EuiHeader>
+      <Router history={application.history}>{navigation}</Router>
+    </>
+  );
+};

packages/core/chrome/core-chrome-browser-internal/src/ui/solution/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { SolutionHeader } from './header';

packages/core/chrome/core-chrome-browser-internal/tsconfig.json

@@ -5,7 +5,8 @@
     "types": [
       "jest",
       "node",
-      "react"
+      "react",
+      "@emotion/react/types/css-prop"
     ]
   },
   "include": [