Skip to content

Commit

Permalink
[Synthetics] Measure overview page performance (elastic#191703)
Browse files Browse the repository at this point in the history
## Summary

Measure overview page performance !!

also introduced the usePageReady hook in ebt-tooling !!

---------

Co-authored-by: kibanamachine <[email protected]>
(cherry picked from commit b9072e3)

# Conflicts:
#	x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/synthetics_app.tsx
#	x-pack/plugins/observability_solution/synthetics/tsconfig.json
  • Loading branch information
shahzad31 committed Aug 30, 2024
1 parent 4b7e073 commit dee172e
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -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]);
};
1 change: 1 addition & 0 deletions packages/kbn-ebt-tools/src/performance_metrics/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ function dynamic<TElement extends React.ComponentType<any>, 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'));
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
import { Router } from '@kbn/shared-ux-router';

import { PerformanceContextProvider } from '@kbn/ebt-tools';
import { kibanaService } from '../../utils/kibana_service';
import { ActionMenu } from './components/common/header/action_menu';
import { TestNowModeFlyoutContainer } from './components/test_now_mode/test_now_mode_flyout_container';
Expand Down Expand Up @@ -50,14 +51,14 @@ const Application = (props: SyntheticsAppProps) => {
setBadge(
!canSave
? {
text: i18n.translate('xpack.synthetics.badge.readOnly.text', {
defaultMessage: 'Read only',
}),
tooltip: i18n.translate('xpack.synthetics.badge.readOnly.tooltip', {
defaultMessage: 'Unable to save',
}),
iconType: 'glasses',
}
text: i18n.translate('xpack.synthetics.badge.readOnly.text', {
defaultMessage: 'Read only',
}),
tooltip: i18n.translate('xpack.synthetics.badge.readOnly.tooltip', {
defaultMessage: 'Unable to save',
}),
iconType: 'glasses',
}
: undefined
);
}, [canSave, renderGlobalHelpControls, setBadge]);
Expand Down Expand Up @@ -105,19 +106,21 @@ const Application = (props: SyntheticsAppProps) => {
<SyntheticsSettingsContextProvider {...props}>
<SyntheticsThemeContextProvider darkMode={darkMode}>
<SyntheticsStartupPluginsContextProvider {...startPlugins}>
<div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<InspectorContextProvider>
<PageRouter />
<ActionMenu appMountParameters={appMountParameters} />
<TestNowModeFlyoutContainer />
</InspectorContextProvider>
</RedirectAppLinks>
</div>
<PerformanceContextProvider>
<div className={APP_WRAPPER_CLASS} data-test-subj="syntheticsApp">
<RedirectAppLinks
coreStart={{
application: core.application,
}}
>
<InspectorContextProvider>
<PageRouter />
<ActionMenu appMountParameters={appMountParameters} />
<TestNowModeFlyoutContainer />
</InspectorContextProvider>
</RedirectAppLinks>
</div>
</PerformanceContextProvider>
</SyntheticsStartupPluginsContextProvider>
</SyntheticsThemeContextProvider>
</SyntheticsSettingsContextProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,8 @@
"@kbn/react-kibana-mount",
"@kbn/react-kibana-context-render",
"@kbn/react-kibana-context-theme",
"@kbn/search-types"
"@kbn/search-types",
"@kbn/ebt-tools"
],
"exclude": ["target/**/*"]
}

0 comments on commit dee172e

Please sign in to comment.