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

# Backport This will backport the following commits from `main` to `8.18`: - [[Obs Onboarding] Add page rendering performance monitoring (#213769)](https://github.com/elastic/kibana/pull/213769)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: Mykola Harmash <mykola.harmash@gmail.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2025-04-08 12:06:54 +02:00 · 2025-04-08 12:06:54 +02:00 · 406ef5cb98
commit 406ef5cb98
parent 4bc4c3a08f
8 changed files with 84 additions and 12 deletions
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/app.tsx
+++ b/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>
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx
@ -26,6 +26,7 @@ import { css } from '@emotion/react';

 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { OnboardingFlowPackageList } from '../packages_list';
 import { Category } from './types';
 import { useCustomCardsForCategory } from './use_custom_cards_for_category';
@ -112,6 +113,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
  const radioGroupId = useGeneratedHtmlId({ prefix: 'onboardingCategory' });
  const categorySelectorTitleId = useGeneratedHtmlId();
  const packageListTitleId = useGeneratedHtmlId();
+  const { onPageReady } = usePerformanceContext();

  const [searchParams, setSearchParams] = useSearchParams();

@ -147,6 +149,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 customCards = useCustomCardsForCategory(
    createCollectionCardHandler,
    searchParams.get('category') as Category | null
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx
+++ b/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,
@ -24,6 +24,7 @@ import {
 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 { 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';
@ -41,10 +42,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} />;
  }
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx
+++ b/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;

--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx
+++ b/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,6 +26,7 @@ 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,
@ -32,6 +34,16 @@ export const KubernetesPanel: React.FC = () => {
    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} />;
  }
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx
+++ b/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 (
--- a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx
@ -29,6 +29,7 @@ import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { usePerformanceContext } from '@kbn/ebt-tools';
 import { ObservabilityOnboardingAppServices } from '../../..';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { MultiIntegrationInstallBanner } from './multi_integration_install_banner';
@ -44,6 +45,7 @@ const HOST_COMMAND = i18n.translate(
 );

 export const OtelLogsPanel: React.FC = () => {
+  const { onPageReady } = usePerformanceContext();
  const {
    data: apiKeyData,
    error,
@ -68,6 +70,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;
--- a/x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json
+++ b/x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json
@ -44,7 +44,8 @@
    "@kbn/custom-integrations-plugin",
    "@kbn/server-route-repository-utils",
    "@kbn/core-application-browser",
-    "@kbn/core-plugins-server"
+    "@kbn/core-plugins-server",
+    "@kbn/ebt-tools"
  ],
  "exclude": [
    "target/**/*"