[Synthetics] Measure overview page performance (elastic#191703)

## Summary

Measure overview page performance !!

also introduced the usePageReady hook in ebt-tooling !!

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 { CustomMetrics } from './performance_context';
+import { usePerformanceContext } from '../../..';
+
+export const usePageReady = (state: { customMetrics?: CustomMetrics; isReady: boolean }) => {
+  const { onPageReady } = usePerformanceContext();
+
+  const [isReported, setIsReported] = useState(false);
+
+  useEffect(() => {
+    if (state.isReady && !isReported) {
+      onPageReady(state.customMetrics);
+      setIsReported(true);
+    }
+  }, [isReported, onPageReady, state.customMetrics, state.isReady]);
+};

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'));

x-pack/plugins/observability_solution/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) {

x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx

@@ -14,6 +14,7 @@ import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { Router } from '@kbn/shared-ux-router';
 
+import { PerformanceContextProvider } from '@kbn/ebt-tools';
 import { SyntheticsSharedContext } from './contexts/synthetics_shared_context';
 import { kibanaService } from '../../utils/kibana_service';
 import { ActionMenu } from './components/common/header/action_menu';
@@ -72,13 +73,15 @@ const Application = (props: SyntheticsAppProps) => {
           <PresentationContextProvider>
             <Router history={appMountParameters.history}>
               <SyntheticsSettingsContextProvider {...props}>
-                <div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
-                  <InspectorContextProvider>
-                    <PageRouter />
-                    <ActionMenu appMountParameters={appMountParameters} />
-                    <TestNowModeFlyoutContainer />
-                  </InspectorContextProvider>
-                </div>
+                <PerformanceContextProvider>
+                  <div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
+                    <InspectorContextProvider>
+                      <PageRouter />
+                      <ActionMenu appMountParameters={appMountParameters} />
+                      <TestNowModeFlyoutContainer />
+                    </InspectorContextProvider>
+                  </div>
+                </PerformanceContextProvider>
               </SyntheticsSettingsContextProvider>
             </Router>
           </PresentationContextProvider>

x-pack/plugins/observability_solution/synthetics/tsconfig.json

@@ -98,7 +98,8 @@
     "@kbn/presentation-util-plugin",
     "@kbn/core-application-browser",
     "@kbn/dashboard-plugin",
-    "@kbn/slo-plugin"
+    "@kbn/slo-plugin",
+    "@kbn/ebt-tools"
   ],
   "exclude": ["target/**/*"]
 }