{statistic?.workflowEnabled ? (
-
+
{statistic?.workflowEnabled}
) : (
diff --git a/ui/src/pages/login/Login.tsx b/ui/src/pages/login/Login.tsx
index eff5fd9d..b3bafb04 100644
--- a/ui/src/pages/login/Login.tsx
+++ b/ui/src/pages/login/Login.tsx
@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";
const formSchema = z.object({
username: z.string().email({
@@ -33,7 +33,7 @@ const Login = () => {
// 2. Define a submit handler.
const onSubmit = async (values: z.infer
) => {
try {
- await getPb().admins.authWithPassword(values.username, values.password);
+ await getPocketBase().admins.authWithPassword(values.username, values.password);
navigage("/");
} catch (e) {
const message = getErrMessage(e);
diff --git a/ui/src/pages/setting/Account.tsx b/ui/src/pages/setting/Account.tsx
index 0bc55263..c12b6d94 100644
--- a/ui/src/pages/setting/Account.tsx
+++ b/ui/src/pages/setting/Account.tsx
@@ -10,7 +10,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";
const formSchema = z.object({
email: z.string().email("settings.account.email.errmsg.invalid"),
@@ -26,17 +26,17 @@ const Account = () => {
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
- email: getPb().authStore.model?.email,
+ email: getPocketBase().authStore.model?.email,
},
});
const onSubmit = async (values: z.infer) => {
try {
- await getPb().admins.update(getPb().authStore.model?.id, {
+ await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
email: values.email,
});
- getPb().authStore.clear();
+ getPocketBase().authStore.clear();
toast({
title: t("settings.account.email.changed.message"),
description: t("settings.account.relogin.message"),
diff --git a/ui/src/pages/setting/Password.tsx b/ui/src/pages/setting/Password.tsx
index 7bd7371d..0868ecbb 100644
--- a/ui/src/pages/setting/Password.tsx
+++ b/ui/src/pages/setting/Password.tsx
@@ -9,7 +9,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/use-toast";
import { getErrMessage } from "@/lib/error";
-import { getPb } from "@/repository/api";
+import { getPocketBase } from "@/repository/pocketbase";
const formSchema = z
.object({
@@ -44,19 +44,19 @@ const Password = () => {
const onSubmit = async (values: z.infer) => {
try {
- await getPb().admins.authWithPassword(getPb().authStore.model?.email, values.oldPassword);
+ await getPocketBase().admins.authWithPassword(getPocketBase().authStore.model?.email, values.oldPassword);
} catch (e) {
const message = getErrMessage(e);
form.setError("oldPassword", { message });
}
try {
- await getPb().admins.update(getPb().authStore.model?.id, {
+ await getPocketBase().admins.update(getPocketBase().authStore.model?.id, {
password: values.newPassword,
passwordConfirm: values.confirmPassword,
});
- getPb().authStore.clear();
+ getPocketBase().authStore.clear();
toast({
title: t("settings.password.changed.message"),
description: t("settings.account.relogin.message"),
diff --git a/ui/src/pages/workflow/WorkflowList.tsx b/ui/src/pages/workflow/WorkflowList.tsx
new file mode 100644
index 00000000..6451698a
--- /dev/null
+++ b/ui/src/pages/workflow/WorkflowList.tsx
@@ -0,0 +1,248 @@
+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 navigate = useNavigate();
+
+ const { t } = useTranslation();
+
+ const [modalApi, ModelContextHolder] = Modal.useModal();
+ const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+ const [loading, setLoading] = useState(false);
+
+ const [searchParams] = useSearchParams();
+
+ const tableColumns: TableProps["columns"] = [
+ {
+ key: "$index",
+ align: "center",
+ title: "",
+ width: 50,
+ render: (_, __, index) => (page - 1) * pageSize + index + 1,
+ },
+ {
+ key: "name",
+ title: t("common.text.name"),
+ render: (_, record) => (
+
+ {record.name}
+
+ {record.description}
+
+
+ ),
+ },
+ {
+ key: "type",
+ title: t("workflow.props.executionMethod"),
+ render: (_, record) => {
+ const method = record.type;
+ if (!method) {
+ return "-";
+ } else if (method === "manual") {
+ return {t("workflow.node.start.form.executionMethod.options.manual")};
+ } else if (method === "auto") {
+ return (
+
+ {t("workflow.node.start.form.executionMethod.options.auto")}
+ {record.crontab ?? ""}
+
+ );
+ }
+ },
+ },
+ {
+ key: "enabled",
+ title: t("workflow.props.enabled"),
+ render: (_, record) => {
+ const enabled = record.enabled;
+ return (
+ <>
+ {
+ 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) => (
+
+
+ }
+ onClick={() => {
+ navigate(`/workflow/detail?id=${record.id}`);
+ }}
+ />
+
+
+ }
+ onClick={() => {
+ handleDeleteClick(record.id);
+ }}
+ />
+
+
+ ),
+ },
+ ];
+ const [tableData, setTableData] = useState([]);
+ const [tableTotal, setTableTotal] = useState(0);
+
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(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");
+ };
+
+ return (
+ <>
+ }
+ onClick={() => {
+ handleCreateClick();
+ }}
+ >
+ {t("workflow.action.create")}
+ ,
+ ]}
+ />
+
+
+ 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;
diff --git a/ui/src/pages/workflow/index.tsx b/ui/src/pages/workflow/index.tsx
deleted file mode 100644
index bb8460ce..00000000
--- a/ui/src/pages/workflow/index.tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { MoreHorizontal, Plus } from "lucide-react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { ColumnDef } from "@tanstack/react-table";
-import { Workflow as WorkflowType } from "@/domain/workflow";
-import { DataTable } from "@/components/workflow/DataTable";
-import { useState } from "react";
-import { list, remove, save, WorkflowListReq } from "@/repository/workflow";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Switch } from "@/components/ui/switch";
-
-import { useTranslation } from "react-i18next";
-import CustomAlertDialog from "@/components/workflow/CustomAlertDialog";
-
-const Workflow = () => {
- const navigate = useNavigate();
-
- const [data, setData] = useState([]);
- const [pageCount, setPageCount] = useState(0);
-
- const { t } = useTranslation();
-
- const [alertOpen, setAlertOpen] = useState(false);
-
- const [alertProps, setAlertProps] = useState<{
- title: string;
- description: string;
- onConfirm: () => void;
- }>();
-
- const [searchParams] = useSearchParams();
-
- const fetchData = async (page: number, pageSize?: number) => {
- const state = searchParams.get("state");
- const req: WorkflowListReq = { page: page, perPage: pageSize };
- if (state && state == "enabled") {
- req.enabled = true;
- }
- const resp = await list(req);
- setData(resp.items);
- setPageCount(resp.totalPages);
- };
-
- const columns: ColumnDef[] = [
- {
- accessorKey: "name",
- header: t("workflow.props.name"),
- cell: ({ row }) => {
- let name: string = row.getValue("name");
- if (!name) {
- name = t("workflow.props.name.default");
- }
- return {name}
;
- },
- },
- {
- accessorKey: "description",
- header: t("workflow.props.description"),
- cell: ({ row }) => {
- let description: string = row.getValue("description");
- if (!description) {
- description = "-";
- }
- return {description}
;
- },
- },
- {
- accessorKey: "type",
- header: t("workflow.props.executionMethod"),
- cell: ({ row }) => {
- const method = row.getValue("type");
- if (!method) {
- return "-";
- } else if (method === "manual") {
- return t("workflow.node.start.form.executionMethod.options.manual");
- } else if (method === "auto") {
- const crontab: string = row.original.crontab ?? "";
- return (
-
-
{t("workflow.node.start.form.executionMethod.options.auto")}
-
{crontab}
-
-
{t("workflow.page.title")}
-
-
-
-
-
-
-
- );
-};
-
-export default Workflow;
diff --git a/ui/src/repository/access.ts b/ui/src/repository/access.ts
index fb942c95..0f82ebcd 100644
--- a/ui/src/repository/access.ts
+++ b/ui/src/repository/access.ts
@@ -1,10 +1,10 @@
import moment from "moment";
import { Access } from "@/domain/access";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
export const list = async () => {
- return await getPb().collection("access").getFullList({
+ return await getPocketBase().collection("access").getFullList({
sort: "-created",
filter: "deleted = null",
});
@@ -12,12 +12,12 @@ export const list = async () => {
export const save = async (data: Access) => {
if (data.id) {
- return await getPb().collection("access").update(data.id, data);
+ return await getPocketBase().collection("access").update(data.id, data);
}
- return await getPb().collection("access").create(data);
+ return await getPocketBase().collection("access").create(data);
};
export const remove = async (data: Access) => {
data.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
- return await getPb().collection("access").update(data.id, data);
+ return await getPocketBase().collection("access").update(data.id, data);
};
diff --git a/ui/src/repository/certificate.ts b/ui/src/repository/certificate.ts
index 4f04f4c0..8e48b391 100644
--- a/ui/src/repository/certificate.ts
+++ b/ui/src/repository/certificate.ts
@@ -1,5 +1,5 @@
import { Certificate } from "@/domain/certificate";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
import { RecordListOptions } from "pocketbase";
import { getTimeAfter } from "@/lib/time";
@@ -10,7 +10,7 @@ type CertificateListReq = {
};
export const list = async (req: CertificateListReq) => {
- const pb = getPb();
+ const pb = getPocketBase();
let page = 1;
if (req.page) {
diff --git a/ui/src/repository/deployment.ts b/ui/src/repository/deployment.ts
index 46b14b60..277d0f48 100644
--- a/ui/src/repository/deployment.ts
+++ b/ui/src/repository/deployment.ts
@@ -1,5 +1,5 @@
import { Deployment, DeploymentListReq } from "@/domain/deployment";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
export const list = async (req: DeploymentListReq) => {
let page = 1;
@@ -17,7 +17,7 @@ export const list = async (req: DeploymentListReq) => {
filter = `domain="${req.domain}"`;
}
- return await getPb().collection("deployments").getList(page, perPage, {
+ return await getPocketBase().collection("deployments").getList(page, perPage, {
filter: filter,
sort: "-deployedAt",
expand: "domain",
diff --git a/ui/src/repository/domains.ts b/ui/src/repository/domains.ts
index 15e796d7..7940f35d 100644
--- a/ui/src/repository/domains.ts
+++ b/ui/src/repository/domains.ts
@@ -1,6 +1,6 @@
import { getTimeAfter } from "@/lib/time";
import { Domain } from "@/domain/domain";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
type DomainListReq = {
domain?: string;
@@ -10,7 +10,7 @@ type DomainListReq = {
};
export const list = async (req: DomainListReq) => {
- const pb = getPb();
+ const pb = getPocketBase();
let page = 1;
if (req.page) {
@@ -43,24 +43,24 @@ export const list = async (req: DomainListReq) => {
};
export const get = async (id: string) => {
- const response = await getPb().collection("domains").getOne(id);
+ const response = await getPocketBase().collection("domains").getOne(id);
return response;
};
export const save = async (data: Domain) => {
if (data.id) {
- return await getPb().collection("domains").update(data.id, data);
+ return await getPocketBase().collection("domains").update(data.id, data);
}
- return await getPb().collection("domains").create(data);
+ return await getPocketBase().collection("domains").create(data);
};
export const remove = async (id: string) => {
- return await getPb().collection("domains").delete(id);
+ return await getPocketBase().collection("domains").delete(id);
};
type Callback = (data: Domain) => void;
export const subscribeId = (id: string, callback: Callback) => {
- return getPb()
+ return getPocketBase()
.collection("domains")
.subscribe(
id,
@@ -76,5 +76,5 @@ export const subscribeId = (id: string, callback: Callback) => {
};
export const unsubscribeId = (id: string) => {
- getPb().collection("domains").unsubscribe(id);
+ getPocketBase().collection("domains").unsubscribe(id);
};
diff --git a/ui/src/repository/api.ts b/ui/src/repository/pocketbase.ts
similarity index 84%
rename from ui/src/repository/api.ts
rename to ui/src/repository/pocketbase.ts
index 2118764c..f705ae6f 100644
--- a/ui/src/repository/api.ts
+++ b/ui/src/repository/pocketbase.ts
@@ -4,7 +4,7 @@ const apiDomain = import.meta.env.VITE_API_DOMAIN;
console.log(apiDomain);
let pb: PocketBase;
-export const getPb = () => {
+export const getPocketBase = () => {
if (pb) return pb;
pb = new PocketBase("/");
return pb;
diff --git a/ui/src/repository/settings.ts b/ui/src/repository/settings.ts
index 5894c50c..1b008f57 100644
--- a/ui/src/repository/settings.ts
+++ b/ui/src/repository/settings.ts
@@ -1,9 +1,9 @@
import { EmailsSetting, Setting } from "@/domain/settings";
-import { getPb } from "./api";
+import { getPocketBase } from "./pocketbase";
export const getEmails = async () => {
try {
- const resp = await getPb().collection("settings").getFirstListItem>("name='emails'");
+ const resp = await getPocketBase().collection("settings").getFirstListItem>("name='emails'");
return resp;
} catch (e) {
return {
@@ -14,7 +14,7 @@ export const getEmails = async () => {
export const getSetting = async (name: string) => {
try {
- const resp = await getPb().collection("settings").getFirstListItem>(`name='${name}'`);
+ const resp = await getPocketBase().collection("settings").getFirstListItem>(`name='${name}'`);
return resp;
} catch (e) {
const rs: Setting = {
@@ -25,7 +25,7 @@ export const getSetting = async (name: string) => {
};
export const update = async (setting: Setting) => {
- const pb = getPb();
+ const pb = getPocketBase();
let resp: Setting;
if (setting.id) {
resp = await pb.collection("settings").update(setting.id, setting);
diff --git a/ui/src/repository/workflow.ts b/ui/src/repository/workflow.ts
index 5163533d..7a7be749 100644
--- a/ui/src/repository/workflow.ts
+++ b/ui/src/repository/workflow.ts
@@ -1,77 +1,58 @@
-import { Workflow, WorkflowNode, WorkflowRunLog } from "@/domain/workflow";
-import { getPb } from "./api";
-import { RecordListOptions } from "pocketbase";
+import { type RecordListOptions } from "pocketbase";
+
+import { type Workflow, type WorkflowNode, type WorkflowRunLog } from "@/domain/workflow";
+import { getPocketBase } from "./pocketbase";
+
+export type WorkflowListReq = {
+ page?: number;
+ perPage?: number;
+ enabled?: boolean;
+};
+
+export const list = async (req: WorkflowListReq) => {
+ const page = req.page || 1;
+ const perPage = req.perPage || 10;
+
+ const options: RecordListOptions = { sort: "-created" };
+ if (req.enabled != null) {
+ options.filter = getPocketBase().filter("enabled={:enabled}", { enabled: req.enabled });
+ }
+
+ return await getPocketBase().collection("workflow").getList(page, perPage, options);
+};
export const get = async (id: string) => {
- const response = await getPb().collection("workflow").getOne(id);
- return response;
+ return await getPocketBase().collection("workflow").getOne(id);
};
export const save = async (data: Record) => {
if (data.id) {
- return await getPb()
+ return await getPocketBase()
.collection("workflow")
.update(data.id as string, data);
}
- return await getPb().collection("workflow").create(data);
-};
-export type WorkflowListReq = {
- page: number;
- perPage?: number;
- enabled?: boolean;
-};
-export const list = async (req: WorkflowListReq) => {
- let page = 1;
- if (req.page) {
- page = req.page;
- }
- let perPage = 10;
- if (req.perPage) {
- perPage = req.perPage;
- }
-
- const options: RecordListOptions = {
- sort: "-created",
- };
-
- if (req.enabled !== undefined) {
- options.filter = getPb().filter("enabled={:enabled}", {
- enabled: req.enabled,
- });
- }
-
- const response = await getPb().collection("workflow").getList(page, perPage, options);
-
- return response;
+ return await getPocketBase().collection("workflow").create(data);
};
export const remove = async (id: string) => {
- return await getPb().collection("workflow").delete(id);
+ return await getPocketBase().collection("workflow").delete(id);
};
type WorkflowLogsReq = {
id: string;
- page: number;
+ 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 page = req.page || 1;
+ const perPage = req.perPage || 10;
- const response = await getPb()
+ return await getPocketBase()
.collection("workflow_run_log")
.getList(page, perPage, {
sort: "-created",
- filter: getPb().filter("workflow={:workflowId}", { workflowId: req.id }),
+ filter: getPocketBase().filter("workflow={:workflowId}", { workflowId: req.id }),
});
-
- return response;
};
diff --git a/ui/src/router.tsx b/ui/src/router.tsx
index bd9e01dd..680e028a 100644
--- a/ui/src/router.tsx
+++ b/ui/src/router.tsx
@@ -10,7 +10,7 @@ import Dashboard from "./pages/dashboard/Dashboard";
import Account from "./pages/setting/Account";
import Notify from "./pages/setting/Notify";
import SSLProvider from "./pages/setting/SSLProvider";
-import Workflow from "./pages/workflow";
+import WorkflowList from "./pages/workflow/WorkflowList";
import WorkflowDetail from "./pages/workflow/WorkflowDetail";
import Certificate from "./pages/certificate";
@@ -28,8 +28,8 @@ export const router = createHashRouter([
element: ,
},
{
- path: "/workflow",
- element: ,
+ path: "/workflows",
+ element: ,
},
{
path: "/certificate",