[Uptime] Format PingList duration time as seconds when appropriate (#90703) (#91196)

* Introduce new formatting logic for ping list, duration strings now converted to seconds when appropriate.

* Handle singular plurality case.

* Make limit for conversion 10 sec instead of 1 sec.

* Switch conversion threshold back to one second, add tests.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.test.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { PingList } from './ping_list';
+import { formatDuration, PingList } from './ping_list';
 import { Ping, PingsResponse } from '../../../../common/runtime_types';
 import { ExpandedRowMap } from '../../overview/monitor_list/types';
 import { rowShouldExpand, toggleDetails } from './columns/expand_row';
@@ -185,5 +185,23 @@ describe('PingList component', () => {
         expect(rowShouldExpand(ping)).toBe(true);
       });
     });
+
+    describe('formatDuration', () => {
+      it('returns zero for < 1 millisecond', () => {
+        expect(formatDuration(984)).toBe('0 ms');
+      });
+
+      it('returns milliseconds string if < 1 seconds', () => {
+        expect(formatDuration(921_039)).toBe('921 ms');
+      });
+
+      it('returns seconds string if > 1 second', () => {
+        expect(formatDuration(1_032_100)).toBe('1 second');
+      });
+
+      it('rounds to closest second', () => {
+        expect(formatDuration(1_832_100)).toBe('2 seconds');
+      });
+    });
   });
 });

x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx

@@ -34,6 +34,35 @@ export const SpanWithMargin = styled.span`
 
 const DEFAULT_PAGE_SIZE = 10;
 
+// one second = 1 million micros
+const ONE_SECOND_AS_MICROS = 1000000;
+
+// the limit for converting to seconds is >= 1 sec
+const MILLIS_LIMIT = ONE_SECOND_AS_MICROS * 1;
+
+export const formatDuration = (durationMicros: number) => {
+  if (durationMicros < MILLIS_LIMIT) {
+    return i18n.translate('xpack.uptime.pingList.durationMsColumnFormatting', {
+      values: { millis: microsToMillis(durationMicros) },
+      defaultMessage: '{millis} ms',
+    });
+  }
+  const seconds = (durationMicros / ONE_SECOND_AS_MICROS).toFixed(0);
+
+  // we format seconds with correct pulralization here and not for `ms` because it is much more likely users
+  // will encounter times of exactly '1' second.
+  if (seconds === '1') {
+    return i18n.translate('xpack.uptime.pingist.durationSecondsColumnFormatting.singular', {
+      values: { seconds },
+      defaultMessage: '{seconds} second',
+    });
+  }
+  return i18n.translate('xpack.uptime.pingist.durationSecondsColumnFormatting', {
+    values: { seconds },
+    defaultMessage: '{seconds} seconds',
+  });
+};
+
 export const PingList = () => {
   const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
   const [pageIndex, setPageIndex] = useState(0);
@@ -135,11 +164,7 @@ export const PingList = () => {
       name: i18n.translate('xpack.uptime.pingList.durationMsColumnLabel', {
         defaultMessage: 'Duration',
       }),
-      render: (duration: number) =>
-        i18n.translate('xpack.uptime.pingList.durationMsColumnFormatting', {
-          values: { millis: microsToMillis(duration) },
-          defaultMessage: '{millis} ms',
-        }),
+      render: (duration: number) => formatDuration(duration),
     },
     {
       field: 'error.type',