Skip to content

Commit d92bc99

Browse files
simianhackerelasticmachine
simianhacker
and
elasticmachine
authored
[Metrics UI] Design Refresh: Inventory View, Episode 1 (#64026) (#64390)
* [Metrics UI] Design Refresh: Inventory View, Episode 1 * Removing unused i18n labels * Removing obsolete code removed in previous PR Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
1 parent 069d347 commit d92bc99

25 files changed

+493
-516
lines changed

‎x-pack/plugins/infra/public/components/toolbar_panel.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import { EuiPanel } from '@elastic/eui';
8+
import { euiStyled } from '../../../observability/public';
9+
10+
export const ToolbarPanel = euiStyled(EuiPanel).attrs(() => ({
11+
grow: false,
12+
paddingSize: 'none',
13+
}))`
14+
border-top: none;
15+
border-right: none;
16+
border-left: none;
17+
border-radius: 0;
18+
padding: ${props => `12px ${props.theme.eui.paddingSizes.m}`};
19+
`;

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
8+
import React, { ReactNode } from 'react';
9+
import { withTheme, EuiTheme } from '../../../../../../observability/public';
10+
11+
interface Props {
12+
label: string;
13+
onClick: () => void;
14+
theme: EuiTheme;
15+
children: ReactNode;
16+
}
17+
18+
export const DropdownButton = withTheme(({ onClick, label, theme, children }: Props) => {
19+
return (
20+
<EuiFlexGroup
21+
alignItems="center"
22+
gutterSize="none"
23+
style={{
24+
border: theme.eui.euiFormInputGroupBorder,
25+
boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`,
26+
}}
27+
>
28+
<EuiFlexItem
29+
grow={false}
30+
style={{
31+
padding: 12,
32+
background: theme.eui.euiFormInputGroupLabelBackground,
33+
fontSize: '0.75em',
34+
fontWeight: 600,
35+
color: theme.eui.euiTitleColor,
36+
}}
37+
>
38+
{label}
39+
</EuiFlexItem>
40+
<EuiFlexItem grow={false}>
41+
<EuiButtonEmpty
42+
color="text"
43+
iconType="arrowDown"
44+
onClick={onClick}
45+
iconSide="right"
46+
size="xs"
47+
>
48+
{children}
49+
</EuiButtonEmpty>
50+
</EuiFlexItem>
51+
</EuiFlexGroup>
52+
);
53+
});

‎x-pack/plugins/infra/public/pages/metrics/inventory_view/toolbar.tsx‎ renamed to ‎x-pack/plugins/infra/public/pages/metrics/inventory_view/components/filter_bar.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,19 @@
77
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
88
import React from 'react';
99

10-
import { Toolbar } from '../../../components/eui/toolbar';
11-
import { WaffleTimeControls } from './components/waffle/waffle_time_controls';
12-
import { WaffleInventorySwitcher } from './components/waffle/waffle_inventory_switcher';
13-
import { SearchBar } from './components/search_bar';
10+
import { WaffleTimeControls } from './waffle/waffle_time_controls';
11+
import { SearchBar } from './search_bar';
12+
import { ToolbarPanel } from '../../../../components/toolbar_panel';
1413

15-
export const SnapshotToolbar = () => (
16-
<Toolbar>
14+
export const FilterBar = () => (
15+
<ToolbarPanel>
1716
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m">
18-
<EuiFlexItem grow={false}>
19-
<WaffleInventorySwitcher />
20-
</EuiFlexItem>
2117
<EuiFlexItem>
2218
<SearchBar />
2319
</EuiFlexItem>
2420
<EuiFlexItem grow={false}>
2521
<WaffleTimeControls />
2622
</EuiFlexItem>
2723
</EuiFlexGroup>
28-
</Toolbar>
24+
</ToolbarPanel>
2925
);

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

Lines changed: 76 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,26 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import React from 'react';
7+
import React, { useCallback } from 'react';
88
import { useInterval } from 'react-use';
99

10-
import { euiPaletteColorBlind } from '@elastic/eui';
11-
import { NodesOverview } from './nodes_overview';
12-
import { Toolbar } from './toolbars/toolbar';
10+
import { euiPaletteColorBlind, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
11+
import { convertIntervalToString } from '../../../../utils/convert_interval_to_string';
12+
import { NodesOverview, calculateBoundsFromNodes } from './nodes_overview';
1313
import { PageContent } from '../../../../components/page';
1414
import { useSnapshot } from '../hooks/use_snaphot';
15-
import { useInventoryMeta } from '../hooks/use_inventory_meta';
1615
import { useWaffleTimeContext } from '../hooks/use_waffle_time';
1716
import { useWaffleFiltersContext } from '../hooks/use_waffle_filters';
1817
import { useWaffleOptionsContext } from '../hooks/use_waffle_options';
1918
import { useSourceContext } from '../../../../containers/source';
2019
import { InfraFormatterType, InfraWaffleMapGradientLegend } from '../../../../lib/lib';
20+
import { euiStyled } from '../../../../../../observability/public';
21+
import { Toolbar } from './toolbars/toolbar';
22+
import { ViewSwitcher } from './waffle/view_switcher';
23+
import { SavedViews } from './saved_views';
24+
import { IntervalLabel } from './waffle/interval_label';
25+
import { Legend } from './waffle/legend';
26+
import { createInventoryMetricFormatter } from '../lib/create_inventory_metric_formatter';
2127

2228
const euiVisColorPalette = euiPaletteColorBlind();
2329

@@ -34,7 +40,6 @@ export const Layout = () => {
3440
autoBounds,
3541
boundsOverride,
3642
} = useWaffleOptionsContext();
37-
const { accounts, regions } = useInventoryMeta(sourceId, nodeType);
3843
const { currentTime, jumpToTime, isAutoReloading } = useWaffleTimeContext();
3944
const { filterQueryAsJson, applyFilterQuery } = useWaffleFiltersContext();
4045
const { loading, nodes, reload, interval } = useSnapshot(
@@ -72,25 +77,75 @@ export const Layout = () => {
7277
isAutoReloading ? 5000 : null
7378
);
7479

80+
const intervalAsString = convertIntervalToString(interval);
81+
const dataBounds = calculateBoundsFromNodes(nodes);
82+
const bounds = autoBounds ? dataBounds : boundsOverride;
83+
const formatter = useCallback(createInventoryMetricFormatter(options.metric), [options.metric]);
84+
7585
return (
7686
<>
77-
<Toolbar accounts={accounts} regions={regions} nodeType={nodeType} />
7887
<PageContent>
79-
<NodesOverview
80-
nodes={nodes}
81-
options={options}
82-
nodeType={nodeType}
83-
loading={loading}
84-
reload={reload}
85-
onDrilldown={applyFilterQuery}
86-
currentTime={currentTime}
87-
onViewChange={changeView}
88-
view={view}
89-
autoBounds={autoBounds}
90-
boundsOverride={boundsOverride}
91-
interval={interval}
92-
/>
88+
<MainContainer>
89+
<TopActionContainer>
90+
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="m">
91+
<Toolbar nodeType={nodeType} />
92+
<EuiFlexItem grow={false}>
93+
<ViewSwitcher view={view} onChange={changeView} />
94+
</EuiFlexItem>
95+
</EuiFlexGroup>
96+
</TopActionContainer>
97+
<NodesOverview
98+
nodes={nodes}
99+
options={options}
100+
nodeType={nodeType}
101+
loading={loading}
102+
reload={reload}
103+
onDrilldown={applyFilterQuery}
104+
currentTime={currentTime}
105+
view={view}
106+
autoBounds={autoBounds}
107+
boundsOverride={boundsOverride}
108+
formatter={formatter}
109+
/>
110+
<BottomActionContainer>
111+
<EuiFlexGroup justifyContent="spaceBetween">
112+
<EuiFlexItem grow={false}>
113+
<SavedViews />
114+
</EuiFlexItem>
115+
<EuiFlexItem grow={false} style={{ position: 'relative', minWidth: 400 }}>
116+
<Legend
117+
formatter={formatter}
118+
bounds={bounds}
119+
dataBounds={dataBounds}
120+
legend={options.legend}
121+
/>
122+
</EuiFlexItem>
123+
<EuiFlexItem grow={false}>
124+
<IntervalLabel intervalAsString={intervalAsString} />
125+
</EuiFlexItem>
126+
</EuiFlexGroup>
127+
</BottomActionContainer>
128+
</MainContainer>
93129
</PageContent>
94130
</>
95131
);
96132
};
133+
134+
const MainContainer = euiStyled.div`
135+
position: relative;
136+
flex: 1 1 auto;
137+
`;
138+
139+
const TopActionContainer = euiStyled.div`
140+
padding: ${props => `12px ${props.theme.eui.paddingSizes.m}`};
141+
`;
142+
143+
const BottomActionContainer = euiStyled.div`
144+
background-color: ${props => props.theme.eui.euiPageBackgroundColor};
145+
padding: ${props => props.theme.eui.paddingSizes.m} ${props =>
146+
props.theme.eui.paddingSizes.m} ${props => props.theme.eui.paddingSizes.s};
147+
position: absolute;
148+
left: 0;
149+
bottom: 4px;
150+
right: 0;
151+
`;

0 commit comments

Comments
 (0)