[9.0] [Obs Onboarding] Add page rendering performance monitoring (#213769)

x-pack/solutions/observability/plugins/observability_onboarding/public/application/app.tsx

@@ -8,6 +8,7 @@
 import { EuiErrorBoundary } from '@elastic/eui';
 import { AppMountParameters, APP_WRAPPER_CLASS, CoreStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
+import { PerformanceContextProvider } from '@kbn/ebt-tools';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
@@ -71,13 +72,15 @@ export function ObservabilityOnboardingAppRoot({
               }}
             >
               <Router history={history}>
-                <EuiErrorBoundary>
-                  <ObservabilityOnboardingHeaderActionMenu
-                    setHeaderActionMenu={setHeaderActionMenu}
-                    theme$={theme$}
-                  />
-                  <ObservabilityOnboardingFlow />
-                </EuiErrorBoundary>
+                <PerformanceContextProvider>
+                  <EuiErrorBoundary>
+                    <ObservabilityOnboardingHeaderActionMenu
+                      setHeaderActionMenu={setHeaderActionMenu}
+                      theme$={theme$}
+                    />
+                    <ObservabilityOnboardingFlow />
+                  </EuiErrorBoundary>
+                </PerformanceContextProvider>
               </Router>
             </KibanaThemeProvider>
           </KibanaContextProvider>

x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx

@@ -27,6 +27,7 @@ import { css } from '@emotion/react';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { IntegrationCardItem } from '@kbn/fleet-plugin/public';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { PackageListSearchForm } from '../package_list_search_form/package_list_search_form';
 import { Category } from './types';
 import { useCustomCards } from './use_custom_cards';
@@ -113,6 +114,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
   const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' });
   const categorySelectorTitleId = useGeneratedHtmlId();
   const packageListTitleId = useGeneratedHtmlId();
+  const { onPageReady } = usePerformanceContext();
 
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -148,6 +150,12 @@ export const OnboardingFlowForm: FunctionComponent = () => {
     [] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
+  useEffect(() => {
+    onPageReady({
+      meta: { description: '[ttfmp_onboarding] The UI with onboarding categories is rendered' },
+    });
+  }, [onPageReady]);
+
   const featuredCardsForCategoryMap: Record<Category, string[]> = {
     host: ['auto-detect-logs', 'otel-logs'],
     kubernetes: ['kubernetes-quick-start', 'otel-kubernetes'],

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { type FunctionComponent } from 'react';
+import React, { useEffect, type FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiPanel,
@@ -22,6 +22,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
 import { ASSET_DETAILS_LOCATOR_ID } from '@kbn/observability-shared-plugin/common';
 import { type LogsLocatorParams, LOGS_LOCATOR_ID } from '@kbn/logs-shared-plugin/common';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { getAutoDetectCommand } from './get_auto_detect_command';
 import { DASHBOARDS, useOnboardingFlow } from './use_onboarding_flow';
 import { ProgressIndicator } from '../shared/progress_indicator';
@@ -38,10 +39,21 @@ export const AutoDetectPanel: FunctionComponent = () => {
   const { status, data, error, refetch, installedIntegrations } = useOnboardingFlow();
   const command = data ? getAutoDetectCommand(data) : undefined;
   const accordionId = useGeneratedHtmlId({ prefix: 'accordion' });
+  const { onPageReady } = usePerformanceContext();
   const {
     services: { share },
   } = useKibana<ObservabilityOnboardingContextValue>();
 
+  useEffect(() => {
+    if (data) {
+      onPageReady({
+        meta: {
+          description: `[ttfmp_onboarding] Request to create the onboarding flow succeeded and the flow's UI has rendered`,
+        },
+      });
+    }
+  }, [data, onPageReady]);
+
   if (error) {
     return <EmptyPrompt onboardingFlowType="auto-detect" error={error} onRetryClick={refetch} />;
   }

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx

@@ -18,8 +18,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { OnboardingFlowEventContext } from '../../../../common/telemetry_events';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { EmptyPrompt } from '../shared/empty_prompt';
@@ -64,6 +65,17 @@ export function FirehosePanel() {
   } = useKibana<ObservabilityOnboardingAppServices>();
   const { data, status, error, refetch } = useFirehoseFlow();
   const { data: populatedAWSIndexList } = usePopulatedAWSIndexList();
+  const { onPageReady } = usePerformanceContext();
+
+  useEffect(() => {
+    if (data) {
+      onPageReady({
+        meta: {
+          description: `[ttfmp_onboarding] Request to create the onboarding flow succeeded and the flow's UI has rendered`,
+        },
+      });
+    }
+  }, [data, onPageReady]);
 
   const hasExistingData = Array.isArray(populatedAWSIndexList) && populatedAWSIndexList.length > 0;
 

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   EuiPanel,
   EuiSkeletonRectangle,
@@ -15,6 +15,7 @@ import {
   EuiStepStatus,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { EmptyPrompt } from '../shared/empty_prompt';
 import { CommandSnippet } from './command_snippet';
@@ -25,13 +26,24 @@ import { useWindowBlurDataMonitoringTrigger } from '../shared/use_window_blur_da
 
 export const KubernetesPanel: React.FC = () => {
   const { data, status, error, refetch } = useKubernetesFlow();
+  const { onPageReady } = usePerformanceContext();
 
   const isMonitoringStepActive = useWindowBlurDataMonitoringTrigger({
     isActive: status === FETCH_STATUS.SUCCESS,
     onboardingFlowType: 'kubernetes',
     onboardingId: data?.onboardingId,
   });
 
+  useEffect(() => {
+    if (data) {
+      onPageReady({
+        meta: {
+          description: `[ttfmp_onboarding] Request to create the onboarding flow succeeded and the flow's UI has rendered`,
+        },
+      });
+    }
+  }, [data, onPageReady]);
+
   if (error !== undefined) {
     return <EmptyPrompt onboardingFlowType="kubernetes" error={error} onRetryClick={refetch} />;
   }

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   EuiPanel,
   EuiSkeletonText,
@@ -26,6 +26,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DASHBOARD_APP_LOCATOR } from '@kbn/deeplinks-analytics';
 import { css } from '@emotion/react';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { EmptyPrompt } from '../shared/empty_prompt';
 import { GetStartedPanel } from '../shared/get_started_panel';
 import { FeedbackButtons } from '../shared/feedback_buttons';
@@ -46,6 +47,17 @@ export const OtelKubernetesPanel: React.FC = () => {
   const apmLocator = share.url.locators.get('APM_LOCATOR');
   const dashboardLocator = share.url.locators.get(DASHBOARD_APP_LOCATOR);
   const theme = useEuiTheme();
+  const { onPageReady } = usePerformanceContext();
+
+  useEffect(() => {
+    if (data) {
+      onPageReady({
+        meta: {
+          description: `[ttfmp_onboarding] Request to create the onboarding flow succeeded and the flow's UI has rendered`,
+        },
+      });
+    }
+  }, [data, onPageReady]);
 
   if (error) {
     return (

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx

@@ -26,6 +26,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { type LogsLocatorParams, LOGS_LOCATOR_ID } from '@kbn/logs-shared-plugin/common';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { ObservabilityOnboardingAppServices } from '../../..';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { MultiIntegrationInstallBanner } from './multi_integration_install_banner';
@@ -41,6 +42,7 @@ const HOST_COMMAND = i18n.translate(
 );
 
 export const OtelLogsPanel: React.FC = () => {
+  const { onPageReady } = usePerformanceContext();
   const {
     data: apiKeyData,
     error,
@@ -65,6 +67,16 @@ export const OtelLogsPanel: React.FC = () => {
     },
   } = useKibana<ObservabilityOnboardingAppServices>();
 
+  useEffect(() => {
+    if (apiKeyData && setup) {
+      onPageReady({
+        meta: {
+          description: `[ttfmp_onboarding] Requests to get the environment and to generate API key succeeded and the flow's UI has rendered`,
+        },
+      });
+    }
+  }, [apiKeyData, onPageReady, setup]);
+
   const AGENT_CDN_BASE_URL = 'artifacts.elastic.co/downloads/beats/elastic-agent';
   const agentVersion =
     isServerless && setup ? setup.elasticAgentVersionInfo.agentVersion : stackVersion;

x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json

@@ -45,7 +45,8 @@
     "@kbn/core-application-browser",
     "@kbn/core-plugins-server",
     "@kbn/logs-shared-plugin",
-    "@kbn/tooling-log"
+    "@kbn/tooling-log",
+    "@kbn/ebt-tools"
   ],
   "exclude": [
     "target/**/*"