diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/public/application/app.tsx b/x-pack/solutions/observability/plugins/observability_onboarding/public/application/app.tsx index c2163bda2f2da..b09ca846aee43 100644 --- 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({ }} > - - - - + + + + + + diff --git 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 index 6a924788bc1dd..5ffe2ecc02686 100644 --- 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 @@ -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 = { host: ['auto-detect-logs', 'otel-logs'], kubernetes: ['kubernetes-quick-start', 'otel-kubernetes'], diff --git 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 index 6b5fc0e4eaf17..6b6150e57bf72 100644 --- 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, @@ -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(); + 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 ; } diff --git 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 index 01e2dd02c3c47..05d16ea032420 100644 --- 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(); 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; diff --git 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 index 96b7b5619377b..fb094eefc608f 100644 --- 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 ; } diff --git 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 index fb8ba7b8eccbc..0b06157c9b393 100644 --- 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 ( diff --git 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 index 8f55b903aaf75..13dedb1674231 100644 --- 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 @@ -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(); + 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; diff --git a/x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json b/x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json index 79e54ce203d63..ce26619ab7f63 100644 --- a/x-pack/solutions/observability/plugins/observability_onboarding/tsconfig.json +++ b/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/**/*"