jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new AccessList UI using antd

Browse Source
This commit is contained in:
Fu Diwei
2024-12-06 09:54:44 +08:00
parent 65d9c6fe2f
commit b44b8d09b2
54 changed files with 429 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/pages/DashboardLayout.tsx
View File

@@ -4,10 +4,10 @@ import { CircleUser, Home, Menu, Server, ShieldCheck, Workflow } from "lucide-re
import LocaleToggle from "@/components/LocaleToggle";
import { ThemeToggle } from "@/components/ThemeToggle";
import { cn } from "@/components/ui/utils";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
import { cn } from "@/lib/utils";
import { getPocketBase } from "@/repository/pocketbase";
import { ConfigProvider } from "@/providers/config";
@@ -73,7 +73,7 @@ export default function Dashboard() {
{t("certificate.page.title")}
</Link>
<Link to="/access" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/access"))}>
<Link to="/accesses" className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/accesses"))}>
<Server className="h-4 w-4" />
{t("access.page.title")}
</Link>
@@ -122,8 +122,8 @@ export default function Dashboard() {
</Link>
<Link
to="/access"
className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", getClass("/access"))}
to="/accesses"
className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", getClass("/accesses"))}
>
<Server className="h-5 w-5" />
{t("access.page.title")}

150
ui/src/pages/access/Access.tsx
View File

@@ -1,150 +0,0 @@
import { useLocation, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Key } from "lucide-react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog.tsx";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import AccessEditDialog from "@/components/certimate/AccessEditDialog";
import XPagination from "@/components/certimate/XPagination";
import { convertZulu2Beijing } from "@/lib/time";
import { Access as AccessType, accessProvidersMap } from "@/domain/access";
import { remove } from "@/repository/access";
import { useConfigContext } from "@/providers/config";
const Access = () => {
const { t } = useTranslation();
const { config, deleteAccess } = useConfigContext();
const { accesses } = config;
const perPage = 10;
const totalPages = Math.ceil(accesses.length / perPage);
const navigate = useNavigate();
const location = useLocation();
const query = new URLSearchParams(location.search);
const page = query.get("page");
const pageNumber = page ? Number(page) : 1;
const startIndex = (pageNumber - 1) * perPage;
const endIndex = startIndex + perPage;
const handleDelete = async (data: AccessType) => {
const rs = await remove(data);
deleteAccess(rs.id);
};
return (
<div className="">
<div className="flex justify-between items-center">
<div className="text-muted-foreground">{t("access.page.title")}</div>
<AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" />
</div>
{accesses.length === 0 ? (
<div className="flex flex-col items-center mt-10">
<span className="bg-orange-100 p-5 rounded-full">
<Key size={40} className="text-primary" />
</span>
<div className="text-center text-sm text-muted-foreground mt-3">{t("access.authorization.nodata")}</div>
<AccessEditDialog trigger={<Button>{t("access.authorization.add")}</Button>} op="add" className="mt-3" />
</div>
) : (
<>
<div className="hidden sm:flex sm:flex-row text-muted-foreground text-sm border-b dark:border-stone-500 sm:p-2 mt-5">
<div className="w-48">{t("common.text.name")}</div>
<div className="w-48">{t("common.text.provider")}</div>
<div className="w-60">{t("common.text.created_at")}</div>
<div className="w-60">{t("common.text.updated_at")}</div>
<div className="grow">{t("common.text.operations")}</div>
</div>
{accesses.slice(startIndex, endIndex).map((access) => (
<div
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={access.id}
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-start">
<div className="pr-3 truncate">{access.name}</div>
</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center space-x-2">
<img src={accessProvidersMap.get(access.configType)?.icon} className="w-6" />
<div>{t(accessProvidersMap.get(access.configType)?.name || "")}</div>
</div>
<div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.created && convertZulu2Beijing(access.created)}</div>
<div className="sm:w-60 w-full pt-1 sm:pt-0 flex items-center">{access.updated && convertZulu2Beijing(access.updated)}</div>
<div className="flex items-center grow justify-start pt-1 sm:pt-0">
<AccessEditDialog
trigger={
<Button variant={"link"} className="p-0">
{t("common.edit")}
</Button>
}
op="edit"
data={access}
/>
<Separator orientation="vertical" className="h-4 mx-2" />
<AccessEditDialog
trigger={
<Button variant={"link"} className="p-0">
{t("common.copy")}
</Button>
}
op="copy"
data={access}
/>
<Separator orientation="vertical" className="h-4 mx-2" />
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant={"link"} className="p-0">
{t("common.delete")}
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="dark:text-gray-200">{t("access.authorization.delete")}</AlertDialogTitle>
<AlertDialogDescription>{t("access.authorization.delete.confirm")}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="dark:text-gray-200">{t("common.cancel")}</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
handleDelete(access);
}}
>
{t("common.confirm")}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
))}
<XPagination
totalPages={totalPages}
currentPage={pageNumber}
onPageChange={(page) => {
query.set("page", page.toString());
navigate({ search: query.toString() });
}}
/>
</>
)}
</div>
);
};
export default Access;

197
ui/src/pages/accesses/AccessList.tsx Normal file
View File

@@ -0,0 +1,197 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Button, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
import moment from "moment";
import AccessEditDialog from "@/components/certimate/AccessEditDialog";
import { Access as AccessType, accessProvidersMap } from "@/domain/access";
import { remove as removeAccess } from "@/repository/access";
import { useConfigContext } from "@/providers/config";
const AccessList = () => {
const { t } = useTranslation();
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
const [loading, setLoading] = useState<boolean>(false);
const tableColumns: TableProps<AccessType>["columns"] = [
{
key: "$index",
align: "center",
title: "",
width: 50,
render: (_, __, index) => (page - 1) * pageSize + index + 1,
},
{
key: "name",
title: t("common.text.name"),
ellipsis: true,
render: (_, record) => <>{record.name}</>,
},
{
key: "provider",
title: t("common.text.provider"),
render: (_, record) => {
return (
<Space className="max-w-full" size={4}>
<Avatar src={accessProvidersMap.get(record.configType)?.icon} size="small" />
<Typography.Text>{t(accessProvidersMap.get(record.configType)?.name ?? "")}</Typography.Text>
</Space>
);
},
},
{
key: "createdAt",
title: t("common.text.created_at"),
ellipsis: true,
render: (_, record) => {
return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
key: "updatedAt",
title: t("common.text.updated_at"),
ellipsis: true,
render: (_, record) => {
return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
key: "$action",
align: "end",
fixed: "right",
width: 120,
render: (_, record) => (
<>
<Space size={0}>
<AccessEditDialog
trigger={
<Tooltip title={t("access.action.edit")}>
<Button type="link" icon={<PencilIcon size={16} />} />
</Tooltip>
}
op="edit"
data={record}
/>
<AccessEditDialog
trigger={
<Tooltip title={t("access.action.copy")}>
<Button type="link" icon={<CopyIcon size={16} />} />
</Tooltip>
}
op="copy"
data={record}
/>
<Tooltip title={t("access.action.delete")}>
<Button
type="link"
danger={true}
icon={<Trash2Icon size={16} />}
onClick={() => {
handleDeleteClick(record);
}}
/>
</Tooltip>
</Space>
</>
),
},
];
const [tableData, setTableData] = useState<AccessType[]>([]);
const [tableTotal, setTableTotal] = useState<number>(0);
const [page, setPage] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(10);
const configContext = useConfigContext();
const fetchTableData = async () => {
if (loading) return;
setLoading(true);
try {
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
const items = configContext.config.accesses.slice(startIndex, endIndex);
setTableData(items);
setTableTotal(configContext.config.accesses.length);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchTableData();
}, [page, pageSize, configContext.config.accesses]);
const handleDeleteClick = async (data: AccessType) => {
modalApi.confirm({
title: t("access.action.delete"),
content: t("access.action.delete.confirm"),
onOk: async () => {
try {
const res = await removeAccess(data);
configContext.deleteAccess(res.id);
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
}
},
});
};
// TODO: Empty 样式
// TODO: 响应式表格
return (
<>
{ModelContextHolder}
{NotificationContextHolder}
<PageHeader
title={t("access.page.title")}
extra={[
<AccessEditDialog
key="create"
trigger={
<Button key="create" type="primary" icon={<PlusIcon size={16} />}>
{t("access.action.add")}
</Button>
}
op="add"
/>,
]}
/>
<Table<AccessType>
columns={tableColumns}
dataSource={tableData}
loading={loading}
pagination={{
current: page,
pageSize: pageSize,
total: tableTotal,
onChange: (page, pageSize) => {
setPage(page);
setPageSize(pageSize);
},
onShowSizeChange: (page, pageSize) => {
setPage(page);
setPageSize(pageSize);
},
}}
rowKey={(record) => record.id}
/>
</>
);
};
export default AccessList;

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { Button, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
import { Eye as EyeIcon } from "lucide-react";
import moment from "moment";
import { Certificate as CertificateType } from "@/domain/certificate";
import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
@@ -27,7 +28,7 @@ const CertificateList = () => {
},
{
key: "name",
title: t("common.text.domain"),
title: t("certificate.props.domain"),
render: (_, record) => <Typography.Text>{record.san}</Typography.Text>,
},
{
@@ -47,7 +48,7 @@ const CertificateList = () => {
)}
<Typography.Text type="secondary">
{new Date(record.expireAt).toLocaleString().split(" ")[0]} {t("certificate.props.expiry.text.expire")}
{moment(record.expireAt).format("YYYY-MM-DD")} {t("certificate.props.expiry.text.expire")}
</Typography.Text>
</Space>
);
@@ -81,7 +82,7 @@ const CertificateList = () => {
title: t("common.text.created_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.created!).toLocaleString();
return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
@@ -89,16 +90,17 @@ const CertificateList = () => {
title: t("common.text.updated_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.updated!).toLocaleString();
return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
key: "$operations",
key: "$action",
align: "end",
width: 100,
fixed: "right",
width: 120,
render: (_, record) => (
<Space>
<Tooltip title={t("common.view")}>
<Space size={0}>
<Tooltip title={t("certificate.action.view")}>
<Button
type="link"
icon={<EyeIcon size={16} />}
@@ -145,6 +147,7 @@ const CertificateList = () => {
}, [page, pageSize]);
// TODO: Empty 样式
// TODO: 响应式表格
return (
<>
@@ -153,7 +156,6 @@ const CertificateList = () => {
<Table<CertificateType>
columns={tableColumns}
dataSource={tableData}
rowKey={(record) => record.id}
loading={loading}
pagination={{
current: page,
@@ -168,6 +170,7 @@ const CertificateList = () => {
setPageSize(pageSize);
},
}}
rowKey={(record) => record.id}
/>
</>
);

3
ui/src/pages/setting/SSLProvider.tsx
View File

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { cn } from "@/components/ui/utils";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
@@ -11,7 +12,6 @@ import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { useToast } from "@/components/ui/use-toast";
import { getErrMessage } from "@/lib/error";
import { cn } from "@/lib/utils";
import { SSLProvider as SSLProviderType, SSLProviderSetting, Setting } from "@/domain/settings";
import { getSetting, update } from "@/repository/settings";
import { produce } from "immer";
@@ -443,4 +443,3 @@ const SSLProviderGtsForm = () => {
};
export default SSLProvider;

2
ui/src/pages/workflows/WorkflowDetail.tsx
View File

@@ -10,10 +10,10 @@ import NodeRender from "@/components/workflow/NodeRender";
import WorkflowBaseInfoEditDialog from "@/components/workflow/WorkflowBaseInfoEditDialog";
import WorkflowLog from "@/components/workflow/WorkflowLog";
import { cn } from "@/components/ui/utils";
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";

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

@@ -4,6 +4,7 @@ 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 moment from "moment";
import { Workflow as WorkflowType } from "@/domain/workflow";
import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow, type WorkflowListReq } from "@/repository/workflow";
@@ -68,7 +69,7 @@ const WorkflowList = () => {
<Switch
checked={enabled}
onChange={() => {
handleEnabledChange(record.id);
handleEnabledChange(record);
}}
/>
</>
@@ -88,7 +89,7 @@ const WorkflowList = () => {
title: t("common.text.created_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.created!).toLocaleString();
return moment(record.created!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
@@ -96,15 +97,16 @@ const WorkflowList = () => {
title: t("common.text.updated_at"),
ellipsis: true,
render: (_, record) => {
return new Date(record.updated!).toLocaleString();
return moment(record.updated!).format("YYYY-MM-DD HH:mm:ss");
},
},
{
key: "$operations",
key: "$action",
align: "end",
width: 100,
fixed: "right",
width: 120,
render: (_, record) => (
<Space>
<Space size={0}>
<Tooltip title={t("common.edit")}>
<Button
type="link"
@@ -120,7 +122,7 @@ const WorkflowList = () => {
danger={true}
icon={<Trash2Icon size={16} />}
onClick={() => {
handleDeleteClick(record.id);
handleDeleteClick(record);
}}
/>
</Tooltip>
@@ -161,13 +163,16 @@ const WorkflowList = () => {
fetchTableData();
}, [page, pageSize]);
const handleEnabledChange = async (id: string) => {
const handleEnabledChange = async (workflow: WorkflowType) => {
try {
const resp = await saveWorkflow({ id, enabled: !tableData.find((item) => item.id === id)?.enabled });
const resp = await saveWorkflow({
id: workflow.id,
enabled: !tableData.find((item) => item.id === workflow.id)?.enabled,
});
if (resp) {
setTableData((prev) => {
return prev.map((item) => {
if (item.id === id) {
if (item.id === workflow.id) {
return resp;
}
return item;
@@ -179,15 +184,15 @@ const WorkflowList = () => {
}
};
const handleDeleteClick = (id: string) => {
const handleDeleteClick = (workflow: WorkflowType) => {
modalApi.confirm({
title: t("workflow.action.delete.alert.title"),
content: t("workflow.action.delete.alert.content"),
onOk: async () => {
try {
const resp = await removeWorkflow(id);
const resp = await removeWorkflow(workflow);
if (resp) {
setTableData((prev) => prev.filter((item) => item.id !== id));
setTableData((prev) => prev.filter((item) => item.id !== workflow.id));
}
} catch (err) {
notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
@@ -201,9 +206,13 @@ const WorkflowList = () => {
};
// TODO: Empty 样式
// TODO: 响应式表格
return (
<>
{ModelContextHolder}
{NotificationContextHolder}
<PageHeader
title={t("workflow.page.title")}
extra={[
@@ -223,7 +232,6 @@ const WorkflowList = () => {
<Table<WorkflowType>
columns={tableColumns}
dataSource={tableData}
rowKey={(record) => record.id}
loading={loading}
pagination={{
current: page,
@@ -238,10 +246,8 @@ const WorkflowList = () => {
setPageSize(pageSize);
},
}}
rowKey={(record) => record.id}
/>
{ModelContextHolder}
{NotificationContextHolder}
</>
);
};