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

* Add explicit alignments to table columns. * Fix broken prop and snapshots. * Fix pagination item count and update snapshot to match changes.
justinkambic · Jul 17, 2019 · 570e6f8 · 570e6f8
1 parent 91f581d
commit 570e6f8
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 12 deletions.
diff --git a/...ugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap b/...ugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
diff --git a/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...lic/components/functional/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/monitor_list.tsx b/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',

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_list/types.ts b/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;
 }
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/ping_list.tsx b/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>