From 7d1f1ad6ff774e3e9257dc0e29118df9a55f3245 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Thu, 29 Aug 2024 11:32:23 +0200 Subject: [PATCH 1/3] report uptime overview metrics --- .../context/use_page_ready.ts | 24 +++++++++++++++ .../src/performance_metrics/index.tsx | 1 + .../monitors_page/overview/overview_page.tsx | 5 ++++ .../public/apps/synthetics/synthetics_app.tsx | 17 ++++++----- .../public/legacy_uptime/app/uptime_app.tsx | 29 ++++++++++--------- .../monitor_list/monitor_list_container.tsx | 3 ++ 6 files changed, 59 insertions(+), 20 deletions(-) create mode 100644 packages/kbn-ebt-tools/src/performance_metrics/context/use_page_ready.ts 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/uptime/public/legacy_uptime/app/uptime_app.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx index 1f4be8fa943f0..3ce07ac9803f7 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/app/uptime_app.tsx @@ -16,6 +16,7 @@ import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { InspectorContextProvider } from '@kbn/observability-shared-plugin/public'; +import { PerformanceContextProvider } from '@kbn/ebt-tools'; import { ClientPluginsSetup, ClientPluginsStart } from '../../plugin'; import { UMUpdateBadge } from '../lib/lib'; import { @@ -133,19 +134,21 @@ const Application = (props: UptimeAppProps) => { -
- - - - - - - -
+ +
+ + + + + + + +
+ diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_container.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_container.tsx index 8447f1c9d3e71..78fbdc686050e 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_container.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/overview/monitor_list/monitor_list_container.tsx @@ -7,6 +7,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; +import { usePageReady } from '@kbn/ebt-tools'; import { getMonitorList } from '../../../state/actions'; import { esKuerySelector, monitorListSelector } from '../../../state/selectors'; import { MonitorListComponent } from './monitor_list'; @@ -46,6 +47,8 @@ export const MonitorList: React.FC = (props) => { const monitorList = useSelector(monitorListSelector); useMappingCheck(monitorList.error); + usePageReady({ isReady: Boolean(monitorList.isLoaded) }); + useEffect(() => { filterCheck(() => dispatch( From 087a811c8bda0308685ce2bb7444a5141d0fe374 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 29 Aug 2024 09:45:04 +0000 Subject: [PATCH 2/3] [CI] Auto-commit changed files from 'node scripts/yarn_deduplicate' --- x-pack/plugins/observability_solution/synthetics/tsconfig.json | 3 ++- x-pack/plugins/observability_solution/uptime/tsconfig.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) 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/**/*"] } diff --git a/x-pack/plugins/observability_solution/uptime/tsconfig.json b/x-pack/plugins/observability_solution/uptime/tsconfig.json index f797a5a7f930d..8fa4d21627252 100644 --- a/x-pack/plugins/observability_solution/uptime/tsconfig.json +++ b/x-pack/plugins/observability_solution/uptime/tsconfig.json @@ -78,6 +78,7 @@ "@kbn/react-kibana-context-theme", "@kbn/react-kibana-mount", "@kbn/deeplinks-observability", + "@kbn/ebt-tools", ], "exclude": ["target/**/*"] } From 60524d18702a71802b5fdb3de2a1d349c8695d4c Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Thu, 29 Aug 2024 17:51:02 +0200 Subject: [PATCH 3/3] fix tests --- .../uptime/public/legacy_uptime/pages/overview.test.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/pages/overview.test.tsx b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/pages/overview.test.tsx index 57ca69c0de184..9999215d02e8f 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/pages/overview.test.tsx +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/pages/overview.test.tsx @@ -9,6 +9,10 @@ import React from 'react'; import { OverviewPageComponent } from './overview'; import { render } from '../lib/helper/rtl_helpers'; +jest.mock('@kbn/ebt-tools', () => ({ + usePageReady: jest.fn(), +})); + describe('MonitorPage', () => { it('renders expected elements for valid props', async () => { const { findByText } = render();