Improve attempt metrics when in a warm start, and pass the STYLE_VARIANT for a warm or cold start on attempt spans

Author: ericallam

apps/webapp/app/components/run/RunTimeline.tsx

@@ -11,6 +11,7 @@ import { DateTime, DateTimeAccurate } from "../primitives/DateTime";
 import { LiveTimer } from "../runs/v3/LiveTimer";
 import tileBgPath from "~/assets/images/[email protected]";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
+import { getHelpTextForEvent, TimelineSpanEvent } from "~/utils/timelineSpanEvents";
 
 // Types for the RunTimeline component
 export type TimelineEventState = "complete" | "error" | "inprogress" | "delayed";
@@ -674,196 +675,3 @@ export function SpanTimeline({
     </>
   );
 }
-
-export type TimelineSpanEvent = {
-  name: string;
-  offset: number;
-  timestamp: Date;
-  duration?: number;
-  helpText?: string;
-  markerVariant: TimelineEventVariant;
-  lineVariant: TimelineLineVariant;
-};
-
-export function createTimelineSpanEventsFromSpanEvents(
-  spanEvents: SpanEvent[],
-  isAdmin: boolean,
-  relativeStartTime?: number
-): Array<TimelineSpanEvent> {
-  // Rest of function remains the same
-  if (!spanEvents) {
-    return [];
-  }
-
-  const matchingSpanEvents = spanEvents.filter((spanEvent) =>
-    spanEvent.name.startsWith("trigger.dev/")
-  );
-
-  if (matchingSpanEvents.length === 0) {
-    return [];
-  }
-
-  const sortedSpanEvents = [...matchingSpanEvents].sort((a, b) => {
-    if (a.time === b.time) {
-      return a.name.localeCompare(b.name);
-    }
-
-    const aTime = typeof a.time === "string" ? new Date(a.time) : a.time;
-    const bTime = typeof b.time === "string" ? new Date(b.time) : b.time;
-
-    return aTime.getTime() - bTime.getTime();
-  });
-
-  const visibleSpanEvents = sortedSpanEvents.filter(
-    (spanEvent) =>
-      isAdmin ||
-      !getAdminOnlyForEvent(
-        "event" in spanEvent.properties && typeof spanEvent.properties.event === "string"
-          ? spanEvent.properties.event
-          : spanEvent.name
-      )
-  );
-
-  if (visibleSpanEvents.length === 0) {
-    return [];
-  }
-
-  const firstEventTime =
-    typeof visibleSpanEvents[0].time === "string"
-      ? new Date(visibleSpanEvents[0].time)
-      : visibleSpanEvents[0].time;
-
-  const $relativeStartTime = relativeStartTime ?? firstEventTime.getTime();
-
-  const events = visibleSpanEvents.map((spanEvent, index) => {
-    const timestamp =
-      typeof spanEvent.time === "string" ? new Date(spanEvent.time) : spanEvent.time;
-
-    const offset = millisecondsToNanoseconds(timestamp.getTime() - $relativeStartTime);
-
-    const duration =
-      "duration" in spanEvent.properties && typeof spanEvent.properties.duration === "number"
-        ? spanEvent.properties.duration
-        : undefined;
-
-    const name =
-      "event" in spanEvent.properties && typeof spanEvent.properties.event === "string"
-        ? spanEvent.properties.event
-        : spanEvent.name;
-
-    let markerVariant: TimelineEventVariant = "dot-hollow";
-
-    if (index === 0) {
-      markerVariant = "start-cap";
-    }
-
-    return {
-      name: getFriendlyNameForEvent(name),
-      offset,
-      timestamp,
-      duration,
-      properties: spanEvent.properties,
-      helpText: getHelpTextForEvent(name),
-      markerVariant,
-      lineVariant: "light" as const,
-    };
-  });
-
-  // Now sort by offset, ascending
-  events.sort((a, b) => a.offset - b.offset);
-
-  return events;
-}
-
-function getFriendlyNameForEvent(event: string): string {
-  switch (event) {
-    case "dequeue": {
-      return "Dequeued";
-    }
-    case "fork": {
-      return "Launched";
-    }
-    case "create_attempt": {
-      return "Attempt created";
-    }
-    case "import": {
-      return "Imported task file";
-    }
-    case "lazy_payload": {
-      return "Lazy attempt initialized";
-    }
-    case "pod_scheduled": {
-      return "Pod scheduled";
-    }
-    default: {
-      return event;
-    }
-  }
-}
-
-function getAdminOnlyForEvent(event: string): boolean {
-  switch (event) {
-    case "dequeue": {
-      return false;
-    }
-    case "fork": {
-      return false;
-    }
-    case "create_attempt": {
-      return true;
-    }
-    case "import": {
-      return true;
-    }
-    case "lazy_payload": {
-      return true;
-    }
-    case "pod_scheduled": {
-      return true;
-    }
-    default: {
-      return true;
-    }
-  }
-}
-
-function getHelpTextForEvent(event: string): string | undefined {
-  switch (event) {
-    case "dequeue": {
-      return "The run was dequeued from the queue";
-    }
-    case "fork": {
-      return "The process was created to run the task";
-    }
-    case "create_attempt": {
-      return "An attempt was created for the run";
-    }
-    case "import": {
-      return "A task file was imported";
-    }
-    case "lazy_payload": {
-      return "The payload was initialized lazily";
-    }
-    case "pod_scheduled": {
-      return "The Kubernetes pod was scheduled to run";
-    }
-    case "Triggered": {
-      return "The run was triggered";
-    }
-    case "Dequeued": {
-      return "The run was dequeued from the queue";
-    }
-    case "Started": {
-      return "The run began executing";
-    }
-    case "Finished": {
-      return "The run completed execution";
-    }
-    case "Expired": {
-      return "The run expired before it could be started";
-    }
-    default: {
-      return undefined;
-    }
-  }
-}

apps/webapp/app/presenters/v3/RunPresenter.server.ts

@@ -1,8 +1,7 @@
 import { millisecondsToNanoseconds } from "@trigger.dev/core/v3";
 import { createTreeFromFlatItems, flattenTree } from "~/components/primitives/TreeView/TreeView";
-import { createTimelineSpanEventsFromSpanEvents } from "~/components/run/RunTimeline";
 import { prisma, PrismaClient } from "~/db.server";
-import { redirectWithErrorMessage } from "~/models/message.server";
+import { createTimelineSpanEventsFromSpanEvents } from "~/utils/timelineSpanEvents";
 import { getUsername } from "~/utils/username";
 import { eventRepository } from "~/v3/eventRepository.server";
 import { getTaskEventStoreTableForRun } from "~/v3/taskEventStore.server";

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -36,12 +36,7 @@ import {
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextLink } from "~/components/primitives/TextLink";
 import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
-import {
-  createTimelineSpanEventsFromSpanEvents,
-  RunTimeline,
-  RunTimelineEvent,
-  SpanTimeline,
-} from "~/components/run/RunTimeline";
+import { RunTimeline, RunTimelineEvent, SpanTimeline } from "~/components/run/RunTimeline";
 import { RunIcon } from "~/components/runs/v3/RunIcon";
 import { RunTag } from "~/components/runs/v3/RunTag";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
@@ -76,6 +71,7 @@ import { useEnvironment } from "~/hooks/useEnvironment";
 import { WaitpointStatusCombo } from "~/components/runs/v3/WaitpointStatus";
 import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
 import { WaitpointDetailTable } from "~/components/runs/v3/WaitpointDetails";
+import { createTimelineSpanEventsFromSpanEvents } from "~/utils/timelineSpanEvents";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { projectParam, organizationSlug, envParam, runParam, spanParam } =