[APM] Adjust time formats based on the difference between start and end (#84470) (#84496)

Author: cauemarcondes

x-pack/plugins/apm/common/utils/formatters/datetime.test.ts

@@ -73,19 +73,37 @@ describe('date time formatters', () => {
         const dateRange = asRelativeDateTimeRange(start, end);
         expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 15:01 (UTC+1)');
       });
-    });
-    describe('MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)', () => {
       it('range: 14 minutes', () => {
         const start = formatDateToTimezone('2019-10-29 10:01:01');
         const end = formatDateToTimezone('2019-10-29 10:15:01');
         const dateRange = asRelativeDateTimeRange(start, end);
-        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:15:01 (UTC+1)');
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 10:15 (UTC+1)');
       });
       it('range: 5 minutes', () => {
         const start = formatDateToTimezone('2019-10-29 10:01:01');
         const end = formatDateToTimezone('2019-10-29 10:06:01');
         const dateRange = asRelativeDateTimeRange(start, end);
-        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:06:01 (UTC+1)');
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 10:06 (UTC+1)');
+      });
+      it('range: 1 minute', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 10:02:01');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01 - 10:02 (UTC+1)');
+      });
+    });
+    describe('MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)', () => {
+      it('range: 50 seconds', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 10:01:50');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:01:50 (UTC+1)');
+      });
+      it('range: 10 seconds', () => {
+        const start = formatDateToTimezone('2019-10-29 10:01:01');
+        const end = formatDateToTimezone('2019-10-29 10:01:11');
+        const dateRange = asRelativeDateTimeRange(start, end);
+        expect(dateRange).toEqual('Oct 29, 2019, 10:01:01 - 10:01:11 (UTC+1)');
       });
     });
     describe('MMM D, YYYY, HH:mm:ss.SSS - HH:mm:ss.SSS (UTC)', () => {

x-pack/plugins/apm/common/utils/formatters/datetime.ts

@@ -80,14 +80,14 @@ function getFormatsAccordingToDateDifference(
     return { dateFormat: dateFormatWithDays };
   }
 
-  if (getDateDifference(start, end, 'hours') >= 5) {
+  if (getDateDifference(start, end, 'minutes') >= 1) {
     return {
       dateFormat: dateFormatWithDays,
       timeFormat: getTimeFormat('minutes'),
     };
   }
 
-  if (getDateDifference(start, end, 'minutes') >= 5) {
+  if (getDateDifference(start, end, 'seconds') >= 10) {
     return {
       dateFormat: dateFormatWithDays,
       timeFormat: getTimeFormat('seconds'),
@@ -121,8 +121,8 @@ export function asAbsoluteDateTime(
  * | >= 5 years     | YYYY - YYYY                                    |
  * | >= 5 months    | MMM YYYY - MMM YYYY                            |
  * | > 1 day        | MMM D, YYYY - MMM D, YYYY                      |
- * | >= 5 hours     | MMM D, YYYY, HH:mm - HH:mm (UTC)               |
- * | >= 5 minutes   | MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)         |
+ * | >= 1 minute    | MMM D, YYYY, HH:mm - HH:mm (UTC)               |
+ * | >= 10 seconds  | MMM D, YYYY, HH:mm:ss - HH:mm:ss (UTC)         |
  * | default        | MMM D, YYYY, HH:mm:ss.SSS - HH:mm:ss.SSS (UTC) |
  *
  * @param start timestamp