[Infrastructure UI] Hosts: Right align table number columns and fix spacing between value and unit (#148180)

Closes [#147805](https://github.com/elastic/kibana/issues/147805)

## Summary

This PR aligns right the columns with numbers in the host table and adds
space between the value and unit for bytes/bits values


![image](https://user-images.githubusercontent.com/14139027/209950481-7a3a51a1-8786-4261-b835-09ca3e6e4ee2.png)

### Testing

Open host view page

- The host table number columns are right-aligned
- There is a space between the value and unit for bytes/bits values
<img width="1373" alt="image"
src="https://user-images.githubusercontent.com/14139027/209951362-c7ec84f4-bc62-4806-a474-cd8bb7eefad0.png">


The formatter will also add space to the inventory page metrics: 
<img width="704" alt="image"
src="https://user-images.githubusercontent.com/14139027/209951065-07f21b9e-26ef-47ba-b98e-8435f0ecde19.png">

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

@@ -11,14 +11,14 @@ import { createBytesFormatter } from './bytes';
 describe('createDataFormatter', () => {
   it('should format bytes as bytesDecimal', () => {
     const formatter = createBytesFormatter(InfraWaffleMapDataFormat.bytesDecimal);
-    expect(formatter(1000000)).toBe('1MB');
+    expect(formatter(1000000)).toBe('1 MB');
   });
   it('should format bytes as bitsDecimal', () => {
     const formatter = createBytesFormatter(InfraWaffleMapDataFormat.bitsDecimal);
-    expect(formatter(1000000)).toBe('8Mbit');
+    expect(formatter(1000000)).toBe('8 Mbit');
   });
   it('should format bytes as abbreviatedNumber', () => {
     const formatter = createBytesFormatter(InfraWaffleMapDataFormat.abbreviatedNumber);
-    expect(formatter(1000000)).toBe('1M');
+    expect(formatter(1000000)).toBe('1 M');
   });
 });

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

@@ -47,7 +47,7 @@ export const createBytesFormatter = (format: InfraWaffleMapDataFormat) => (bytes
   // 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) {
-    return `${formatNumber(value)}${labels[0]}`;
+    return `${formatNumber(value)} ${labels[0]}`;
   }
-  return `${formatNumber(value / Math.pow(base, power))}${labels[power]}`;
+  return `${formatNumber(value / Math.pow(base, power))} ${labels[power]}`;
 };

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

@@ -74,6 +74,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     render: (cpuCores: SnapshotNodeMetric) => (
       <>{formatMetric('cpuCores', cpuCores?.value ?? cpuCores?.max)}</>
     ),
+    align: 'right',
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.diskLatencyColumnHeader', {
@@ -82,6 +83,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     field: 'diskLatency.avg',
     sortable: true,
     render: (avg: number) => <>{formatMetric('diskLatency', avg)}</>,
+    align: 'right',
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageTxColumnHeader', {
@@ -90,6 +92,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     field: 'tx.avg',
     sortable: true,
     render: (avg: number) => <>{formatMetric('tx', avg)}</>,
+    align: 'right',
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageRxColumnHeader', {
@@ -98,6 +101,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     field: 'rx.avg',
     sortable: true,
     render: (avg: number) => <>{formatMetric('rx', avg)}</>,
+    align: 'right',
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryTotalColumnHeader', {
@@ -106,6 +110,7 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     field: 'memoryTotal.avg',
     sortable: true,
     render: (avg: number) => <>{formatMetric('memoryTotal', avg)}</>,
+    align: 'right',
   },
   {
     name: i18n.translate('xpack.infra.hostsTable.averageMemoryUsageColumnHeader', {
@@ -114,5 +119,6 @@ export const HostsTableColumns: Array<EuiBasicTableColumn<HostNodeRow>> = [
     field: 'memory.avg',
     sortable: true,
     render: (avg: number) => <>{formatMetric('memory', avg)}</>,
+    align: 'right',
   },
 ];

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/__snapshots__/conditional_tooltip.test.tsx.snap

@@ -55,7 +55,7 @@ exports[`ConditionalToolTip renders correctly 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
       data-test-subj="conditionalTooltipContent-value"
     >
-      8Mbit/s
+      8 Mbit/s
     </div>
   </div>
   <div
@@ -71,7 +71,7 @@ exports[`ConditionalToolTip renders correctly 1`] = `
       class="euiFlexItem emotion-euiFlexItem-growZero"
       data-test-subj="conditionalTooltipContent-value"
     >
-      8Mbit/s
+      8 Mbit/s
     </div>
   </div>
   <div

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_formatter_for_metrics.test.ts

@@ -30,7 +30,7 @@ describe('createFormatterForMetric()', () => {
       field: 'host.network.egress.bytes',
     };
     const format = createFormatterForMetric(metric);
-    expect(format(103929292)).toBe('831.4Mbit/s');
+    expect(format(103929292)).toBe('831.4 Mbit/s');
   });
   it('should just work for bytes', () => {
     const metric: MetricsExplorerMetric = {
@@ -38,6 +38,6 @@ describe('createFormatterForMetric()', () => {
       field: 'host.network.egress.bytes',
     };
     const format = createFormatterForMetric(metric);
-    expect(format(103929292)).toBe('103.9MB');
+    expect(format(103929292)).toBe('103.9 MB');
   });
 });