[Infrastructure UI] Hosts table sorting and pagination (#143834)

* remove lens, add snapshot api

* add no data

* Add cpu type

* [WIP] Add eui basic table and columns

* [WIP] Add cpu cores and os

* [WIP] Mapping data to the eui basic table format

* Add Memory Total

* Refactor host mapping and add types

* Scale up memory usage percentage

* Make os optional in the model

* Text cells formatting

* Change os.type to os.name

* Move snapshot nodes mapping to a hook and test it

* Add translation

* Add fixed range and cleanup

* Fix diskLatency field name

* Remove not existing showQueryBar prop from SearchBar and set time range values

* Use last path

* Test last path change

* Type imports

* Change the way lastPath.os is set

* Type import

* Sorting columns

* Use EuiInMemoryTable pagination and sorting and change mapping

* Set sorting to true and remove the default cpuCores field  sorting option

* Update types

* Add mapping for the metric values used in hosts table

* Shorthand props

* Os from path - replace lodash and remove not needed null handling

* Fix types

* Remove type export

* Change metrics mapping

Co-authored-by: neptunian <sandra.gonzales@elastic.co>

x-pack/plugins/infra/public/pages/metrics/hosts/components/hosts_table.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiBasicTable } from '@elastic/eui';
+import { EuiInMemoryTable } from '@elastic/eui';
 import type { SnapshotNode } from '../../../../../common/http_api';
 import { HostsTableColumns } from './hosts_table_columns';
 import { useHostTable } from '../hooks/use_host_table';
@@ -18,11 +18,5 @@ interface Props {
 export const HostsTable: React.FunctionComponent<Props> = ({ nodes }) => {
   const items = useHostTable(nodes);
 
-  return (
-    <EuiBasicTable
-      tableCaption="Infrastructure metrics for hosts"
-      items={items}
-      columns={HostsTableColumns}
-    />
-  );
+  return <EuiInMemoryTable pagination sorting items={items} columns={HostsTableColumns} />;
 };

x-pack/plugins/infra/public/pages/metrics/hosts/components/hosts_table_columns.tsx

@@ -9,13 +9,14 @@ import { EuiBasicTableColumn } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
+import type { SnapshotNodeMetric } from '../../../../../common/http_api';
 import { scaleUpPercentage } from '../../../../components/infrastructure_node_metrics_tables/shared/hooks';
-import type { SnapshotNodeMetric } from '../../../../../common/http_api/snapshot_api';
 import { NumberCell } from '../../../../components/infrastructure_node_metrics_tables/shared/components';
 
 interface HostNodeRow extends HostMetics {
-  os?: string | null | undefined;
-  servicesOnHost?: number | null | undefined;
+  os?: string | null;
+  servicesOnHost?: number | null;
+  name: string;
 }
 
 export interface HostMetics {
@@ -31,7 +32,8 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     name: i18n.translate('xpack.infra.hostsTable.nameColumnHeader', {
       defaultMessage: 'Name',
     }),
-    field: 'label',
+    field: 'name',
+    sortable: true,
     truncateText: true,
     textOnly: true,
     render: (name: string) => <EuiText size="s">{name}</EuiText>,
@@ -41,59 +43,63 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
       defaultMessage: 'Operating System',
     }),
     field: 'os',
-    render: (os: string) => <EuiText size="s">{os ?? '-'}</EuiText>,
+    sortable: true,
+    render: (os: string) => <EuiText size="s">{os}</EuiText>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.numberOfCpusColumnHeader', {
       defaultMessage: '# of CPUs',
     }),
-    field: 'cpuCores',
-    render: (cpuCores: { value: number }) => <NumberCell value={cpuCores.value} />,
+    field: 'cpuCores.value',
+    sortable: true,
+    render: (value: number) => <NumberCell value={value} />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.diskLatencyColumnHeader', {
       defaultMessage: 'Disk Latency',
     }),
     field: 'diskLatency',
+    sortable: true,
     render: (ds: number) => <NumberCell value={ds} unit=" ms" />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageTxColumnHeader', {
       defaultMessage: 'TX (avg.)',
     }),
-    field: 'tx',
-    render: (tx: { avg: number }) => <NumberCell value={tx.avg} />,
+    field: 'tx.avg',
+    sortable: true,
+    render: (avg: number) => <NumberCell value={avg} />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageRxColumnHeader', {
       defaultMessage: 'RX (avg.)',
     }),
-    field: 'rx',
-    render: (rx: { avg: number }) => <NumberCell value={rx.avg} />,
+    field: 'rx.avg',
+    sortable: true,
+    render: (avg: number) => <NumberCell value={avg} />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryTotalColumnHeader', {
       defaultMessage: 'Memory total (avg.)',
     }),
-    field: 'memoryTotal',
-    render: (memoryTotal: { avg: number }) => (
-      <NumberCell value={Math.floor(memoryTotal.avg)} unit=" MB" />
-    ),
+    field: 'memoryTotal.avg',
+    sortable: true,
+    render: (avg: number) => <NumberCell value={Math.floor(avg)} unit=" MB" />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.servicesOnHostColumnHeader', {
       defaultMessage: 'Services on Host',
     }),
     field: 'servicesOnHost',
+    sortable: true,
     render: (servicesOnHost: number) => <NumberCell value={servicesOnHost} />,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryUsageColumnHeader', {
       defaultMessage: 'Memory usage (avg.)',
     }),
-    field: 'memory',
-    render: (memory: { avg: number }) => (
-      <NumberCell value={scaleUpPercentage(memory.avg)} unit="%" />
-    ),
+    field: 'memory.avg',
+    sortable: true,
+    render: (avg: number) => <NumberCell value={scaleUpPercentage(avg)} unit="%" />,
   },
 ];

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_table.test.ts

@@ -70,6 +70,8 @@ describe('useHostTable hook', () => {
 
     const items = [
       {
+        name: 'host-0',
+        os: '-',
         rx: {
           name: 'rx',
           avg: 252456.92916666667,
@@ -91,11 +93,10 @@ describe('useHostTable hook', () => {
 
           avg: 34359.738368,
         },
-        value: 'host-0',
-        label: 'host-0',
-        os: null,
       },
       {
+        name: 'host-1',
+        os: 'macOS',
         rx: {
           name: 'rx',
           avg: 95.86339715321859,
@@ -116,10 +117,6 @@ describe('useHostTable hook', () => {
           name: 'memoryTotal',
           avg: 9.194304,
         },
-        value: 'host-1',
-        label: 'host-1',
-        ip: '243.86.94.22',
-        os: 'macOS',
       },
     ];
     const result = renderHook(() => useHostTable(nodes));

x-pack/plugins/infra/public/pages/metrics/hosts/hooks/use_host_table.ts

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { last } from 'lodash';
 import { useMemo } from 'react';
 import type { SnapshotNode, SnapshotNodeMetric } from '../../../../../common/http_api';
 import { HostMetics } from '../components/hosts_table_columns';
@@ -13,9 +12,10 @@ import { HostMetics } from '../components/hosts_table_columns';
 type MappedMetrics = Record<keyof HostMetics, SnapshotNodeMetric>;
 
 export const useHostTable = (nodes: SnapshotNode[]) => {
-  const items: MappedMetrics[] = useMemo(() => {
-    return nodes.map(({ metrics, path }) => ({
-      ...last(path),
+  const items = useMemo(() => {
+    return nodes.map(({ metrics, path, name }) => ({
+      name,
+      os: path.at(-1)?.os ?? '-',
       ...metrics.reduce((data, metric) => {
         data[metric.name as keyof HostMetics] = metric;
         return data;

x-pack/plugins/infra/public/pages/metrics/hosts/hosts_content.tsx

@@ -50,15 +50,15 @@ export const HostsContent: React.FunctionComponent = () => {
     [],
     'host',
     sourceId,
-    1666081614879, // currentTime.  need to add support for TimeRange?
+    1666710279338, // currentTime.  need to add support for TimeRange?
     '',
     '',
     true,
     {
-      from: 1666081614879, // dynamic time range needs to be supported
+      from: 1666710279338, // dynamic time range needs to be supported
       interval: '1m',
       lookbackSize: 5,
-      to: 1666082814879,
+      to: 1666711479338,
     }
   );