feat(ui): new WorkflowRuns using antd

This commit is contained in:
Fu Diwei 2024-12-24 22:00:17 +08:00
parent 4e5373de73
commit 401fa3dcdd
21 changed files with 340 additions and 458 deletions

32
ui/package-lock.json generated
View File

@ -16,7 +16,6 @@
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/react-table": "^8.20.5",
"ahooks": "^3.8.4",
"antd": "^5.22.5",
"antd-zod": "^6.0.0",
@ -3939,37 +3938,6 @@
"win32"
]
},
"node_modules/@tanstack/react-table": {
"version": "8.20.5",
"resolved": "https://registry.npmmirror.com/@tanstack/react-table/-/react-table-8.20.5.tgz",
"integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
"dependencies": {
"@tanstack/table-core": "8.20.5"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tanstack/table-core": {
"version": "8.20.5",
"resolved": "https://registry.npmmirror.com/@tanstack/table-core/-/table-core-8.20.5.tgz",
"integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.5.tgz",

View File

@ -18,7 +18,6 @@
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/react-table": "^8.20.5",
"ahooks": "^3.8.4",
"antd": "^5.22.5",
"antd-zod": "^6.0.0",

View File

@ -55,6 +55,7 @@ const RootApp = () => {
...antdTheme,
token: {
colorPrimary: "hsl(24.6 95% 53.1%)",
colorLink: "hsl(24.6 95% 53.1%)",
},
}}
>

View File

@ -2,8 +2,9 @@ import { cloneElement, useMemo } from "react";
import { useControllableValue } from "ahooks";
import { Drawer } from "antd";
import { type CertificateModel } from "@/domain/certificate";
import Show from "@/components/Show";
import CertificateDetail from "./CertificateDetail";
import { type CertificateModel } from "@/domain/certificate";
export type CertificateDetailDrawerProps = {
data?: CertificateModel;
@ -38,8 +39,10 @@ const CertificateDetailDrawer = ({ data, loading, trigger, ...props }: Certifica
<>
{triggerEl}
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={() => setOpen(false)}>
{data ? <CertificateDetail data={data} /> : <></>}
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
<Show when={!!data}>
<CertificateDetail data={data!} />
</Show>
</Drawer>
</>
);

View File

@ -1,47 +0,0 @@
import * as React from "react";
import { cn } from "./utils";
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
</div>
));
Table.displayName = "Table";
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
));
TableHeader.displayName = "TableHeader";
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
));
TableBody.displayName = "TableBody";
const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(({ className, ...props }, ref) => (
<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
));
TableFooter.displayName = "TableFooter";
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(({ className, ...props }, ref) => (
<tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} />
));
TableRow.displayName = "TableRow";
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
<th ref={ref} className={cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className)} {...props} />
));
TableHead.displayName = "TableHead";
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(({ className, ...props }, ref) => (
<td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
));
TableCell.displayName = "TableCell";
const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(({ className, ...props }, ref) => (
<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
));
TableCaption.displayName = "TableCaption";
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

View File

@ -1,120 +0,0 @@
import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, PaginationState, useReactTable } from "@tanstack/react-table";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Button } from "../ui/button";
import { useEffect, useState } from "react";
import Show from "../Show";
import { useTranslation } from "react-i18next";
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;
withPagination?: boolean;
fallback?: React.ReactNode;
}
export function DataTable<TData extends { id: string }, TValue>({
columns,
data,
onPageChange,
pageCount,
onRowClick,
withPagination,
fallback,
}: DataTableProps<TData, TValue>) {
const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
pageIndex: 0,
pageSize: 10,
});
const { t } = useTranslation();
const pagination = {
pageIndex,
pageSize,
};
const table = useReactTable({
data,
columns,
pageCount: pageCount,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
state: {
pagination,
},
onPaginationChange: setPagination,
manualPagination: true,
});
useEffect(() => {
onPageChange?.(pageIndex, pageSize);
}, [pageIndex]);
const handleRowClick = (id: string) => {
onRowClick?.(id);
};
return (
<div>
<div className="rounded-md">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id} className="dark:border-muted-foreground">
{headerGroup.headers.map((header) => {
return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
})}
</TableRow>
))}
</TableHeader>
<TableBody className="dark:text-stone-200">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="dark:border-muted-foreground"
onClick={(e) => {
e.stopPropagation();
handleRowClick(row.original.id);
}}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
{fallback ? fallback : t("common.text.nodata")}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
<Show when={!!withPagination}>
<div className="flex items-center justify-end mt-5">
<div className="flex items-center space-x-2 dark:text-stone-200">
{table.getCanPreviousPage() && (
<Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
{t("common.pagination.prev")}
</Button>
)}
{table.getCanNextPage && (
<Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
{t("common.pagination.next")}
</Button>
)}
</div>
</div>
</Show>
</div>
);
}

View File

@ -1,93 +0,0 @@
import { WorkflowRunLog } from "@/domain/workflow";
import { list as logs } from "@/repository/workflowRunLog";
import { ColumnDef } from "@tanstack/react-table";
import { useState } from "react";
import { DataTable } from "./DataTable";
import { useParams } from "react-router-dom";
import { Check, X } from "lucide-react";
import WorkflowLogDetail from "./WorkflowLogDetail";
import { useTranslation } from "react-i18next";
const WorkflowLog = () => {
const [data, setData] = useState<WorkflowRunLog[]>([]);
const [pageCount, setPageCount] = useState<number>(0);
const { id } = useParams();
const { t } = useTranslation();
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: t("workflow.history.props.state"),
cell: ({ row }) => {
const succeed: boolean = row.getValue("succeed");
if (succeed) {
return (
<div className="flex items-center space-x-2 min-w-[150px]">
<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">{t("workflow.history.props.state.success")}</div>
</div>
);
} else {
return (
<div className="flex items-center space-x-2 min-w-[150px]">
<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">{t("workflow.history.props.state.failed")}</div>
</div>
);
}
},
},
{
accessorKey: "error",
header: t("workflow.history.props.reason"),
cell: ({ row }) => {
let error: string = row.getValue("error");
if (!error) {
error = "";
}
return <div className="max-w-[300px] truncate text-red-500">{error}</div>;
},
},
{
accessorKey: "created",
header: t("workflow.history.props.time"),
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">{t("workflow.history.page.title")}</div>
<DataTable columns={columns} data={data} onPageChange={fetchData} pageCount={pageCount} onRowClick={handleRowClick} />
</div>
<WorkflowLogDetail open={open} onOpenChange={setOpen} log={selectedLog} />
</div>
);
};
export default WorkflowLog;

View File

@ -1,85 +0,0 @@
import { WorkflowOutput, WorkflowRunLog, WorkflowRunLogItem } from "@/domain/workflow";
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
import { Check, X } from "lucide-react";
import { ScrollArea } from "../ui/scroll-area";
import { useTranslation } from "react-i18next";
type WorkflowLogDetailProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
log?: WorkflowRunLog;
};
const WorkflowLogDetail = ({ open, onOpenChange, log }: WorkflowLogDetailProps) => {
const { t } = useTranslation();
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent className="sm:max-w-5xl">
<SheetHeader>
<SheetTitle>{t("workflow.history.page.title")}</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 min-w-[150px]">
<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">{t("workflow.history.props.state.success")}</div>
</div>
<div className="text-muted-foreground">{new Date(log.created).toLocaleString()}</div>
</div>
) : (
<div className="mt-5 flex justify-between bg-red-100 p-5 rounded-md items-center">
<div className="flex space-x-2 items-center min-w-[150px]">
<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">{t("workflow.history.props.state.failed")}</div>
</div>
<div className="text-red-500 max-w-[400px] truncate">{log?.error}</div>
<div className="text-muted-foreground">{log?.created && new Date(log.created).toLocaleString()}</div>
</div>
)}
<ScrollArea className="h-[80vh] mt-5 bg-black p-5 rounded-md">
<div className=" 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 max-w-[70%]">{output.error}</div>
</>
) : (
<>
<div>{output.content}</div>
</>
)}
</div>
</>
);
})}
</div>
</div>
);
})}
</div>
</ScrollArea>
</div>
</SheetContent>
</Sheet>
);
};
export default WorkflowLogDetail;

View File

@ -0,0 +1,80 @@
import { cloneElement, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useControllableValue } from "ahooks";
import { Alert, Drawer } from "antd";
import Show from "@/components/Show";
import { type WorkflowRunModel } from "@/domain/workflowRun";
export type WorkflowRunDetailDrawerProps = {
data?: WorkflowRunModel;
loading?: boolean;
trigger?: React.ReactElement;
onOpenChange?: (open: boolean) => void;
};
const WorkflowRunDetailDrawer = ({ data, loading, trigger, ...props }: WorkflowRunDetailDrawerProps) => {
const { t } = useTranslation();
const [open, setOpen] = useControllableValue<boolean>(props, {
valuePropName: "open",
defaultValuePropName: "defaultOpen",
trigger: "onOpenChange",
});
const triggerEl = useMemo(() => {
if (!trigger) {
return null;
}
return cloneElement(trigger, {
...trigger.props,
onClick: () => {
setOpen(true);
trigger.props?.onClick?.();
},
});
}, [trigger, setOpen]);
return (
<>
{triggerEl}
<Drawer closable destroyOnClose open={open} loading={loading} placement="right" title={data?.id} width={640} onClose={() => setOpen(false)}>
<Show when={!!data}>
<Show when={data!.succeed}>
<Alert showIcon type="success" message={t("workflow_run.props.status.succeeded")} />
</Show>
<Show when={!data!.succeed}>
<Alert showIcon type="error" message={t("workflow_run.props.status.failed")} description={data!.error} />
</Show>
<div className="mt-4 p-4 bg-black text-stone-200 rounded-md">
<div className="flex flex-col space-y-3">
{data!.log.map((item, i) => {
return (
<div key={i} className="flex flex-col space-y-2">
<div>{item.nodeName}</div>
<div className="flex flex-col space-y-1">
{item.outputs.map((output, j) => {
return (
<div key={j} 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>
</Show>
</Drawer>
</>
);
};
export default WorkflowRunDetailDrawer;

View File

@ -0,0 +1,157 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useRequest } from "ahooks";
import { Button, Empty, notification, Space, Table, theme, Tooltip, Typography, type TableProps } from "antd";
import { CircleCheck as CircleCheckIcon, CircleX as CircleXIcon, Eye as EyeIcon } from "lucide-react";
import dayjs from "dayjs";
import { ClientResponseError } from "pocketbase";
import WorkflowRunDetailDrawer from "./WorkflowRunDetailDrawer";
import { type WorkflowRunModel } from "@/domain/workflowRun";
import { list as listWorkflowRuns } from "@/repository/workflowRun";
import { getErrMsg } from "@/utils/error";
export type WorkflowRunsProps = {
className?: string;
style?: React.CSSProperties;
};
const WorkflowRuns = ({ className, style }: WorkflowRunsProps) => {
const { t } = useTranslation();
const { token: themeToken } = theme.useToken();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const tableColumns: TableProps<WorkflowRunModel>["columns"] = [
{
key: "$index",
align: "center",
fixed: "left",
width: 50,
render: (_, __, index) => (page - 1) * pageSize + index + 1,
},
{
key: "id",
title: t("workflow_run.props.id"),
ellipsis: true,
render: (_, record) => record.id,
},
{
key: "status",
title: t("workflow_run.props.status"),
ellipsis: true,
render: (_, record) => {
if (record.succeed) {
return (
<Space>
<CircleCheckIcon color={themeToken.colorSuccess} size={16} />
<Typography.Text type="success">{t("workflow_run.props.status.succeeded")}</Typography.Text>
</Space>
);
} else {
<Tooltip title={record.error}>
<Space>
<CircleXIcon color={themeToken.colorError} size={16} />
<Typography.Text type="danger">{t("workflow_run.props.status.failed")}</Typography.Text>
</Space>
</Tooltip>;
}
},
},
{
key: "startedAt",
title: t("workflow_run.props.started_at"),
ellipsis: true,
render: (_, record) => {
return "TODO";
},
},
{
key: "completedAt",
title: t("workflow_run.props.completed_at"),
ellipsis: true,
render: (_, record) => {
return "TODO";
},
},
{
key: "$action",
align: "end",
fixed: "right",
width: 120,
render: (_, record) => (
<Button.Group>
<WorkflowRunDetailDrawer data={record} trigger={<Button color="primary" icon={<EyeIcon size={16} />} variant="text" />} />
</Button.Group>
),
},
];
const [tableData, setTableData] = useState<WorkflowRunModel[]>([]);
const [tableTotal, setTableTotal] = useState<number>(0);
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const { id: workflowId } = useParams(); // TODO: 外部传参
const { loading } = useRequest(
() => {
return listWorkflowRuns({
workflowId: workflowId!,
page: page,
perPage: pageSize,
});
},
{
refreshDeps: [workflowId, page, pageSize],
onSuccess: (data) => {
setTableData(data.items);
setTableTotal(data.totalItems);
},
onError: (err) => {
if (err instanceof ClientResponseError && err.isAbort) {
return;
}
console.error(err);
notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
},
}
);
return (
<>
{NotificationContextHolder}
<div className={className} style={style}>
<Table<WorkflowRunModel>
columns={tableColumns}
dataSource={tableData}
loading={loading}
locale={{
emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />,
}}
pagination={{
current: page,
pageSize: pageSize,
total: tableTotal,
showSizeChanger: true,
onChange: (page: number, pageSize: number) => {
setPage(page);
setPageSize(pageSize);
},
onShowSizeChange: (page: number, pageSize: number) => {
setPage(page);
setPageSize(pageSize);
},
}}
rowKey={(record: WorkflowRunModel) => record.id}
scroll={{ x: "max(100%, 960px)" }}
/>
</div>
</>
);
};
export default WorkflowRuns;

View File

@ -4,6 +4,9 @@ import { nanoid } from "nanoid";
import i18n from "@/i18n";
import { deployTargets } from "./domain";
/**
* @deprecated
*/
export type WorkflowRunLog = {
id: string;
workflow: string;
@ -14,6 +17,9 @@ export type WorkflowRunLog = {
updated: string;
};
/**
* @deprecated
*/
export type WorkflowRunLogItem = {
nodeName: string;
error: string;

View File

@ -0,0 +1,14 @@
import { type WorkflowOutput } from "./workflow";
export interface WorkflowRunModel extends BaseModel {
workflow: string;
log: WorkflowRunLog[];
error: string;
succeed: boolean;
}
export type WorkflowRunLog = {
nodeName: string;
error: string;
outputs: WorkflowOutput[];
};

View File

@ -21,7 +21,6 @@
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--ring: 24.6 95% 53.1%;
--radius: 0.5rem;
}
.dark {

View File

@ -20,27 +20,30 @@
"workflow.props.created_at": "Created At",
"workflow.props.updated_at": "Updated At",
"workflow.detail.orchestration.tab": "Orchestration",
"workflow.detail.runs.tab": "Workflow Runs",
"workflow.baseinfo.modal.title": "Workflow Base Information",
"workflow.baseinfo.form.name.label": "Name",
"workflow.baseinfo.form.name.placeholder": "Please enter name",
"workflow.baseinfo.form.description.label": "Description",
"workflow.baseinfo.form.description.placeholder": "Please enter description",
"workflow_run.props.id": "ID",
"workflow_run.props.status": "Status",
"workflow_run.props.status.succeeded": "Succeeded",
"workflow_run.props.status.failed": "Failed",
"workflow_run.props.started_at": "Started At",
"workflow_run.props.completed_at": "Completed At",
"workflow.detail.action.save": "Save updates",
"workflow.detail.action.save.failed": "Save failed",
"workflow.detail.action.save.failed.uncompleted": "Please complete all node settings",
"workflow.detail.action.save.failed.uncompleted": "Please complete the orchestration and publish the changes first",
"workflow.detail.action.run": "Run",
"workflow.detail.action.run.failed": "Run failed",
"workflow.detail.action.run.success": "Run success",
"workflow.detail.action.running": "Running",
"workflow.history.page.title": "Logs",
"workflow.history.props.state": "State",
"workflow.history.props.state.success": "Success",
"workflow.history.props.state.failed": "Failed",
"workflow.history.props.reason": "Reason",
"workflow.history.props.time": "Time",
"workflow.common.certificate.label": "Certificate",
"workflow.common.certificate.placeholder": "Please select certificate source",

View File

@ -20,29 +20,30 @@
"workflow.props.created_at": "创建时间",
"workflow.props.updated_at": "更新时间",
"workflow.detail.orchestration.tab": "流程编排",
"workflow.detail.runs.tab": "执行历史",
"workflow.baseinfo.modal.title": "编辑基本信息",
"workflow.baseinfo.form.name.label": "名称",
"workflow.baseinfo.form.name.placeholder": "请输入工作流名称",
"workflow.baseinfo.form.description.label": "描述",
"workflow.baseinfo.form.description.placeholder": "请输入工作流描述",
"workflow_run.props.id": "ID",
"workflow_run.props.status": "状态",
"workflow_run.props.status.succeeded": "成功",
"workflow_run.props.status.failed": "失败",
"workflow_run.props.started_at": "开始时间",
"workflow_run.props.completed_at": "完成时间",
"workflow.detail.action.save": "保存变更",
"workflow.detail.action.save.failed": "保存失败",
"workflow.detail.action.save.failed.uncompleted": "请完成所有节点设置",
"workflow.detail.action.save.failed.uncompleted": "请先完成流程编排并发布更改",
"workflow.detail.action.run": "立即执行",
"workflow.detail.action.run.failed": "执行失败",
"workflow.detail.action.run.success": "执行成功",
"workflow.detail.action.running": "正在执行",
"workflow.baseinfo.title": "基本信息",
"workflow.history.page.title": "日志",
"workflow.history.props.state": "状态",
"workflow.history.props.state.success": "通过",
"workflow.history.props.state.failed": "失败",
"workflow.history.props.reason": "原因",
"workflow.history.props.time": "时间",
"workflow.common.certificate.label": "证书",
"workflow.common.certificate.placeholder": "请选择证书来源",

View File

@ -69,14 +69,13 @@ const AccessList = () => {
fixed: "right",
width: 120,
render: (_, record) => (
<>
<Space size={0}>
<Button.Group>
<AccessEditModal
data={record}
preset="edit"
trigger={
<Tooltip title={t("access.action.edit")}>
<Button type="link" icon={<PencilIcon size={16} />} />
<Button color="primary" icon={<PencilIcon size={16} />} variant="text" />
</Tooltip>
}
/>
@ -86,23 +85,22 @@ const AccessList = () => {
preset="add"
trigger={
<Tooltip title={t("access.action.copy")}>
<Button type="link" icon={<CopyIcon size={16} />} />
<Button color="primary" icon={<CopyIcon size={16} />} variant="text" />
</Tooltip>
}
/>
<Tooltip title={t("access.action.delete")}>
<Button
type="link"
danger={true}
color="danger"
icon={<Trash2Icon size={16} />}
variant="text"
onClick={() => {
handleDeleteClick(record);
}}
/>
</Tooltip>
</Space>
</>
</Button.Group>
),
},
];

View File

@ -153,16 +153,16 @@ const CertificateList = () => {
fixed: "right",
width: 120,
render: (_, record) => (
<Space size={0}>
<Button.Group>
<CertificateDetailDrawer
data={record}
trigger={
<Tooltip title={t("certificate.action.view")}>
<Button type="link" icon={<EyeIcon size={16} />} />
<Button color="primary" icon={<EyeIcon size={16} />} variant="text" />
</Tooltip>
}
/>
</Space>
</Button.Group>
),
},
];

View File

@ -10,7 +10,7 @@ import { z } from "zod";
import Show from "@/components/Show";
import End from "@/components/workflow/End";
import NodeRender from "@/components/workflow/NodeRender";
import WorkflowLog from "@/components/workflow/WorkflowLog";
import WorkflowRuns from "@/components/workflow/run/WorkflowRuns";
import WorkflowProvider from "@/components/workflow/WorkflowProvider";
import { useZustandShallowSelector } from "@/hooks";
import { allNodesValidated, type WorkflowModel, type WorkflowNode } from "@/domain/workflow";
@ -32,7 +32,7 @@ const WorkflowDetail = () => {
init(workflowId);
}, [workflowId]);
const [tabValue, setTabValue] = useState<"orchestrate" | "runlog">("orchestrate");
const [tabValue, setTabValue] = useState<"orchestration" | "runs">("orchestration");
// const [running, setRunning] = useState(false);
@ -123,10 +123,10 @@ const WorkflowDetail = () => {
<Typography.Paragraph type="secondary">{workflow.description}</Typography.Paragraph>
<Tabs
activeKey={tabValue}
defaultActiveKey="orchestrate"
defaultActiveKey="orchestration"
items={[
{ key: "orchestrate", label: "流程编排" },
{ key: "runlog", label: "执行历史" },
{ key: "orchestration", label: t("workflow.detail.orchestration.tab") },
{ key: "runs", label: t("workflow.detail.runs.tab") },
]}
renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
tabBarStyle={{ border: "none" }}
@ -138,12 +138,12 @@ const WorkflowDetail = () => {
<div className="p-4">
<Card>
<WorkflowProvider>
<Show when={tabValue === "orchestrate"}>
<Show when={tabValue === "orchestration"}>
<div className="flex flex-col items-center">{elements}</div>
</Show>
<Show when={tabValue === "runlog"}>
<WorkflowLog />
<Show when={tabValue === "runs"}>
<WorkflowRuns />
</Show>
</WorkflowProvider>
</Card>

View File

@ -176,27 +176,30 @@ const WorkflowList = () => {
fixed: "right",
width: 120,
render: (_, record) => (
<Space size={0}>
<Button.Group>
<Tooltip title={t("workflow.action.edit")}>
<Button
type="link"
color="primary"
icon={<PencilIcon size={16} />}
variant="text"
onClick={() => {
navigate(`/workflows/${record.id}`);
}}
/>
</Tooltip>
<Tooltip title={t("workflow.action.delete")}>
<Button
type="link"
color="danger"
danger={true}
icon={<Trash2Icon size={16} />}
variant="text"
onClick={() => {
handleDeleteClick(record);
}}
/>
</Tooltip>
</Space>
</Button.Group>
),
},
];

View File

@ -1,22 +1,22 @@
import { type WorkflowRunLog } from "@/domain/workflow";
import { type WorkflowRunModel } from "@/domain/workflowRun";
import { getPocketBase } from "./pocketbase";
const COLLECTION_NAME = "workflow_run_log";
export type ListWorkflowLogsRequest = {
id: string;
export type ListWorkflowRunsRequest = {
workflowId: string;
page?: number;
perPage?: number;
};
export const list = async (request: ListWorkflowLogsRequest) => {
export const list = async (request: ListWorkflowRunsRequest) => {
const page = request.page || 1;
const perPage = request.perPage || 10;
return await getPocketBase()
.collection(COLLECTION_NAME)
.getList<WorkflowRunLog>(page, perPage, {
filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: request.id }),
.getList<WorkflowRunModel>(page, perPage, {
filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: request.workflowId }),
sort: "-created",
requestKey: null,
});

View File

@ -44,11 +44,6 @@ module.exports = {
foreground: "hsl(var(--popover-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [require("tailwindcss-animate")],