History timeline (#801)

* Add vis-timeline

* Fix lockfile

* add timeline

* Add changes

* Add tests and update component

* Add tests

* Fix border styles and update tests

* fix lockfile

* Add test for timeline

* Move props to types file

* Resolve comments

* Fix tests

Author: adhityamamallan

src/components/timeline/timeline.tsx

@@ -0,0 +1,16 @@
+// @ts-expect-error: react-visjs-timeline does not have type declarations available
+import VisJSTimeline from 'react-visjs-timeline';
+
+import type { Props } from './timeline.types';
+
+export default function Timeline({ items, height = '400px' }: Props) {
+  return (
+    <VisJSTimeline
+      options={{
+        height,
+        verticalScroll: true,
+      }}
+      items={items}
+    />
+  );
+}

src/components/timeline/timeline.types.ts

@@ -0,0 +1,13 @@
+export type TimelineItem = {
+  start: Date;
+  end?: Date;
+  content: string;
+  title?: string;
+  type: 'box' | 'point' | 'range' | 'background';
+  className: string;
+};
+
+export type Props = {
+  items: Array<TimelineItem>;
+  height?: string;
+};

src/utils/datetime/parse-grpc-timestamp.ts

@@ -1,5 +1,6 @@
+import { type Duration } from '@/__generated__/proto-ts/google/protobuf/Duration';
 import type { Timestamp } from '@/__generated__/proto-ts/google/protobuf/Timestamp';
 
-export default function parseGrpcTimestamp(time: Timestamp): number {
+export default function parseGrpcTimestamp(time: Timestamp | Duration): number {
   return parseInt(time.seconds) * 1000 + time.nanos / 1000000;
 }

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

@@ -0,0 +1,42 @@
+import {
+  type TimerHistoryGroup,
+  type ActivityHistoryGroup,
+  type SingleEventHistoryGroup,
+} from '../workflow-history.types';
+
+import { completedActivityTaskEvents } from './workflow-history-activity-events';
+import { startWorkflowExecutionEvent } from './workflow-history-single-events';
+import { startTimerTaskEvent } from './workflow-history-timer-events';
+
+export const mockActivityEventGroup: ActivityHistoryGroup = {
+  label: 'Mock event',
+  groupType: 'Activity',
+  status: 'COMPLETED',
+  eventsMetadata: [],
+  hasMissingEvents: false,
+  timeMs: 1725747380000,
+  timeLabel: 'Mock time label',
+  events: completedActivityTaskEvents,
+};
+
+export const mockTimerEventGroup: TimerHistoryGroup = {
+  label: 'Mock event',
+  groupType: 'Timer',
+  status: 'COMPLETED',
+  eventsMetadata: [],
+  hasMissingEvents: false,
+  timeMs: 1725747380000,
+  timeLabel: 'Mock time label',
+  events: [startTimerTaskEvent],
+};
+
+export const mockSingleEventGroup: SingleEventHistoryGroup = {
+  label: 'Mock event',
+  groupType: 'Event',
+  status: 'COMPLETED',
+  eventsMetadata: [],
+  hasMissingEvents: false,
+  timeMs: 1725747380000,
+  timeLabel: 'Mock time label',
+  events: [startWorkflowExecutionEvent],
+};

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

@@ -7,6 +7,7 @@ import { act, render, screen, userEvent } from '@/test-utils/rtl';
 
 import { type Props as PageFiltersToggleProps } from '@/components/page-filters/page-filters-toggle/page-filters-toggle.types';
 import { type GetWorkflowHistoryResponse } from '@/route-handlers/get-workflow-history/get-workflow-history.types';
+import { describeWorkflowResponse } from '@/views/workflow-page/__fixtures__/describe-workflow-response';
 
 import { completedActivityTaskEvents } from '../__fixtures__/workflow-history-activity-events';
 import WorkflowHistory from '../workflow-history';
@@ -21,6 +22,11 @@ jest.mock(
   () => jest.fn(() => <div>Timeline group card</div>)
 );
 
+jest.mock(
+  '../workflow-history-timeline-chart/workflow-history-timeline-chart',
+  () => jest.fn(() => <div>Timeline chart</div>)
+);
+
 jest.mock(
   '../workflow-history-timeline-load-more/workflow-history-timeline-load-more',
   () => jest.fn(() => <div>Load more</div>)
@@ -76,6 +82,16 @@ describe('WorkflowHistory', () => {
     }
   });
 
+  it('throws an error if the workflow summary request fails', async () => {
+    try {
+      await act(() => setup({ summaryError: true }));
+    } catch (error) {
+      expect((error as Error)?.message).toBe(
+        'Failed to fetch workflow summary'
+      );
+    }
+  });
+
   it('should render the page initially with filters shown', async () => {
     setup({});
     expect(await screen.findByText('Filter Fields')).toBeInTheDocument();
@@ -89,9 +105,24 @@ describe('WorkflowHistory', () => {
 
     expect(screen.queryByText('Filter Fields')).not.toBeInTheDocument();
   });
+
+  it('should show timeline when the Timeline button is clicked', async () => {
+    const { user } = setup({});
+    const timelineButton = await screen.findByText('Timeline');
+
+    await user.click(timelineButton);
+
+    expect(screen.queryByText('Timeline chart')).toBeInTheDocument();
+  });
 });
 
-function setup({ error }: { error?: boolean }) {
+function setup({
+  error,
+  summaryError,
+}: {
+  error?: boolean;
+  summaryError?: boolean;
+}) {
   const user = userEvent.setup();
   const renderResult = render(
     <Suspense>
@@ -130,6 +161,22 @@ function setup({ error }: { error?: boolean }) {
                 } satisfies GetWorkflowHistoryResponse,
               }),
         },
+        {
+          path: '/api/domains/:domain/:cluster/workflows/:workflowId/:runId',
+          httpMethod: 'GET',
+          ...(summaryError
+            ? {
+                httpResolver: () => {
+                  return HttpResponse.json(
+                    { message: 'Failed to fetch workflow summary' },
+                    { status: 500 }
+                  );
+                },
+              }
+            : {
+                jsonResponse: describeWorkflowResponse,
+              }),
+        },
       ],
     },
     {

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

@@ -0,0 +1,71 @@
+import { render, screen, waitFor } from '@/test-utils/rtl';
+
+import {
+  mockActivityEventGroup,
+  mockTimerEventGroup,
+} from '../../__fixtures__/workflow-history-event-groups';
+import WorkflowHistoryTimelineChart from '../workflow-history-timeline-chart';
+
+jest.mock('@/components/timeline/timeline', () =>
+  jest.fn(() => <div>Mock timeline</div>)
+);
+
+jest.mock('../helpers/convert-event-group-to-timeline-item.ts', () =>
+  jest.fn().mockReturnValue({})
+);
+
+describe(WorkflowHistoryTimelineChart.name, () => {
+  it('renders correctly', async () => {
+    setup({});
+    expect(await screen.findByText('Mock timeline')).toBeInTheDocument();
+  });
+
+  it('renders in loading state if isLoading is true', async () => {
+    setup({ isLoading: true });
+    expect(await screen.findByText('Mock timeline')).toBeInTheDocument();
+    expect(await screen.findByText('Loading events')).toBeInTheDocument();
+  });
+
+  it('fetches more events if possible', async () => {
+    const { mockFetchMoreEvents } = setup({ hasMoreEvents: true });
+
+    await waitFor(() => {
+      expect(mockFetchMoreEvents).toHaveBeenCalled();
+    });
+  });
+
+  it('does not fetch more events if a fetch is already in progress', async () => {
+    const { mockFetchMoreEvents } = setup({
+      hasMoreEvents: true,
+      isFetchingMoreEvents: true,
+    });
+
+    expect(mockFetchMoreEvents).not.toHaveBeenCalled();
+  });
+});
+
+function setup({
+  isLoading = false,
+  hasMoreEvents = false,
+  isFetchingMoreEvents = false,
+}: {
+  isLoading?: boolean;
+  hasMoreEvents?: boolean;
+  isFetchingMoreEvents?: boolean;
+}) {
+  const mockFetchMoreEvents = jest.fn();
+  render(
+    <WorkflowHistoryTimelineChart
+      eventGroupsEntries={[
+        ['Group 1', mockActivityEventGroup],
+        ['Group 2', mockTimerEventGroup],
+      ]}
+      isLoading={isLoading}
+      hasMoreEvents={hasMoreEvents}
+      fetchMoreEvents={mockFetchMoreEvents}
+      isFetchingMoreEvents={isFetchingMoreEvents}
+    />
+  );
+
+  return { mockFetchMoreEvents };
+}

src/views/workflow-history/workflow-history-timeline-chart/helpers/__tests__/convert-event-group-to-timeline-item.test.ts

@@ -0,0 +1,63 @@
+import {
+  mockActivityEventGroup,
+  mockTimerEventGroup,
+} from '@/views/workflow-history/__fixtures__/workflow-history-event-groups';
+
+import convertEventGroupToTimelineItem from '../convert-event-group-to-timeline-item';
+
+jest.mock('../get-class-name-for-event-group', () =>
+  jest.fn(() => 'mock-class-name')
+);
+
+jest.useFakeTimers().setSystemTime(new Date('2024-09-10'));
+
+describe(convertEventGroupToTimelineItem.name, () => {
+  it('converts an event group to timeline chart item correctly', () => {
+    expect(
+      convertEventGroupToTimelineItem(mockActivityEventGroup, {} as any)
+    ).toEqual({
+      className: 'mock-class-name',
+      content: 'Mock event',
+      end: new Date('2024-09-07T22:16:20.000Z'),
+      start: new Date('2024-09-07T22:16:10.599Z'),
+      title: 'Mock event: Mock time label',
+      type: 'range',
+    });
+  });
+
+  it('returns end time as present when the event is ongoing or waiting', () => {
+    expect(
+      convertEventGroupToTimelineItem(
+        { ...mockActivityEventGroup, timeMs: null, status: 'ONGOING' },
+        {} as any
+      )
+    ).toEqual({
+      className: 'mock-class-name',
+      content: 'Mock event',
+      end: new Date('2024-09-10T00:00:00.000Z'),
+      start: new Date('2024-09-07T22:16:10.599Z'),
+      title: 'Mock event: Mock time label',
+      type: 'range',
+    });
+  });
+
+  it('returns end time as timer end time when the event is an ongoing timer', () => {
+    expect(
+      convertEventGroupToTimelineItem(
+        {
+          ...mockTimerEventGroup,
+          timeMs: null,
+          status: 'ONGOING',
+        },
+        {} as any
+      )
+    ).toEqual({
+      className: 'mock-class-name',
+      content: 'Mock event',
+      end: new Date('2024-09-07T22:32:55.632Z'),
+      start: new Date('2024-09-07T22:32:50.632Z'),
+      title: 'Mock event: Mock time label',
+      type: 'range',
+    });
+  });
+});