feat(ui): new CertificateList UI using antd
This commit is contained in:
Fu Diwei
214
ui/src/pages/workflows/WorkflowDetail.tsx
Normal file
214
ui/src/pages/workflows/WorkflowDetail.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import { run } from "@/api/workflow";
|
||||
import Show from "@/components/Show";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
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 { getErrMessage } from "@/lib/error";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
|
||||
import { useShallow } from "zustand/shallow";
|
||||
|
||||
const selectState = (state: WorkflowState) => ({
|
||||
workflow: state.workflow,
|
||||
init: state.init,
|
||||
switchEnable: state.switchEnable,
|
||||
save: state.save,
|
||||
});
|
||||
|
||||
const WorkflowDetail = () => {
|
||||
// 3. 使用正确的选择器和 shallow 比较
|
||||
const { workflow, init, switchEnable, save } = useWorkflowStore(useShallow(selectState));
|
||||
|
||||
// 从 url 中获取 workflowId
|
||||
const [searchParams] = useSearchParams();
|
||||
const [locId, setLocId] = useState<string>("");
|
||||
const id = searchParams.get("id");
|
||||
|
||||
const [tab, setTab] = useState("workflow");
|
||||
|
||||
const [running, setRunning] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
init(id ?? "");
|
||||
if (id) {
|
||||
setLocId(id);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { toast } = useToast();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const elements = useMemo(() => {
|
||||
let current = workflow.draft as WorkflowNode;
|
||||
|
||||
const elements: JSX.Element[] = [];
|
||||
|
||||
while (current) {
|
||||
// 处理普通节点
|
||||
elements.push(<NodeRender data={current} key={current.id} />);
|
||||
current = current.next as WorkflowNode;
|
||||
}
|
||||
|
||||
elements.push(<End key="workflow-end" />);
|
||||
|
||||
return elements;
|
||||
}, [workflow]);
|
||||
|
||||
const handleBackClick = () => {
|
||||
// 返回上一步
|
||||
navigate(-1);
|
||||
};
|
||||
|
||||
const handleEnableChange = () => {
|
||||
if (!workflow.enabled && !allNodesValidated(workflow.draft as WorkflowNode)) {
|
||||
toast({
|
||||
title: t("workflow.detail.action.save.failed"),
|
||||
description: t("workflow.detail.action.save.failed.uncompleted"),
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
switchEnable();
|
||||
if (!locId) {
|
||||
navigate(`/workflow/detail?id=${workflow.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleWorkflowSaveClick = () => {
|
||||
if (!allNodesValidated(workflow.draft as WorkflowNode)) {
|
||||
toast({
|
||||
title: t("workflow.detail.action.save.failed"),
|
||||
description: t("workflow.detail.action.save.failed.uncompleted"),
|
||||
variant: "destructive",
|
||||
});
|
||||
return;
|
||||
}
|
||||
save();
|
||||
if (!locId) {
|
||||
navigate(`/workflow/detail?id=${workflow.id}`);
|
||||
}
|
||||
};
|
||||
|
||||
const getTabCls = (tabName: string) => {
|
||||
if (tab === tabName) {
|
||||
return "text-primary border-primary";
|
||||
}
|
||||
return "border-transparent hover:text-primary hover:border-b-primary";
|
||||
};
|
||||
|
||||
const handleRunClick = async () => {
|
||||
if (running) {
|
||||
return;
|
||||
}
|
||||
setRunning(true);
|
||||
try {
|
||||
await run(workflow.id as string);
|
||||
toast({
|
||||
title: t("workflow.detail.action.run.success"),
|
||||
description: t("workflow.detail.action.run.success"),
|
||||
variant: "default",
|
||||
});
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: t("workflow.detail.action.run.failed"),
|
||||
description: getErrMessage(e),
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
setRunning(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WorkflowProvider>
|
||||
<Toaster />
|
||||
<ScrollArea className="h-[100vh] w-full relative bg-background">
|
||||
<div className="h-16 sticky top-0 left-0 z-20 shadow-md bg-muted/40 flex justify-between items-center">
|
||||
<div className="px-5 text-stone-700 dark:text-stone-200 flex items-center space-x-2">
|
||||
<ArrowLeft className="cursor-pointer" onClick={handleBackClick} />
|
||||
<WorkflowBaseInfoEditDialog
|
||||
trigger={
|
||||
<div className="flex flex-col space-y-1 cursor-pointer items-start">
|
||||
<div className="truncate max-w-[200px]">{workflow.name ? workflow.name : t("workflow.props.name.default")}</div>
|
||||
<div className="text-sm text-muted-foreground truncate max-w-[200px]">
|
||||
{workflow.description ? workflow.description : t("workflow.props.description.placeholder")}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</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>{t("workflow.detail.title")}</div>
|
||||
</div>
|
||||
<div
|
||||
className={cn("h-full flex items-center cursor-pointer border-b-2", getTabCls("history"))}
|
||||
onClick={() => {
|
||||
setTab("history");
|
||||
}}
|
||||
>
|
||||
<div>{t("workflow.detail.history")}</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"} onClick={handleRunClick}>
|
||||
{running ? t("workflow.detail.action.running") : t("workflow.detail.action.run")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Button variant={"secondary"} onClick={handleWorkflowSaveClick}>
|
||||
{t("workflow.detail.action.save")}
|
||||
</Button>
|
||||
</Show>
|
||||
</Show>
|
||||
|
||||
<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>
|
||||
|
||||
<Show when={!!locId && tab === "history"}>
|
||||
<div className=" flex flex-col items-center mt-8">
|
||||
<WorkflowLog />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<ScrollBar orientation="vertical" />
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
</WorkflowProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowDetail;
|
||||
249
ui/src/pages/workflows/WorkflowList.tsx
Normal file
249
ui/src/pages/workflows/WorkflowList.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
|
||||
import { PageHeader } from "@ant-design/pro-components";
|
||||
import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
|
||||
|
||||
import { Workflow as WorkflowType } from "@/domain/workflow";
|
||||
import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
|
||||
|
||||
const WorkflowList = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const tableColumns: TableProps<WorkflowType>["columns"] = [
|
||||
{
|
||||
key: "$index",
|
||||
align: "center",
|
||||
title: "",
|
||||
width: 50,
|
||||
render: (_, __, index) => (page - 1) * pageSize + index + 1,
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
title: t("common.text.name"),
|
||||
render: (_, record) => (
|
||||
<Space className="max-w-full" direction="vertical" size={4}>
|
||||
<Typography.Text ellipsis>{record.name}</Typography.Text>
|
||||
<Typography.Text type="secondary" ellipsis>
|
||||
{record.description}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
title: t("workflow.props.executionMethod"),
|
||||
render: (_, record) => {
|
||||
const method = record.type;
|
||||
if (!method) {
|
||||
return "-";
|
||||
} else if (method === "manual") {
|
||||
return <Typography.Text>{t("workflow.node.start.form.executionMethod.options.manual")}</Typography.Text>;
|
||||
} else if (method === "auto") {
|
||||
return (
|
||||
<Space className="max-w-full" direction="vertical" size={4}>
|
||||
<Typography.Text>{t("workflow.node.start.form.executionMethod.options.auto")}</Typography.Text>
|
||||
<Typography.Text type="secondary">{record.crontab ?? ""}</Typography.Text>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "enabled",
|
||||
title: t("workflow.props.enabled"),
|
||||
render: (_, record) => {
|
||||
const enabled = record.enabled;
|
||||
return (
|
||||
<>
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => {
|
||||
handleEnabledChange(record.id);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "lastExecutedAt",
|
||||
title: "最近执行状态",
|
||||
render: () => {
|
||||
// TODO: 最近执行状态
|
||||
return <>TODO</>;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "createdAt",
|
||||
title: t("common.text.created_at"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
return new Date(record.created!).toLocaleString();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "updatedAt",
|
||||
title: t("common.text.updated_at"),
|
||||
ellipsis: true,
|
||||
render: (_, record) => {
|
||||
return new Date(record.updated!).toLocaleString();
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "$operations",
|
||||
align: "end",
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Tooltip title={t("common.edit")}>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PencilIcon size={16} />}
|
||||
onClick={() => {
|
||||
navigate(`/workflow/detail?id=${record.id}`);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title={t("common.delete")}>
|
||||
<Button
|
||||
type="link"
|
||||
danger={true}
|
||||
icon={<Trash2Icon size={16} />}
|
||||
onClick={() => {
|
||||
handleDeleteClick(record.id);
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const [tableData, setTableData] = useState<WorkflowType[]>([]);
|
||||
const [tableTotal, setTableTotal] = useState<number>(0);
|
||||
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
|
||||
// TODO: 表头筛选
|
||||
const fetchTableData = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
const state = searchParams.get("state");
|
||||
const req: WorkflowListReq = { page: page, perPage: pageSize };
|
||||
if (state == "enabled") {
|
||||
req.enabled = true;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await listWorkflow(req);
|
||||
|
||||
setTableData(resp.items);
|
||||
setTableTotal(resp.totalItems);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTableData();
|
||||
}, [page, pageSize]);
|
||||
|
||||
const handleEnabledChange = async (id: string) => {
|
||||
try {
|
||||
const resp = await saveWorkflow({ id, enabled: !tableData.find((item) => item.id === id)?.enabled });
|
||||
if (resp) {
|
||||
setTableData((prev) => {
|
||||
return prev.map((item) => {
|
||||
if (item.id === id) {
|
||||
return resp;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteClick = (id: string) => {
|
||||
modalApi.confirm({
|
||||
title: t("workflow.action.delete.alert.title"),
|
||||
content: t("workflow.action.delete.alert.content"),
|
||||
onOk: async () => {
|
||||
try {
|
||||
const resp = await removeWorkflow(id);
|
||||
if (resp) {
|
||||
setTableData((prev) => prev.filter((item) => item.id !== id));
|
||||
}
|
||||
} catch (err) {
|
||||
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateClick = () => {
|
||||
navigate("/workflow/detail");
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title={t("workflow.page.title")}
|
||||
extra={[
|
||||
<Button
|
||||
key="create"
|
||||
type="primary"
|
||||
icon={<PlusIcon size={16} />}
|
||||
onClick={() => {
|
||||
handleCreateClick();
|
||||
}}
|
||||
>
|
||||
{t("workflow.action.create")}
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
|
||||
<Table<WorkflowType>
|
||||
columns={tableColumns}
|
||||
dataSource={tableData}
|
||||
rowKey={(record) => record.id}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: tableTotal,
|
||||
onChange: (page, pageSize) => {
|
||||
setPage(page);
|
||||
setPageSize(pageSize);
|
||||
},
|
||||
onShowSizeChange: (page, pageSize) => {
|
||||
setPage(page);
|
||||
setPageSize(pageSize);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
{ModelContextHolder}
|
||||
{NotificationContextHolder}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowList;
|
||||
Reference in New Issue
Block a user