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

Author: ericallam

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);