[Metrics UI] Fix inventory footer misalignment

Author: Zacqary

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useInterval } from 'react-use';
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { AutoSizer } from '../../../../components/auto_sizer';
 import { convertIntervalToString } from '../../../../utils/convert_interval_to_string';
 import { NodesOverview } from './nodes_overview';
 import { calculateBoundsFromNodes } from '../lib/calculate_bounds_from_nodes';
@@ -110,37 +111,44 @@ export const Layout = () => {
               </EuiFlexItem>
             </EuiFlexGroup>
           </TopActionContainer>
-          <NodesOverview
-            nodes={nodes}
-            options={options}
-            nodeType={nodeType}
-            loading={loading}
-            reload={reload}
-            onDrilldown={applyFilterQuery}
-            currentTime={currentTime}
-            view={view}
-            autoBounds={autoBounds}
-            boundsOverride={boundsOverride}
-            formatter={formatter}
-          />
-          <BottomActionContainer>
-            <EuiFlexGroup justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                <SavedViewsToolbarControls viewState={viewState} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false} style={{ position: 'relative', minWidth: 400 }}>
-                <Legend
+          <AutoSizer bounds>
+            {({ measureRef, bounds: { height = 0 } }) => (
+              <>
+                <NodesOverview
+                  nodes={nodes}
+                  options={options}
+                  nodeType={nodeType}
+                  loading={loading}
+                  reload={reload}
+                  onDrilldown={applyFilterQuery}
+                  currentTime={currentTime}
+                  view={view}
+                  autoBounds={autoBounds}
+                  boundsOverride={boundsOverride}
                   formatter={formatter}
-                  bounds={bounds}
-                  dataBounds={dataBounds}
-                  legend={options.legend}
+                  bottomMargin={height}
                 />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <IntervalLabel intervalAsString={intervalAsString} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </BottomActionContainer>
+                <BottomActionContainer ref={measureRef}>
+                  <EuiFlexGroup justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>
+                      <SavedViewsToolbarControls viewState={viewState} />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false} style={{ position: 'relative', minWidth: 400 }}>
+                      <Legend
+                        formatter={formatter}
+                        bounds={bounds}
+                        dataBounds={dataBounds}
+                        legend={options.legend}
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <IntervalLabel intervalAsString={intervalAsString} />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </BottomActionContainer>
+              </>
+            )}
+          </AutoSizer>
         </MainContainer>
       </PageContent>
     </>
@@ -159,9 +167,9 @@ const TopActionContainer = euiStyled.div`
 const BottomActionContainer = euiStyled.div`
   background-color: ${(props) => props.theme.eui.euiPageBackgroundColor};
   padding: ${(props) => props.theme.eui.paddingSizes.m} ${(props) =>
-  props.theme.eui.paddingSizes.m} ${(props) => props.theme.eui.paddingSizes.s};
-  position: absolute;
+  props.theme.eui.paddingSizes.m};
+  position: fixed;
   left: 0;
-  bottom: 4px;
+  bottom: 0;
   right: 0;
 `;

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx

@@ -34,6 +34,7 @@ interface Props {
   boundsOverride: InfraWaffleMapBounds;
   autoBounds: boolean;
   formatter: InfraFormatter;
+  bottomMargin: number;
 }
 
 export const NodesOverview = ({
@@ -48,6 +49,7 @@ export const NodesOverview = ({
   options,
   formatter,
   onDrilldown,
+  bottomMargin,
 }: Props) => {
   const handleDrilldown = useCallback(
     (filter: string) => {
@@ -118,6 +120,7 @@ export const NodesOverview = ({
         onFilter={handleDrilldown}
         bounds={bounds}
         dataBounds={dataBounds}
+        bottomMargin={bottomMargin}
       />
     </MapContainer>
   );

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx

@@ -26,6 +26,7 @@ interface Props {
   onFilter: (filter: string) => void;
   bounds: InfraWaffleMapBounds;
   dataBounds: InfraWaffleMapBounds;
+  bottomMargin: number;
 }
 
 export const Map: React.FC<Props> = ({
@@ -37,6 +38,7 @@ export const Map: React.FC<Props> = ({
   bounds,
   nodeType,
   dataBounds,
+  bottomMargin,
 }) => {
   const sortedNodes = sortNodes(options.sort, nodes);
   const map = nodesToWaffleMap(sortedNodes);
@@ -45,7 +47,11 @@ export const Map: React.FC<Props> = ({
       {({ measureRef, content: { width = 0, height = 0 } }) => {
         const groupsWithLayout = applyWaffleMapLayout(map, width, height);
         return (
-          <WaffleMapOuterContainer ref={(el: any) => measureRef(el)} data-test-subj="waffleMap">
+          <WaffleMapOuterContainer
+            ref={(el: any) => measureRef(el)}
+            bottomMargin={bottomMargin}
+            data-test-subj="waffleMap"
+          >
             <WaffleMapInnerContainer>
               {groupsWithLayout.map((group) => {
                 if (isWaffleMapGroupWithGroups(group)) {
@@ -86,13 +92,14 @@ export const Map: React.FC<Props> = ({
   );
 };
 
-const WaffleMapOuterContainer = euiStyled.div`
+const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number }>`
   flex: 1 0 0%;
   display: flex;
   justify-content: flex-start;
   flex-direction: column;
   overflow-x: hidden;
   overflow-y: auto;
+  margin-bottom: ${(props) => props.bottomMargin}px;
 `;
 
 const WaffleMapInnerContainer = euiStyled.div`