From c98a16a2dd6d2bc89edef38e94fbec9a8fd4fc55 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Sat, 20 Jan 2024 17:46:15 +0800
Subject: [PATCH] feat: add duration display

---
 web/next.config.mjs                      |  9 +++++----
 web/src/components/RunDisplay.tsx        |  5 ++++-
 web/src/components/RunsTable.tsx         |  9 +++++----
 web/src/components/SharePageSettings.tsx |  5 +++++
 web/src/lib/getRelativeTime.tsx          | 18 ++++++++++++++++--
 web/src/server/findAllRuns.tsx           |  4 ++++
 6 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/web/next.config.mjs b/web/next.config.mjs
index 818745a..d326063 100644
--- a/web/next.config.mjs
+++ b/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 } }
+// );
diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx
index 445b061..48fd424 100644
--- a/web/src/components/RunDisplay.tsx
+++ b/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>
diff --git a/web/src/components/RunsTable.tsx b/web/src/components/RunsTable.tsx
index 6eee49c..a13e6bf 100644
--- a/web/src/components/RunsTable.tsx
+++ b/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>
diff --git a/web/src/components/SharePageSettings.tsx b/web/src/components/SharePageSettings.tsx
index de9f6bc..f6a292c 100644
--- a/web/src/components/SharePageSettings.tsx
+++ b/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",
+          },
+        }}
       />
     </>
   );
diff --git a/web/src/lib/getRelativeTime.tsx b/web/src/lib/getRelativeTime.tsx
index 7a4325f..3e7c31d 100644
--- a/web/src/lib/getRelativeTime.tsx
+++ b/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)}`;
+}
diff --git a/web/src/server/findAllRuns.tsx b/web/src/server/findAllRuns.tsx
index a8398a1..121b48d 100644
--- a/web/src/server/findAllRuns.tsx
+++ b/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: {