Show duration on compact history group (#912)

Author: Assem-Uber

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

@@ -2,7 +2,9 @@ import React from 'react';
 
 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 WorkflowHistoryEventsDurationBadge from '../../workflow-history-events-duration-badge/workflow-history-events-duration-badge';
 import WorkflowHistoryCompactEventCard from '../workflow-history-compact-event-card';
 import { type Props } from '../workflow-history-compact-event-card.types';
 
@@ -11,7 +13,16 @@ 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>)
+);
+
 describe('WorkflowHistoryCompactEventCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('renders label correctly', () => {
     setup({
       label: 'test label',
@@ -59,6 +70,26 @@ describe('WorkflowHistoryCompactEventCard', () => {
 
     expect(mockOnClick).toHaveBeenCalled();
   });
+
+  it('should render duration badge passing showOngoingOnly as true when timeMs is provided', () => {
+    setup({
+      timeMs: 1726652232190.7927,
+    });
+    expect(WorkflowHistoryEventsDurationBadge).toHaveBeenCalledWith(
+      expect.objectContaining({
+        showOngoingOnly: true,
+      }),
+      {}
+    );
+  });
+
+  it('does not render duration badge when timeMs is not provided', () => {
+    setup({
+      timeMs: null,
+    });
+
+    expect(screen.queryByText('Duration Badge')).not.toBeInTheDocument();
+  });
 });
 
 function setup(props: Partial<Props>) {
@@ -70,8 +101,14 @@ function setup(props: Partial<Props>) {
         statusReady
         status="COMPLETED"
         label="test label"
-        secondaryLabel="test secondaryLabel"
         onClick={mockOnClick}
+        timeMs={null}
+        closeTimeMs={null}
+        events={[startWorkflowExecutionEvent]}
+        workflowCloseTimeMs={null}
+        workflowCloseStatus={null}
+        workflowIsArchived={false}
+        hasMissingEvents={false}
         {...props}
       />
     ),

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

@@ -42,6 +42,7 @@ export const overrides = {
         color: $theme.colors.contentSecondary,
         ...$theme.typography.LabelXSmall,
         whiteSpace: 'nowrap',
+        marginLeft: $theme.sizing.scale100,
       }),
     },
   } satisfies BadgeOverrides,
@@ -60,9 +61,8 @@ const cssStylesObj = {
     ...$theme.typography.LabelSmall,
     color: $theme.colors.contentPrimary,
   }),
-  secondaryLabel: ($theme: Theme) => ({
-    ...$theme.typography.LabelXSmall,
-    color: '#868686',
+  durationContainer: ($theme: Theme) => ({
+    marginLeft: $theme.sizing.scale100,
   }),
 } satisfies StyletronCSSObject;
 

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

@@ -8,6 +8,7 @@ import { ALIGNMENT, TILE_KIND, Tile } from 'baseui/tile';
 import useStyletronClasses from '@/hooks/use-styletron-classes';
 
 import WorkflowHistoryEventStatusBadge from '../workflow-history-event-status-badge/workflow-history-event-status-badge';
+import WorkflowHistoryEventsDurationBadge from '../workflow-history-events-duration-badge/workflow-history-events-duration-badge';
 
 import {
   cssStyles,
@@ -19,10 +20,17 @@ export default function WorkflowHistoryCompactEventCard({
   status,
   statusReady,
   label,
-  badges,
   showLabelPlaceholder,
   selected,
   disabled,
+  timeMs,
+  badges,
+  closeTimeMs,
+  events,
+  hasMissingEvents,
+  workflowCloseTimeMs,
+  workflowCloseStatus,
+  workflowIsArchived,
   onClick,
 }: Props) {
   const { cls, theme } = useStyletronClasses(cssStyles);
@@ -49,17 +57,28 @@ export default function WorkflowHistoryCompactEventCard({
             {label}
             {hasBadges &&
               badges.map((badge) => (
-                <>
-                  {' '}
-                  <Badge
-                    key={badge.content}
-                    overrides={overrides.badge}
-                    content={badge.content}
-                    shape="rectangle"
-                    color="primary"
-                  />
-                </>
+                <Badge
+                  key={badge.content}
+                  overrides={overrides.badge}
+                  content={badge.content}
+                  shape="rectangle"
+                  color="primary"
+                />
               ))}
+            {timeMs && (
+              <span className={cls.durationContainer}>
+                <WorkflowHistoryEventsDurationBadge
+                  startTime={timeMs}
+                  closeTime={closeTimeMs}
+                  eventsCount={events.length}
+                  hasMissingEvents={hasMissingEvents}
+                  workflowCloseTime={workflowCloseTimeMs}
+                  workflowIsArchived={workflowIsArchived}
+                  workflowCloseStatus={workflowCloseStatus}
+                  showOngoingOnly={true}
+                />
+              </span>
+            )}
           </div>
         )}
       </div>

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

@@ -1,16 +1,26 @@
 import { type TileProps } from 'baseui/tile';
 
-import { type WorkflowEventStatus } from '../workflow-history-event-status-badge/workflow-history-event-status-badge.types';
-import { type HistoryGroupBadge } from '../workflow-history.types';
+import { type WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
 
-export type Props = {
-  status: WorkflowEventStatus;
+import { type HistoryEventsGroup } from '../workflow-history.types';
+
+export type Props = Pick<
+  HistoryEventsGroup,
+  | 'events'
+  | 'label'
+  | 'hasMissingEvents'
+  | 'status'
+  | 'badges'
+  | 'resetToDecisionEventId'
+  | 'timeMs'
+  | 'closeTimeMs'
+> & {
   statusReady: boolean;
-  label: string;
-  secondaryLabel: string;
   showLabelPlaceholder?: boolean;
-  badges?: HistoryGroupBadge[];
   onClick: TileProps['onClick'];
   selected?: boolean;
   disabled?: boolean;
+  workflowIsArchived: boolean;
+  workflowCloseTimeMs?: number | null;
+  workflowCloseStatus?: WorkflowExecutionCloseStatus | null;
 };

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

@@ -13,30 +13,32 @@ export default function WorkflowHistoryEventsDurationBadge({
   eventsCount,
   hasMissingEvents,
   workflowCloseTime,
+  showOngoingOnly,
 }: Props) {
   const endTime = closeTime || workflowCloseTime;
   const workflowEnded =
     workflowIsArchived ||
     workflowCloseStatus !== 'WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID';
   const singleEvent = eventsCount === 1 && !hasMissingEvents;
   const noDuration = singleEvent || (workflowEnded && !endTime);
+  const hideDuration = (showOngoingOnly && endTime) || noDuration;
 
   const [duration, setDuration] = useState<string>(() =>
     getFormattedEventsDuration(startTime, endTime)
   );
 
   useEffect(() => {
     setDuration(getFormattedEventsDuration(startTime, endTime));
-    if (!endTime && !noDuration) {
+    if (!endTime && !hideDuration) {
       const interval = setInterval(() => {
         setDuration(getFormattedEventsDuration(startTime, endTime));
       }, 1000);
 
       return () => clearInterval(interval);
     }
-  }, [startTime, endTime, noDuration]);
+  }, [startTime, endTime, hideDuration]);
 
-  if (noDuration) {
+  if (hideDuration) {
     return null;
   }
 

src/views/workflow-history/workflow-history-events-duration-badge/workflow-history-events-duration-badge.types.ts

@@ -8,4 +8,5 @@ export type Props = {
   eventsCount: number;
   hasMissingEvents: boolean;
   workflowCloseTime: Date | string | number | null | undefined;
+  showOngoingOnly?: boolean;
 };

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

@@ -342,39 +342,28 @@ export default function WorkflowHistory({ params }: Props) {
                 : {
                     initialTopMostItemIndex: initialEventGroupIndex,
                   })}
-              itemContent={(
-                index,
-                [
-                  groupId,
-                  {
-                    label,
-                    status,
-                    timeLabel,
-                    badges,
-                    events,
-                    hasMissingEvents,
-                  },
-                ]
-              ) => (
+              itemContent={(index, [groupId, group]) => (
                 <div role="listitem" className={cls.compactCardContainer}>
                   <WorkflowHistoryCompactEventCard
                     key={groupId}
-                    status={status}
+                    {...group}
                     statusReady={
-                      !hasMissingEvents || reachedAvailableHistoryEnd
+                      !group.hasMissingEvents || reachedAvailableHistoryEnd
+                    }
+                    workflowCloseStatus={workflowExecutionInfo?.closeStatus}
+                    workflowIsArchived={
+                      workflowExecutionInfo?.isArchived || false
                     }
-                    label={label}
-                    secondaryLabel={timeLabel}
-                    showLabelPlaceholder={!label}
-                    badges={badges}
-                    selected={events.some(
+                    workflowCloseTimeMs={wokflowCloseTimeMs}
+                    showLabelPlaceholder={!group.label}
+                    selected={group.events.some(
                       (e) => e.eventId === queryParams.historySelectedEventId
                     )}
-                    disabled={!Boolean(events[0].eventId)}
+                    disabled={!Boolean(group.events[0].eventId)}
                     onClick={() => {
-                      if (events[0].eventId)
+                      if (group.events[0].eventId)
                         setQueryParams({
-                          historySelectedEventId: events[0].eventId,
+                          historySelectedEventId: group.events[0].eventId,
                         });
                       timelineSectionListRef.current?.scrollToIndex({
                         index,