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/**/*"