[infra UI] Add overview tab with the first section to asset details view

x-pack/plugins/infra/public/common/visualizations/constants.ts

@@ -42,3 +42,5 @@ export const visualizationTypes = {
   lineChart: LineChart,
   metricChart: MetricChart,
 };
+
+export const HOST_METRICS_DOC_HREF = 'https://ela.st/docs-infra-host-metrics';

x-pack/plugins/infra/public/common/visualizations/lens/kpi_grid_config.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { HostsLensMetricChartFormulas } from '../types';
+import { TOOLTIP } from './translations';
+
+export interface KPIChartProps {
+  title: string;
+  subtitle?: string;
+  trendLine?: boolean;
+  backgroundColor: string;
+  type: HostsLensMetricChartFormulas;
+  decimals?: number;
+  toolTip: string;
+}
+
+export const KPI_CHARTS: Array<Omit<KPIChartProps, 'loading' | 'subtitle' | 'style'>> = [
+  {
+    type: 'cpuUsage',
+    trendLine: true,
+    backgroundColor: '#F1D86F',
+    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.cpuUsage.title', {
+      defaultMessage: 'CPU Usage',
+    }),
+    toolTip: TOOLTIP.cpuUsage,
+  },
+  {
+    type: 'normalizedLoad1m',
+    trendLine: true,
+    backgroundColor: '#79AAD9',
+    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.normalizedLoad1m.title', {
+      defaultMessage: 'Normalized Load',
+    }),
+    toolTip: TOOLTIP.rx,
+  },
+  {
+    type: 'memoryUsage',
+    trendLine: true,
+    backgroundColor: '#A987D1',
+    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.memoryUsage.title', {
+      defaultMessage: 'Memory Usage',
+    }),
+    toolTip: i18n.translate('xpack.infra.hostsViewPage.metricTrend.memoryUsage.tooltip', {
+      defaultMessage: 'Main memory usage excluding page cache.',
+    }),
+  },
+  {
+    type: 'diskSpaceUsage',
+    trendLine: true,
+    backgroundColor: '#F5A35C',
+    title: i18n.translate('xpack.infra.hostsViewPage.metricTrend.diskSpaceUsage.title', {
+      defaultMessage: 'Disk Space Usage',
+    }),
+    toolTip: TOOLTIP.tx,
+  },
+];

x-pack/plugins/infra/public/pages/metrics/hosts/components/chart/lens_wrapper.tsx → x-pack/plugins/infra/public/common/visualizations/lens/lens_wrapper.tsx

@@ -10,10 +10,10 @@ import { Action } from '@kbn/ui-actions-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { BrushTriggerEvent } from '@kbn/charts-plugin/public';
 import { Filter, Query, TimeRange } from '@kbn/es-query';
-import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana';
-import { useIntersectedOnce } from '../../../../../hooks/use_intersection_once';
-import { LensAttributes } from '../../../../../common/visualizations';
+import { useIntersectedOnce } from '../../../hooks/use_intersection_once';
+import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
 import { ChartLoader } from './chart_loader';
+import type { LensAttributes } from '../types';
 
 export interface LensWrapperProps {
   id: string;

x-pack/plugins/infra/public/common/visualizations/lens/translations.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const TOOLTIP = {
+  hostCount: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.hostCount', {
+    defaultMessage: 'Number of hosts returned by your search criteria.',
+  }),
+
+  cpuUsage: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.cpuUsage', {
+    defaultMessage:
+      'Percentage of CPU time spent in states other than Idle and IOWait, normalized by the number of CPU cores. This includes both time spent on user space and kernel space.',
+  }),
+  diskSpaceUsage: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.diskSpaceUsage', {
+    defaultMessage: 'Percentage of disk space used.',
+  }),
+  diskLatency: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.diskLatency', {
+    defaultMessage: 'Time spent to service disk requests.',
+  }),
+  memoryFree: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.memoryFree', {
+    defaultMessage: 'Total available memory including page cache.',
+  }),
+  memoryTotal: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.memoryTotal', {
+    defaultMessage: 'Total memory capacity.',
+  }),
+  memoryUsage: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.memoryUsage', {
+    defaultMessage: 'Percentage of main memory usage excluding page cache.',
+  }),
+  normalizedLoad1m: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.normalizedLoad1m', {
+    defaultMessage: '1 minute load average normalized by the number of CPU cores. ',
+  }),
+  rx: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.rx', {
+    defaultMessage:
+      'Number of bytes which have been received per second on the public interfaces of the hosts.',
+  }),
+  tx: i18n.translate('xpack.infra.hostsViewPage.metrics.tooltip.tx', {
+    defaultMessage:
+      'Number of bytes which have been sent per second on the public interfaces of the hosts.',
+  }),
+};

x-pack/plugins/infra/public/pages/metrics/hosts/components/metric_explanation/host_metrics_docs_link.tsx → x-pack/plugins/infra/public/common/visualizations/metric_explanation/host_metrics_docs_link.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { HOST_METRICS_DOC_HREF } from '../../constants';
+import { HOST_METRICS_DOC_HREF } from '../constants';
 
 export const HostMetricsDocsLink = () => {
   return (

x-pack/plugins/infra/public/pages/metrics/hosts/components/metric_explanation/tooltip_content.tsx → x-pack/plugins/infra/public/common/visualizations/metric_explanation/tooltip_content.tsx

@@ -9,7 +9,7 @@ import React, { HTMLAttributes } from 'react';
 import { EuiText, EuiLink } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { HOST_METRICS_DOC_HREF } from '../../constants';
+import { HOST_METRICS_DOC_HREF } from '../constants';
 
 interface Props extends Pick<HTMLAttributes<HTMLDivElement>, 'style'> {
   description: string;

x-pack/plugins/infra/public/components/asset_details/__stories__/decorator.tsx

@@ -93,6 +93,10 @@ export const DecorateWithKibanaContext: DecoratorFn = (story) => {
         },
       },
     },
+    lens: {
+      navigateToPrefilledEditor: () => {},
+      stateHelperApi: () => new Promise(() => {}),
+    },
   };
 
   return (

x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx

@@ -9,13 +9,22 @@ import React, { useState } from 'react';
 import { EuiButton } from '@elastic/eui';
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { i18n } from '@kbn/i18n';
+import type { DataViewField } from '@kbn/data-views-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
 import { AssetDetails } from './asset_details';
 import { decorateWithGlobalStorybookThemeProviders } from '../../test_utils/use_global_storybook_theme';
 import { FlyoutTabIds, Tab, type AssetDetailsProps } from './types';
 import { DecorateWithKibanaContext } from './__stories__/decorator';
 
 const links: AssetDetailsProps['links'] = ['alertRule', 'nodeDetails', 'apmServices', 'uptime'];
 const tabs: Tab[] = [
+  {
+    id: FlyoutTabIds.OVERVIEW,
+    name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', {
+      defaultMessage: 'Overview',
+    }),
+    'data-test-subj': 'hostsView-flyout-tabs-overview',
+  },
   {
     id: FlyoutTabIds.METRICS,
     name: i18n.translate('xpack.infra.nodeDetails.tabs.metrics', {
@@ -98,6 +107,16 @@ const stories: Meta<AssetDetailsProps> = {
       memoryFree: 34359738368,
     },
     overrides: {
+      overview: {
+        dataView: {
+          id: 'default',
+          getFieldByName: () => 'hostname' as unknown as DataViewField,
+        } as unknown as DataView,
+        dateRange: {
+          from: '168363046800',
+          to: '168363046900',
+        },
+      },
       metadata: {
         showActionsColumn: true,
       },

x-pack/plugins/infra/public/components/asset_details/asset_details.tsx

@@ -48,6 +48,7 @@ export const AssetDetails = ({
   return (
     <TabSwitcherProvider
       initialActiveTabId={tabs.length > 0 ? activeTabId ?? tabs[0].id : undefined}
+      onTabsStateChange={onTabsStateChange}
     >
       <ContentTemplate
         header={
@@ -59,7 +60,6 @@ export const AssetDetails = ({
             tabs={tabs}
             links={links}
             overrides={overrides}
-            onTabsStateChange={onTabsStateChange}
           />
         }
         body={

x-pack/plugins/infra/public/components/asset_details/components/expandable_content.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import useToggle from 'react-use/lib/useToggle';
+
+interface ExpandableContentProps {
+  values: string | string[] | undefined;
+}
+export const ExpandableContent = (props: ExpandableContentProps) => {
+  const { values } = props;
+  const [isExpanded, toggle] = useToggle(false);
+
+  const list = Array.isArray(values) ? values : [values];
+  const [first, ...others] = list;
+  const hasOthers = others.length > 0;
+  const shouldShowMore = hasOthers && !isExpanded;
+
+  return (
+    <EuiFlexGroup gutterSize="xs" responsive={false} alignItems="baseline" wrap direction="column">
+      <div>
+        {first}
+        {shouldShowMore && (
+          <>
+            {' ... '}
+            <EuiLink data-test-subj="infraExpandableContentCountMoreLink" onClick={toggle}>
+              <FormattedMessage
+                id="xpack.infra.nodeDetails.tabs.metadata.seeMore"
+                defaultMessage="+{count} more"
+                values={{
+                  count: others.length,
+                }}
+              />
+            </EuiLink>
+          </>
+        )}
+      </div>
+      {isExpanded && others.map((item, index) => <EuiFlexItem key={index}>{item}</EuiFlexItem>)}
+      {hasOthers && isExpanded && (
+        <EuiFlexItem>
+          <EuiLink data-test-subj="infraExpandableContentShowLessLink" onClick={toggle}>
+            {i18n.translate('xpack.infra.nodeDetails.tabs.metadata.seeLess', {
+              defaultMessage: 'Show less',
+            })}
+          </EuiLink>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};

x-pack/plugins/infra/public/components/asset_details/content/content.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
-import { Anomalies, Metadata, Processes, Osquery, Metrics, Logs } from '../tabs';
+import { Anomalies, Metadata, Processes, Osquery, Metrics, Logs, Overview } from '../tabs';
 import { FlyoutTabIds, type TabState, type AssetDetailsProps } from '../types';
 
 type Props = Pick<
@@ -19,8 +19,8 @@ export const Content = ({
   overrides,
   currentTimeRange,
   node,
-  nodeType = 'host',
   onTabsStateChange,
+  nodeType = 'host',
 }: Props) => {
   const onChange = (state: TabState) => {
     if (!onTabsStateChange) {
@@ -35,6 +35,15 @@ export const Content = ({
       <TabPanel activeWhen={FlyoutTabIds.ANOMALIES}>
         <Anomalies nodeName={node.name} onClose={overrides?.anomalies?.onClose} />
       </TabPanel>
+      <TabPanel activeWhen={FlyoutTabIds.OVERVIEW}>
+        <Overview
+          currentTimeRange={currentTimeRange}
+          nodeName={node.name}
+          nodeType={nodeType}
+          dataView={overrides?.overview?.dataView}
+          dateRange={overrides?.overview?.dateRange}
+        />
+      </TabPanel>
       <TabPanel activeWhen={FlyoutTabIds.LOGS}>
         <Logs
           nodeName={node.name}

x-pack/plugins/infra/public/components/asset_details/header/header.tsx

@@ -30,7 +30,7 @@ import { useTabSwitcherContext } from '../hooks/use_tab_switcher';
 
 type Props = Pick<
   AssetDetailsProps,
-  'currentTimeRange' | 'overrides' | 'node' | 'nodeType' | 'links' | 'tabs' | 'onTabsStateChange'
+  'currentTimeRange' | 'overrides' | 'node' | 'nodeType' | 'links' | 'tabs'
 > & {
   compact: boolean;
 };
@@ -45,16 +45,11 @@ export const Header = ({
   compact,
   currentTimeRange,
   overrides,
-  onTabsStateChange,
 }: Props) => {
   const { euiTheme } = useEuiTheme();
   const { showTab, activeTabId } = useTabSwitcherContext();
 
   const onTabClick = (tabId: TabIds) => {
-    if (onTabsStateChange) {
-      onTabsStateChange({ activeTabId: tabId });
-    }
-
     showTab(tabId);
   };
 

x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx

@@ -8,9 +8,14 @@
 import { useState } from 'react';
 import createContainer from 'constate';
 import { useLazyRef } from '../../../hooks/use_lazy_ref';
-import type { TabIds } from '../types';
+import type { TabIds, TabsStateChangeFn } from '../types';
 
-export function useTabSwitcher({ initialActiveTabId }: { initialActiveTabId?: TabIds }) {
+interface TabSwitcherParams {
+  initialActiveTabId?: TabIds;
+  onTabsStateChange?: TabsStateChangeFn;
+}
+
+export function useTabSwitcher({ initialActiveTabId, onTabsStateChange }: TabSwitcherParams) {
   const [activeTabId, setActiveTabId] = useState<TabIds | undefined>(initialActiveTabId);
 
   // This set keeps track of which tabs content have been rendered the first time.
@@ -20,6 +25,10 @@ export function useTabSwitcher({ initialActiveTabId }: { initialActiveTabId?: Ta
   const showTab = (tabId: TabIds) => {
     renderedTabsSet.current.add(tabId); // On a tab click, mark the tab content as allowed to be rendered
     setActiveTabId(tabId);
+
+    if (onTabsStateChange) {
+      onTabsStateChange({ activeTabId: tabId });
+    }
   };
 
   return {

x-pack/plugins/infra/public/components/asset_details/tabs/index.ts

@@ -11,3 +11,4 @@ export { Processes } from './processes/processes';
 export { Osquery } from './osquery/osquery';
 export { Metrics } from './metrics/metrics';
 export { Logs } from './logs/logs';
+export { Overview } from './overview/overview';