Skip to content

Commit

Permalink
[Metrics UI] Fix inventory footer misalignment (#74707)
Browse files Browse the repository at this point in the history
  • Loading branch information
Zacqary authored Aug 13, 2020
1 parent 4c810be commit cdc7d25
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
</>
Expand All @@ -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;
`;
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ interface Props {
boundsOverride: InfraWaffleMapBounds;
autoBounds: boolean;
formatter: InfraFormatter;
bottomMargin: number;
}

export const NodesOverview = ({
Expand All @@ -48,6 +49,7 @@ export const NodesOverview = ({
options,
formatter,
onDrilldown,
bottomMargin,
}: Props) => {
const handleDrilldown = useCallback(
(filter: string) => {
Expand Down Expand Up @@ -118,6 +120,7 @@ export const NodesOverview = ({
onFilter={handleDrilldown}
bounds={bounds}
dataBounds={dataBounds}
bottomMargin={bottomMargin}
/>
</MapContainer>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface Props {
onFilter: (filter: string) => void;
bounds: InfraWaffleMapBounds;
dataBounds: InfraWaffleMapBounds;
bottomMargin: number;
}

export const Map: React.FC<Props> = ({
Expand All @@ -37,6 +38,7 @@ export const Map: React.FC<Props> = ({
bounds,
nodeType,
dataBounds,
bottomMargin,
}) => {
const sortedNodes = sortNodes(options.sort, nodes);
const map = nodesToWaffleMap(sortedNodes);
Expand All @@ -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)) {
Expand Down Expand Up @@ -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`
Expand Down

0 comments on commit cdc7d25

Please sign in to comment.