comfyui-deploy/web/src/components/RunOutputs.tsx
2024-02-01 17:01:54 +08:00

119 lines
3.5 KiB
TypeScript

"use client";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { OutputRender } from "./OutputRender";
import {
Table,
TableBody,
TableCell,
TableHead,
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";
import useSWR from "swr";
import { CodeBlockClient } from "@/components/CodeBlockClient";
export function RunOutputs({
run,
}: { run: Awaited<ReturnType<typeof findAllRuns>>[0] }) {
const { data, isValidating, error } = useSWR(
"run-outputs+" + run.id,
async () => {
return await getRunsOutput(run.id);
},
);
return (
<Table className="table-fixed">
<TableHeader className="bg-background top-0 sticky">
<TableRow>
<TableHead className="w-[200px]">File</TableHead>
<TableHead className="">Output</TableHead>
</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} stickToBottom={false} />
<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>
{data?.map((run) => {
const fileName =
run.data.images?.[0].filename ||
run.data.files?.[0].filename ||
run.data.gifs?.[0].filename;
if (!fileName)
return (
<TableRow key={run.id}>
<TableCell>Output</TableCell>
<TableCell className="">
<CodeBlockClient
code={JSON.stringify(run.data, null, 2)}
lang="json"
/>
</TableCell>
</TableRow>
);
// const filePath
return (
<TableRow key={run.id}>
<TableCell className="break-words">{fileName}</TableCell>
<TableCell>
<OutputRender run_id={run.run_id} filename={fileName} />
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
}