[Uptime] Add explicit alignments to table columns (#40680) (#41414)

* Add explicit alignments to table columns.

* Fix broken prop and snapshots.

* Fix pagination item count and update snapshot to match changes.

x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap

@@ -159,26 +159,31 @@ exports[`PingList component renders sorted list without errors 1`] = `
             "render": [Function],
           },
           Object {
+            "align": "left",
             "dataType": "number",
             "field": "observer.geo.name",
             "name": "Location",
             "render": [Function],
           },
           Object {
+            "align": "left",
             "dataType": "number",
             "field": "monitor.ip",
             "name": "IP",
           },
           Object {
+            "align": "right",
             "field": "monitor.duration.us",
             "name": "Duration",
             "render": [Function],
           },
           Object {
+            "align": "left",
             "field": "error.type",
             "name": "Error type",
           },
           Object {
+            "align": "left",
             "field": "error.message",
             "name": "Error message",
             "render": [Function],
@@ -399,6 +404,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
             50,
             100,
           ],
+          "totalItemCount": 30,
         }
       }
       responsive={true}

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`MonitorList component renders a no items message when no data is provid
       columns={
         Array [
           Object {
+            "align": "left",
             "field": "monitor_id",
             "name": "",
             "render": [Function],
@@ -29,17 +30,20 @@ exports[`MonitorList component renders a no items message when no data is provid
             "width": "40px",
           },
           Object {
+            "align": "left",
             "field": "state.monitor.status",
             "name": "Status",
             "render": [Function],
           },
           Object {
+            "align": "left",
             "field": "state.monitor.name",
             "name": "Name",
             "render": [Function],
             "sortable": true,
           },
           Object {
+            "align": "left",
             "field": "state.url.full",
             "name": "URL",
             "render": [Function],
@@ -92,6 +96,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
       columns={
         Array [
           Object {
+            "align": "left",
             "field": "monitor_id",
             "name": "",
             "render": [Function],
@@ -99,17 +104,20 @@ exports[`MonitorList component renders the monitor list 1`] = `
             "width": "40px",
           },
           Object {
+            "align": "left",
             "field": "state.monitor.status",
             "name": "Status",
             "render": [Function],
           },
           Object {
+            "align": "left",
             "field": "state.monitor.name",
             "name": "Name",
             "render": [Function],
             "sortable": true,
           },
           Object {
+            "align": "left",
             "field": "state.url.full",
             "name": "URL",
             "render": [Function],

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx

@@ -134,6 +134,7 @@ export const MonitorListComponent = (props: Props) => {
           // sorting={sorting}
           columns={[
             {
+              align: 'left',
               field: 'monitor_id',
               name: '',
               sortable: true,
@@ -165,6 +166,7 @@ export const MonitorListComponent = (props: Props) => {
               },
             },
             {
+              align: 'left',
               field: 'state.monitor.status',
               name: i18n.translate('xpack.uptime.monitorList.statusColumnLabel', {
                 defaultMessage: 'Status',
@@ -174,6 +176,7 @@ export const MonitorListComponent = (props: Props) => {
               },
             },
             {
+              align: 'left',
               field: 'state.monitor.name',
               name: i18n.translate('xpack.uptime.monitorList.nameColumnLabel', {
                 defaultMessage: 'Name',
@@ -190,6 +193,7 @@ export const MonitorListComponent = (props: Props) => {
               sortable: true,
             },
             {
+              align: 'left',
               field: 'state.url.full',
               name: i18n.translate('xpack.uptime.monitorList.urlColumnLabel', {
                 defaultMessage: 'URL',

x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/types.ts

@@ -33,9 +33,10 @@ export interface ExpandedRowMap {
 }
 
 export interface Pagination {
+  hidePerPageOptions?: boolean;
+  initialPageSize: number;
   pageIndex: number;
   pageSize: number;
-  totalItemCount: number;
   pageSizeOptions: number[];
-  hidePerPageOptions: boolean;
+  totalItemCount: number;
 }

x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx

@@ -28,7 +28,7 @@ import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/h
 import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
 import { pingsQuery } from '../../queries';
 import { LocationName } from './location_name';
-import { Criteria } from './monitor_list';
+import { Criteria, Pagination } from './monitor_list';
 
 interface PingListQueryResult {
   allPings?: PingResults;
@@ -117,34 +117,43 @@ export const PingListComponent = ({
       ),
     },
     {
-      field: 'observer.geo.name',
+      align: 'left',
       dataType: 'number',
+      field: 'observer.geo.name',
       name: i18n.translate('xpack.uptime.pingList.locationNameColumnLabel', {
         defaultMessage: 'Location',
       }),
       render: (location: string) => <LocationName location={location} />,
     },
     {
-      field: 'monitor.ip',
+      align: 'left',
       dataType: 'number',
+      field: 'monitor.ip',
       name: i18n.translate('xpack.uptime.pingList.ipAddressColumnLabel', {
         defaultMessage: 'IP',
       }),
     },
     {
+      align: 'right',
       field: 'monitor.duration.us',
       name: i18n.translate('xpack.uptime.pingList.durationMsColumnLabel', {
         defaultMessage: 'Duration',
       }),
-      render: (duration: number) => microsToMillis(duration),
+      render: (duration: number) =>
+        i18n.translate('xpack.uptime.pingList.durationMsColumnFormatting', {
+          values: { millis: microsToMillis(duration) },
+          defaultMessage: '{millis} ms',
+        }),
     },
     {
+      align: 'left',
       field: 'error.type',
       name: i18n.translate('xpack.uptime.pingList.errorTypeColumnLabel', {
         defaultMessage: 'Error type',
       }),
     },
     {
+      align: 'left',
       field: 'error.message',
       name: i18n.translate('xpack.uptime.pingList.errorMessageColumnLabel', {
         defaultMessage: 'Error message',
@@ -192,6 +201,17 @@ export const PingListComponent = ({
       });
     }
   }
+  const pagination: Pagination = {
+    initialPageSize: 20,
+    pageIndex: 0,
+    pageSize,
+    pageSizeOptions: [5, 10, 20, 50, 100],
+    /**
+     * we're not currently supporting pagination in this component
+     * so the first page is the only page
+     */
+    totalItemCount: pageSize,
+  };
 
   return (
     <Fragment>
@@ -278,12 +298,7 @@ export const PingListComponent = ({
           loading={loading}
           columns={columns}
           items={pings}
-          pagination={{
-            initialPageSize: 20,
-            pageIndex: 0,
-            pageSize,
-            pageSizeOptions: [5, 10, 20, 50, 100],
-          }}
+          pagination={pagination}
           onChange={({ page: { size } }: Criteria) => onPageCountChange(size)}
         />
       </EuiPanel>