History events duration badge (#907)

Author: Assem-Uber

src/utils/data-formatters/__tests__/format-duration.test.ts

@@ -26,4 +26,9 @@ describe('formatDuration', () => {
     const duration: Duration = { seconds: '61', nanos: 123456789 };
     expect(formatDuration(duration)).toBe('1m, 1s, 123.456789ms');
   });
+
+  it('should format duration with custom separator', () => {
+    const duration: Duration = { seconds: '31556952', nanos: 0 };
+    expect(formatDuration(duration, { separator: ' ' })).toBe('1y 5h 49m 12s');
+  });
 });

src/utils/data-formatters/format-duration.ts

@@ -1,7 +1,10 @@
 import { type Duration } from '@/__generated__/proto-ts/google/protobuf/Duration';
 import dayjs from '@/utils/datetime/dayjs';
 
-const formatDuration = (duration: Duration | null) => {
+const formatDuration = (
+  duration: Duration | null,
+  { separator = ', ' }: { separator?: string } = {}
+) => {
   const defaultReturn = '0s';
   if (!duration) {
     return defaultReturn;
@@ -30,7 +33,7 @@ const formatDuration = (duration: Duration | null) => {
   const result = units
     .filter((unit) => values[unit])
     .map((unit) => `${values[unit]}${unit}`)
-    .join(', ');
+    .join(separator);
 
   return result || defaultReturn;
 };

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

@@ -0,0 +1,151 @@
+import React from 'react';
+
+import dayjs from 'dayjs';
+
+import { render, screen, act } from '@/test-utils/rtl';
+
+import { WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
+
+import getFormattedEventsDuration from '../helpers/get-formatted-events-duration';
+import WorkflowHistoryEventsDurationBadge from '../workflow-history-events-duration-badge';
+import type { Props } from '../workflow-history-events-duration-badge.types';
+
+jest.mock('../helpers/get-formatted-events-duration', () =>
+  jest.fn((startTime, endTime) =>
+    dayjs(endTime ?? undefined).diff(dayjs(startTime), 'seconds')
+  )
+);
+
+const mockStartTime = new Date('2024-01-01T10:00:00Z');
+const mockCloseTime = new Date('2024-01-01T10:01:00Z');
+const mockNow = new Date('2024-01-01T10:02:00Z');
+
+describe('WorkflowHistoryEventsDurationBadge', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(mockNow);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.useRealTimers();
+  });
+
+  it('renders duration badge for completed event', () => {
+    setup({
+      closeTime: mockCloseTime,
+    });
+
+    expect(screen.getByText('Duration: 60')).toBeInTheDocument();
+  });
+
+  it('renders duration badge for ongoing event', () => {
+    setup({
+      closeTime: null,
+    });
+    expect(screen.getByText('Duration: 120')).toBeInTheDocument();
+  });
+
+  it('does not render badge for single event', () => {
+    setup({
+      eventsCount: 1,
+      hasMissingEvents: false,
+    });
+
+    expect(screen.queryByText(/Duration:/)).not.toBeInTheDocument();
+  });
+
+  it('renders badge for single event with missing events', () => {
+    setup({
+      eventsCount: 1,
+      hasMissingEvents: true,
+    });
+
+    expect(screen.getByText('Duration: 120')).toBeInTheDocument();
+  });
+
+  it('does not render badge when workflow is archived without close time', () => {
+    setup({
+      closeTime: null,
+      workflowIsArchived: true,
+    });
+
+    expect(screen.queryByText(/Duration:/)).not.toBeInTheDocument();
+  });
+
+  it('does not render badge when workflow has close status without close time', () => {
+    setup({
+      workflowCloseStatus:
+        WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_COMPLETED,
+    });
+
+    expect(screen.queryByText(/Duration:/)).not.toBeInTheDocument();
+  });
+
+  it('updates duration for ongoing event every second', () => {
+    setup({
+      closeTime: null,
+    });
+    expect(screen.getByText('Duration: 120')).toBeInTheDocument();
+
+    // Check if new duration is displayed each second
+    (getFormattedEventsDuration as jest.Mock).mockClear();
+    act(() => {
+      jest.advanceTimersByTime(1000);
+      jest.setSystemTime(new Date(mockNow.getTime() + 1000));
+    });
+    expect(screen.getByText('Duration: 121')).toBeInTheDocument();
+    act(() => {
+      jest.advanceTimersByTime(1000);
+      jest.setSystemTime(new Date(mockNow.getTime() + 2000));
+    });
+    expect(screen.getByText('Duration: 122')).toBeInTheDocument();
+
+    // check that getFormattedEventsDuration is called once for each update
+    expect(getFormattedEventsDuration).toHaveBeenCalledTimes(2);
+  });
+
+  it('cleans up interval when component unmounts', () => {
+    const { unmount } = setup();
+
+    const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
+    unmount();
+
+    expect(clearIntervalSpy).toHaveBeenCalled();
+  });
+
+  it('uses workflow close time when close time is not provided', () => {
+    setup({
+      closeTime: null,
+      workflowCloseTime: mockCloseTime,
+    });
+
+    expect(getFormattedEventsDuration).toHaveBeenCalledWith(
+      mockStartTime,
+      mockCloseTime
+    );
+    expect(screen.getByText('Duration: 60')).toBeInTheDocument();
+  });
+});
+
+function setup({
+  startTime = mockStartTime,
+  closeTime,
+  eventsCount = 2,
+  hasMissingEvents = false,
+  workflowIsArchived = false,
+  workflowCloseStatus = WorkflowExecutionCloseStatus.WORKFLOW_EXECUTION_CLOSE_STATUS_INVALID,
+  workflowCloseTime = null,
+}: Partial<Props> = {}) {
+  return render(
+    <WorkflowHistoryEventsDurationBadge
+      startTime={startTime}
+      closeTime={closeTime}
+      eventsCount={eventsCount}
+      hasMissingEvents={hasMissingEvents}
+      workflowIsArchived={workflowIsArchived}
+      workflowCloseStatus={workflowCloseStatus}
+      workflowCloseTime={workflowCloseTime}
+    />
+  );
+}

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

@@ -0,0 +1,46 @@
+import getFormattedEventsDuration from '../get-formatted-events-duration';
+
+jest.mock('@/utils/data-formatters/format-duration', () => ({
+  __esModule: true,
+  default: jest.fn((duration) => `mocked: ${duration.seconds}s`),
+}));
+
+describe('getFormattedEventsDuration', () => {
+  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');
+  });
+
+  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');
+  });
+
+  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`);
+  });
+
+  it('should handle endTime as null (use current time)', () => {
+    const start = new Date(Date.now() - 60000).toISOString(); // 1 minute ago
+    const duration = getFormattedEventsDuration(start, null);
+    expect(duration).toEqual('mocked: 60s');
+  });
+
+  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');
+  });
+});

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

@@ -0,0 +1,19 @@
+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
+) {
+  const end = endTime ? dayjs(endTime) : dayjs();
+  const start = dayjs(startTime);
+  const diff = end.diff(start);
+  const durationObj = dayjs.duration(diff);
+  return formatDuration(
+    {
+      seconds: durationObj.asSeconds().toString(),
+      nanos: 0,
+    },
+    { separator: ' ' }
+  );
+}

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

@@ -0,0 +1,25 @@
+import { type BadgeOverrides } from 'baseui/badge/types';
+import { type Theme } from 'baseui/theme';
+
+import themeLight from '@/config/theme/theme-light.config';
+
+export const overrides = {
+  Badge: {
+    Badge: {
+      style: ({
+        $theme,
+        $hierarchy,
+      }: {
+        $theme: Theme;
+        $hierarchy: string;
+      }) => ({
+        ...$theme.typography.LabelXSmall,
+        ...($hierarchy === 'secondary'
+          ? {
+              color: $theme.colors.contentSecondary,
+            }
+          : null),
+      }),
+    },
+  } satisfies BadgeOverrides,
+};

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

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+import { Badge } from 'baseui/badge';
+
+import getFormattedEventsDuration from './helpers/get-formatted-events-duration';
+import { overrides } from './workflow-history-events-duration-badge.styles';
+import { type Props } from './workflow-history-events-duration-badge.types';
+export default function WorkflowHistoryEventsDurationBadge({
+  startTime,
+  closeTime,
+  workflowIsArchived,
+  workflowCloseStatus,
+  eventsCount,
+  hasMissingEvents,
+  workflowCloseTime,
+}: 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 [duration, setDuration] = useState<string>(() =>
+    getFormattedEventsDuration(startTime, endTime)
+  );
+
+  useEffect(() => {
+    setDuration(getFormattedEventsDuration(startTime, endTime));
+    if (!endTime && !noDuration) {
+      const interval = setInterval(() => {
+        setDuration(getFormattedEventsDuration(startTime, endTime));
+      }, 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [startTime, endTime, noDuration]);
+
+  if (noDuration) {
+    return null;
+  }
+
+  return (
+    <Badge
+      overrides={overrides.Badge}
+      content={`Duration: ${duration}`}
+      shape="rectangle"
+      color={endTime ? 'primary' : 'accent'}
+      hierarchy={endTime ? 'secondary' : 'primary'}
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+import { type WorkflowExecutionCloseStatus } from '@/__generated__/proto-ts/uber/cadence/api/v1/WorkflowExecutionCloseStatus';
+
+export type Props = {
+  startTime: Date | string | number;
+  closeTime: Date | string | number | null | undefined;
+  workflowIsArchived: boolean;
+  workflowCloseStatus: WorkflowExecutionCloseStatus | null | undefined;
+  eventsCount: number;
+  hasMissingEvents: boolean;
+  workflowCloseTime: Date | string | number | null | undefined;
+};