feat: add duration display

web/next.config.mjs

@@ -1,4 +1,3 @@
-import million from 'million/compiler';
 import { recmaPlugins } from "./src/mdx/recma.mjs";
 import { rehypePlugins } from "./src/mdx/rehype.mjs";
 import { remarkPlugins } from "./src/mdx/remark.mjs";
@@ -21,6 +20,8 @@ const nextConfig = {
   },
 };
 
-export default million.next(
-  withSearch(withMDX(nextConfig)), { auto: { rsc: true } }
-);
+export default withSearch(withMDX(nextConfig));
+
+// export default million.next(
+//   withSearch(withMDX(nextConfig)), { auto: { rsc: true } }
+// );

web/src/components/RunDisplay.tsx

@@ -11,7 +11,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { TableCell, TableRow } from "@/components/ui/table";
-import { getRelativeTime } from "@/lib/getRelativeTime";
+import { getDuration, getRelativeTime } from "@/lib/getRelativeTime";
 import { type findAllRuns } from "@/server/findAllRuns";
 import { Suspense } from "react";
 
@@ -37,6 +37,9 @@ export async function RunDisplay({
               {run.origin}
             </Badge>
           </TableCell>
+          <TableCell className="truncate">
+            {getDuration(run.duration)}
+          </TableCell>
           <LiveStatus run={run} />
         </TableRow>
       </DialogTrigger>

web/src/components/RunsTable.tsx

@@ -41,11 +41,12 @@ export async function RunsTable(props: {
           )}
           <TableHeader className="bg-background top-0 sticky">
             <TableRow>
-              <TableHead className="w-[100px]">Number</TableHead>
-              <TableHead className="">Machine</TableHead>
-              <TableHead className="">Time</TableHead>
-              <TableHead className="w-[100px]">Version</TableHead>
+              <TableHead className="truncate">Number</TableHead>
+              <TableHead className="truncate">Machine</TableHead>
+              <TableHead className="truncate">Time</TableHead>
+              <TableHead className="truncate">Version</TableHead>
               <TableHead className="truncate">Origin</TableHead>
+              <TableHead className="truncate">Duration</TableHead>
               <TableHead className="truncate">Live Status</TableHead>
               <TableHead className="text-right">Status</TableHead>
             </TableRow>

web/src/components/SharePageSettings.tsx

@@ -79,6 +79,11 @@ export function SharePageSettings({
         description="Edit share page details."
         serverAction={updateSharePageInfo}
         formSchema={publicShareDeployment}
+        fieldConfig={{
+          description: {
+            fieldType: "textarea",
+          },
+        }}
       />
     </>
   );

web/src/lib/getRelativeTime.tsx

@@ -1,12 +1,26 @@
 import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
-import React from "react";
 
 dayjs.extend(relativeTime);
-
+dayjs.extend(duration);
 export function getRelativeTime(time: string | Date | null | undefined) {
   if (typeof time === "string" || time instanceof Date) {
     return dayjs().to(time);
   }
   return null;
 }
+
+function formatDuration(seconds: number) {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes > 0) {
+    return `${minutes}.${remainingSeconds} mins`;
+  } else {
+    return `${remainingSeconds.toFixed(1)} secs`;
+  }
+}
+
+export function getDuration(durationInSecs: number) {
+  return `${formatDuration(durationInSecs)}`;
+}

web/src/server/findAllRuns.tsx

@@ -23,6 +23,10 @@ export async function findAllRuns({
     extras: {
       number: sql<number>`row_number() over (order by created_at)`.as("number"),
       total: sql<number>`count(*) over ()`.as("total"),
+      duration:
+        sql<number>`(extract(epoch from ended_at) - extract(epoch from created_at))`.as(
+          "duration"
+        ),
     },
     with: {
       machine: {