[8.15] [Synthetics] Measure overview page performance (#191703) (#191803

) # Backport This will backport the following commits from `main` to `8.15`: - [[Synthetics] Measure overview page performance (#191703)](#191703)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
elastic · Sep 3, 2024 · e7404a8 · e7404a8
1 parent 062f492
commit e7404a8
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 15 deletions.
diff --git a/packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts b/packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { usePerformanceContext } from '../../..';
+
+export const usePageReady = (state: { isReady: boolean }) => {
+  const { onPageReady } = usePerformanceContext();
+
+  const [isReported, setIsReported] = useState(false);
+
+  useEffect(() => {
+    if (state.isReady && !isReported) {
+      onPageReady();
+      setIsReported(true);
+    }
+  }, [isReported, onPageReady, state.isReady]);
+};
diff --git a/packages/kbn-ebt-tools/src/performance_metrics/index.tsx b/packages/kbn-ebt-tools/src/performance_metrics/index.tsx
@@ -22,4 +22,5 @@ function dynamic<TElement extends React.ComponentType<any>, TRef = {}>(loader: L
 
 export { usePerformanceContext } from './context/use_performance_context';
 export { perfomanceMarkers } from './performance_markers';
+export { usePageReady } from './context/use_page_ready';
 export const PerformanceContextProvider = dynamic(() => import('./context/performance_context'));
diff --git a/...ion/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx b/...ion/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx
@@ -9,6 +9,8 @@ import { EuiFlexGroup, EuiSpacer, EuiFlexItem } from '@elastic/eui';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTrackPageview } from '@kbn/observability-shared-plugin/public';
 import { Redirect, useLocation } from 'react-router-dom';
+import { usePageReady } from '@kbn/ebt-tools';
+import { selectOverviewStatus } from '../../../state/overview_status';
 import { DisabledCallout } from '../management/disabled_callout';
 import { FilterGroup } from '../common/monitor_filters/filter_group';
 import { OverviewAlerts } from './overview/overview_alerts';
@@ -45,6 +47,9 @@ export const OverviewPage: React.FC = () => {
   const { search } = useLocation();
 
   const { loading: locationsLoading, locationsLoaded } = useSelector(selectServiceLocationsState);
+  const { loaded } = useSelector(selectOverviewStatus);
+
+  usePageReady({ isReady: loaded });
 
   useEffect(() => {
     if (!locationsLoading && !locationsLoaded) {

diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx
@@ -17,7 +17,7 @@ import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 import { Router } from '@kbn/shared-ux-router';
-
+import { PerformanceContextProvider } from '@kbn/ebt-tools';
 import { kibanaService } from '../../utils/kibana_service';
 import { ActionMenu } from './components/common/header/action_menu';
 import { TestNowModeFlyoutContainer } from './components/test_now_mode/test_now_mode_flyout_container';
@@ -105,19 +105,21 @@ const Application = (props: SyntheticsAppProps) => {
                     <SyntheticsSettingsContextProvider {...props}>
                       <SyntheticsThemeContextProvider darkMode={darkMode}>
                         <SyntheticsStartupPluginsContextProvider {...startPlugins}>
-                          <div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
-                            <RedirectAppLinks
-                              coreStart={{
-                                application: core.application,
-                              }}
-                            >
-                              <InspectorContextProvider>
-                                <PageRouter />
-                                <ActionMenu appMountParameters={appMountParameters} />
-                                <TestNowModeFlyoutContainer />
-                              </InspectorContextProvider>
-                            </RedirectAppLinks>
-                          </div>
+                          <PerformanceContextProvider>
+                            <div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
+                              <RedirectAppLinks
+                                coreStart={{
+                                  application: core.application,
+                                }}
+                              >
+                                <InspectorContextProvider>
+                                  <PageRouter />
+                                  <ActionMenu appMountParameters={appMountParameters} />
+                                  <TestNowModeFlyoutContainer />
+                                </InspectorContextProvider>
+                              </RedirectAppLinks>
+                            </div>
+                          </PerformanceContextProvider>
                         </SyntheticsStartupPluginsContextProvider>
                       </SyntheticsThemeContextProvider>
                     </SyntheticsSettingsContextProvider>

diff --git a/x-pack/plugins/observability_solution/synthetics/tsconfig.json b/x-pack/plugins/observability_solution/synthetics/tsconfig.json
@@ -90,7 +90,8 @@
     "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-render",
     "@kbn/react-kibana-context-theme",
-    "@kbn/search-types"
+    "@kbn/search-types",
+    "@kbn/ebt-tools"
   ],
   "exclude": ["target/**/*"]
 }