diff --git a/packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts b/packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts new file mode 100644 index 0000000000000..1a445322d5de0 --- /dev/null +++ b/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]); +}; diff --git a/packages/kbn-ebt-tools/src/performance_metrics/index.tsx b/packages/kbn-ebt-tools/src/performance_metrics/index.tsx index 54c5fe5d62512..421600b0daa83 100644 --- a/packages/kbn-ebt-tools/src/performance_metrics/index.tsx +++ b/packages/kbn-ebt-tools/src/performance_metrics/index.tsx @@ -22,4 +22,5 @@ function dynamic, 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')); diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx index e16633fed2444..da28ccc325ca3 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview_page.tsx +++ b/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) { diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx index 61cf6b69763da..014043efa5cee 100644 --- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx +++ b/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) => { -
- - - - - -
+ +
+ + + + + +
+
diff --git a/x-pack/plugins/observability_solution/synthetics/tsconfig.json b/x-pack/plugins/observability_solution/synthetics/tsconfig.json index 500bb735ddc58..8446b7850d3a9 100644 --- a/x-pack/plugins/observability_solution/synthetics/tsconfig.json +++ b/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/**/*"] }