[Uptime] Feature/monitor details view avoid empty column

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

@@ -6,10 +6,10 @@
 
 import React from 'react';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
-import { PingResults, Ping } from '../../../../common/graphql/types';
+import { PingResults, Ping } from '../../../../../common/graphql/types';
 import { PingListComponent, AllLocationOption, toggleDetails } from '../ping_list';
 import { EuiComboBoxOptionProps } from '@elastic/eui';
-import { ExpandedRowMap } from '../monitor_list/types';
+import { ExpandedRowMap } from '../../monitor_list/types';
 
 describe('PingList component', () => {
   let pingList: { allPings: PingResults };

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

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './ping_list';

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

@@ -24,13 +24,13 @@ import moment from 'moment';
 import React, { Fragment, useEffect, useState } from 'react';
 // @ts-ignore formatNumber
 import { formatNumber } from '@elastic/eui/lib/services/format';
-import { Ping, PingResults } from '../../../common/graphql/types';
-import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../lib/helper';
-import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../higher_order';
-import { pingsQuery } from '../../queries';
-import { LocationName } from './location_name';
-import { Criteria, Pagination } from './monitor_list';
-import { PingListExpandedRowComponent } from './ping_list/expanded_row';
+import { Ping, PingResults } from '../../../../common/graphql/types';
+import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
+import { UptimeGraphQLQueryProps, withUptimeGraphQL } from '../../higher_order';
+import { pingsQuery } from '../../../queries';
+import { LocationName } from './../location_name';
+import { Criteria, Pagination } from './../monitor_list';
+import { PingListExpandedRowComponent } from './expanded_row';
 
 interface PingListQueryResult {
   allPings?: PingResults;
@@ -83,6 +83,10 @@ export const PingListComponent = ({
 }: Props) => {
   const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<ExpandedRowMap>({});
 
+  useEffect(() => {
+    onUpdateApp();
+  }, [selectedOption]);
+
   const statusOptions = [
     {
       text: i18n.translate('xpack.uptime.pingList.statusOptions.allStatusOptionLabel', {
@@ -141,8 +145,7 @@ export const PingListComponent = ({
       ),
     },
     {
-      align: 'left',
-      dataType: 'number',
+      align: 'center',
       field: 'observer.geo.name',
       name: i18n.translate('xpack.uptime.pingList.locationNameColumnLabel', {
         defaultMessage: 'Location',
@@ -170,36 +173,31 @@ export const PingListComponent = ({
         }),
     },
     {
-      align: 'left',
+      align: 'right',
       field: 'error.type',
       name: i18n.translate('xpack.uptime.pingList.errorTypeColumnLabel', {
         defaultMessage: 'Error type',
       }),
+      render: (error: string) => error ?? '-',
     },
   ];
-  useEffect(() => {
-    onUpdateApp();
-  }, [selectedOption]);
-  let pings: Ping[] = [];
-  if (data && data.allPings && data.allPings.pings) {
-    pings = data.allPings.pings;
-    const hasStatus: boolean = pings.reduce(
-      (hasHttpStatus: boolean, currentPing: Ping) =>
-        hasHttpStatus || !!get(currentPing, 'http.response.status_code'),
-      false
-    );
-    if (hasStatus) {
-      columns.push({
-        field: 'http.response.status_code',
-        // @ts-ignore "align" property missing on type definition for column type
-        align: 'right',
-        name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
-          defaultMessage: 'Response code',
-        }),
-        render: (statusCode: string) => <EuiBadge>{statusCode}</EuiBadge>,
-      });
-    }
+
+  const pings: Ping[] = data?.allPings?.pings ?? [];
+
+  const hasStatus: boolean = pings.some(
+    (currentPing: Ping) => !!currentPing?.http?.response?.status_code
+  );
+  if (hasStatus) {
+    columns.push({
+      field: 'http.response.status_code',
+      align: 'right',
+      name: i18n.translate('xpack.uptime.pingList.responseCodeColumnLabel', {
+        defaultMessage: 'Response code',
+      }),
+      render: (statusCode: string) => <EuiBadge>{statusCode}</EuiBadge>,
+    });
   }
+
   columns.push({
     align: 'right',
     width: '40px',