From efb553320f3d58918a80315171182c2e54116697 Mon Sep 17 00:00:00 2001 From: Zacqary Adam Xeper Date: Wed, 14 Oct 2020 16:34:35 -0500 Subject: [PATCH] [Metrics UI] Inventory view cleanup (#79881) * Add background to Show History * Fix legend centering * Fix sentence casing in timeline popovers * Improve small-screen responsiveness of filter dropdowns * Improve top action responsiveness * Remove unneeded align center * Improve waffle map small screen responsiveness * Fix inventory timeline color legend * Fix loading spinner wrap * Fix color legend * Improve filter responsiveness * Fix z-index on view switcher * Move manage views flyout into portal * Set waffle map to di display: static at s breakpoint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../infra/public/components/loading_page.tsx | 6 +- .../saved_views/manage_views_flyout.tsx | 57 ++++++------ .../infra/public/pages/metrics/index.tsx | 41 +++++---- .../components/bottom_drawer.tsx | 9 +- .../inventory_view/components/layout.tsx | 87 +++++++++++-------- .../components/nodes_overview.tsx | 13 ++- .../components/timeline/timeline.tsx | 14 ++- .../components/toolbars/toolbar_wrapper.tsx | 6 +- .../inventory_view/components/waffle/map.tsx | 6 +- .../components/waffle/view_switcher.tsx | 1 - 10 files changed, 132 insertions(+), 108 deletions(-) diff --git a/x-pack/plugins/infra/public/components/loading_page.tsx b/x-pack/plugins/infra/public/components/loading_page.tsx index ae8e18a2f98ea..87cd1e9aebf6a 100644 --- a/x-pack/plugins/infra/public/components/loading_page.tsx +++ b/x-pack/plugins/infra/public/components/loading_page.tsx @@ -27,10 +27,8 @@ export const LoadingPage = ({ - - - - + + {message} diff --git a/x-pack/plugins/infra/public/components/saved_views/manage_views_flyout.tsx b/x-pack/plugins/infra/public/components/saved_views/manage_views_flyout.tsx index 698034f8154d1..1515175b5115f 100644 --- a/x-pack/plugins/infra/public/components/saved_views/manage_views_flyout.tsx +++ b/x-pack/plugins/infra/public/components/saved_views/manage_views_flyout.tsx @@ -16,6 +16,7 @@ import { EuiInMemoryTable, EuiFlexGroup, EuiButton, + EuiPortal, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -157,34 +158,36 @@ export function SavedViewManageViewsFlyout({ ]; return ( - - - -

- -

- - + + + + +

+ +

+ + - - - + + + - - - - - - + + + + + + + ); } diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx index ac2c87248ae77..022c62b6bb06b 100644 --- a/x-pack/plugins/infra/public/pages/metrics/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx @@ -121,24 +121,29 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => { ]} /> - - - - - - - - - - {ADD_DATA_LABEL} - + + + + + + + + + + + {ADD_DATA_LABEL} + + diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx index 9cb84c7fff438..7c6e58125b48b 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx @@ -47,15 +47,12 @@ export const BottomDrawer: React.FC<{ style={{ position: 'relative', minWidth: 400, - alignSelf: 'center', height: '16px', }} > {children} - - - + @@ -85,3 +82,7 @@ const BottomActionTopBar = euiStyled(EuiFlexGroup).attrs({ const ShowHideButton = euiStyled(EuiButtonEmpty).attrs({ size: 's' })` width: 140px; `; + +const RightSideSpacer = euiStyled(EuiSpacer).attrs({ size: 'xs' })` + width: 140px; +`; 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 712578be7dffd..b9caef704d071 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 @@ -104,46 +104,57 @@ export const Layout = () => { <> - - - - - - - - - - - - - - - - {({ measureRef, bounds: { height = 0 } }) => ( + {({ measureRef: topActionMeasureRef, bounds: { height: topActionHeight = 0 } }) => ( <> - - - - + + + + + + + + + + + + + + + + + {({ measureRef, bounds: { height = 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 a705a0be3a39e..aa6157dc48d5c 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 @@ -6,6 +6,7 @@ import { i18n } from '@kbn/i18n'; import React, { useCallback } from 'react'; +import { getBreakpoint } from '@elastic/eui'; import { InventoryItemType } from '../../../../../common/inventory_models/types'; import { euiStyled } from '../../../../../../observability/public'; @@ -35,6 +36,7 @@ interface Props { autoBounds: boolean; formatter: InfraFormatter; bottomMargin: number; + topMargin: number; } export const NodesOverview = ({ @@ -50,6 +52,7 @@ export const NodesOverview = ({ formatter, onDrilldown, bottomMargin, + topMargin, }: Props) => { const handleDrilldown = useCallback( (filter: string) => { @@ -94,6 +97,7 @@ export const NodesOverview = ({ } const dataBounds = calculateBoundsFromNodes(nodes); const bounds = autoBounds ? dataBounds : boundsOverride; + const isStatic = ['xs', 's'].includes(getBreakpoint(window.innerWidth)!); if (view === 'table') { return ( @@ -110,7 +114,7 @@ export const NodesOverview = ({ ); } return ( - + ); @@ -130,10 +135,10 @@ const TableContainer = euiStyled.div` padding: ${(props) => props.theme.eui.paddingSizes.l}; `; -const MapContainer = euiStyled.div` - position: absolute; +const MapContainer = euiStyled.div<{ top: number; positionStatic: boolean }>` + position: ${(props) => (props.positionStatic ? 'static' : 'absolute')}; display: flex; - top: 70px; + top: ${(props) => props.top}px; right: 0; bottom: 0; left: 0; diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx index a3b02b858385e..d66fd44feba56 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx @@ -27,7 +27,7 @@ import { EuiIcon } from '@elastic/eui'; import { useUiSetting } from '../../../../../../../../../src/plugins/kibana_react/public'; import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n'; import { MetricsExplorerAggregation } from '../../../../../../common/http_api'; -import { Color } from '../../../../../../common/color_palette'; +import { colorTransformer, Color } from '../../../../../../common/color_palette'; import { useSourceContext } from '../../../../../containers/source'; import { useTimeline } from '../../hooks/use_timeline'; import { useWaffleOptionsContext } from '../../hooks/use_waffle_options'; @@ -102,11 +102,12 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible }, [nodeType, metricsHostsAnomalies, metricsK8sAnomalies]); const metricLabel = toMetricOpt(metric.type)?.textLC; + const metricPopoverLabel = toMetricOpt(metric.type)?.text; const chartMetric = { color: Color.color0, aggregation: 'avg' as MetricsExplorerAggregation, - label: metricLabel, + label: metricPopoverLabel, }; const dateFormatter = useMemo(() => { @@ -225,10 +226,7 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible - + @@ -335,11 +333,11 @@ const TimelineLoadingContainer = euiStyled.div` `; const noHistoryDataTitle = i18n.translate('xpack.infra.inventoryTimeline.noHistoryDataTitle', { - defaultMessage: 'There is no history data to display.', + defaultMessage: 'There is no historical data to display.', }); const errorTitle = i18n.translate('xpack.infra.inventoryTimeline.errorTitle', { - defaultMessage: 'Unable to display history data.', + defaultMessage: 'Unable to show historical data.', }); const checkNewDataButtonLabel = i18n.translate( diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx index 449c0a89b4642..6922398e57d70 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/toolbars/toolbar_wrapper.tsx @@ -5,7 +5,7 @@ */ import React from 'react'; -import { EuiFlexItem } from '@elastic/eui'; +import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; import { fieldToName } from '../../lib/field_to_display_name'; import { useSourceContext } from '../../../../../containers/source'; import { useWaffleOptionsContext } from '../../hooks/use_waffle_options'; @@ -38,7 +38,7 @@ export const ToolbarWrapper = (props: Props) => { } = useWaffleOptionsContext(); const { createDerivedIndexPattern } = useSourceContext(); return ( - <> + @@ -62,7 +62,7 @@ export const ToolbarWrapper = (props: Props) => { customMetrics, changeCustomMetrics, })} - + ); }; 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 89b1b9b2211d9..6621b110a6dfd 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 @@ -27,6 +27,7 @@ interface Props { bounds: InfraWaffleMapBounds; dataBounds: InfraWaffleMapBounds; bottomMargin: number; + staticHeight: boolean; } export const Map: React.FC = ({ @@ -39,6 +40,7 @@ export const Map: React.FC = ({ nodeType, dataBounds, bottomMargin, + staticHeight, }) => { const sortedNodes = sortNodes(options.sort, nodes); const map = nodesToWaffleMap(sortedNodes); @@ -51,6 +53,7 @@ export const Map: React.FC = ({ ref={(el: any) => measureRef(el)} bottomMargin={bottomMargin} data-test-subj="waffleMap" + staticHeight={staticHeight} > {groupsWithLayout.map((group) => { @@ -92,7 +95,7 @@ export const Map: React.FC = ({ ); }; -const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number }>` +const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeight: boolean }>` flex: 1 0 0%; display: flex; justify-content: flex-start; @@ -100,6 +103,7 @@ const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number }>` overflow-x: hidden; overflow-y: auto; margin-bottom: ${(props) => props.bottomMargin}px; + ${(props) => props.staticHeight && 'min-height: 300px;'} `; const WaffleMapInnerContainer = euiStyled.div` diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/view_switcher.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/view_switcher.tsx index 76756637eb69e..3dbe881cd5dc4 100644 --- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/view_switcher.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/view_switcher.tsx @@ -6,7 +6,6 @@ import { EuiButtonGroup, EuiButtonGroupProps } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - import React from 'react'; interface Props {