Merge branch 'main' into api-docs-review-timeline-35

.buildkite/scripts/steps/functional/performance_playwright.sh

@@ -39,8 +39,13 @@ if [ "$BUILDKITE_PIPELINE_SLUG" == "kibana-performance-data-set-extraction" ]; t
   node scripts/run_performance.js --kibana-install-dir "$KIBANA_BUILD_LOCATION" --skip-warmup
 else
   # pipeline should use bare metal static worker
-  echo "--- Running performance tests"
-  node scripts/run_performance.js --kibana-install-dir "$KIBANA_BUILD_LOCATION"
+  if [[ -z "${JOURNEYS_GROUP+x}" ]]; then
+    echo "--- Running performance tests"
+    node scripts/run_performance.js --kibana-install-dir "$KIBANA_BUILD_LOCATION"
+  else
+    echo "--- Running performance tests: '$JOURNEYS_GROUP' group"
+    node scripts/run_performance.js --kibana-install-dir "$KIBANA_BUILD_LOCATION" --group "$JOURNEYS_GROUP"
+  fi
 fi
 
 echo "--- Upload journey step screenshots"

.devcontainer/.env.template

@@ -1,4 +1,5 @@
 # /bin/bash or /bin/zsh (oh-my-zsh is installed by default as well)
 SHELL=/bin/bash
-# Switch to 1 to enable FIPS environment, any other value to disable
+# Switch to 1 to enable FIPS environment, any other value to disable,
+# then close and reopen a new terminal to setup the environment
 FIPS=0

.devcontainer/Dockerfile

@@ -49,6 +49,9 @@ WORKDIR ${KBN_DIR}
 
 # Node and NVM setup
 COPY .node-version /tmp/
+
+USER vscode
+
 RUN mkdir -p $NVM_DIR && \
   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/${NVM_VERSION}/install.sh | bash && \
   . "$NVM_DIR/nvm.sh" && \
@@ -61,6 +64,8 @@ RUN mkdir -p $NVM_DIR && \
   echo "source $NVM_DIR/nvm.sh" >> ${HOME}/.zshrc  && \
   chown -R 1000:1000 "${HOME}/.npm"
 
+USER root
+
 # Reload the env everytime a new shell is opened incase the .env file changed.
 RUN echo "source $KBN_DIR/.devcontainer/scripts/env.sh" >> ${HOME}/.bashrc && \
   echo "source $KBN_DIR/.devcontainer/scripts/env.sh" >> ${HOME}/.zshrc

dev_docs/tutorials/performance/adding_performance_journey.mdx

@@ -89,6 +89,27 @@ simulate real life internet connection. This means that all requests have a fixe
 In order to keep track on performance metrics stability, journeys are run on main branch with a scheduled interval.
 Bare metal machine is used to produce results as stable and reproducible as possible.
 
+#### Running subset of journeys for the PR
+
+Some code changes might affect the Kibana performance and it might be benefitial to run relevant journeys against the PR
+and compare performance metrics vs. the ones on main branch.
+
+In oder to trigger the build for Kibana PR, you can follow these steps:
+
+- Create a new kibana-single-user-performance [build](https://buildkite.com/elastic/kibana-single-user-performance#new)
+- Provide the following arguments:
+  - Branch: `refs/pull/<PR_number>/head`
+  - Under Options, set the environment variable: `JOURNEYS_GROUP=<group_name>`
+
+Currently supported journey groups:
+
+- kibanaStartAndLoad
+- crud
+- dashboard
+- discover
+- maps
+- ml
+
 #### Machine specifications
 
 All benchmarks are run on bare-metal machines with the [following specifications](https://www.hetzner.com/dedicated-rootserver/ex100):

package.json

@@ -1801,7 +1801,7 @@
     "tape": "^5.0.1",
     "terser": "^5.32.0",
     "terser-webpack-plugin": "^4.2.3",
-    "tough-cookie": "^4.1.4",
+    "tough-cookie": "^5.0.0",
     "tree-kill": "^1.2.2",
     "ts-morph": "^15.1.0",
     "tsd": "^0.31.1",

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

@@ -11,7 +11,7 @@ import { registerAnalyticsContextProviderMock } from './chrome_service.test.mock
 import { shallow, mount } from 'enzyme';
 import React from 'react';
 import * as Rx from 'rxjs';
-import { toArray } from 'rxjs';
+import { toArray, firstValueFrom } from 'rxjs';
 import { injectedMetadataServiceMock } from '@kbn/core-injected-metadata-browser-mocks';
 import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
@@ -556,6 +556,39 @@ describe('start', () => {
                   `);
     });
   });
+
+  describe('side nav', () => {
+    describe('isCollapsed$', () => {
+      it('should return false by default', async () => {
+        const { chrome, service } = await start();
+        const isCollapsed = await firstValueFrom(chrome.sideNav.getIsCollapsed$());
+        service.stop();
+        expect(isCollapsed).toBe(false);
+      });
+
+      it('should read the localStorage value', async () => {
+        store.set('core.chrome.isSideNavCollapsed', 'true');
+        const { chrome, service } = await start();
+        const isCollapsed = await firstValueFrom(chrome.sideNav.getIsCollapsed$());
+        service.stop();
+        expect(isCollapsed).toBe(true);
+      });
+    });
+
+    describe('setIsCollapsed', () => {
+      it('should update the isCollapsed$ observable', async () => {
+        const { chrome, service } = await start();
+        const isCollapsed$ = chrome.sideNav.getIsCollapsed$();
+        const isCollapsed = await firstValueFrom(isCollapsed$);
+
+        chrome.sideNav.setIsCollapsed(!isCollapsed);
+
+        const updatedIsCollapsed = await firstValueFrom(isCollapsed$);
+        service.stop();
+        expect(updatedIsCollapsed).toBe(!isCollapsed);
+      });
+    });
+  });
 });
 
 describe('stop', () => {

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

@@ -54,6 +54,7 @@ import type { InternalChromeStart } from './types';
 import { HeaderTopBanner } from './ui/header/header_top_banner';
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
+const IS_SIDENAV_COLLAPSED_KEY = 'core.chrome.isSideNavCollapsed';
 const SNAPSHOT_REGEX = /-snapshot/i;
 
 interface ConstructorParams {
@@ -86,7 +87,9 @@ export class ChromeService {
   private readonly docTitle = new DocTitleService();
   private readonly projectNavigation: ProjectNavigationService;
   private mutationObserver: MutationObserver | undefined;
-  private readonly isSideNavCollapsed$ = new BehaviorSubject<boolean>(true);
+  private readonly isSideNavCollapsed$ = new BehaviorSubject(
+    localStorage.getItem(IS_SIDENAV_COLLAPSED_KEY) === 'true'
+  );
   private logger: Logger;
   private isServerless = false;
 
@@ -360,6 +363,11 @@ export class ChromeService {
       projectNavigation.setProjectName(projectName);
     };
 
+    const setIsSideNavCollapsed = (isCollapsed: boolean) => {
+      localStorage.setItem(IS_SIDENAV_COLLAPSED_KEY, JSON.stringify(isCollapsed));
+      this.isSideNavCollapsed$.next(isCollapsed);
+    };
+
     if (!this.params.browserSupportsCsp && injectedMetadata.getCspConfig().warnLegacyBrowsers) {
       notifications.toasts.addWarning({
         title: mountReactNode(
@@ -431,9 +439,8 @@ export class ChromeService {
                 docLinks={docLinks}
                 kibanaVersion={injectedMetadata.getKibanaVersion()}
                 prependBasePath={http.basePath.prepend}
-                toggleSideNav={(isCollapsed) => {
-                  this.isSideNavCollapsed$.next(isCollapsed);
-                }}
+                isSideNavCollapsed$={this.isSideNavCollapsed$}
+                toggleSideNav={setIsSideNavCollapsed}
               >
                 <SideNavComponent activeNodes={activeNodes} />
               </ProjectHeader>
@@ -556,7 +563,10 @@ export class ChromeService {
       getBodyClasses$: () => bodyClasses$.pipe(takeUntil(this.stop$)),
       setChromeStyle,
       getChromeStyle$: () => chromeStyle$,
-      getIsSideNavCollapsed$: () => this.isSideNavCollapsed$.asObservable(),
+      sideNav: {
+        getIsCollapsed$: () => this.isSideNavCollapsed$.asObservable(),
+        setIsCollapsed: setIsSideNavCollapsed,
+      },
       getActiveSolutionNavId$: () => projectNavigation.getActiveSolutionNavId$(),
       project: {
         setHome: setProjectHome,

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

@@ -35,6 +35,7 @@ describe('Header', () => {
     navControlsCenter$: Rx.of([]),
     navControlsRight$: Rx.of([]),
     customBranding$: Rx.of({}),
+    isSideNavCollapsed$: Rx.of(false),
     prependBasePath: (str) => `hello/world/${str}`,
     toggleSideNav: jest.fn(),
   };

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

@@ -130,6 +130,7 @@ export interface Props {
   navControlsCenter$: Observable<ChromeNavControl[]>;
   navControlsRight$: Observable<ChromeNavControl[]>;
   prependBasePath: (url: string) => string;
+  isSideNavCollapsed$: Observable<boolean>;
   toggleSideNav: (isCollapsed: boolean) => void;
 }
 
@@ -248,7 +249,12 @@ export const ProjectHeader = ({
           <EuiHeader position="fixed" className="header__firstBar">
             <EuiHeaderSection grow={false} css={headerCss.leftHeaderSection}>
               <Router history={application.history}>
-                <ProjectNavigation toggleSideNav={toggleSideNav}>{children}</ProjectNavigation>
+                <ProjectNavigation
+                  isSideNavCollapsed$={observables.isSideNavCollapsed$}
+                  toggleSideNav={toggleSideNav}
+                >
+                  {children}
+                </ProjectNavigation>
               </Router>
 
               <EuiHeaderSectionItem>

packages/core/chrome/core-chrome-browser-internal/src/ui/project/navigation.tsx

@@ -7,34 +7,28 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useEffect, useRef, FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 import { EuiCollapsibleNavBeta } from '@elastic/eui';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import useObservable from 'react-use/lib/useObservable';
+import type { Observable } from 'rxjs';
 
-const LOCAL_STORAGE_IS_COLLAPSED_KEY = 'PROJECT_NAVIGATION_COLLAPSED' as const;
+interface Props {
+  toggleSideNav: (isVisible: boolean) => void;
+  isSideNavCollapsed$: Observable<boolean>;
+}
 
-export const ProjectNavigation: FC<
-  PropsWithChildren<{ toggleSideNav: (isVisible: boolean) => void }>
-> = ({ children, toggleSideNav }) => {
-  const isMounted = useRef(false);
-  const [isCollapsed, setIsCollapsed] = useLocalStorage(LOCAL_STORAGE_IS_COLLAPSED_KEY, false);
-  const onCollapseToggle = (nextIsCollapsed: boolean) => {
-    setIsCollapsed(nextIsCollapsed);
-    toggleSideNav(nextIsCollapsed);
-  };
-
-  useEffect(() => {
-    if (!isMounted.current && isCollapsed !== undefined) {
-      toggleSideNav(isCollapsed);
-    }
-    isMounted.current = true;
-  }, [isCollapsed, toggleSideNav]);
+export const ProjectNavigation: FC<PropsWithChildren<Props>> = ({
+  children,
+  isSideNavCollapsed$,
+  toggleSideNav,
+}) => {
+  const isCollapsed = useObservable(isSideNavCollapsed$, false);
 
   return (
     <EuiCollapsibleNavBeta
       data-test-subj="projectLayoutSideNav"
-      initialIsCollapsed={isCollapsed}
-      onCollapseToggle={onCollapseToggle}
+      isCollapsed={isCollapsed}
+      onCollapseToggle={toggleSideNav}
       css={
         isCollapsed
           ? undefined

packages/core/chrome/core-chrome-browser-mocks/src/chrome_service.mock.ts

@@ -51,7 +51,10 @@ const createStartContractMock = () => {
     setBadge: jest.fn(),
     getBreadcrumbs$: jest.fn(),
     setBreadcrumbs: jest.fn(),
-    getIsSideNavCollapsed$: jest.fn(),
+    sideNav: {
+      getIsCollapsed$: jest.fn(),
+      setIsCollapsed: jest.fn(),
+    },
     getBreadcrumbsAppendExtension$: jest.fn(),
     setBreadcrumbsAppendExtension: jest.fn(),
     getGlobalHelpExtensionMenuLinks$: jest.fn(),
@@ -94,7 +97,7 @@ const createStartContractMock = () => {
   startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false));
   startContract.getBodyClasses$.mockReturnValue(new BehaviorSubject([]));
   startContract.hasHeaderBanner$.mockReturnValue(new BehaviorSubject(false));
-  startContract.getIsSideNavCollapsed$.mockReturnValue(new BehaviorSubject(false));
+  startContract.sideNav.getIsCollapsed$.mockReturnValue(new BehaviorSubject(false));
   return startContract;
 };
 

packages/core/chrome/core-chrome-browser/src/contracts.ts

@@ -173,10 +173,18 @@ export interface ChromeStart {
    */
   getChromeStyle$(): Observable<ChromeStyle>;
 
-  /**
-   * Get an observable of the current collapsed state of the side nav.
-   */
-  getIsSideNavCollapsed$(): Observable<boolean>;
+  sideNav: {
+    /**
+     * Get an observable of the current collapsed state of the side nav.
+     */
+    getIsCollapsed$(): Observable<boolean>;
+
+    /**
+     * Set the collapsed state of the side nav.
+     * @param isCollapsed The collapsed state of the side nav.
+     */
+    setIsCollapsed(isCollapsed: boolean): void;
+  };
 
   /**
    * Get the id of the currently active project navigation or `null` otherwise.

packages/kbn-optimizer/limits.yml

@@ -119,7 +119,7 @@ pageLoadAssetSize:
   observabilityAiAssistantManagement: 19279
   observabilityLogsExplorer: 46650
   observabilityOnboarding: 19573
-  observabilityShared: 72039
+  observabilityShared: 80000
   osquery: 107090
   painlessLab: 179748
   presentationPanel: 55463