Fix duration to read correct startTime (#916)

Author: Assem-Uber

src/views/workflow-history/__fixtures__/workflow-history-event-groups.ts

@@ -14,7 +14,8 @@ export const mockActivityEventGroup: ActivityHistoryGroup = {
   status: 'COMPLETED',
   eventsMetadata: [],
   hasMissingEvents: false,
-  timeMs: 1725747380000,
+  timeMs: 1725747370632,
+  startTimeMs: 1725747370599,
   timeLabel: 'Mock time label',
   events: completedActivityTaskEvents,
 };
@@ -26,6 +27,7 @@ export const mockTimerEventGroup: TimerHistoryGroup = {
   eventsMetadata: [],
   hasMissingEvents: false,
   timeMs: 1725747380000,
+  startTimeMs: 1725747380000,
   timeLabel: 'Mock time label',
   events: [startTimerTaskEvent],
 };
@@ -37,6 +39,7 @@ export const mockSingleEventGroup: SingleEventHistoryGroup = {
   eventsMetadata: [],
   hasMissingEvents: false,
   timeMs: 1725747380000,
+  startTimeMs: 1725747380000,
   timeLabel: 'Mock time label',
   events: [startWorkflowExecutionEvent],
 };

src/views/workflow-history/helpers/__tests__/get-common-history-group-fields.test.ts

@@ -92,6 +92,11 @@ describe('getCommonHistoryGroupFields', () => {
     expect(group.closeTimeMs).toEqual(null);
   });
 
+  it('should return group with startTimeMs equal to first event timeMs', () => {
+    const group = setup({});
+    expect(group.startTimeMs).toEqual(group.eventsMetadata[0].timeMs);
+  });
+
   const groupFieldsExtractedFromEventsMetadaTests: {
     name: string;
     groupField: 'events' | 'eventsMetadata' | 'status' | 'timeMs' | 'timeLabel';

src/views/workflow-history/helpers/get-common-history-group-fields.ts

@@ -24,6 +24,7 @@ export default function getCommonHistoryGroupFields<
   | 'timeMs'
   | 'timeLabel'
   | 'closeTimeMs'
+  | 'startTimeMs'
 > {
   const eventsMetadata = events.map((event, index) => {
     const attrs = event.attributes as GroupT['events'][number]['attributes'];
@@ -47,6 +48,7 @@ export default function getCommonHistoryGroupFields<
 
   const groupStatus = eventsMetadata[eventsMetadata.length - 1].status;
   const groupTimeMs = eventsMetadata[eventsMetadata.length - 1].timeMs;
+  const groupStartTimeMs = eventsMetadata[0].timeMs;
   const groupTimeLabel = eventsMetadata[eventsMetadata.length - 1].timeLabel;
   const groupCloseTimeMs = closeEvent?.eventTime
     ? parseGrpcTimestamp(closeEvent.eventTime)
@@ -57,6 +59,7 @@ export default function getCommonHistoryGroupFields<
     events,
     status: groupStatus,
     timeMs: groupTimeMs,
+    startTimeMs: groupStartTimeMs,
     closeTimeMs: groupCloseTimeMs,
     timeLabel: groupTimeLabel,
   };

src/views/workflow-history/workflow-history-compact-event-card/__tests__/workflow-history-compact-event-card.test.tsx

@@ -71,9 +71,9 @@ describe('WorkflowHistoryCompactEventCard', () => {
     expect(mockOnClick).toHaveBeenCalled();
   });
 
-  it('should render duration badge passing showOngoingOnly as true when timeMs is provided', () => {
+  it('should render duration badge passing showOngoingOnly as true when startTimeMs is provided', () => {
     setup({
-      timeMs: 1726652232190.7927,
+      startTimeMs: 1726652232190.7927,
     });
     expect(WorkflowHistoryEventsDurationBadge).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -83,11 +83,10 @@ describe('WorkflowHistoryCompactEventCard', () => {
     );
   });
 
-  it('does not render duration badge when timeMs is not provided', () => {
+  it('should not render duration badge when startTimeMs is not provided', () => {
     setup({
-      timeMs: null,
+      startTimeMs: null,
     });
-
     expect(screen.queryByText('Duration Badge')).not.toBeInTheDocument();
   });
 });
@@ -102,7 +101,7 @@ function setup(props: Partial<Props>) {
         status="COMPLETED"
         label="test label"
         onClick={mockOnClick}
-        timeMs={null}
+        startTimeMs={null}
         closeTimeMs={null}
         events={[startWorkflowExecutionEvent]}
         workflowCloseTimeMs={null}

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.tsx

@@ -23,7 +23,7 @@ export default function WorkflowHistoryCompactEventCard({
   showLabelPlaceholder,
   selected,
   disabled,
-  timeMs,
+  startTimeMs,
   badges,
   closeTimeMs,
   events,
@@ -65,13 +65,14 @@ export default function WorkflowHistoryCompactEventCard({
                   color="primary"
                 />
               ))}
-            {timeMs && (
+            {startTimeMs && (
               <span className={cls.durationContainer}>
                 <WorkflowHistoryEventsDurationBadge
-                  startTime={timeMs}
+                  startTime={startTimeMs}
                   closeTime={closeTimeMs}
                   eventsCount={events.length}
                   hasMissingEvents={hasMissingEvents}
+                  loadingMoreEvents={!statusReady}
                   workflowCloseTime={workflowCloseTimeMs}
                   workflowIsArchived={workflowIsArchived}
                   workflowCloseStatus={workflowCloseStatus}

src/views/workflow-history/workflow-history-compact-event-card/workflow-history-compact-event-card.types.ts

@@ -12,7 +12,7 @@ export type Props = Pick<
   | 'status'
   | 'badges'
   | 'resetToDecisionEventId'
-  | 'timeMs'
+  | 'startTimeMs'
   | 'closeTimeMs'
 > & {
   statusReady: boolean;

src/views/workflow-history/workflow-history-events-duration-badge/__tests__/workflow-history-events-duration-badge.test.tsx

@@ -64,6 +64,14 @@ describe('WorkflowHistoryEventsDurationBadge', () => {
     expect(screen.getByText('Duration: 120')).toBeInTheDocument();
   });
 
+  it('does not render badge when loading more events', () => {
+    setup({
+      loadingMoreEvents: true,
+    });
+
+    expect(screen.queryByText(/Duration:/)).not.toBeInTheDocument();
+  });
+
   it('does not render badge when workflow is archived without close time', () => {
     setup({
       closeTime: null,
@@ -122,7 +130,8 @@ describe('WorkflowHistoryEventsDurationBadge', () => {
 
     expect(getFormattedEventsDuration).toHaveBeenCalledWith(
       mockStartTime,
-      mockCloseTime
+      mockCloseTime,
+      expect.any(Boolean)
     );
     expect(screen.getByText('Duration: 60')).toBeInTheDocument();
   });
@@ -133,6 +142,7 @@ function setup({
   closeTime,
   eventsCount = 2,
   hasMissingEvents = false,
+  loadingMoreEvents = false,
   workflowIsArchived = false,
   workflowCloseStatus = WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID,
   workflowCloseTime = null,
@@ -143,6 +153,7 @@ function setup({
       closeTime={closeTime}
       eventsCount={eventsCount}
       hasMissingEvents={hasMissingEvents}
+      loadingMoreEvents={loadingMoreEvents}
       workflowIsArchived={workflowIsArchived}
       workflowCloseStatus={workflowCloseStatus}
       workflowCloseTime={workflowCloseTime}

src/views/workflow-history/workflow-history-events-duration-badge/helpers/__tests__/get-formatted-events-duration.test.ts

@@ -2,45 +2,81 @@ import getFormattedEventsDuration from '../get-formatted-events-duration';
 
 jest.mock('@/utils/data-formatters/format-duration', () => ({
   __esModule: true,
-  default: jest.fn((duration) => `mocked: ${duration.seconds}s`),
+  default: jest.fn(
+    (duration) => `mocked: ${duration.seconds}s ${duration.nanos / 1000000}ms`
+  ),
 }));
 
+const mockNow = new Date('2024-01-01T10:02:00Z');
+
 describe('getFormattedEventsDuration', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(mockNow);
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
   it('should return 0s for identical start and end times', () => {
     const duration = getFormattedEventsDuration(
       '2021-01-01T00:00:00Z',
       '2021-01-01T00:00:00Z'
     );
-    expect(duration).toEqual('mocked: 0s');
+    expect(duration).toEqual('mocked: 0s 0ms');
   });
 
   it('should return correct duration for 1 minute', () => {
     const duration = getFormattedEventsDuration(
       '2021-01-01T00:00:00Z',
       '2021-01-01T00:01:00Z'
     );
-    expect(duration).toEqual('mocked: 60s');
+    expect(duration).toEqual('mocked: 60s 0ms');
   });
 
   it('should return correct duration for 1 hour, 2 minutes, 3 seconds', () => {
     const duration = getFormattedEventsDuration(
       '2021-01-01T01:02:03Z',
       '2021-01-01T02:04:06Z'
     );
-    expect(duration).toEqual(`mocked: ${60 * 60 + 2 * 60 + 3}s`);
+    expect(duration).toEqual(`mocked: ${60 * 60 + 2 * 60 + 3}s 0ms`);
   });
 
   it('should handle endTime as null (use current time)', () => {
-    const start = new Date(Date.now() - 60000).toISOString(); // 1 minute ago
+    const start = new Date(mockNow.getTime() - 60000).toISOString(); // 1 minute ago
     const duration = getFormattedEventsDuration(start, null);
-    expect(duration).toEqual('mocked: 60s');
+    expect(duration).toEqual('mocked: 60s 0ms');
   });
 
   it('should handle negative durations (start after end)', () => {
     const duration = getFormattedEventsDuration(
       '2021-01-01T01:00:00Z',
       '2021-01-01T00:00:00Z'
     );
-    expect(duration).toEqual('mocked: -3600s');
+    expect(duration).toEqual('mocked: -3600s 0ms');
+  });
+
+  it('should handle numeric durations', () => {
+    const duration = getFormattedEventsDuration(1726652232190, 1726652292194);
+    expect(duration).toEqual('mocked: 60s 4ms');
+  });
+
+  it('should remove ms from duration when hideMs is true', () => {
+    const duration = getFormattedEventsDuration(
+      1726652232190,
+      1726652292194,
+      true
+    );
+    expect(duration).toEqual('mocked: 60s');
+  });
+
+  it('should not hide ms if there are no bigger units', () => {
+    const duration = getFormattedEventsDuration(
+      1726652232190,
+      1726652232194,
+      true
+    );
+    expect(duration).toEqual('mocked: 0s 4ms');
   });
 });

src/views/workflow-history/workflow-history-events-duration-badge/helpers/get-formatted-events-duration.ts

@@ -2,18 +2,27 @@ import formatDuration from '@/utils/data-formatters/format-duration';
 import dayjs from '@/utils/datetime/dayjs';
 
 export default function getFormattedEventsDuration(
-  startTime: Date | string | number,
-  endTime: Date | string | number | null | undefined
+  startTime: Date | string | number | null,
+  endTime: Date | string | number | null | undefined,
+  hideMs: boolean = false
 ) {
   const end = endTime ? dayjs(endTime) : dayjs();
   const start = dayjs(startTime);
   const diff = end.diff(start);
   const durationObj = dayjs.duration(diff);
-  return formatDuration(
+  const seconds = Math.floor(durationObj.asSeconds());
+
+  const duration = formatDuration(
     {
-      seconds: durationObj.asSeconds().toString(),
-      nanos: 0,
+      seconds: seconds.toString(),
+      nanos: (durationObj.asMilliseconds() - seconds * 1000) * 1000000,
     },
     { separator: ' ' }
   );
+  // TODO: add this functionality to formatDuration in more reusable way
+  if (hideMs && seconds > 0) {
+    return duration.replace(/ \d+ms/i, '');
+  }
+
+  return duration;
 }

src/views/workflow-history/workflow-history-events-duration-badge/workflow-history-events-duration-badge.tsx

@@ -12,6 +12,7 @@ export default function WorkflowHistoryEventsDurationBadge({
   workflowCloseStatus,
   eventsCount,
   hasMissingEvents,
+  loadingMoreEvents,
   workflowCloseTime,
   showOngoingOnly,
 }: Props) {
@@ -20,23 +21,25 @@ export default function WorkflowHistoryEventsDurationBadge({
     workflowIsArchived ||
     workflowCloseStatus !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID';
   const singleEvent = eventsCount === 1 && !hasMissingEvents;
-  const noDuration = singleEvent || (workflowEnded && !endTime);
+  const noDuration =
+    loadingMoreEvents || singleEvent || (workflowEnded && !endTime);
   const hideDuration = (showOngoingOnly && endTime) || noDuration;
+  const isOngoing = !endTime && !hideDuration;
 
   const [duration, setDuration] = useState<string>(() =>
-    getFormattedEventsDuration(startTime, endTime)
+    getFormattedEventsDuration(startTime, endTime, isOngoing)
   );
 
   useEffect(() => {
-    setDuration(getFormattedEventsDuration(startTime, endTime));
-    if (!endTime && !hideDuration) {
+    setDuration(getFormattedEventsDuration(startTime, endTime, isOngoing));
+    if (isOngoing) {
       const interval = setInterval(() => {
-        setDuration(getFormattedEventsDuration(startTime, endTime));
+        setDuration(getFormattedEventsDuration(startTime, endTime, true));
       }, 1000);
 
       return () => clearInterval(interval);
     }
-  }, [startTime, endTime, hideDuration]);
+  }, [startTime, endTime, isOngoing]);
 
   if (hideDuration) {
     return null;