feat(ui): workflow logs

internal/deployer/deployer.go

@@ -54,7 +54,6 @@ func NewWithDeployNode(node *domain.WorkflowNode, certdata struct {
 	}
 
 	return &proxyDeployer{
-		logger:            slog.Default(),
 		deployer:          deployer,
 		deployCertificate: certdata.Certificate,
 		deployPrivateKey:  certdata.PrivateKey,
@@ -63,7 +62,6 @@ func NewWithDeployNode(node *domain.WorkflowNode, certdata struct {
 
 // TODO: 暂时使用代理模式以兼容之前版本代码，后续重新实现此处逻辑
 type proxyDeployer struct {
-	logger            *slog.Logger
 	deployer          deployer.Deployer
 	deployCertificate string
 	deployPrivateKey  string
@@ -74,7 +72,7 @@ func (d *proxyDeployer) SetLogger(logger *slog.Logger) {
 		panic("logger is nil")
 	}
 
-	d.logger = logger
+	d.deployer.WithLogger(logger)
 }
 
 func (d *proxyDeployer) Deploy(ctx context.Context) error {

internal/workflow/node-processor/deploy_node.go

@@ -92,7 +92,7 @@ func (n *deployNode) Process(ctx context.Context) error {
 		return err
 	}
 
-	n.logger.Info("apply completed")
+	n.logger.Info("deploy completed")
 
 	return nil
 }

ui/src/components/workflow/WorkflowRunDetail.tsx

@@ -1,16 +1,19 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { SelectOutlined as SelectOutlinedIcon } from "@ant-design/icons";
+import { RightOutlined as RightOutlinedIcon, SelectOutlined as SelectOutlinedIcon } from "@ant-design/icons";
 import { useRequest } from "ahooks";
-import { Alert, Button, Divider, Empty, Space, Table, type TableProps, Tooltip, Typography, notification } from "antd";
+import { Alert, Button, Collapse, Divider, Empty, Skeleton, Space, Spin, Table, type TableProps, Tooltip, Typography, notification } from "antd";
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
 import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import Show from "@/components/Show";
 import { type CertificateModel } from "@/domain/certificate";
+import type { WorkflowLogModel } from "@/domain/workflowLog";
 import { WORKFLOW_RUN_STATUSES, type WorkflowRunModel } from "@/domain/workflowRun";
-import { listByWorkflowRunId as listCertificateByWorkflowRunId } from "@/repository/certificate";
+import { listByWorkflowRunId as listCertificatesByWorkflowRunId } from "@/repository/certificate";
+import { listByWorkflowRunId as listLogsByWorkflowRunId } from "@/repository/workflowLog";
+import { mergeCls } from "@/utils/css";
 import { getErrMsg } from "@/utils/error";
 
 export type WorkflowRunDetailProps = {
@@ -33,28 +36,7 @@ const WorkflowRunDetail = ({ data, ...props }: WorkflowRunDetailProps) => {
       </Show>
 
       <div className="my-4">
-        <Typography.Title level={5}>{t("workflow_run.logs")}</Typography.Title>
+        <WorkflowRunLogs runId={data.id} runStatus={data.status} />
-        <div className="rounded-md bg-black p-4 text-stone-200">
-          <div className="flex flex-col space-y-4">
-            {data.logs?.map((item, i) => {
-              return (
-                <div key={i} className="flex flex-col space-y-2">
-                  <div className="font-semibold">{item.nodeName}</div>
-                  <div className="flex flex-col space-y-1">
-                    {item.records?.map((output, j) => {
-                      return (
-                        <div key={j} className="flex space-x-2 text-sm" style={{ wordBreak: "break-word" }}>
-                          <div className="whitespace-nowrap">[{dayjs(output.time).format("YYYY-MM-DD HH:mm:ss")}]</div>
-                          {output.error ? <div className="text-red-500">{output.error}</div> : <div>{output.content}</div>}
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
       </div>
 
       <Show when={data.status === WORKFLOW_RUN_STATUSES.SUCCEEDED}>
@@ -66,6 +48,124 @@ const WorkflowRunDetail = ({ data, ...props }: WorkflowRunDetailProps) => {
   );
 };
 
+const WorkflowRunLogs = ({ runId, runStatus }: { runId: string; runStatus: string }) => {
+  const { t } = useTranslation();
+
+  type Log = Pick<WorkflowLogModel, "level" | "message" | "data" | "created">;
+  type LogGroup = { id: string; name: string; records: Log[] };
+
+  const [listData, setListData] = useState<LogGroup[]>([]);
+  const { loading } = useRequest(
+    () => {
+      return listLogsByWorkflowRunId(runId);
+    },
+    {
+      refreshDeps: [runId, runStatus],
+      pollingInterval: runStatus === WORKFLOW_RUN_STATUSES.PENDING || runStatus === WORKFLOW_RUN_STATUSES.RUNNING ? 5000 : 0,
+      pollingWhenHidden: false,
+      throttleWait: 500,
+      onBefore: () => {
+        setListData([]);
+      },
+      onSuccess: (res) => {
+        setListData(
+          res.items.reduce((acc, e) => {
+            let group = acc.at(-1);
+            if (!group || group.id !== e.nodeId) {
+              group = { id: e.nodeId, name: e.nodeName, records: [] };
+              acc.push(group);
+            }
+            group.records.push({ level: e.level, message: e.message, data: e.data, created: e.created });
+            return acc;
+          }, [] as LogGroup[])
+        );
+      },
+      onError: (err) => {
+        if (err instanceof ClientResponseError && err.isAbort) {
+          return;
+        }
+
+        console.error(err);
+
+        throw err;
+      },
+    }
+  );
+
+  const renderLogRecord = (record: Log) => {
+    let message = <>{record.message}</>;
+    if (record.data != null && Object.keys(record.data).length > 0) {
+      message = (
+        <details>
+          <summary>{record.message}</summary>
+          {Object.entries(record.data).map(([key, value]) => (
+            <div key={key} className="flex space-x-2 " style={{ wordBreak: "break-word" }}>
+              <div>{key}:</div>
+              <div>{JSON.stringify(value)}</div>
+            </div>
+          ))}
+        </details>
+      );
+    }
+
+    return (
+      <div className="flex space-x-2 text-xs" style={{ wordBreak: "break-word" }}>
+        <div className="whitespace-nowrap text-stone-400">[{dayjs(record.created).format("YYYY-MM-DD HH:mm:ss")}]</div>
+        <div
+          className={mergeCls(
+            "font-mono",
+            record.level === "DEBUG" ? "text-stone-400" : "",
+            record.level === "WARN" ? "text-yellow-600" : "",
+            record.level === "ERROR" ? "text-red-600" : ""
+          )}
+        >
+          {message}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <Typography.Title level={5}>{t("workflow_run.logs")}</Typography.Title>
+      <div className="rounded-md bg-black text-stone-200">
+        <Show
+          when={!loading || listData.length > 0}
+          fallback={
+            <Spin spinning>
+              <Skeleton />
+            </Spin>
+          }
+        >
+          <div className=" py-2">
+            <Collapse
+              style={{ color: "inherit" }}
+              bordered={false}
+              defaultActiveKey={listData.map((group) => group.id)}
+              expandIcon={({ isActive }) => <RightOutlinedIcon rotate={isActive ? 90 : 0} />}
+              items={listData.map((group) => {
+                return {
+                  key: group.id,
+                  classNames: {
+                    header: "text-sm text-stone-200",
+                    body: "text-stone-200",
+                  },
+                  style: { color: "inherit", border: "none" },
+                  styles: {
+                    header: { color: "inherit" },
+                  },
+                  label: group.name,
+                  children: <div className="flex flex-col space-y-1">{group.records.map((record) => renderLogRecord(record))}</div>,
+                };
+              })}
+            />
+          </div>
+        </Show>
+      </div>
+    </>
+  );
+};
+
 const WorkflowRunArtifacts = ({ runId }: { runId: string }) => {
   const { t } = useTranslation();
 
@@ -117,7 +217,7 @@ const WorkflowRunArtifacts = ({ runId }: { runId: string }) => {
   const [tableData, setTableData] = useState<CertificateModel[]>([]);
   const { loading: tableLoading } = useRequest(
     () => {
-      return listCertificateByWorkflowRunId(runId);
+      return listCertificatesByWorkflowRunId(runId);
     },
     {
       refreshDeps: [runId],

ui/src/domain/workflowLog.ts

@@ -0,0 +1,7 @@
+export interface WorkflowLogModel extends Omit<BaseModel, "updated"> {
+  nodeId: string;
+  nodeName: string;
+  level: "DEBUG" | "INFO" | "WARN" | "ERROR";
+  message: string;
+  data: Record<string, any>;
+}

ui/src/domain/workflowRun.ts

@@ -6,27 +6,12 @@ export interface WorkflowRunModel extends BaseModel {
   trigger: string;
   startedAt: ISO8601String;
   endedAt: ISO8601String;
-  logs?: WorkflowRunLog[];
   error?: string;
   expand?: {
-    workflowId?: WorkflowModel;
+    workflowId?: WorkflowModel; // TODO: ugly, maybe to use an alias?
   };
 }
 
-export type WorkflowRunLog = {
-  nodeId: string;
-  nodeName: string;
-  records?: WorkflowRunLogRecord[];
-  error?: string;
-};
-
-export type WorkflowRunLogRecord = {
-  time: ISO8601String;
-  level: string;
-  content: string;
-  error?: string;
-};
-
 export const WORKFLOW_RUN_STATUSES = Object.freeze({
   PENDING: "pending",
   RUNNING: "running",

ui/src/i18n/locales/en/nls.dashboard.json

@@ -8,7 +8,7 @@
   "dashboard.statistics.enabled_workflows": "Enabled workflows",
   "dashboard.statistics.unit": "",
 
-  "dashboard.latest_workflow_run": "Latest workflow run",
+  "dashboard.latest_workflow_runs": "Latest workflow runs",
 
   "dashboard.quick_actions": "Quick actions",
   "dashboard.quick_actions.create_workflow": "Create workflow",

ui/src/i18n/locales/zh/nls.dashboard.json

@@ -8,7 +8,7 @@
   "dashboard.statistics.enabled_workflows": "已启用工作流",
   "dashboard.statistics.unit": "个",
 
-  "dashboard.latest_workflow_run": "最近执行的工作流",
+  "dashboard.latest_workflow_runs": "最近执行的工作流",
 
   "dashboard.quick_actions": "快捷操作",
   "dashboard.quick_actions.create_workflow": "新建工作流",

ui/src/pages/certificates/CertificateList.tsx

@@ -28,7 +28,7 @@ import { ClientResponseError } from "pocketbase";
 
 import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { CERTIFICATE_SOURCES, type CertificateModel } from "@/domain/certificate";
-import { type ListCertificateRequest, list as listCertificate, remove as removeCertificate } from "@/repository/certificate";
+import { list as listCertificates, type ListRequest as listCertificatesRequest, remove as removeCertificate } from "@/repository/certificate";
 import { getErrMsg } from "@/utils/error";
 
 const CertificateList = () => {
@@ -223,9 +223,9 @@ const CertificateList = () => {
     run: refreshData,
   } = useRequest(
     () => {
-      return listCertificate({
+      return listCertificates({
         keyword: filters["keyword"] as string,
-        state: filters["state"] as ListCertificateRequest["state"],
+        state: filters["state"] as listCertificatesRequest["state"],
         page: page,
         perPage: pageSize,
       });

ui/src/pages/dashboard/Dashboard.tsx

@@ -275,7 +275,7 @@ const Dashboard = () => {
             </Button>
           </Space>
         </Card>
-        <Card className="flex-1" title={t("dashboard.latest_workflow_run")}>
+        <Card className="flex-1" title={t("dashboard.latest_workflow_runs")}>
           <Table<WorkflowRunModel>
             columns={tableColumns}
             dataSource={tableData}

ui/src/pages/workflows/WorkflowList.tsx

@@ -41,7 +41,7 @@ import { ClientResponseError } from "pocketbase";
 
 import { WORKFLOW_TRIGGERS, type WorkflowModel, isAllNodesValidated } from "@/domain/workflow";
 import { WORKFLOW_RUN_STATUSES } from "@/domain/workflowRun";
-import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
+import { list as listWorkflows, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow";
 import { getErrMsg } from "@/utils/error";
 
 const WorkflowList = () => {
@@ -253,7 +253,7 @@ const WorkflowList = () => {
     run: refreshData,
   } = useRequest(
     () => {
-      return listWorkflow({
+      return listWorkflows({
         keyword: filters["keyword"] as string,
         enabled: (filters["state"] as string) === "enabled" ? true : (filters["state"] as string) === "disabled" ? false : undefined,
         page: page,

ui/src/repository/_pocketbase.ts

@@ -14,3 +14,4 @@ export const COLLECTION_NAME_SETTINGS = "settings";
 export const COLLECTION_NAME_WORKFLOW = "workflow";
 export const COLLECTION_NAME_WORKFLOW_RUN = "workflow_run";
 export const COLLECTION_NAME_WORKFLOW_OUTPUT = "workflow_output";
+export const COLLECTION_NAME_WORKFLOW_LOG = "workflow_logs";

ui/src/repository/certificate.ts

@@ -3,14 +3,14 @@ import dayjs from "dayjs";
 import { type CertificateModel } from "@/domain/certificate";
 import { COLLECTION_NAME_CERTIFICATE, getPocketBase } from "./_pocketbase";
 
-export type ListCertificateRequest = {
+export type ListRequest = {
   keyword?: string;
   state?: "expireSoon" | "expired";
   page?: number;
   perPage?: number;
 };
 
-export const list = async (request: ListCertificateRequest) => {
+export const list = async (request: ListRequest) => {
   const pb = getPocketBase();
 
   const filters: string[] = ["deleted=null"];
@@ -39,7 +39,7 @@ export const listByWorkflowRunId = async (workflowRunId: string) => {
   const list = await pb.collection(COLLECTION_NAME_CERTIFICATE).getFullList<CertificateModel>({
     batch: 65535,
     filter: pb.filter("workflowRunId={:workflowRunId}", { workflowRunId: workflowRunId }),
-    sort: "-created",
+    // sort: "created",
     requestKey: null,
   });
 

ui/src/repository/workflow.ts

@@ -3,14 +3,14 @@ import { type RecordSubscription } from "pocketbase";
 import { type WorkflowModel } from "@/domain/workflow";
 import { COLLECTION_NAME_WORKFLOW, getPocketBase } from "./_pocketbase";
 
-export type ListWorkflowRequest = {
+export type ListRequest = {
   keyword?: string;
   enabled?: boolean;
   page?: number;
   perPage?: number;
 };
 
-export const list = async (request: ListWorkflowRequest) => {
+export const list = async (request: ListRequest) => {
   const pb = getPocketBase();
 
   const filters: string[] = [];

ui/src/repository/workflowLog.ts

@@ -0,0 +1,19 @@
+import { type WorkflowLogModel } from "@/domain/workflowLog";
+
+import { COLLECTION_NAME_WORKFLOW_LOG, getPocketBase } from "./_pocketbase";
+
+export const listByWorkflowRunId = async (workflowRunId: string) => {
+  const pb = getPocketBase();
+
+  const list = await pb.collection(COLLECTION_NAME_WORKFLOW_LOG).getFullList<WorkflowLogModel>({
+    batch: 65535,
+    filter: pb.filter("runId={:runId}", { runId: workflowRunId }),
+    // sort: "created",
+    requestKey: null,
+  });
+
+  return {
+    totalItems: list.length,
+    items: list,
+  };
+};

ui/src/repository/workflowRun.ts

@@ -4,14 +4,14 @@ import { type WorkflowRunModel } from "@/domain/workflowRun";
 
 import { COLLECTION_NAME_WORKFLOW_RUN, getPocketBase } from "./_pocketbase";
 
-export type ListWorkflowRunsRequest = {
+export type ListRequest = {
   workflowId?: string;
   page?: number;
   perPage?: number;
   expand?: boolean;
 };
 
-export const list = async (request: ListWorkflowRunsRequest) => {
+export const list = async (request: ListRequest) => {
   const pb = getPocketBase();
 
   const filters: string[] = [];

ui/src/stores/access/index.ts

@@ -2,7 +2,7 @@
 import { create } from "zustand";
 
 import { type AccessModel } from "@/domain/access";
-import { list as listAccess, remove as removeAccess, save as saveAccess } from "@/repository/access";
+import { list as listAccesses, remove as removeAccess, save as saveAccess } from "@/repository/access";
 
 export interface AccessesState {
   accesses: AccessModel[];
@@ -24,7 +24,7 @@ export const useAccessesStore = create<AccessesState>((set) => {
     loadedAtOnce: false,
 
     fetchAccesses: async () => {
-      fetcher ??= listAccess().then((res) => res.items);
+      fetcher ??= listAccesses().then((res) => res.items);
 
       try {
         set({ loading: true });