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;
+

ui/src/domain/workflow.ts

@@ -3,6 +3,29 @@ import { nanoid } from "nanoid";
 import i18n from "@/i18n";
 import { deployTargets, KVType } from "./domain";
 
+export type WorkflowRunLog = {
+  id: string;
+  workflow: string;
+  log: WorkflowRunLogItem[];
+  error: string;
+  succeed: boolean;
+  created: string;
+  updated: string;
+};
+
+export type WorkflowRunLogItem = {
+  nodeName: string;
+  error: string;
+  outputs: WorkflowOutput[];
+};
+
+export type WorkflowOutput = {
+  time: string;
+  title: string;
+  content: string;
+  error: string;
+};
+
 export type Workflow = {
   id: string;
   name: string;
@@ -446,3 +469,4 @@ export const workflowNodeDropdownList: WorkflowwNodeDropdwonItem[] = [
     },
   },
 ];
+

ui/src/pages/workflow/WorkflowDetail.tsx

@@ -7,12 +7,14 @@ import { useToast } from "@/components/ui/use-toast";
 import End from "@/components/workflow/End";
 import NodeRender from "@/components/workflow/NodeRender";
 import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
+import WorkflowLog from "@/components/workflow/WorkflowLog";
 
 import WorkflowProvider from "@/components/workflow/WorkflowProvider";
 import { allNodesValidated, WorkflowNode } from "@/domain/workflow";
+import { cn } from "@/lib/utils";
 import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
 import { ArrowLeft } from "lucide-react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import { useShallow } from "zustand/shallow";
@@ -30,11 +32,17 @@ const WorkflowDetail = () => {
 
   // 从 url 中获取 workflowId
   const [searchParams] = useSearchParams();
+  const [locId, setLocId] = useState<string>("");
   const id = searchParams.get("id");
 
+  const [tab, setTab] = useState("workflow");
+
   useEffect(() => {
     console.log(id);
     init(id ?? "");
+    if (id) {
+      setLocId(id);
+    }
   }, [id]);
 
   const navigate = useNavigate();
@@ -85,6 +93,13 @@ const WorkflowDetail = () => {
     save();
   };
 
+  const getTabCls = (tabName: string) => {
+    if (tab === tabName) {
+      return "text-primary border-primary";
+    }
+    return "border-transparent hover:text-primary hover:border-b-primary";
+  };
+
   return (
     <>
       <WorkflowProvider>
@@ -102,6 +117,26 @@ const WorkflowDetail = () => {
                 }
               />
             </div>
+
+            <div className="flex justify-between space-x-5 text-muted-foreground text-lg h-full">
+              <div
+                className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("workflow"))}
+                onClick={() => {
+                  setTab("workflow");
+                }}
+              >
+                <div>流程</div>
+              </div>
+              <div
+                className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("history"))}
+                onClick={() => {
+                  setTab("history");
+                }}
+              >
+                <div>历史</div>
+              </div>
+            </div>
+
             <div className="px-5 flex items-center space-x-3">
               <Show when={!!workflow.enabled}>
                 <Show when={!!workflow.hasDraft} fallback={<Button variant={"secondary"}>立即执行</Button>}>
@@ -114,8 +149,15 @@ const WorkflowDetail = () => {
               <Switch className="dark:data-[state=unchecked]:bg-stone-400" checked={workflow.enabled ?? false} onCheckedChange={handleEnableChange} />
             </div>
           </div>
+          <Show when={tab === "workflow"}>
+            <div className=" flex flex-col items-center mt-8">{elements}</div>
+          </Show>
 
-          <div className=" flex flex-col items-center mt-8">{elements}</div>
+          <Show when={!!locId && tab === "history"}>
+            <div className=" flex flex-col items-center mt-8">
+              <WorkflowLog />
+            </div>
+          </Show>
 
           <ScrollBar orientation="vertical" />
           <ScrollBar orientation="horizontal" />

ui/src/pages/workflow/index.tsx

@@ -185,6 +185,10 @@ const Workflow = () => {
   const handleCreateClick = () => {
     navigate("/workflow/detail");
   };
+
+  const handleRowClick = (id: string) => {
+    navigate(`/workflow/detail?id=${id}`);
+  };
   return (
     <>
       <div className="flex justify-between items-center">
@@ -196,7 +200,7 @@ const Workflow = () => {
       </div>
 
       <div>
-        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} />
+        <DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} />
       </div>
 
       <CustomAlertDialog

ui/src/repository/workflow.ts

@@ -1,4 +1,4 @@
-import { Workflow, WorkflowNode } from "@/domain/workflow";
+import { Workflow, WorkflowNode, WorkflowRunLog } from "@/domain/workflow";
 import { getPb } from "./api";
 
 export const get = async (id: string) => {
@@ -39,3 +39,30 @@ export const list = async (req: WorkflowListReq) => {
 export const remove = async (id: string) => {
   return await getPb().collection("workflow").delete(id);
 };
+
+type WorkflowLogsReq = {
+  id: string;
+  page: number;
+  perPage?: number;
+};
+
+export const logs = async (req: WorkflowLogsReq) => {
+  let page = 1;
+  if (req.page) {
+    page = req.page;
+  }
+  let perPage = 10;
+  if (req.perPage) {
+    perPage = req.perPage;
+  }
+
+  const response = await getPb()
+    .collection("workflow_run_log")
+    .getList<WorkflowRunLog>(page, perPage, {
+      sort: "-created",
+      filter: getPb().filter("workflow={:workflowId}", { workflowId: req.id }),
+    });
+
+  return response;
+};
+