[APM] Hoist HeaderMenuPortal to prevent unmounts (#92012)
This commit is contained in:
parent
e7724882a0
commit
75364aa11e
|
@ -13,6 +13,7 @@ import ReactDOM from 'react-dom';
|
|||
import { Route, Router, Switch } from 'react-router-dom';
|
||||
import 'react-vis/dist/style.css';
|
||||
import { DefaultTheme, ThemeProvider } from 'styled-components';
|
||||
import { HeaderMenuPortal } from '../../../observability/public';
|
||||
import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
|
||||
import { ConfigSchema } from '../';
|
||||
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
|
||||
|
@ -35,6 +36,8 @@ import { createCallApmApi } from '../services/rest/createCallApmApi';
|
|||
import { createStaticIndexPattern } from '../services/rest/index_pattern';
|
||||
import { setHelpExtension } from '../setHelpExtension';
|
||||
import { setReadonlyBadge } from '../updateBadge';
|
||||
import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
|
||||
import { ActionMenu } from './action_menu';
|
||||
|
||||
const MainContainer = euiStyled.div`
|
||||
height: 100%;
|
||||
|
@ -42,6 +45,7 @@ const MainContainer = euiStyled.div`
|
|||
|
||||
function App() {
|
||||
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
|
||||
const { appMountParameters } = useApmPluginContext();
|
||||
|
||||
useBreadcrumbs(routes);
|
||||
|
||||
|
@ -54,6 +58,11 @@ function App() {
|
|||
})}
|
||||
>
|
||||
<MainContainer data-test-subj="apmMainContainer" role="main">
|
||||
<HeaderMenuPortal
|
||||
setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
|
||||
>
|
||||
<ActionMenu />
|
||||
</HeaderMenuPortal>
|
||||
<Route component={ScrollToTopOnPathChange} />
|
||||
<Switch>
|
||||
{routes.map((route, i) => (
|
||||
|
|
|
@ -16,8 +16,6 @@ import {
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
import { HeaderMenuPortal } from '../../../../../observability/public';
|
||||
import { ActionMenu } from '../../../application/action_menu';
|
||||
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
|
||||
import { getAPMHref } from '../../shared/Links/apm/APMLink';
|
||||
import { HomeLink } from '../../shared/Links/apm/HomeLink';
|
||||
|
@ -27,7 +25,7 @@ interface SettingsProps extends RouteComponentProps<{}> {
|
|||
}
|
||||
|
||||
export function Settings({ children, location }: SettingsProps) {
|
||||
const { appMountParameters, core } = useApmPluginContext();
|
||||
const { core } = useApmPluginContext();
|
||||
const { basePath } = core.http;
|
||||
const canAccessML = !!core.application.capabilities.ml?.canAccessML;
|
||||
const { search, pathname } = location;
|
||||
|
@ -44,11 +42,6 @@ export function Settings({ children, location }: SettingsProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<HeaderMenuPortal
|
||||
setHeaderActionMenu={appMountParameters.setHeaderActionMenu}
|
||||
>
|
||||
<ActionMenu />
|
||||
</HeaderMenuPortal>
|
||||
<EuiPage>
|
||||
<EuiPageSideBar>
|
||||
<HomeLink>
|
||||
|
|
|
@ -8,9 +8,6 @@
|
|||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
|
||||
import { HeaderMenuPortal } from '../../../../../observability/public';
|
||||
import { ActionMenu } from '../../../application/action_menu';
|
||||
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
|
||||
import { EnvironmentFilter } from '../EnvironmentFilter';
|
||||
|
||||
const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
|
||||
|
@ -19,13 +16,8 @@ const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
|
|||
`;
|
||||
|
||||
export function ApmHeader({ children }: { children: ReactNode }) {
|
||||
const { setHeaderActionMenu } = useApmPluginContext().appMountParameters;
|
||||
|
||||
return (
|
||||
<HeaderFlexGroup alignItems="center" gutterSize="s" wrap={true}>
|
||||
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
|
||||
<ActionMenu />
|
||||
</HeaderMenuPortal>
|
||||
<EuiFlexItem>{children}</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EnvironmentFilter />
|
||||
|
|
|
@ -8,8 +8,9 @@
|
|||
import React, { lazy, Suspense } from 'react';
|
||||
import { CoreVitalProps, HeaderMenuPortalProps } from './types';
|
||||
|
||||
const CoreVitalsLazy = lazy(() => import('./core_web_vitals/index'));
|
||||
|
||||
export function getCoreVitalsComponent(props: CoreVitalProps) {
|
||||
const CoreVitalsLazy = lazy(() => import('./core_web_vitals/index'));
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<CoreVitalsLazy {...props} />
|
||||
|
@ -17,8 +18,9 @@ export function getCoreVitalsComponent(props: CoreVitalProps) {
|
|||
);
|
||||
}
|
||||
|
||||
const HeaderMenuPortalLazy = lazy(() => import('./header_menu_portal'));
|
||||
|
||||
export function HeaderMenuPortal(props: HeaderMenuPortalProps) {
|
||||
const HeaderMenuPortalLazy = lazy(() => import('./header_menu_portal'));
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<HeaderMenuPortalLazy {...props} />
|
||||
|
|
Loading…
Reference in a new issue