Feat: Improved run start timeline visibility (#1732)

* Record cold start and execution metrics on attempt executions. Add cold start metrics as span events on attempt spans and display them in the run dashboard

* Add deployed tasks run timeline metrics

* Add Dequeued event to run timeline and cleanup the run timeline code

* Adds variants to storybook

* WIP adding new span styles

* Added offset progress bar animation

* More storybook states

* Adds support for the full vertical span to show the same state

* Adds error state to timelineLine

* Added additional state

* Added more line styling

* Added progress state to dequeued

* Added another state to storybook

* Fixed classname error

* Updated styles for the span timeline points

* Fixes alignment of timeline follow cursor indicator

* Adds help text tooltip to timeline span type titles

* Fixes type error

* Tweaked wording of tooltips

* Fixed type error (check this)

* Moved isAdmin to a higher level

* removed unused admin props

* Removed unused Admin filter

* Fixed border styling

* made the opacity of the timeline states 30% less

* Undo type cast

* Added a diminished style that’s used for spans (grey progress bar)

* Adds new storybook state

* Fixed timeline state

* Removed state if span isn’t the first

* Changed the timestamp span icon

---------

Co-authored-by: James Ritchie <james@trigger.dev>

Author: ericallam

apps/coordinator/src/index.ts

@@ -663,9 +663,25 @@ class TaskCoordinator {
 
             await chaosMonkey.call();
 
+            const lazyPayload = {
+              ...lazyAttempt.lazyPayload,
+              metrics: [
+                ...(message.startTime
+                  ? [
+                      {
+                        name: "start",
+                        event: "lazy_payload",
+                        timestamp: message.startTime,
+                        duration: Date.now() - message.startTime,
+                      },
+                    ]
+                  : []),
+              ],
+            };
+
             socket.emit("EXECUTE_TASK_RUN_LAZY_ATTEMPT", {
               version: "v1",
-              lazyPayload: lazyAttempt.lazyPayload,
+              lazyPayload,
             });
           } catch (error) {
             if (error instanceof ChaosMonkey.Error) {

apps/docker-provider/src/index.ts

@@ -122,14 +122,18 @@ class DockerTaskOperations implements TaskOperations {
       `--env=POD_NAME=${containerName}`,
       `--env=COORDINATOR_HOST=${COORDINATOR_HOST}`,
       `--env=COORDINATOR_PORT=${COORDINATOR_PORT}`,
-      `--env=SCHEDULED_AT_MS=${Date.now()}`,
+      `--env=TRIGGER_POD_SCHEDULED_AT_MS=${Date.now()}`,
       `--name=${containerName}`,
     ];
 
     if (process.env.ENFORCE_MACHINE_PRESETS) {
       runArgs.push(`--cpus=${opts.machine.cpu}`, `--memory=${opts.machine.memory}G`);
     }
 
+    if (opts.dequeuedAt) {
+      runArgs.push(`--env=TRIGGER_RUN_DEQUEUED_AT_MS=${opts.dequeuedAt}`);
+    }
+
     runArgs.push(`${opts.image}`);
 
     try {

apps/kubernetes-provider/src/index.ts

@@ -202,6 +202,9 @@ class KubernetesTaskOperations implements TaskOperations {
                   name: "TRIGGER_RUN_ID",
                   value: opts.runId,
                 },
+                ...(opts.dequeuedAt
+                  ? [{ name: "TRIGGER_RUN_DEQUEUED_AT_MS", value: String(opts.dequeuedAt) }]
+                  : []),
               ],
               volumeMounts: [
                 {
@@ -518,7 +521,7 @@ class KubernetesTaskOperations implements TaskOperations {
         },
       },
       {
-        name: "SCHEDULED_AT_MS",
+        name: "TRIGGER_POD_SCHEDULED_AT_MS",
         value: Date.now().toString(),
       },
       ...this.#coordinatorEnvVars,

apps/webapp/app/components/primitives/Badge.tsx

@@ -7,7 +7,7 @@ const variants = {
   small:
     "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap",
   "extra-small":
-    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
+    "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 tracking-wide text-xxs bg-background-bright text-blue-500 whitespace-nowrap",
   outline:
     "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap",
   "outline-rounded":

apps/webapp/app/components/primitives/DateTime.tsx

@@ -7,6 +7,7 @@ type DateTimeProps = {
   includeSeconds?: boolean;
   includeTime?: boolean;
   showTimezone?: boolean;
+  previousDate?: Date | string | null; // Add optional previous date for comparison
 };
 
 export const DateTime = ({
@@ -70,20 +71,116 @@ export function formatDateTime(
   }).format(date);
 }
 
-export const DateTimeAccurate = ({ date, timeZone = "UTC" }: DateTimeProps) => {
+// New component that only shows date when it changes
+export const SmartDateTime = ({ date, previousDate = null, timeZone = "UTC" }: DateTimeProps) => {
   const locales = useLocales();
-
   const realDate = typeof date === "string" ? new Date(date) : date;
+  const realPrevDate = previousDate
+    ? typeof previousDate === "string"
+      ? new Date(previousDate)
+      : previousDate
+    : null;
+
+  // Initial formatted values
+  const initialTimeOnly = formatTimeOnly(realDate, timeZone, locales);
+  const initialWithDate = formatSmartDateTime(realDate, timeZone, locales);
+
+  // State for the formatted time
+  const [formattedDateTime, setFormattedDateTime] = useState<string>(
+    realPrevDate && isSameDay(realDate, realPrevDate) ? initialTimeOnly : initialWithDate
+  );
+
+  useEffect(() => {
+    const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
+    const userTimeZone = resolvedOptions.timeZone;
+
+    // Check if we should show the date
+    const showDatePart = !realPrevDate || !isSameDay(realDate, realPrevDate);
+
+    // Format with appropriate function
+    setFormattedDateTime(
+      showDatePart
+        ? formatSmartDateTime(realDate, userTimeZone, locales)
+        : formatTimeOnly(realDate, userTimeZone, locales)
+    );
+  }, [locales, realDate, realPrevDate]);
+
+  return <Fragment>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</Fragment>;
+};
+
+// Helper function to check if two dates are on the same day
+function isSameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+// Format with date and time
+function formatSmartDateTime(date: Date, timeZone: string, locales: string[]): string {
+  return new Intl.DateTimeFormat(locales, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZone,
+    // @ts-ignore fractionalSecondDigits works in most modern browsers
+    fractionalSecondDigits: 3,
+  }).format(date);
+}
+
+// Format time only
+function formatTimeOnly(date: Date, timeZone: string, locales: string[]): string {
+  return new Intl.DateTimeFormat(locales, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZone,
+    // @ts-ignore fractionalSecondDigits works in most modern browsers
+    fractionalSecondDigits: 3,
+  }).format(date);
+}
 
-  const initialFormattedDateTime = formatDateTimeAccurate(realDate, timeZone, locales);
+export const DateTimeAccurate = ({
+  date,
+  timeZone = "UTC",
+  previousDate = null,
+}: DateTimeProps) => {
+  const locales = useLocales();
+  const realDate = typeof date === "string" ? new Date(date) : date;
+  const realPrevDate = previousDate
+    ? typeof previousDate === "string"
+      ? new Date(previousDate)
+      : previousDate
+    : null;
+
+  // Use the new Smart formatting if previousDate is provided
+  const initialFormattedDateTime = realPrevDate
+    ? isSameDay(realDate, realPrevDate)
+      ? formatTimeOnly(realDate, timeZone, locales)
+      : formatDateTimeAccurate(realDate, timeZone, locales)
+    : formatDateTimeAccurate(realDate, timeZone, locales);
 
   const [formattedDateTime, setFormattedDateTime] = useState<string>(initialFormattedDateTime);
 
   useEffect(() => {
     const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
-
-    setFormattedDateTime(formatDateTimeAccurate(realDate, resolvedOptions.timeZone, locales));
-  }, [locales, realDate]);
+    const userTimeZone = resolvedOptions.timeZone;
+
+    if (realPrevDate) {
+      // Smart formatting based on whether date changed
+      setFormattedDateTime(
+        isSameDay(realDate, realPrevDate)
+          ? formatTimeOnly(realDate, userTimeZone, locales)
+          : formatDateTimeAccurate(realDate, userTimeZone, locales)
+      );
+    } else {
+      // Default behavior when no previous date
+      setFormattedDateTime(formatDateTimeAccurate(realDate, userTimeZone, locales));
+    }
+  }, [locales, realDate, realPrevDate]);
 
   return <Fragment>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</Fragment>;
 };
@@ -96,7 +193,34 @@ function formatDateTimeAccurate(date: Date, timeZone: string, locales: string[])
     minute: "numeric",
     second: "numeric",
     timeZone,
-    // @ts-ignore this works in 92.5% of browsers https://caniuse.com/mdn-javascript_builtins_intl_datetimeformat_datetimeformat_options_parameter_options_fractionalseconddigits_parameter
+    // @ts-ignore fractionalSecondDigits works in most modern browsers
+    fractionalSecondDigits: 3,
+  }).format(date);
+
+  return formattedDateTime;
+}
+
+export const DateTimeShort = ({ date, timeZone = "UTC" }: DateTimeProps) => {
+  const locales = useLocales();
+  const realDate = typeof date === "string" ? new Date(date) : date;
+  const initialFormattedDateTime = formatDateTimeShort(realDate, timeZone, locales);
+  const [formattedDateTime, setFormattedDateTime] = useState<string>(initialFormattedDateTime);
+
+  useEffect(() => {
+    const resolvedOptions = Intl.DateTimeFormat().resolvedOptions();
+    setFormattedDateTime(formatDateTimeShort(realDate, resolvedOptions.timeZone, locales));
+  }, [locales, realDate]);
+
+  return <Fragment>{formattedDateTime.replace(/\s/g, String.fromCharCode(32))}</Fragment>;
+};
+
+function formatDateTimeShort(date: Date, timeZone: string, locales: string[]): string {
+  const formattedDateTime = new Intl.DateTimeFormat(locales, {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZone,
+    // @ts-ignore fractionalSecondDigits works in most modern browsers
     fractionalSecondDigits: 3,
   }).format(date);