From 38aa2413bd373fb141105a44ec76b7add341716b Mon Sep 17 00:00:00 2001
From: Devin Villarosa <devinvillarosa92.business@gmail.com>
Date: Sun, 16 Feb 2025 12:40:46 -0800
Subject: [PATCH] wip

---
 .../flow-runs/data-table/duration-cell.tsx    | 29 +++++++++++++++++
 .../flow-runs/data-table/run-time-cell.tsx    | 32 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 ui-v2/src/components/flow-runs/data-table/duration-cell.tsx
 create mode 100644 ui-v2/src/components/flow-runs/data-table/run-time-cell.tsx

diff --git a/ui-v2/src/components/flow-runs/data-table/duration-cell.tsx b/ui-v2/src/components/flow-runs/data-table/duration-cell.tsx
new file mode 100644
index 000000000000..2b8d1cb890d3
--- /dev/null
+++ b/ui-v2/src/components/flow-runs/data-table/duration-cell.tsx
@@ -0,0 +1,29 @@
+import {
+	type FlowRunWithDeploymentAndFlow,
+	type FlowRunWithFlow,
+} from "@/api/flow-runs";
+import { Icon } from "@/components/ui/icons";
+import { Typography } from "@/components/ui/typography";
+import humanizeDuration from "humanize-duration";
+
+type DurationCellProps = {
+	flowRun: FlowRunWithFlow | FlowRunWithDeploymentAndFlow;
+};
+
+export const DurationCell = ({ flowRun }: DurationCellProps) => {
+	const { estimated_run_time, total_run_time } = flowRun;
+	const duration = estimated_run_time || total_run_time;
+	const durationLabel = humanizeDuration(duration, {
+		maxDecimalPoints: 3,
+		units: ["s"],
+	});
+
+	return (
+		<div className="flex items-center">
+			<div className="flex items-center gap-1">
+				<Icon id="Clock" className="h-4 w-4" />
+				<Typography variant="bodySmall">{durationLabel}</Typography>
+			</div>
+		</div>
+	);
+};
diff --git a/ui-v2/src/components/flow-runs/data-table/run-time-cell.tsx b/ui-v2/src/components/flow-runs/data-table/run-time-cell.tsx
new file mode 100644
index 000000000000..99509a3205e4
--- /dev/null
+++ b/ui-v2/src/components/flow-runs/data-table/run-time-cell.tsx
@@ -0,0 +1,32 @@
+import {
+	type FlowRun,
+	type FlowRunWithDeploymentAndFlow,
+} from "@/api/flow-runs";
+import { Icon } from "@/components/ui/icons";
+import { Typography } from "@/components/ui/typography";
+import { formatDate } from "@/utils/date";
+
+type RunTimeCellProps = {
+	flowRun: FlowRun | FlowRunWithDeploymentAndFlow;
+};
+
+export const RunTimeCell = ({ flowRun }: RunTimeCellProps) => {
+	const { start_time, expected_start_time } = flowRun;
+	let text = "No start time";
+	if (start_time) {
+		text = formatDate(start_time, "dateTimeNumeric");
+	} else if (expected_start_time) {
+		text = formatDate(expected_start_time, "dateTimeNumeric");
+	}
+
+	return (
+		<Typography
+			variant="bodySmall"
+			fontFamily="mono"
+			className="flex gap-2 items-center min-w-60"
+		>
+			<Icon id="Calendar" className="h-4 w-4" />
+			{text}
+		</Typography>
+	);
+};