Show pending events in history timeline (#813)

* Show pending events in history timeline

* rename variables

* change function to arrow function

* Allow selecting items in Workflow History Timeline (#812)

Add onClickItem handler to Timeline that gets called when the VisJS Timeline registers a click on an item
Add "id" number to TimelineItem
Set selected event in query params and scroll to it when an item is selected in the timeline
Refactor Workflow Timeline Styles to share common styles across different items and states
Added rounding to non-timer items
Removed rounding from timer items

* fix selection type

* fix ling

* fix typos

---------

Co-authored-by: Adhitya Mamallan <[email protected]>

Author: Assem-Uber

src/utils/data-formatters/format-pending-workflow-history-event/__tests__/index.test.ts

@@ -0,0 +1,35 @@
+import { ZodError } from 'zod';
+
+import logger from '@/utils/logger';
+import {
+  pendingActivityTaskStartEvent,
+  pendingDecisionTaskScheduleEvent,
+} from '@/views/workflow-history/__fixtures__/workflow-history-pending-events';
+
+import formatPendingWorkflowHistoryEvent from '..';
+
+jest.mock('@/utils/logger');
+
+const pendingEvents = [
+  pendingActivityTaskStartEvent,
+  pendingDecisionTaskScheduleEvent,
+];
+describe('formatWorkflowHistoryEvent', () => {
+  pendingEvents.forEach((event) => {
+    it(`should format workflow ${event.attributes} to match snapshot`, () => {
+      expect(formatPendingWorkflowHistoryEvent(event)).toMatchSnapshot();
+    });
+  });
+  it(`should log error if parsing failed`, () => {
+    expect(
+      //@ts-expect-error pass event with missing fields
+      formatPendingWorkflowHistoryEvent({
+        attributes: 'pendingActivityTaskStartEventAttributes',
+      })
+    ).toBe(null);
+    expect(logger.warn).toHaveBeenCalledWith(
+      { cause: expect.any(ZodError) },
+      'Failed to format workflow pending event'
+    );
+  });
+});

src/utils/data-formatters/format-pending-workflow-history-event/__tests__/index.test.ts.snapshot

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`formatWorkflowHistoryEvent should format workflow pendingActivityTaskStartEventAttributes to match snapshot 1`] = `
+{
+  "activityId": "0",
+  "activityType": {
+    "name": "activity.cron.Start",
+  },
+  "attempt": 1,
+  "eventId": null,
+  "eventTime": 2024-09-07T22:16:10.599Z,
+  "eventType": "PendingActivityTaskStart",
+  "expirationTime": 1970-01-01T00:06:00.000Z,
+  "heartbeatDetails": [
+    "1725747370575409843",
+    "gadence-canary-xdc",
+    "workflow.sanity",
+  ],
+  "lastFailure": {
+    "details": "",
+    "reason": "",
+  },
+  "lastFailureDetails": null,
+  "lastFailureReason": "",
+  "lastHeartbeatTime": null,
+  "lastStartedTime": null,
+  "lastWorkerIdentity": "",
+  "maximumAttempts": 10,
+  "scheduleId": 7,
+  "scheduledTime": 1970-01-01T00:03:00.000Z,
+  "startedWorkerIdentity": "",
+}
+`;
+
+exports[`formatWorkflowHistoryEvent should format workflow pendingDecisionTaskScheduleEventAttributes to match snapshot 1`] = `
+{
+  "attempt": 1,
+  "eventId": 2,
+  "eventTime": 2024-09-07T22:16:10.599Z,
+  "eventType": "PendingDecisionTaskSchedule",
+  "originalScheduledTime": null,
+  "scheduleId": 7,
+  "scheduledTime": 1970-01-01T00:03:00.000Z,
+  "startedTime": null,
+}
+`;

src/utils/data-formatters/format-pending-workflow-history-event/format-pending-activity-start-event.ts

@@ -0,0 +1,29 @@
+import omit from 'lodash/omit';
+
+import { type PendingActivityTaskStartEvent } from '@/views/workflow-history/workflow-history.types';
+
+import formatFailureDetails from '../format-failure-details';
+import formatPayload from '../format-payload';
+import formatTimestampToDatetime from '../format-timestamp-to-datetime';
+
+export default function formatPendingActivityTaskStartEvent({
+  pendingActivityTaskStartEventAttributes: pendingInfo,
+  eventTime,
+  eventId,
+}: PendingActivityTaskStartEvent) {
+  return {
+    ...omit(pendingInfo, 'state'),
+    eventId,
+    eventTime: formatTimestampToDatetime(eventTime),
+    eventType: 'PendingActivityTaskStart',
+
+    scheduleId: parseInt(pendingInfo.scheduleId),
+    lastHeartbeatTime: formatTimestampToDatetime(pendingInfo.lastHeartbeatTime),
+    lastStartedTime: formatTimestampToDatetime(pendingInfo.lastStartedTime),
+    scheduledTime: formatTimestampToDatetime(pendingInfo.scheduledTime),
+    expirationTime: formatTimestampToDatetime(pendingInfo.expirationTime),
+    heartbeatDetails: formatPayload(pendingInfo.heartbeatDetails),
+    lastFailureDetails: formatFailureDetails(pendingInfo.lastFailure),
+    lastFailureReason: pendingInfo.lastFailure?.reason,
+  };
+}

src/utils/data-formatters/format-pending-workflow-history-event/format-pending-decision-schedule-event.ts

@@ -0,0 +1,27 @@
+import omit from 'lodash/omit';
+
+import { type PendingDecisionTaskScheduleEvent } from '@/views/workflow-history/workflow-history.types';
+
+import formatTimestampToDatetime from '../format-timestamp-to-datetime';
+
+const formatPendingDecisionTaskScheduleEvent = ({
+  pendingDecisionTaskScheduleEventAttributes: pendingInfo,
+  eventTime,
+  eventId,
+}: PendingDecisionTaskScheduleEvent) => {
+  return {
+    ...omit(pendingInfo, 'state'),
+    eventId: parseInt(eventId),
+    eventType: 'PendingDecisionTaskSchedule',
+    eventTime: formatTimestampToDatetime(eventTime),
+
+    scheduleId: parseInt(pendingInfo.scheduleId),
+    scheduledTime: formatTimestampToDatetime(pendingInfo.scheduledTime),
+    startedTime: formatTimestampToDatetime(pendingInfo.startedTime),
+    originalScheduledTime: formatTimestampToDatetime(
+      pendingInfo.originalScheduledTime
+    ),
+  };
+};
+
+export default formatPendingDecisionTaskScheduleEvent;

src/utils/data-formatters/format-pending-workflow-history-event/index.ts

@@ -0,0 +1,22 @@
+import logger from '@/utils/logger';
+import { type PendingHistoryEvent } from '@/views/workflow-history/workflow-history.types';
+
+import {
+  getFormatPendingEventSchema,
+  type FormattedHistoryPendingEvent,
+} from '../schema/format-history-pending-event-schema';
+
+export default function formatPendingWorkflowHistoryEvent(
+  event: PendingHistoryEvent
+): FormattedHistoryPendingEvent | null {
+  const schema = getFormatPendingEventSchema(event);
+  if (schema) {
+    const { data, error } = schema.safeParse(event);
+    if (error) {
+      logger.warn({ cause: error }, 'Failed to format workflow pending event');
+      return null;
+    }
+    return data ?? null;
+  }
+  return null;
+}

src/utils/data-formatters/schema/format-history-event-schema.ts

@@ -272,7 +272,7 @@ export const formatUpsertWorkflowSearchAttributesEventSchema =
 function unExistingEventType(_: never) {
   return null;
 }
-export const getFormatHistoryEventSchema = function (event: HistoryEvent) {
+export const getFormatHistoryEventSchema = (event: HistoryEvent) => {
   switch (event.attributes) {
     case 'workflowExecutionStartedEventAttributes':
       return formatWorkflowExecutionStartedEventSchema;
@@ -378,7 +378,7 @@ export const getFormatHistoryEventSchema = function (event: HistoryEvent) {
       return formatUpsertWorkflowSearchAttributesEventSchema;
 
     default:
-      return unExistingEventType(event.attributes); // should not be unreachable, used to show a type error if not all attributes cases are covered
+      return unExistingEventType(event.attributes); // used to show a type error if any attributes cases are covered
   }
 };
 

src/utils/data-formatters/schema/format-history-pending-event-schema.ts

@@ -0,0 +1,44 @@
+import { type z } from 'zod';
+
+import { type PendingHistoryEvent } from '@/views/workflow-history/workflow-history.types';
+
+import formatPendingActivityTaskStartEvent from '../format-pending-workflow-history-event/format-pending-activity-start-event';
+import formatPendingDecisionTaskScheduleEvent from '../format-pending-workflow-history-event/format-pending-decision-schedule-event';
+
+import {
+  pendingActivityTaskStartSchema,
+  pendingDecisionTaskScheduleSchema,
+} from './pending-history-event-schema';
+
+export const formatPendingActivityTaskStartEventSchema =
+  pendingActivityTaskStartSchema.transform(formatPendingActivityTaskStartEvent);
+
+export const formatPendingDecisionTaskScheduleEventSchema =
+  pendingDecisionTaskScheduleSchema.transform(
+    formatPendingDecisionTaskScheduleEvent
+  );
+
+function unExistingEventType(_: never) {
+  return null;
+}
+export const getFormatPendingEventSchema = (event: PendingHistoryEvent) => {
+  switch (event.attributes) {
+    case 'pendingActivityTaskStartEventAttributes':
+      return formatPendingActivityTaskStartEventSchema;
+    case 'pendingDecisionTaskScheduleEventAttributes':
+      return formatPendingDecisionTaskScheduleEventSchema;
+    default:
+      return unExistingEventType(event); // used to show a type error if any pending event attributes cases are not covered
+  }
+};
+
+export type FormattedPendingActivityTaskStartEvent = z.infer<
+  typeof formatPendingActivityTaskStartEventSchema
+>;
+export type FormattedPendingDecisionTaskScheduleEvent = z.infer<
+  typeof formatPendingDecisionTaskScheduleEventSchema
+>;
+
+export type FormattedHistoryPendingEvent =
+  | FormattedPendingActivityTaskStartEvent
+  | FormattedPendingDecisionTaskScheduleEvent;

src/utils/data-formatters/schema/pending-history-event-schema.ts

@@ -0,0 +1,59 @@
+import { z } from 'zod';
+
+import { PendingActivityState } from '@/__generated__/proto-ts/uber/cadence/api/v1/PendingActivityState';
+import { PendingDecisionState } from '@/__generated__/proto-ts/uber/cadence/api/v1/PendingDecisionState';
+
+const timestampSchema = z.object({
+  seconds: z.string(),
+  nanos: z.number(),
+});
+
+const payloadSchema = z.object({
+  data: z.string(),
+});
+
+const activityTypeSchema = z.object({
+  name: z.string(),
+});
+
+const failureSchema = z.object({
+  reason: z.string(),
+  details: z.string(),
+});
+
+export const pendingActivityTaskStartSchema = z.object({
+  attributes: z.literal('pendingActivityTaskStartEventAttributes'),
+  eventTime: timestampSchema.nullable(),
+  eventId: z.null(),
+  computedEventId: z.string(),
+  pendingActivityTaskStartEventAttributes: z.object({
+    activityId: z.string(),
+    activityType: activityTypeSchema.nullable(),
+    state: z.literal(PendingActivityState.PENDING_ACTIVITY_STATE_STARTED),
+    heartbeatDetails: payloadSchema.nullable(),
+    lastHeartbeatTime: timestampSchema.nullable(),
+    lastStartedTime: timestampSchema.nullable(),
+    scheduledTime: timestampSchema.nullable(),
+    expirationTime: timestampSchema.nullable(),
+    attempt: z.number(),
+    maximumAttempts: z.number(),
+    lastFailure: failureSchema.nullable(),
+    lastWorkerIdentity: z.string(),
+    startedWorkerIdentity: z.string(),
+    scheduleId: z.string(),
+  }),
+});
+
+export const pendingDecisionTaskScheduleSchema = z.object({
+  attributes: z.literal('pendingDecisionTaskScheduleEventAttributes'),
+  eventTime: timestampSchema.nullable(),
+  eventId: z.string(),
+  pendingDecisionTaskScheduleEventAttributes: z.object({
+    state: z.literal(PendingDecisionState.PENDING_DECISION_STATE_SCHEDULED),
+    scheduledTime: timestampSchema.nullable(),
+    startedTime: timestampSchema.nullable(),
+    attempt: z.number(),
+    originalScheduledTime: timestampSchema.nullable(),
+    scheduleId: z.string(),
+  }),
+});

src/views/workflow-history/__fixtures__/all-workflow-event-types-attributes.ts

@@ -1,11 +1,23 @@
 import { type HistoryEvent } from '@/__generated__/proto-ts/uber/cadence/api/v1/HistoryEvent';
 
+import { type ExtendedHistoryEvent } from '../workflow-history.types';
+
 // validates that each all attributes exists in the provided array
 const arrayOfAllAttrs = <T extends HistoryEvent['attributes'][]>(
   array: T &
     ([HistoryEvent['attributes']] extends [T[number]] ? unknown : 'Invalid')
 ) => array;
 
+// validates that each all attributes exists in the provided array
+const arrayOfAllAttrsExtended = <
+  T extends ExtendedHistoryEvent['attributes'][],
+>(
+  array: T &
+    ([ExtendedHistoryEvent['attributes']] extends [T[number]]
+      ? unknown
+      : 'Invalid')
+) => array;
+
 const allAttrsArr = arrayOfAllAttrs([
   'activityTaskScheduledEventAttributes',
   'activityTaskStartedEventAttributes',
@@ -51,5 +63,16 @@ const allAttrsArr = arrayOfAllAttrs([
   'upsertWorkflowSearchAttributesEventAttributes',
 ]);
 
+const allAttrsArrExtended = arrayOfAllAttrsExtended([
+  ...allAttrsArr,
+  'pendingActivityTaskStartEventAttributes',
+  'pendingDecisionTaskScheduleEventAttributes',
+]);
+
 export const allWorkflowEventTypesAttrs: Pick<HistoryEvent, 'attributes'>[] =
   allAttrsArr.map((v) => ({ attributes: v }));
+
+export const allWorkflowEventTypesAttrsExtended: Pick<
+  ExtendedHistoryEvent,
+  'attributes'
+>[] = allAttrsArrExtended.map((v) => ({ attributes: v }));

src/views/workflow-history/__fixtures__/all-workflow-event-types.ts

@@ -23,6 +23,10 @@ import {
   startDecisionTaskEvent,
   timeoutDecisionTaskEvent,
 } from './workflow-history-decision-events';
+import {
+  pendingDecisionTaskScheduleEvent,
+  pendingActivityTaskStartEvent,
+} from './workflow-history-pending-events';
 import {
   initiateRequestCancelExternalWorkflowEvent,
   requestCancelExternalWorkflowEvent,
@@ -99,3 +103,9 @@ export const allWorkflowEvents = [
   timeoutWorkflowExecutionEvent,
   upsertWorkflowSearchAttributesEvent,
 ];
+
+export const allWorkflowEventsExtended = [
+  ...allWorkflowEvents,
+  pendingDecisionTaskScheduleEvent,
+  pendingActivityTaskStartEvent,
+];