Show duration badge on timeline event groups (#911)

Author: Assem-Uber

src/views/workflow-history/workflow-history-timeline-group/__tests__/workflow-history-timeline-group.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, userEvent } from '@/test-utils/rtl';
 import { startWorkflowExecutionEvent } from '../../__fixtures__/workflow-history-single-events';
 import type WorkflowHistoryEventStatusBadge from '../../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import type WorkflowHistoryEventsCard from '../../workflow-history-events-card/workflow-history-events-card';
+import type WorkflowHistoryEventsDurationBadge from '../../workflow-history-events-duration-badge/workflow-history-events-duration-badge';
 import type WorkflowHistoryTimelineResetButton from '../../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
 import WorkflowHistoryTimelineGroup from '../workflow-history-timeline-group';
 import { type styled } from '../workflow-history-timeline-group.styles';
@@ -13,6 +14,11 @@ jest.mock<typeof WorkflowHistoryEventStatusBadge>(
   () => jest.fn((props) => <div>{props.status}</div>)
 );
 
+jest.mock<typeof WorkflowHistoryEventsDurationBadge>(
+  '../../workflow-history-events-duration-badge/workflow-history-events-duration-badge',
+  () => jest.fn(() => <div>Duration Badge</div>)
+);
+
 jest.mock<typeof WorkflowHistoryEventsCard>(
   '../../workflow-history-events-card/workflow-history-events-card',
   () => jest.fn(() => <div>Events Card</div>)
@@ -108,6 +114,16 @@ describe('WorkflowHistoryTimelineGroup', () => {
 
     expect(mockOnReset).toHaveBeenCalledTimes(1);
   });
+
+  it('renders duration badge when timeMs is provided', () => {
+    setup({ timeMs: 1726652232190.7927 });
+    expect(screen.getByText('Duration Badge')).toBeInTheDocument();
+  });
+
+  it('does not render duration badge when timeMs is not provided', () => {
+    setup({ timeMs: null });
+    expect(screen.queryByText('Duration Badge')).not.toBeInTheDocument();
+  });
 });
 
 function setup({
@@ -134,6 +150,10 @@ function setup({
   },
   badges,
   resetToDecisionEventId,
+  workflowCloseStatus,
+  workflowIsArchived = false,
+  workflowCloseTimeMs = null,
+  timeMs = null,
 }: Partial<Props>) {
   const mockOnReset = jest.fn();
   const user = userEvent.setup();
@@ -152,6 +172,10 @@ function setup({
       badges={badges}
       resetToDecisionEventId={resetToDecisionEventId}
       onReset={mockOnReset}
+      workflowCloseStatus={workflowCloseStatus}
+      workflowIsArchived={workflowIsArchived}
+      workflowCloseTimeMs={workflowCloseTimeMs}
+      timeMs={timeMs}
     />
   );
   return { mockOnReset, user };

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx

@@ -7,6 +7,7 @@ import useStyletronClasses from '@/hooks/use-styletron-classes';
 
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
 import WorkflowHistoryEventsCard from '../workflow-history-events-card/workflow-history-events-card';
+import WorkflowHistoryEventsDurationBadge from '../workflow-history-events-duration-badge/workflow-history-events-duration-badge';
 import WorkflowHistoryTimelineResetButton from '../workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
 
 import {
@@ -20,6 +21,11 @@ export default function WorkflowHistoryTimelineGroup({
   status,
   label,
   timeLabel,
+  timeMs,
+  closeTimeMs,
+  workflowCloseTimeMs,
+  workflowCloseStatus,
+  workflowIsArchived,
   events,
   isLastEvent,
   eventsMetadata,
@@ -65,6 +71,17 @@ export default function WorkflowHistoryTimelineGroup({
                 ))}
               </>
             )}
+            {timeMs && (
+              <WorkflowHistoryEventsDurationBadge
+                startTime={timeMs}
+                closeTime={closeTimeMs}
+                eventsCount={events.length}
+                hasMissingEvents={hasMissingEvents}
+                workflowCloseTime={workflowCloseTimeMs}
+                workflowIsArchived={workflowIsArchived}
+                workflowCloseStatus={workflowCloseStatus}
+              />
+            )}
             <div suppressHydrationWarning className={cls.eventsTime}>
               {timeLabel}
             </div>

src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.types.ts

@@ -1,3 +1,5 @@
+import { type WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
+
 import {
   type GetIsEventExpanded,
   type ToggleIsEventExpanded,
@@ -17,11 +19,16 @@ export type Props = Pick<
   | 'status'
   | 'badges'
   | 'resetToDecisionEventId'
+  | 'timeMs'
+  | 'closeTimeMs'
 > & {
   isLastEvent: boolean;
   decodedPageUrlParams: WorkflowHistoryProps['params'];
   getIsEventExpanded: GetIsEventExpanded;
   onEventToggle: ToggleIsEventExpanded;
   onReset?: () => void;
   selected?: boolean;
+  workflowIsArchived: boolean;
+  workflowCloseStatus?: WorkflowExecutionCloseStatus | null;
+  workflowCloseTimeMs?: number | null;
 };

src/views/workflow-history/workflow-history.tsx

@@ -19,6 +19,7 @@ import SectionLoadingIndicator from '@/components/section-loading-indicator/sect
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 import useThrottledState from '@/hooks/use-throttled-state';
 import { type GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-history/get-workflow-history.types';
+import parseGrpcTimestamp from '@/utils/datetime/parse-grpc-timestamp';
 import decodeUrlParams from '@/utils/decode-url-params';
 import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
@@ -177,6 +178,10 @@ export default function WorkflowHistory({ params }: Props) {
       compactEndIndex: -1,
     });
 
+  const wokflowCloseTimeMs = workflowExecutionInfo?.closeTime
+    ? parseGrpcTimestamp(workflowExecutionInfo?.closeTime)
+    : null;
+
   // search for the event selected in the URL on initial page load
   const {
     initialEventFound,
@@ -410,12 +415,7 @@ export default function WorkflowHistory({ params }: Props) {
               itemContent={(index, [groupId, group]) => (
                 <WorkflowHistoryTimelineGroup
                   key={groupId}
-                  status={group.status}
-                  label={group.label}
-                  timeLabel={group.timeLabel}
-                  events={group.events}
-                  eventsMetadata={group.eventsMetadata}
-                  badges={group.badges}
+                  {...group}
                   hasMissingEvents={
                     group.hasMissingEvents && !reachedAvailableHistoryEnd
                   }
@@ -432,6 +432,11 @@ export default function WorkflowHistory({ params }: Props) {
                   selected={group.events.some(
                     (e) => e.eventId === queryParams.historySelectedEventId
                   )}
+                  workflowCloseStatus={workflowExecutionInfo?.closeStatus}
+                  workflowIsArchived={
+                    workflowExecutionInfo?.isArchived || false
+                  }
+                  workflowCloseTimeMs={wokflowCloseTimeMs}
                 />
               )}
               components={{