fix: [M3-8451] - List events in event landing page in chronological o…

…rder (linode#11339)

* change: [M3-8451] - List events in a chronological order

* code clean up

* Added changeset: Events landing page lists events in wrong order

* improved unit test coverage

* event table ux update

* delete eventUtils.ts

packages/manager/.changeset/pr-11339-fixed-1732776925827.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Events landing page lists events in wrong order ([#11339](https://github.com/linode/manager/pull/11339))

packages/manager/src/features/Events/EventRow.tsx

@@ -8,8 +8,8 @@ import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
+import { TextTooltip } from 'src/components/TextTooltip';
 import { useProfile } from 'src/queries/profile/profile';
-import { getEventTimestamp } from 'src/utilities/eventUtils';
 
 import {
   formatProgressEvent,
@@ -27,7 +27,6 @@ interface EventRowProps {
 export const EventRow = (props: EventRowProps) => {
   const { event } = props;
   const theme = useTheme();
-  const timestamp = getEventTimestamp(event);
   const { action, message, username } = {
     action: event.action,
     message: getEventMessage(event),
@@ -39,7 +38,11 @@ export const EventRow = (props: EventRowProps) => {
     return null;
   }
 
-  const { progressEventDisplay, showProgress } = formatProgressEvent(event);
+  const {
+    progressEventDate,
+    progressEventDuration,
+    showProgress,
+  } = formatProgressEvent(event);
 
   return (
     <TableRow data-qa-event-row data-test-id={action}>
@@ -72,8 +75,13 @@ export const EventRow = (props: EventRowProps) => {
           </Box>
         </TableCell>
       </Hidden>
-      <TableCell parentColumn="Relative Date">
-        {progressEventDisplay}
+      <TableCell parentColumn="Start Date">
+        <TextTooltip
+          displayText={progressEventDate}
+          minWidth={130}
+          placement="top"
+          tooltipText={<DateTimeDisplay value={event.created} />}
+        />
         {username && (
           <Hidden smUp>
             <br />
@@ -84,8 +92,8 @@ export const EventRow = (props: EventRowProps) => {
         )}
       </TableCell>
       <Hidden mdDown>
-        <TableCell data-qa-event-created-cell parentColumn="Absolute Date">
-          <DateTimeDisplay value={timestamp.toString()} />
+        <TableCell data-qa-event-created-cell parentColumn="Duration">
+          {progressEventDuration}
         </TableCell>
       </Hidden>
     </TableRow>

packages/manager/src/features/Events/EventsLanding.tsx

@@ -102,10 +102,10 @@ export const EventsLanding = (props: Props) => {
                 User
               </TableCell>
             </Hidden>
-            <StyledTableCell sx={{ width: 175 }}>Relative Date</StyledTableCell>
+            <StyledTableCell sx={{ width: 175 }}>Start Date</StyledTableCell>
             <Hidden mdDown>
-              <StyledTableCell data-qa-events-time-header sx={{ width: 150 }}>
-                Absolute Date
+              <StyledTableCell data-qa-events-time-header sx={{ width: 175 }}>
+                Duration
               </StyledTableCell>
             </Hidden>
           </TableRow>

packages/manager/src/features/Events/utils.test.tsx

@@ -188,11 +188,9 @@ describe('formatProgressEvent', () => {
       seconds: 1,
     });
     vi.setSystemTime(currentDateMock.toJSDate());
-    const { progressEventDisplay, showProgress } = formatProgressEvent(
-      mockEvent1
-    );
+    const { progressEventDate, showProgress } = formatProgressEvent(mockEvent1);
 
-    expect(progressEventDisplay).toBe('1 second ago');
+    expect(progressEventDate).toBe('1 second ago');
     expect(showProgress).toBe(false);
   });
 
@@ -201,21 +199,19 @@ describe('formatProgressEvent', () => {
       seconds: 1,
     });
     vi.setSystemTime(currentDateMock.toJSDate());
-    const { progressEventDisplay, showProgress } = formatProgressEvent(
-      mockEvent2
-    );
+    const { progressEventDate, showProgress } = formatProgressEvent(mockEvent2);
 
-    expect(progressEventDisplay).toBe('Started 1 second ago');
+    expect(progressEventDate).toBe('Started 1 second ago');
     expect(showProgress).toBe(true);
   });
 
   it('returns the correct format for a "started" event with time remaining', () => {
-    const { progressEventDisplay, showProgress } = formatProgressEvent({
+    const { progressEventDuration, showProgress } = formatProgressEvent({
       ...mockEvent2,
 
       time_remaining: '0:50:00',
     });
-    expect(progressEventDisplay).toBe('~50 minutes remaining');
+    expect(progressEventDuration).toBe('~50 minutes remaining');
     expect(showProgress).toBe(true);
   });
 });

packages/manager/src/features/Events/utils.tsx

@@ -2,7 +2,8 @@ import { Duration } from 'luxon';
 
 import { ACTIONS_TO_INCLUDE_AS_PROGRESS_EVENTS } from 'src/features/Events/constants';
 import { isInProgressEvent } from 'src/queries/events/event.helpers';
-import { getEventTimestamp } from 'src/utilities/eventUtils';
+import { parseAPIDate } from 'src/utilities/date';
+import { formatDuration } from 'src/utilities/formatDuration';
 
 import { ACTIONS_WITHOUT_USERNAMES } from './constants';
 import { eventMessages } from './factory';
@@ -112,7 +113,8 @@ const shouldShowEventProgress = (event: Event): boolean => {
 };
 
 interface ProgressEventDisplay {
-  progressEventDisplay: null | string;
+  progressEventDate: string;
+  progressEventDuration: string;
   showProgress: boolean;
 }
 
@@ -124,16 +126,20 @@ interface ProgressEventDisplay {
  */
 export const formatProgressEvent = (event: Event): ProgressEventDisplay => {
   const showProgress = shouldShowEventProgress(event);
-  const parsedTimeRemaining = formatEventTimeRemaining(event.time_remaining);
+  const startDate = parseAPIDate(event.created).toRelative();
+  const progressEventDate = showProgress ? `Started ${startDate}` : startDate;
 
-  const progressEventDisplay = showProgress
-    ? parsedTimeRemaining
-      ? `~${parsedTimeRemaining}`
-      : `Started ${getEventTimestamp(event).toRelative()}`
-    : getEventTimestamp(event).toRelative();
+  const parsedTimeRemaining = formatEventTimeRemaining(event.time_remaining);
+  const eventDuration = event.duration
+    ? formatDuration(Duration.fromObject({ seconds: event.duration }))
+    : '-';
+  const progressEventDuration = parsedTimeRemaining
+    ? `~${parsedTimeRemaining}`
+    : eventDuration;
 
   return {
-    progressEventDisplay,
+    progressEventDate,
+    progressEventDuration,
     showProgress,
   };
 };

packages/manager/src/features/NotificationCenter/Events/NotificationCenterEvent.tsx

@@ -43,7 +43,7 @@ export const NotificationCenterEvent = React.memo(
       return null;
     }
 
-    const { progressEventDisplay, showProgress } = formatProgressEvent(event);
+    const { progressEventDate, showProgress } = formatProgressEvent(event);
 
     return (
       <NotificationEventStyledBox
@@ -73,7 +73,7 @@ export const NotificationCenterEvent = React.memo(
             />
           )}
           <Typography sx={{ fontSize: '0.8rem' }}>
-            {progressEventDisplay} | {username}
+            {progressEventDate} | {username}
           </Typography>
         </Box>
       </NotificationEventStyledBox>