From 3e5ff7702ea6a31534981bdd8e9ae1838b4b88c2 Mon Sep 17 00:00:00 2001
From: bennykok <itechbenny@gmail.com>
Date: Wed, 31 Jan 2024 15:17:47 +0800
Subject: [PATCH] feat: run log dialog

---
 web/src/components/CopyButton.tsx |  4 ++-
 web/src/components/LogsViewer.tsx | 19 ++++++++--
 web/src/components/RunDisplay.tsx |  7 ++--
 web/src/components/RunOutputs.tsx | 59 +++++++++++++++++++++++++++++--
 web/src/server/getRunsOutput.tsx  |  6 ++--
 5 files changed, 84 insertions(+), 11 deletions(-)

diff --git a/web/src/components/CopyButton.tsx b/web/src/components/CopyButton.tsx
index 049574f..1c54de5 100644
--- a/web/src/components/CopyButton.tsx
+++ b/web/src/components/CopyButton.tsx
@@ -7,10 +7,12 @@ import { toast } from "sonner";
 
 export function CopyButton({
   className,
+  children,
   ...props
 }: {
   text: string;
   className?: string;
+  children?: React.ReactNode;
 }) {
   return (
     <Button
@@ -21,7 +23,7 @@ export function CopyButton({
       }}
       className={cn(" p-2 min-h-0 aspect-square", className)}
     >
-      <Copy size={14} />
+      {children} <Copy size={14} />
     </Button>
   );
 }
diff --git a/web/src/components/LogsViewer.tsx b/web/src/components/LogsViewer.tsx
index b1e13b9..0ece1f8 100644
--- a/web/src/components/LogsViewer.tsx
+++ b/web/src/components/LogsViewer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef } from "react";
+import { toast } from "sonner";
 
 export type LogsType = {
   machine_id?: string;
@@ -36,10 +37,24 @@ export function LogsViewer({ logs }: { logs: LogsType }) {
         }
         container.current = ref;
       }}
-      className="flex flex-col text-xs p-2 overflow-y-scroll max-h-[400px] whitespace-break-spaces"
+      className="flex flex-col text-xs p-2 overflow-y-scroll whitespace-break-spaces"
     >
       {logs.map((x, i) => (
-        <div key={i}>{x.logs}</div>
+        <div
+          key={i}
+          className="hover:bg-gray-100 flex flex-row items-center gap-2"
+          onClick={() => {
+            toast.success("Copied to clipboard");
+            navigator.clipboard.writeText(x.logs);
+          }}
+        >
+          <span className="min-w-fit">
+            {new Date(x.timestamp).toLocaleString()}
+          </span>
+          <div className="h-full w-[1px] bg-stone-400 flex-shrink-0"></div>
+          {/* Display timestamp */}
+          <div>{x.logs}</div>
+        </div>
       ))}
     </div>
   );
diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx
index 79e7624..022d86d 100644
--- a/web/src/components/RunDisplay.tsx
+++ b/web/src/components/RunDisplay.tsx
@@ -3,8 +3,10 @@ import { RunOutputs } from "@/components/RunOutputs";
 import { Badge } from "@/components/ui/badge";
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -20,6 +22,8 @@ import { type findAllRuns } from "@/server/findAllRuns";
 import { Suspense } from "react";
 import { LiveStatus } from "./LiveStatus";
 import { LogsType, LogsViewer } from "@/components/LogsViewer";
+import { Button } from "@/components/ui/button";
+import { Edit, ExternalLink } from "lucide-react";
 
 export async function RunDisplay({
   run,
@@ -75,8 +79,7 @@ export async function RunDisplay({
         <div className="max-h-96 overflow-y-scroll">
           <RunInputs run={run} />
           <Suspense>
-            <RunOutputs run_id={run.id} />
-            {run.run_log && <LogsViewer logs={run.run_log} />}
+            <RunOutputs run={run} />
           </Suspense>
         </div>
         {/* <div className="max-h-96 overflow-y-scroll">{view}</div> */}
diff --git a/web/src/components/RunOutputs.tsx b/web/src/components/RunOutputs.tsx
index f65e4a9..14523cb 100644
--- a/web/src/components/RunOutputs.tsx
+++ b/web/src/components/RunOutputs.tsx
@@ -1,3 +1,13 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { OutputRender } from "./OutputRender";
 import { CodeBlock } from "@/components/CodeBlock";
 import {
@@ -8,10 +18,17 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import type { findAllRuns } from "@/server/findAllRuns";
 import { getRunsOutput } from "@/server/getRunsOutput";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import { LogsViewer } from "@/components/LogsViewer";
+import { CopyButton } from "@/components/CopyButton";
 
-export async function RunOutputs({ run_id }: { run_id: string }) {
-  const outputs = await getRunsOutput(run_id);
+export async function RunOutputs({
+  run,
+}: { run: Awaited<ReturnType<typeof findAllRuns>>[0] }) {
+  const outputs = await getRunsOutput(run.id);
   return (
     <Table className="table-fixed">
       <TableHeader className="bg-background top-0 sticky">
@@ -21,6 +38,42 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
         </TableRow>
       </TableHeader>
       <TableBody>
+        <TableRow key={run.id}>
+          <TableCell className="break-words">Run log</TableCell>
+          <TableCell>
+            {run.run_log ? (
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="secondary" className="w-fit">
+                    View Log <ExternalLink size={14} />
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="sm:max-w-[1000px] h-full max-h-[600px] grid grid-rows-[auto,1fr,auto]">
+                  <DialogHeader>
+                    <DialogTitle>Run Log</DialogTitle>
+                  </DialogHeader>
+                  <LogsViewer logs={run.run_log} />
+                  <DialogFooter>
+                    <CopyButton
+                      className="w-fit aspect-auto p-4"
+                      text={JSON.stringify(run.run_log)}
+                    >
+                      Copy
+                    </CopyButton>
+                    <DialogClose>
+                      <Button type="button" variant="secondary">
+                        Close
+                      </Button>
+                    </DialogClose>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            ) : (
+              "No log available"
+            )}
+          </TableCell>
+        </TableRow>
+
         {outputs?.map((run) => {
           const fileName =
             run.data.images?.[0].filename ||
@@ -45,7 +98,7 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
             <TableRow key={run.id}>
               <TableCell className="break-words">{fileName}</TableCell>
               <TableCell>
-                <OutputRender run_id={run_id} filename={fileName} />
+                <OutputRender run_id={run.run_id} filename={fileName} />
               </TableCell>
             </TableRow>
           );
diff --git a/web/src/server/getRunsOutput.tsx b/web/src/server/getRunsOutput.tsx
index e76ef7b..785a580 100644
--- a/web/src/server/getRunsOutput.tsx
+++ b/web/src/server/getRunsOutput.tsx
@@ -5,9 +5,9 @@ import { db } from "@/db/db";
 import { workflowRunOutputs } from "@/db/schema";
 import { eq } from "drizzle-orm";
 
-export async function getRunsOutputDisplay(run_id: string) {
-  return <RunOutputs run_id={run_id} />;
-}
+// export async function getRunsOutputDisplay(run_id: string) {
+//   return <RunOutputs run_id={run_id} />;
+// }
 
 export async function getRunsOutput(run_id: string) {
   // throw new Error("Not implemented");