feat(ui): new CertificateList UI using antd
This commit is contained in:
Fu Diwei
@@ -66,8 +66,8 @@ export default function Dashboard() {
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/certificate"
|
||||
className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/certificate"))}
|
||||
to="/certificates"
|
||||
className={cn("flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary", getClass("/certificates"))}
|
||||
>
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
{t("certificate.page.title")}
|
||||
@@ -114,8 +114,8 @@ export default function Dashboard() {
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
to="/certificate"
|
||||
className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", getClass("/certificate"))}
|
||||
to="/certificates"
|
||||
className={cn("mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground", getClass("/certificates"))}
|
||||
>
|
||||
<ShieldCheck className="h-5 w-5" />
|
||||
{t("certificate.page.title")}
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import CertificateList from "@/components/certificate/CertificateList";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const Certificate = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="flex flex-col space-y-5">
|
||||
<div className="text-muted-foreground">{t("certificate.page.title")}</div>
|
||||
|
||||
<CertificateList withPagination={true} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Certificate;
|
||||
176
ui/src/pages/certificates/CertificateList.tsx
Normal file
176
ui/src/pages/certificates/CertificateList.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||
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 { Certificate as CertificateType } from "@/domain/certificate";
|
||||
import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
|
||||
import { diffDays, getLeftDays } from "@/lib/time";
|
||||
|
||||
const CertificateList = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const tableColumns: TableProps<CertificateType>["columns"] = [
|
||||
{
|
||||
key: "$index",
|
||||
align: "center",
|
||||
title: "",
|
||||
width: 50,
|
||||
render: (_, __, index) => (page - 1) * pageSize + index + 1,
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
title: t("common.text.domain"),
|
||||
render: (_, record) => <Typography.Text>{record.san}</Typography.Text>,
|
||||
},
|
||||
{
|
||||
key: "expiry",
|
||||
title: t("certificate.props.expiry"),
|
||||
render: (_, record) => {
|
||||
const leftDays = getLeftDays(record.expireAt);
|
||||
const allDays = diffDays(record.expireAt, record.created);
|
||||
return (
|
||||
<Space className="max-w-full" direction="vertical" size={4}>
|
||||
{leftDays > 0 ? (
|
||||
<Typography.Text type="success">
|
||||
{leftDays} / {allDays} {t("certificate.props.expiry.days")}
|
||||
</Typography.Text>
|
||||
) : (
|
||||
<Typography.Text type="danger">{t("certificate.props.expiry.expired")}</Typography.Text>
|
||||
)}
|
||||
|
||||
<Typography.Text type="secondary">
|
||||
{new Date(record.expireAt).toLocaleString().split(" ")[0]} {t("certificate.props.expiry.text.expire")}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: "source",
|
||||
title: t("certificate.props.source"),
|
||||
render: (_, record) => {
|
||||
const workflowId = record.workflow;
|
||||
return workflowId ? (
|
||||
<Space className="max-w-full" direction="vertical" size={4}>
|
||||
<Typography.Text>{t("common.text.workflow")}</Typography.Text>
|
||||
<Typography.Link
|
||||
type="secondary"
|
||||
ellipsis
|
||||
onClick={() => {
|
||||
navigate(`/workflow/detail?id=${workflowId}`);
|
||||
}}
|
||||
>
|
||||
{record.expand?.workflow?.name ?? ""}
|
||||
</Typography.Link>
|
||||
</Space>
|
||||
) : (
|
||||
<>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.view")}>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EyeIcon size={16} />}
|
||||
onClick={() => {
|
||||
// TODO: 查看证书详情
|
||||
alert("TODO");
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const [tableData, setTableData] = useState<CertificateType[]>([]);
|
||||
const [tableTotal, setTableTotal] = useState<number>(0);
|
||||
|
||||
const [page, setPage] = useState<number>(1);
|
||||
const [pageSize, setPageSize] = useState<number>(10);
|
||||
|
||||
const fetchTableData = async () => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
|
||||
const state = searchParams.get("state");
|
||||
const req: CertificateListReq = { page: page, perPage: pageSize };
|
||||
if (state) {
|
||||
req.state = state as CertificateListReq["state"];
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await listCertificate(req);
|
||||
|
||||
setTableData(resp.items);
|
||||
setTableTotal(resp.totalItems);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTableData();
|
||||
}, [page, pageSize]);
|
||||
|
||||
// TODO: Empty 样式
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={t("certificate.page.title")} />
|
||||
|
||||
<Table<CertificateType>
|
||||
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);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CertificateList;
|
||||
@@ -38,7 +38,7 @@ const Dashboard = () => {
|
||||
<div className="flex items-baseline">
|
||||
<div className="text-3xl text-stone-700 dark:text-stone-200">
|
||||
{statistic?.certificateTotal ? (
|
||||
<Link to="/certificate" className="hover:underline">
|
||||
<Link to="/certificates" className="hover:underline">
|
||||
{statistic?.certificateTotal}
|
||||
</Link>
|
||||
) : (
|
||||
@@ -59,7 +59,7 @@ const Dashboard = () => {
|
||||
<div className="flex items-baseline">
|
||||
<div className="text-3xl text-stone-700 dark:text-stone-200">
|
||||
{statistic?.certificateExpireSoon ? (
|
||||
<Link to="/certificate?state=expireSoon" className="hover:underline">
|
||||
<Link to="/certificates?state=expireSoon" className="hover:underline">
|
||||
{statistic?.certificateExpireSoon}
|
||||
</Link>
|
||||
) : (
|
||||
@@ -80,7 +80,7 @@ const Dashboard = () => {
|
||||
<div className="flex items-baseline">
|
||||
<div className="text-3xl text-stone-700 dark:text-stone-200">
|
||||
{statistic?.certificateExpired ? (
|
||||
<Link to="/certificate?state=expired" className="hover:underline">
|
||||
<Link to="/certificates?state=expired" className="hover:underline">
|
||||
{statistic?.certificateExpired}
|
||||
</Link>
|
||||
) : (
|
||||
|
||||
@@ -9,17 +9,16 @@ 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 navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [modalApi, ModelContextHolder] = Modal.useModal();
|
||||
const [notificationApi, NotificationContextHolder] = notification.useNotification();
|
||||
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const tableColumns: TableProps<WorkflowType>["columns"] = [
|
||||
{
|
||||
key: "$index",
|
||||
@@ -201,6 +200,8 @@ const WorkflowList = () => {
|
||||
navigate("/workflow/detail");
|
||||
};
|
||||
|
||||
// TODO: Empty 样式
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
Reference in New Issue
Block a user