[infrastructure UI] Metrics should use inventory metric formatter (#145085)

Closes #144637

## Summary

This PR fixes the formatting issue on the host view page. To keep it
consistent with the inventory page the formatters used there are
extended and used on the Host View.
I kept the 'N/A' fallback for missing values similar to the APM tables
as I think it looks better in the table ( the inventory formatter will
return an empty string in that case but it is also used for the tooltips
and there maybe it makes sense to leave it empty)


### Testing

Open the Host View and check the formatting of the values of the table: 
<img width="2440" alt="image"
src="https://user-images.githubusercontent.com/14139027/201635976-ea2d5a65-b678-4484-a8f5-d6ee07278eb7.png">

x-pack/plugins/infra/common/formatters/bytes.ts

@@ -43,7 +43,7 @@ export const createBytesFormatter = (format: InfraWaffleMapDataFormat) => (bytes
   const labels = LABELS[format];
   const base = BASES[format];
   const value = format === InfraWaffleMapDataFormat.bitsDecimal ? bytes * 8 : bytes;
-  // Use an exponetial equation to get the power to determine which label to use. If the power
+  // Use an exponential equation to get the power to determine which label to use. If the power
   // is greater then the max label then use the max label.
   const power = Math.min(Math.floor(Math.log(Math.abs(value)) / Math.log(base)), labels.length - 1);
   if (power < 0) {

x-pack/plugins/infra/common/inventory_models/host/metrics/snapshot/memory_total.ts

@@ -19,7 +19,7 @@ export const memoryTotal: MetricsUIAggregation = {
         memoryTotal: 'memory_total',
       },
       script: {
-        source: 'params.memoryTotal / 1000000', // Convert to MB
+        source: 'params.memoryTotal',
         lang: 'painless',
       },
       gap_policy: 'skip',

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

@@ -9,9 +9,8 @@ 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 { NumberCell } from '../../../../components/infrastructure_node_metrics_tables/shared/components';
+import type { SnapshotMetricInput, SnapshotNodeMetric } from '../../../../../common/http_api';
+import { createInventoryMetricFormatter } from '../../inventory_view/lib/create_inventory_metric_formatter';
 
 interface HostNodeRow extends HostMetics {
   os?: string | null;
@@ -28,6 +27,9 @@ export interface HostMetics {
   memoryTotal: SnapshotNodeMetric;
 }
 
+const formatMetric = (type: SnapshotMetricInput['type'], value: number | undefined | null) =>
+  value || value === 0 ? createInventoryMetricFormatter({ type })(value) : 'N/A';
+
 export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
   {
     name: i18n.translate('xpack.infra.hostsTable.nameColumnHeader', {
@@ -50,9 +52,11 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     name: i18n.translate('xpack.infra.hostsTable.numberOfCpusColumnHeader', {
       defaultMessage: '# of CPUs',
     }),
-    field: 'cpuCores.value',
+    field: 'cpuCores',
     sortable: true,
-    render: (value: number) => <NumberCell value={value} />,
+    render: (cpuCores: SnapshotNodeMetric) => (
+      <>{formatMetric('cpuCores', cpuCores?.value ?? cpuCores?.max)}</>
+    ),
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.diskLatencyColumnHeader', {
@@ -60,7 +64,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'diskLatency.avg',
     sortable: true,
-    render: (avg: number) => <NumberCell value={avg} unit=" ms" />,
+    render: (avg: number) => <>{formatMetric('diskLatency', avg)}</>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageTxColumnHeader', {
@@ -68,7 +72,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'tx.avg',
     sortable: true,
-    render: (avg: number) => <NumberCell value={avg} />,
+    render: (avg: number) => <>{formatMetric('tx', avg)}</>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageRxColumnHeader', {
@@ -76,7 +80,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'rx.avg',
     sortable: true,
-    render: (avg: number) => <NumberCell value={avg} />,
+    render: (avg: number) => <>{formatMetric('rx', avg)}</>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryTotalColumnHeader', {
@@ -84,7 +88,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'memoryTotal.avg',
     sortable: true,
-    render: (avg: number) => <NumberCell value={Math.floor(avg)} unit=" MB" />,
+    render: (avg: number) => <>{formatMetric('memoryTotal', avg)}</>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.servicesOnHostColumnHeader', {
@@ -92,7 +96,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'servicesOnHost',
     sortable: true,
-    render: (servicesOnHost: number) => <NumberCell value={servicesOnHost} />,
+    render: (servicesOnHost: number) => <>{formatMetric('cpuCores', servicesOnHost)}</>,
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryUsageColumnHeader', {
@@ -100,6 +104,6 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     }),
     field: 'memory.avg',
     sortable: true,
-    render: (avg: number) => <NumberCell value={scaleUpPercentage(avg)} unit="%" />,
+    render: (avg: number) => <>{formatMetric('memory', avg)}</>,
   },
 ];

x-pack/plugins/infra/public/pages/metrics/inventory_view/lib/create_inventory_metric_formatter.ts

@@ -30,10 +30,22 @@ const METRIC_FORMATTERS: MetricFormatters = {
     formatter: InfraFormatterType.percent,
     template: '{{value}}',
   },
+  ['cpuCores']: {
+    formatter: InfraFormatterType.number,
+    template: '{{value}}',
+  },
   ['memory']: {
     formatter: InfraFormatterType.percent,
     template: '{{value}}',
   },
+  ['memoryTotal']: {
+    formatter: InfraFormatterType.bytes,
+    template: '{{value}}',
+  },
+  ['diskLatency']: {
+    formatter: InfraFormatterType.number,
+    template: '{{value}} ms',
+  },
   ['rx']: { formatter: InfraFormatterType.bits, template: '{{value}}/s' },
   ['tx']: { formatter: InfraFormatterType.bits, template: '{{value}}/s' },
   ['logRate']: {