Save and display execution records

ui/src/components/workflow/DataTable.tsx

@@ -3,23 +3,21 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, Paginati
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 interface DataTableProps<TData extends { id: string }, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   pageCount: number;
   onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
+  onRowClick?: (id: string) => void;
 }
 
-export function DataTable<TData extends { id: string }, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
+export function DataTable<TData extends { id: string }, TValue>({ columns, data, onPageChange, pageCount, onRowClick }: DataTableProps<TData, TValue>) {
   const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
 
-  const navigate = useNavigate();
-
   const pagination = {
     pageIndex,
     pageSize,
@@ -43,11 +41,11 @@ export function DataTable<TData extends { id: string }, TValue>({ columns, data,
   }, [pageIndex]);
 
   const handleRowClick = (id: string) => {
-    navigate(`/workflow/detail?id=${id}`);
+    onRowClick?.(id);
   };
 
   return (
-    <>
+    <div>
       <div className="rounded-md">
         <Table>
           <TableHeader>
@@ -88,14 +86,19 @@ export function DataTable<TData extends { id: string }, TValue>({ columns, data,
       </div>
       <div className="flex items-center justify-end mt-5">
         <div className="flex items-center space-x-2 dark:text-stone-200">
-          <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-            上一页
-          </Button>
-          <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-            下一页
-          </Button>
+          {table.getCanPreviousPage() && (
+            <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+              上一页
+            </Button>
+          )}
+
+          {table.getCanNextPage && (
+            <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+              下一页
+            </Button>
+          )}
         </div>
       </div>
-    </>
+    </div>
   );
 }

ui/src/components/workflow/WorkflowLog.tsx

@@ -0,0 +1,92 @@
+import { WorkflowRunLog } from "@/domain/workflow";
+import { logs } from "@/repository/workflow";
+import { ColumnDef } from "@tanstack/react-table";
+import { useState } from "react";
+import { DataTable } from "./DataTable";
+import { useSearchParams } from "react-router-dom";
+import { Check, X } from "lucide-react";
+import WorkflowLogDetail from "./WorkflowLogDetail";
+
+const WorkflowLog = () => {
+  const [data, setData] = useState<WorkflowRunLog[]>([]);
+  const [pageCount, setPageCount] = useState<number>(0);
+
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id");
+
+  const [open, setOpen] = useState(false);
+  const [selectedLog, setSelectedLog] = useState<WorkflowRunLog>();
+
+  const fetchData = async (page: number, pageSize?: number) => {
+    const resp = await logs({ page: page, perPage: pageSize, id: id ?? "" });
+    setData(resp.items);
+    setPageCount(resp.totalPages);
+  };
+
+  const columns: ColumnDef<WorkflowRunLog>[] = [
+    {
+      accessorKey: "succeed",
+      header: "状态",
+      cell: ({ row }) => {
+        const succeed: boolean = row.getValue("succeed");
+        if (succeed) {
+          return (
+            <div className="flex items-center space-x-2">
+              <div className="text-white bg-green-500 w-8 h-8 rounded-full flex items-center justify-center">
+                <Check size={18} />
+              </div>
+              <div className="text-sone-700">通过</div>
+            </div>
+          );
+        } else {
+          return (
+            <div className="flex items-center space-x-2">
+              <div className="text-white bg-red-500 w-8 h-8 rounded-full flex items-center justify-center">
+                <X size={18} />
+              </div>
+              <div className="text-stone-700">失败</div>
+            </div>
+          );
+        }
+      },
+    },
+    {
+      accessorKey: "error",
+      header: "原因",
+      cell: ({ row }) => {
+        let error: string = row.getValue("error");
+        if (!error) {
+          error = "";
+        }
+        return <div className="min-w-[250px] truncate">{error}</div>;
+      },
+    },
+    {
+      accessorKey: "created",
+      header: "时间",
+      cell: ({ row }) => {
+        const date: string = row.getValue("created");
+        return new Date(date).toLocaleString();
+      },
+    },
+  ];
+
+  const handleRowClick = (id: string) => {
+    setOpen(true);
+    const log = data.find((item) => item.id === id);
+    setSelectedLog(log);
+  };
+  return (
+    <div className="w-full md:w-[960px]">
+      <div>
+        <div className="text-muted-foreground mb-5">日志</div>
+        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} />
+      </div>
+
+      <WorkflowLogDetail open={open} onOpenChange={setOpen} log={selectedLog} />
+    </div>
+  );
+};
+
+export default WorkflowLog;
+

ui/src/components/workflow/WorkflowLogDetail.tsx

@@ -0,0 +1,81 @@
+import { WorkflowOutput, WorkflowRunLog, WorkflowRunLogItem } from "@/domain/workflow";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../ui/sheet";
+import { Check, X } from "lucide-react";
+
+type WorkflowLogDetailProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  log?: WorkflowRunLog;
+};
+const WorkflowLogDetail = ({ open, onOpenChange, log }: WorkflowLogDetailProps) => {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>日志</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col">
+          {log?.succeed ? (
+            <div className="mt-5 flex justify-between bg-green-100 p-5 rounded-md items-center">
+              <div className="flex space-x-2 items-center">
+                <div className="w-8 h-8 bg-green-500 flex items-center justify-center rounded-full text-white">
+                  <Check size={18} />
+                </div>
+                <div className="text-stone-700">成功</div>
+              </div>
+
+              <div className="text-muted-foreground">{new Date(log.created).toLocaleString()}</div>
+            </div>
+          ) : (
+            <div className="mt-5 flex justify-between bg-green-100 p-5 rounded-md items-center">
+              <div className="flex space-x-2 items-center">
+                <div className="w-8 h-8 bg-red-500 flex items-center justify-center rounded-full text-white">
+                  <X size={18} />
+                </div>
+                <div className="text-stone-700">失败</div>
+              </div>
+
+              <div className="text-red-500">{log?.error}</div>
+
+              <div className="text-muted-foreground">{log?.created && new Date(log.created).toLocaleString()}</div>
+            </div>
+          )}
+
+          <div className="bg-black p-5 mt-5 rounded-md text-stone-200 flex flex-col space-y-3">
+            {log?.log.map((item: WorkflowRunLogItem, i) => {
+              return (
+                <div key={i} className="flex flex-col space-y-2">
+                  <div className="">{item.nodeName}</div>
+                  <div className="flex flex-col space-y-1">
+                    {item.outputs.map((output: WorkflowOutput) => {
+                      return (
+                        <>
+                          <div className="flex text-sm space-x-2">
+                            <div>[{output.time}]</div>
+                            {output.error ? (
+                              <>
+                                <div className="text-red-500">{output.error}</div>
+                              </>
+                            ) : (
+                              <>
+                                <div>{output.content}</div>
+                              </>
+                            )}
+                          </div>
+                        </>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default WorkflowLogDetail;
+