[APM] Make page full height

elastic · Jun 4, 2021 · 84dab70 · 84dab70
1 parent e3198bc
commit 84dab70
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx b/src/plugins/kibana_react/public/app_links/redirect_app_link.tsx
@@ -12,7 +12,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { ApplicationStart } from 'src/core/public';
 import { createNavigateToUrlClickHandler } from './click_handler';
 
-interface RedirectCrossAppLinksProps {
+interface RedirectCrossAppLinksProps extends React.HTMLAttributes<HTMLDivElement> {
   application: ApplicationStart;
   className?: string;
   'data-test-subj'?: string;

diff --git a/x-pack/plugins/apm/public/application/index.tsx b/x-pack/plugins/apm/public/application/index.tsx
@@ -10,7 +10,11 @@ import ReactDOM from 'react-dom';
 import 'react-vis/dist/style.css';
 import type { ObservabilityRuleTypeRegistry } from '../../../observability/public';
 import { ConfigSchema } from '../';
-import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
+import {
+  AppMountParameters,
+  CoreStart,
+  APP_WRAPPER_CLASS,
+} from '../../../../../src/core/public';
 import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
@@ -57,6 +61,9 @@ export const renderApp = ({
     console.log('Error creating static index pattern', e);
   });
 
+  // ensure all divs are .kbnAppWrappers
+  element.classList.add(APP_WRAPPER_CLASS);
+
   ReactDOM.render(
     <ApmAppRoot
       apmPluginContextValue={apmPluginContextValue}

diff --git a/x-pack/plugins/apm/public/components/routing/app_root.tsx b/x-pack/plugins/apm/public/components/routing/app_root.tsx
@@ -11,7 +11,7 @@ import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 import { DefaultTheme, ThemeProvider } from 'styled-components';
-import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
+import { APP_WRAPPER_CLASS } from '../../../../../../src/core/public';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -32,10 +32,6 @@ import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_con
 import { AnomalyDetectionJobsContextProvider } from '../../context/anomaly_detection_jobs/anomaly_detection_jobs_context';
 import { apmRouteConfig } from './apm_route_config';
 
-const MainContainer = euiStyled.div`
-  height: 100%;
-`;
-
 export function ApmAppRoot({
   apmPluginContextValue,
   pluginsStart,
@@ -48,7 +44,12 @@ export function ApmAppRoot({
   const i18nCore = core.i18n;
 
   return (
-    <RedirectAppLinks application={core.application}>
+    <RedirectAppLinks
+      application={core.application}
+      className={APP_WRAPPER_CLASS}
+      data-test-subj="apmMainContainer"
+      role="main"
+    >
       <ApmPluginContext.Provider value={apmPluginContextValue}>
         <KibanaContextProvider services={{ ...core, ...pluginsStart }}>
           <i18nCore.Context>
@@ -57,19 +58,14 @@ export function ApmAppRoot({
                 <LicenseProvider>
                   <AnomalyDetectionJobsContextProvider>
                     <ApmThemeProvider>
-                      <MainContainer
-                        data-test-subj="apmMainContainer"
-                        role="main"
-                      >
-                        <MountApmHeaderActionMenu />
+                      <MountApmHeaderActionMenu />
 
-                        <Route component={ScrollToTopOnPathChange} />
-                        <Switch>
-                          {apmRouteConfig.map((route, i) => (
-                            <ApmRoute key={i} {...route} />
-                          ))}
-                        </Switch>
-                      </MainContainer>
+                      <Route component={ScrollToTopOnPathChange} />
+                      <Switch>
+                        {apmRouteConfig.map((route, i) => (
+                          <ApmRoute key={i} {...route} />
+                        ))}
+                      </Switch>
                     </ApmThemeProvider>
                   </AnomalyDetectionJobsContextProvider>
                 </LicenseProvider>