[Metrics UI] Design Refresh: Inventory View, Episode 1

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiPanel } from '@elastic/eui';
+import { euiStyled } from '../../../observability/public';
+
+export const ToolbarPanel = euiStyled(EuiPanel).attrs(() => ({
+  grow: false,
+  paddingSize: 'none',
+}))`
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-radius: 0;
+  padding: ${props => `12px ${props.theme.eui.paddingSizes.m}`};
+`;

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

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
+import React, { ReactNode } from 'react';
+import { withTheme, EuiTheme } from '../../../../../../observability/public';
+
+interface Props {
+  label: string;
+  onClick: () => void;
+  theme: EuiTheme;
+  children: ReactNode;
+}
+
+export const DropdownButton = withTheme(({ onClick, label, theme, children }: Props) => {
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="none"
+      style={{
+        border: theme.eui.euiFormInputGroupBorder,
+        boxShadow: `0px 3px 2px ${theme.eui.euiTableActionsBorderColor}, 0px 1px 1px ${theme.eui.euiTableActionsBorderColor}`,
+      }}
+    >
+      <EuiFlexItem
+        grow={false}
+        style={{
+          padding: 12,
+          background: theme.eui.euiFormInputGroupLabelBackground,
+          fontSize: '0.75em',
+          fontWeight: 600,
+          color: theme.eui.euiTitleColor,
+        }}
+      >
+        {label}
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          color="text"
+          iconType="arrowDown"
+          onClick={onClick}
+          iconSide="right"
+          size="xs"
+        >
+          {children}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});

x-pack/plugins/infra/public/pages/metrics/inventory_view/toolbar.tsx → x-pack/plugins/infra/public/pages/metrics/inventory_view/components/filter_bar.tsx

@@ -7,23 +7,19 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 
-import { Toolbar } from '../../../components/eui/toolbar';
-import { WaffleTimeControls } from './components/waffle/waffle_time_controls';
-import { WaffleInventorySwitcher } from './components/waffle/waffle_inventory_switcher';
-import { SearchBar } from './components/search_bar';
+import { WaffleTimeControls } from './waffle/waffle_time_controls';
+import { SearchBar } from './search_bar';
+import { ToolbarPanel } from '../../../../components/toolbar_panel';
 
-export const SnapshotToolbar = () => (
-  <Toolbar>
+export const FilterBar = () => (
+  <ToolbarPanel>
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m">
-      <EuiFlexItem grow={false}>
-        <WaffleInventorySwitcher />
-      </EuiFlexItem>
       <EuiFlexItem>
         <SearchBar />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <WaffleTimeControls />
       </EuiFlexItem>
     </EuiFlexGroup>
-  </Toolbar>
+  </ToolbarPanel>
 );

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

@@ -4,20 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useInterval } from 'react-use';
 
-import { euiPaletteColorBlind } from '@elastic/eui';
-import { NodesOverview } from './nodes_overview';
-import { Toolbar } from './toolbars/toolbar';
+import { euiPaletteColorBlind, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { convertIntervalToString } from '../../../../utils/convert_interval_to_string';
+import { NodesOverview, calculateBoundsFromNodes } from './nodes_overview';
 import { PageContent } from '../../../../components/page';
 import { useSnapshot } from '../hooks/use_snaphot';
-import { useInventoryMeta } from '../hooks/use_inventory_meta';
 import { useWaffleTimeContext } from '../hooks/use_waffle_time';
 import { useWaffleFiltersContext } from '../hooks/use_waffle_filters';
 import { useWaffleOptionsContext } from '../hooks/use_waffle_options';
 import { useSourceContext } from '../../../../containers/source';
 import { InfraFormatterType, InfraWaffleMapGradientLegend } from '../../../../lib/lib';
+import { euiStyled } from '../../../../../../observability/public';
+import { Toolbar } from './toolbars/toolbar';
+import { ViewSwitcher } from './waffle/view_switcher';
+import { SavedViews } from './saved_views';
+import { IntervalLabel } from './waffle/interval_label';
+import { Legend } from './waffle/legend';
+import { createInventoryMetricFormatter } from '../lib/create_inventory_metric_formatter';
 
 const euiVisColorPalette = euiPaletteColorBlind();
 
@@ -34,7 +40,6 @@ export const Layout = () => {
     autoBounds,
     boundsOverride,
   } = useWaffleOptionsContext();
-  const { accounts, regions } = useInventoryMeta(sourceId, nodeType);
   const { currentTime, jumpToTime, isAutoReloading } = useWaffleTimeContext();
   const { filterQueryAsJson, applyFilterQuery } = useWaffleFiltersContext();
   const { loading, nodes, reload, interval } = useSnapshot(
@@ -72,25 +77,75 @@ export const Layout = () => {
     isAutoReloading ? 5000 : null
   );
 
+  const intervalAsString = convertIntervalToString(interval);
+  const dataBounds = calculateBoundsFromNodes(nodes);
+  const bounds = autoBounds ? dataBounds : boundsOverride;
+  const formatter = useCallback(createInventoryMetricFormatter(options.metric), [options.metric]);
+
   return (
     <>
-      <Toolbar accounts={accounts} regions={regions} nodeType={nodeType} />
       <PageContent>
-        <NodesOverview
-          nodes={nodes}
-          options={options}
-          nodeType={nodeType}
-          loading={loading}
-          reload={reload}
-          onDrilldown={applyFilterQuery}
-          currentTime={currentTime}
-          onViewChange={changeView}
-          view={view}
-          autoBounds={autoBounds}
-          boundsOverride={boundsOverride}
-          interval={interval}
-        />
+        <MainContainer>
+          <TopActionContainer>
+            <EuiFlexGroup justifyContent="spaceBetween" gutterSize="m">
+              <Toolbar nodeType={nodeType} />
+              <EuiFlexItem grow={false}>
+                <ViewSwitcher view={view} onChange={changeView} />
+              </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}>
+                <SavedViews />
+              </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>
+        </MainContainer>
       </PageContent>
     </>
   );
 };
+
+const MainContainer = euiStyled.div`
+  position: relative;
+  flex: 1 1 auto;
+`;
+
+const TopActionContainer = euiStyled.div`
+  padding: ${props => `12px ${props.theme.eui.paddingSizes.m}`};
+`;
+
+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;
+  left: 0;
+  bottom: 4px;
+  right: 0;
+`;