[Profiling] Fill out vertical space for flamegraph (#140952)

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.component.tsx

@@ -28,6 +28,7 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
   children,
   navigateToUrl,
   currentAppId,
+  className,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -44,7 +45,7 @@ export const RedirectAppLinks: FC<RedirectAppLinksComponentProps> = ({
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div ref={containerRef} onClick={handleClick}>
+    <div ref={containerRef} onClick={handleClick} className={className}>
       {children}
     </div>
   );

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.container.tsx

@@ -22,6 +22,8 @@ import { RedirectAppLinks as Component } from './redirect_app_links.component';
  * </RedirectAppLinks>
  * ```
  */
-export const RedirectAppLinks: FC<{}> = ({ children }) => (
-  <Component {...useServices()}>{children}</Component>
+export const RedirectAppLinks: FC<{ className?: string }> = ({ className, children }) => (
+  <Component {...useServices()} className={className}>
+    {children}
+  </Component>
 );

packages/shared-ux/link/redirect_app/impl/src/redirect_app_links.tsx

@@ -24,8 +24,10 @@ const isKibanaContract = (services: any): services is RedirectAppLinksKibanaDepe
  * `RedirectAppLinksKibanaProvider` based on the services provided, creating a single component
  * with which consumers can wrap their components or solutions.
  */
-export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, ...props }) => {
-  const container = <RedirectAppLinksContainer>{children}</RedirectAppLinksContainer>;
+export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({ children, className, ...props }) => {
+  const container = (
+    <RedirectAppLinksContainer className={className}>{children}</RedirectAppLinksContainer>
+  );
 
   if (isKibanaContract(props)) {
     const { coreStart } = props;

packages/shared-ux/link/redirect_app/types/index.d.ts

@@ -32,7 +32,10 @@ export interface RedirectAppLinksKibanaDependencies {
 }
 
 /** Props for the `RedirectAppLinks` component. */
-export type RedirectAppLinksProps = RedirectAppLinksServices | RedirectAppLinksKibanaDependencies;
+export type RedirectAppLinksProps = { className?: string } & (
+  | RedirectAppLinksServices
+  | RedirectAppLinksKibanaDependencies
+);
 
 /** Props for the `RedirectAppLinksComponent`. */
 export interface RedirectAppLinksComponentProps

x-pack/plugins/profiling/public/app.tsx

@@ -14,6 +14,7 @@ import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import { css } from '@emotion/react';
 import { ProfilingDependenciesContextProvider } from './components/contexts/profiling_dependencies/profiling_dependencies_context';
 import { RedirectWithDefaultDateRange } from './components/redirect_with_default_date_range';
 import { profilingRouter } from './routing';
@@ -32,6 +33,11 @@ interface Props {
   history: AppMountParameters['history'];
 }
 
+const redirectAppLinksCss = css`
+  display: flex;
+  flex-grow: 1;
+`;
+
 const storage = new Storage(localStorage);
 
 function App({
@@ -63,7 +69,11 @@ function App({
     <KibanaThemeProvider theme$={theme$}>
       <KibanaContextProvider services={{ ...coreStart, ...pluginsStart, storage }}>
         <i18nCore.Context>
-          <RedirectAppLinks coreStart={coreStart} currentAppId="profiling">
+          <RedirectAppLinks
+            coreStart={coreStart}
+            currentAppId="profiling"
+            css={redirectAppLinksCss}
+          >
             <RouterProvider router={profilingRouter as any} history={history}>
               <TimeRangeContextProvider>
                 <ProfilingDependenciesContextProvider value={profilingDependencies}>

x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx

@@ -111,10 +111,10 @@ export function FlameGraphsView({ children }: { children: React.ReactElement })
   }
 
   return (
-    <ProfilingAppPageTemplate tabs={tabs} hideSearchBar={isDifferentialView}>
+    <ProfilingAppPageTemplate tabs={tabs} hideSearchBar={isDifferentialView} fullHeight>
       <EuiFlexGroup direction="column">
         {isDifferentialView ? (
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
               <EuiFlexItem grow>
                 <PrimaryAndComparisonSearchBar />
@@ -170,10 +170,10 @@ export function FlameGraphsView({ children }: { children: React.ReactElement })
           </EuiFlexItem>
         ) : null}
         <EuiFlexItem>
-          <AsyncComponent {...state} style={{ height: 600 }} size="xl">
+          <AsyncComponent {...state} style={{ height: '100%' }} size="xl">
             <FlameGraph
               id="flamechart"
-              height={600}
+              height={'100%'}
               primaryFlamegraph={data?.primaryFlamegraph}
               comparisonFlamegraph={data?.comparisonFlamegraph}
               comparisonMode={comparisonMode}

x-pack/plugins/profiling/public/components/flamegraph.tsx

@@ -149,7 +149,7 @@ function FlameGraphTooltip({
 
 export interface FlameGraphProps {
   id: string;
-  height: number;
+  height: number | string;
   comparisonMode: FlameGraphComparisonMode;
   primaryFlamegraph?: ElasticFlameGraph;
   comparisonFlamegraph?: ElasticFlameGraph;
@@ -256,7 +256,7 @@ export const FlameGraph: React.FC<FlameGraphProps> = ({
         <EuiFlexGroup direction="row">
           {columnarData.viewModel.label.length > 0 && (
             <EuiFlexItem grow>
-              <Chart size={['100%', height]} key={columnarData.key}>
+              <Chart key={columnarData.key}>
                 <Settings
                   theme={chartTheme}
                   onElementClick={(elements) => {

x-pack/plugins/profiling/public/components/profiling_app_page_template/index.tsx

@@ -16,10 +16,12 @@ export function ProfilingAppPageTemplate({
   children,
   tabs,
   hideSearchBar = false,
+  fullHeight = false,
 }: {
   children: React.ReactElement;
   tabs: EuiPageHeaderContentProps['tabs'];
   hideSearchBar?: boolean;
+  fullHeight?: boolean;
 }) {
   const {
     start: { observability },
@@ -41,10 +43,18 @@ export function ProfilingAppPageTemplate({
         }),
         tabs,
       }}
+      pageSectionProps={{
+        contentProps: {
+          style: {
+            display: 'flex',
+            flexGrow: 1,
+          },
+        },
+      }}
     >
       <EuiFlexGroup direction="column">
         {!hideSearchBar && (
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <PrimaryProfilingSearchBar />
           </EuiFlexItem>
         )}