diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
index ad92c054ee45..47616c7f4f7f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/layout.tsx
+++ b/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 = () => {
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ )}
+
>
@@ -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;
`;
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
index 723e8e581cda..a705a0be3a39 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
+++ b/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}
/>
);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
index 5838317f0710..89b1b9b2211d 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx
+++ b/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 = ({
@@ -37,6 +38,7 @@ export const Map: React.FC = ({
bounds,
nodeType,
dataBounds,
+ bottomMargin,
}) => {
const sortedNodes = sortNodes(options.sort, nodes);
const map = nodesToWaffleMap(sortedNodes);
@@ -45,7 +47,11 @@ export const Map: React.FC = ({
{({ measureRef, content: { width = 0, height = 0 } }) => {
const groupsWithLayout = applyWaffleMapLayout(map, width, height);
return (
- measureRef(el)} data-test-subj="waffleMap">
+ measureRef(el)}
+ bottomMargin={bottomMargin}
+ data-test-subj="waffleMap"
+ >
{groupsWithLayout.map((group) => {
if (isWaffleMapGroupWithGroups(group)) {
@@ -86,13 +92,14 @@ export const Map: React.FC = ({
);
};
-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`