wood/certimate
1
0
Fork 0
mirror of https://github.com/woodchen-ink/certimate.git synced 2025-07-18 09:21:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): workflow logs

Browse Source
This commit is contained in:
Fu Diwei 2025-03-18 20:02:39 +08:00
parent af5d7465a1
commit fd6e41c566
16 changed files with 173 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
internal/deployer/deployer.go
View File

@ -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 {

2
internal/workflow/node-processor/deploy_node.go
View File

@ -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
}

152
ui/src/components/workflow/WorkflowRunDetail.tsx
View File

@ -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>
<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>
<WorkflowRunLogs runId={data.id} runStatus={data.status} />
</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],

7
ui/src/domain/workflowLog.ts Normal file
View File

@ -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>;
}

17
ui/src/domain/workflowRun.ts
View File

@ -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",

2
ui/src/i18n/locales/en/nls.dashboard.json
View File

@ -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",

2
ui/src/i18n/locales/zh/nls.dashboard.json
View File

@ -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": "新建工作流",

6
ui/src/pages/certificates/CertificateList.tsx
View File

@ -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,
});

2
ui/src/pages/dashboard/Dashboard.tsx
View File

@ -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}

4
ui/src/pages/workflows/WorkflowList.tsx
View File

@ -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,

1
ui/src/repository/_pocketbase.ts
View File

@ -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";

6
ui/src/repository/certificate.ts
View File

@ -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,
});

4
ui/src/repository/workflow.ts
View File

@ -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[] = [];

19
ui/src/repository/workflowLog.ts Normal file
View File

@ -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,
};
};

4
ui/src/repository/workflowRun.ts
View File

@ -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[] = [];

4
ui/src/stores/access/index.ts
View File

@ -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 });