[WIP] Add eui basic table and columns

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

@@ -8,19 +8,64 @@
 import type { Query, TimeRange } from '@kbn/es-query';
 import React from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { EuiBasicTable } from '@elastic/eui';
 import { SnapshotNode } from '../../../../../common/http_api';
-
+import { HostsTableColumns } from './hosts_table_columns';
 interface Props {
   dataView: DataView;
   timeRange: TimeRange;
   query: Query;
   nodes: SnapshotNode[];
 }
+
 export const HostsTable: React.FunctionComponent<Props> = ({
   dataView,
   timeRange,
   query,
   nodes,
 }) => {
-  return <div> eui table here from nodes </div>;
+  // return <div> eui table here from nodes </div>;
+
+  const items = [
+    {
+      os: 'MacOs',
+      cpuCores: 10,
+      name: 'Jennys-MBP.fritz.box',
+      rx: {
+        avg: 1234,
+      },
+      tx: {
+        avg: 321,
+      },
+      memory: {
+        avg: 543,
+      },
+      servicesOnHost: 10,
+      averageMemoryUsagePercent: 5,
+    },
+    {
+      os: 'Ubuntu',
+      cpuCores: 4,
+      name: 'Jennys-Ubuntu.fritz.box',
+      rx: {
+        avg: 223,
+      },
+      tx: {
+        avg: 775,
+      },
+      memory: {
+        avg: 3323,
+      },
+      servicesOnHost: 4,
+      averageMemoryUsagePercent: 55,
+    },
+  ];
+
+  return (
+    <EuiBasicTable
+      tableCaption="Infrastructure metrics for hosts"
+      items={items}
+      columns={HostsTableColumns}
+    />
+  );
 };

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

@@ -0,0 +1,78 @@
+/*
+ * 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 { EuiBasicTableColumn } from '@elastic/eui';
+import React from 'react';
+import { NumberCell } from '../../../../components/infrastructure_node_metrics_tables/shared/components';
+
+export interface HostNodeRow {
+  name: string;
+  cpuCores: number | null;
+  os: string;
+  rx: {
+    avg: number | null;
+  };
+  tx: {
+    avg: number | null;
+  };
+  memory: {
+    avg: number | null;
+  };
+  servicesOnHost: number | null;
+  averageMemoryUsagePercent: number | null;
+}
+
+export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
+  {
+    name: 'Name',
+    field: 'name',
+    truncateText: true,
+    render: (name: string) => <div>{name}</div>,
+  },
+  {
+    name: 'Operating System',
+    field: 'os',
+    render: (os: string) => <div>{os}</div>,
+  },
+  {
+    name: '# of CPUs',
+    field: 'cpuCores',
+    render: (cpuCores: number) => <NumberCell value={cpuCores} />,
+  },
+  {
+    name: 'Disk Latency',
+    field: 'cpuCores',
+    render: (ds: number) => <NumberCell value={ds} unit=" ms" />,
+  },
+  {
+    name: 'TX (avg.)',
+    field: 'tx',
+    render: (tx: { avg: number }) => <NumberCell value={tx.avg} />,
+  },
+  {
+    name: 'RX (avg.)',
+    field: 'rx',
+    render: (rx: { avg: number }) => <NumberCell value={rx.avg} />,
+  },
+  {
+    name: 'Memory total (avg.)',
+    field: 'memory',
+    render: (memory: { avg: number }) => <NumberCell value={memory.avg} unit=" MB" />,
+  },
+  {
+    name: 'Services on Host',
+    field: 'servicesOnHost',
+    render: (servicesOnHost: number) => <NumberCell value={servicesOnHost} />,
+  },
+  {
+    name: 'Memory usage (avg.)',
+    field: 'averageMemoryUsagePercent',
+    render: (averageMemoryUsagePercent: number) => (
+      <NumberCell value={averageMemoryUsagePercent} unit="%" />
+    ),
+  },
+];

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

@@ -9,6 +9,7 @@ import type { Query, TimeRange } from '@kbn/es-query';
 import { i18n } from '@kbn/i18n';
 import React, { useState, useCallback } from 'react';
 import { SearchBar } from '@kbn/unified-search-plugin/public';
+import { EuiSpacer } from '@elastic/eui';
 import { NoData } from '../../../components/empty_states';
 import { InfraLoadingPanel } from '../../../components/loading';
 import { useMetricsDataViewContext } from './hooks/use_data_view';
@@ -91,6 +92,7 @@ export const HostsContent: React.FunctionComponent = () => {
               indexPatterns={[metricsDataView]}
               onQuerySubmit={onQuerySubmit}
             />
+            <EuiSpacer />
             <HostsTable
               dataView={metricsDataView}
               timeRange={dateRange}