[UI v2] feat: Adds StartTimeCell to flow run data table

ui-v2/src/components/flow-runs/data-table/data-table.tsx

@@ -20,6 +20,7 @@ import { DeploymentCell } from "./deployment-cell";
 import { DurationCell } from "./duration-cell";
 import { NameCell } from "./name-cell";
 import { ParametersCell } from "./parameters-cell";
+import { StartTimeCell } from "./start-time-cell";
 
 export type FlowRunsDataTableRow = FlowRun & {
 	flow: Flow;
@@ -50,6 +51,11 @@ const createColumns = ({
 				return <StateBadge type={state.type} name={state.name} />;
 			},
 		}),
+		columnHelper.display({
+			id: "startTime",
+			header: "Start Time",
+			cell: ({ row }) => <StartTimeCell flowRun={row.original} />,
+		}),
 		columnHelper.accessor("parameters", {
 			id: "parameters",
 			header: "Parameters",

ui-v2/src/components/flow-runs/data-table/duration-cell.tsx

@@ -2,14 +2,14 @@ import {
 	type FlowRunWithDeploymentAndFlow,
 	type FlowRunWithFlow,
 } from "@/api/flow-runs";
+import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icons";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Typography } from "@/components/ui/typography";
 import humanizeDuration from "humanize-duration";
 
 type DurationCellProps = {
@@ -30,12 +30,12 @@ export const DurationCell = ({ flowRun }: DurationCellProps) => {
 		<TooltipProvider>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<div className="flex items-center">
-						<div className="flex items-center gap-1">
+					<Button variant="ghost">
+						<div className="flex gap-2 items-center text-sm font-mono">
 							<Icon id="Clock" className="h-4 w-4" />
-							<Typography variant="bodySmall">{durationLabel}</Typography>
+							{durationLabel}
 						</div>
-					</div>
+					</Button>
 				</TooltipTrigger>
 				<TooltipContent>{durationTooltip}</TooltipContent>
 			</Tooltip>

ui-v2/src/components/flow-runs/data-table/start-time-cell.tsx

@@ -0,0 +1,56 @@
+import {
+	type FlowRun,
+	type FlowRunWithDeploymentAndFlow,
+} from "@/api/flow-runs";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icons";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { formatDate } from "@/utils/date";
+import humanizeDuration from "humanize-duration";
+
+type StartTimeCellProps = {
+	flowRun: FlowRun | FlowRunWithDeploymentAndFlow;
+};
+
+const getDelta = (estimated_start_time_delta: null | number) => {
+	if (!estimated_start_time_delta || estimated_start_time_delta <= 60) {
+		return "";
+	}
+	return `(${humanizeDuration(estimated_start_time_delta, { maxDecimalPoints: 0 })} late)`;
+};
+
+export const StartTimeCell = ({ flowRun }: StartTimeCellProps) => {
+	const { start_time, expected_start_time, estimated_start_time_delta } =
+		flowRun;
+	let text: string | undefined;
+	let tooltipText: string | undefined;
+	if (start_time) {
+		text = `${formatDate(start_time, "dateTimeNumeric")} ${getDelta(estimated_start_time_delta)}`;
+		tooltipText = new Date(start_time).toString();
+	} else if (expected_start_time) {
+		text = `Scheduled for ${formatDate(expected_start_time, "dateTimeNumeric")} ${getDelta(estimated_start_time_delta)}`;
+		tooltipText = new Date(expected_start_time).toString();
+	}
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild disabled={!text}>
+					<Button
+						variant="ghost"
+						className="text-sm font-mono flex gap-2 items-center"
+					>
+						<Icon id="Calendar" className="h-4 w-4" />
+						{text ?? "No start time"}
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+};