feat(ui): new Dashboard UI using antd

ui/src/components/certificate/CertificateList.tsx

@@ -1,167 +0,0 @@
-import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
-import { Button } from "@/components/ui/button";
-import { DataTable } from "@/components/workflow/DataTable";
-import { Certificate as CertificateType } from "@/domain/certificate";
-import { diffDays, getLeftDays } from "@/lib/time";
-import { list } from "@/repository/certificate";
-import { ColumnDef } from "@tanstack/react-table";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate, useSearchParams } from "react-router-dom";
-
-type CertificateListProps = {
-  withPagination?: boolean;
-};
-
-const CertificateList = ({ withPagination }: CertificateListProps) => {
-  const [data, setData] = useState<CertificateType[]>([]);
-  const [pageCount, setPageCount] = useState<number>(0);
-  const [open, setOpen] = useState(false);
-  const [selectedCertificate, setSelectedCertificate] = useState<CertificateType>();
-
-  const { t } = useTranslation();
-
-  const [searchParams] = useSearchParams();
-
-  const fetchData = async (page: number, pageSize?: number) => {
-    const state = searchParams.get("state");
-    const resp = await list({ page: page, perPage: pageSize, state: state ?? "" });
-    setData(resp.items);
-    setPageCount(resp.totalPages);
-  };
-
-  const navigate = useNavigate();
-
-  const columns: ColumnDef<CertificateType>[] = [
-    {
-      accessorKey: "san",
-      header: t("certificate.props.domain"),
-      cell: ({ row }) => {
-        let san: string = row.getValue("san");
-        if (!san) {
-          san = "";
-        }
-
-        return (
-          <div>
-            {san.split(";").map((item, i) => {
-              return (
-                <div key={i} className="max-w-[250px] truncate">
-                  {item}
-                </div>
-              );
-            })}
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: "expireAt",
-      header: t("certificate.props.expiry"),
-      cell: ({ row }) => {
-        const expireAt: string = row.getValue("expireAt");
-        const data = row.original;
-        const leftDays = getLeftDays(expireAt);
-        const allDays = diffDays(data.expireAt, data.created);
-        return (
-          <div className="">
-            {leftDays > 0 ? (
-              <div className="text-green-500">{t("certificate.props.expiry.left_days", { left: leftDays, total: allDays })}</div>
-            ) : (
-              <div className="text-red-500">{t("certificate.props.expiry.expired")}</div>
-            )}
-
-            <div>{t("certificate.props.expiry.expiration", { date: new Date(expireAt).toLocaleString().split(" ")[0] })}</div>
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: "workflow",
-      header: t("certificate.props.workflow"),
-      cell: ({ row }) => {
-        const name = row.original.expand.workflow?.name;
-        const workflowId: string = row.getValue("workflow");
-        return (
-          <div className="max-w-[200px] truncate">
-            <Button
-              size={"sm"}
-              variant={"link"}
-              onClick={() => {
-                handleWorkflowClick(workflowId);
-              }}
-            >
-              {name}
-            </Button>
-          </div>
-        );
-      },
-    },
-    {
-      accessorKey: "created",
-      header: t("common.text.created_at"),
-      cell: ({ row }) => {
-        const date: string = row.getValue("created");
-        return new Date(date).toLocaleString();
-      },
-    },
-    {
-      id: "actions",
-      cell: ({ row }) => {
-        return (
-          <div className="flex items-center space-x-2">
-            <Button
-              size="sm"
-              variant={"link"}
-              onClick={() => {
-                handleView(row.original.id);
-              }}
-            >
-              {t("certificate.action.view")}
-            </Button>
-          </div>
-        );
-      },
-    },
-  ];
-
-  const handleWorkflowClick = (id: string) => {
-    navigate(`/workflows/detail?id=${id}`);
-  };
-
-  const handleView = (id: string) => {
-    setOpen(true);
-    const certificate = data.find((item) => item.id === id);
-    setSelectedCertificate(certificate);
-  };
-
-  return (
-    <>
-      <DataTable
-        columns={columns}
-        onPageChange={fetchData}
-        data={data}
-        pageCount={pageCount}
-        withPagination={withPagination}
-        fallback={
-          <div className="flex flex-col items-center">
-            <div className="text-muted-foreground">{t("certificate.nodata")}</div>
-            <Button
-              size={"sm"}
-              className="w-[120px] mt-3"
-              onClick={() => {
-                navigate("/workflows/detail");
-              }}
-            >
-              {t("workflow.action.create")}
-            </Button>
-          </div>
-        }
-      />
-
-      <CertificateDetailDrawer data={selectedCertificate} open={open} onClose={() => setOpen(false)} />
-    </>
-  );
-};
-
-export default CertificateList;

ui/src/i18n/locales/en/nls.dashboard.json

@@ -1,15 +1,12 @@
 {
   "dashboard.page.title": "Dashboard",
 
-  "dashboard.statistics.all.certificate": "All Certificates",
+  "dashboard.statistics.all_certificates": "All Certificates",
-  "dashboard.statistics.near_expired.certificate": "Certificates Near Expiry",
+  "dashboard.statistics.expire_soon_certificates": "Expire Soon Certificates",
-  "dashboard.statistics.expired.certificate": "Expired Certificates",
+  "dashboard.statistics.expired_certificates": "Expired Certificates",
-
+  "dashboard.statistics.all_workflows": "All Workflows",
-  "dashboard.statistics.all.workflow": "All Workflows",
+  "dashboard.statistics.enabled_workflows": "Enabled Workflows",
-  "dashboard.statistics.enabled.workflow": "Enabled Workflows",
-
   "dashboard.statistics.unit": "",
 
   "dashboard.certificate": "Latest Certificate"
 }
-

ui/src/i18n/locales/zh/nls.dashboard.json

@@ -1,15 +1,12 @@
 {
   "dashboard.page.title": "仪表盘",
 
-  "dashboard.statistics.all.certificate": "所有证书",
+  "dashboard.statistics.all_certificates": "所有证书",
-  "dashboard.statistics.near_expired.certificate": "即将过期证书",
+  "dashboard.statistics.expire_soon_certificates": "即将过期证书",
-  "dashboard.statistics.expired.certificate": "已过期证书",
+  "dashboard.statistics.expired_certificates": "已过期证书",
-
+  "dashboard.statistics.all_workflows": "所有工作流",
-  "dashboard.statistics.all.workflow": "所有工作流",
+  "dashboard.statistics.enabled_workflows": "已启用工作流",
-  "dashboard.statistics.enabled.workflow": "已启用工作流",
-
   "dashboard.statistics.unit": "个",
 
   "dashboard.certificate": "最新证书"
 }
-

ui/src/pages/certificates/CertificateList.tsx

@@ -38,6 +38,7 @@ const CertificateList = () => {
     {
       key: "expiry",
       title: t("certificate.props.expiry"),
+      defaultFilteredValue: searchParams.has("state") ? [searchParams.get("state") as string] : undefined,
       filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
         const items: Required<MenuProps>["items"] = [
           ["expireSoon", "certificate.props.expiry.filter.expire_soon"],
@@ -164,21 +165,19 @@ const CertificateList = () => {
   const [tableData, setTableData] = useState<CertificateType[]>([]);
   const [tableTotal, setTableTotal] = useState<number>(0);
 
-  const [filters, setFilters] = useState<Record<string, unknown>>({});
+  const [filters, setFilters] = useState<Record<string, unknown>>(() => {
+    return {
+      state: searchParams.get("state"),
+    };
+  });
 
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
-  const [pageSize, setPageSize] = useState<number>(10);
+  const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
 
   const [currentRecord, setCurrentRecord] = useState<CertificateType>();
 
   const [drawerOpen, setDrawerOpen] = useState(false);
 
-  useEffect(() => {
-    setFilters({ ...filters, state: searchParams.get("state") });
-    setPage(parseInt(+searchParams.get("page")! + "") || 1);
-    setPageSize(parseInt(+searchParams.get("perPage")! + "") || 10);
-  }, []);
-
   const fetchTableData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
@@ -238,10 +237,6 @@ const CertificateList = () => {
           },
         }}
         rowKey={(record) => record.id}
-        onChange={(_, filters, __, extra) => {
-          console.log(filters);
-          extra.action === "filter" && fetchTableData();
-        }}
       />
 
       <CertificateDetailDrawer

ui/src/pages/dashboard/Dashboard.tsx

@@ -1,150 +1,146 @@
-import { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { CalendarClock, CalendarX2, FolderCheck, SquareSigma, Workflow } from "lucide-react";
+import { Card, Col, Divider, notification, Row, Space, Statistic, theme, Typography } from "antd";
+import { PageHeader } from "@ant-design/pro-components";
+import {
+  CalendarClock as CalendarClockIcon,
+  CalendarX2 as CalendarX2Icon,
+  FolderCheck as FolderCheckIcon,
+  SquareSigma as SquareSigmaIcon,
+  Workflow as WorkflowIcon,
+} from "lucide-react";
 
-import { Statistic } from "@/domain/domain";
+import { type Statistic as StatisticType } from "@/domain/domain";
-
+import { get as getStatistics } from "@/api/statistics";
-import { get } from "@/api/statistics";
-
-import CertificateList from "@/components/certificate/CertificateList";
 
 const Dashboard = () => {
-  const [statistic, setStatistic] = useState<Statistic>();
+  const navigate = useNavigate();
 
   const { t } = useTranslation();
 
-  useEffect(() => {
+  const { token: themeToken } = theme.useToken();
-    const fetchStatistic = async () => {
-      const data = await get();
-      setStatistic(data);
-    };
 
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const statisticGridSpans = {
+    xs: { flex: "50%" },
+    md: { flex: "50%" },
+    lg: { flex: "33.3333%" },
+    xl: { flex: "33.3333%" },
+    xxl: { flex: "20%" },
+  };
+
+  const [statistic, setStatistic] = useState<StatisticType>();
+
+  const fetchStatistic = useCallback(async () => {
+    if (loading) return;
+    setLoading(true);
+
+    try {
+      const data = await getStatistics();
+      setStatistic(data);
+    } catch (err) {
+      console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
     fetchStatistic();
   }, []);
 
   return (
-    <div className="flex flex-col">
+    <>
-      <div className="flex justify-between items-center">
+      {NotificationContextHolder}
-        <div className="text-muted-foreground">{t("dashboard.page.title")}</div>
-      </div>
-      <div className="flex mt-10 gap-5 flex-col flex-wrap md:flex-row">
-        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
-          <div className="p-3">
-            <SquareSigma size={48} strokeWidth={1} className="text-blue-400" />
-          </div>
-          <div>
-            <div className="text-muted-foreground font-semibold">{t("dashboard.statistics.all.certificate")}</div>
-            <div className="flex items-baseline">
-              <div className="text-3xl text-stone-700 dark:text-stone-200">
-                {statistic?.certificateTotal ? (
-                  <Link to="/certificates" className="hover:underline">
-                    {statistic?.certificateTotal}
-                  </Link>
-                ) : (
-                  0
-                )}
-              </div>
-              <div className="ml-1 text-stone-700 dark:text-stone-200">{t("dashboard.statistics.unit")}</div>
-            </div>
-          </div>
-        </div>
 
-        <div className="w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg border">
+      <PageHeader title={t("dashboard.page.title")} />
-          <div className="p-3">
-            <CalendarClock size={48} strokeWidth={1} className="text-yellow-400" />
-          </div>
-          <div>
-            <div className="text-muted-foreground font-semibold">{t("dashboard.statistics.near_expired.certificate")}</div>
-            <div className="flex items-baseline">
-              <div className="text-3xl text-stone-700 dark:text-stone-200">
-                {statistic?.certificateExpireSoon ? (
-                  <Link to="/certificates?state=expireSoon" className="hover:underline">
-                    {statistic?.certificateExpireSoon}
-                  </Link>
-                ) : (
-                  0
-                )}
-              </div>
-              <div className="ml-1 text-stone-700 dark:text-stone-200">{t("dashboard.statistics.unit")}</div>
-            </div>
-          </div>
-        </div>
 
-        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+      <Row gutter={[16, 16]}>
-          <div className="p-3">
+        <Col {...statisticGridSpans}>
-            <CalendarX2 size={48} strokeWidth={1} className="text-red-400" />
+          <StatisticCard
-          </div>
+            icon={<SquareSigmaIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
-          <div>
+            label={t("dashboard.statistics.all_certificates")}
-            <div className="text-muted-foreground font-semibold">{t("dashboard.statistics.expired.certificate")}</div>
+            value={statistic?.certificateTotal ?? "-"}
-            <div className="flex items-baseline">
+            suffix={t("dashboard.statistics.unit")}
-              <div className="text-3xl text-stone-700 dark:text-stone-200">
+            onClick={() => navigate("/certificates")}
-                {statistic?.certificateExpired ? (
+          />
-                  <Link to="/certificates?state=expired" className="hover:underline">
+        </Col>
-                    {statistic?.certificateExpired}
+        <Col {...statisticGridSpans}>
-                  </Link>
+          <StatisticCard
-                ) : (
+            icon={<CalendarClockIcon size={48} strokeWidth={1} color={themeToken.colorWarning} />}
-                  0
+            label={t("dashboard.statistics.expire_soon_certificates")}
-                )}
+            value={statistic?.certificateExpireSoon ?? "-"}
-              </div>
+            suffix={t("dashboard.statistics.unit")}
-              <div className="ml-1 text-stone-700 dark:text-stone-200">{t("dashboard.statistics.unit")}</div>
+            onClick={() => navigate("/certificates?state=expireSoon")}
-            </div>
+          />
-          </div>
+        </Col>
-        </div>
+        <Col {...statisticGridSpans}>
+          <StatisticCard
+            icon={<CalendarX2Icon size={48} strokeWidth={1} color={themeToken.colorError} />}
+            label={t("dashboard.statistics.expired_certificates")}
+            value={statistic?.certificateExpired ?? "-"}
+            suffix={t("dashboard.statistics.unit")}
+            onClick={() => navigate("/certificates?state=expired")}
+          />
+        </Col>
+        <Col {...statisticGridSpans}>
+          <StatisticCard
+            icon={<WorkflowIcon size={48} strokeWidth={1} color={themeToken.colorInfo} />}
+            label={t("dashboard.statistics.all_workflows")}
+            value={statistic?.workflowTotal ?? "-"}
+            suffix={t("dashboard.statistics.unit")}
+            onClick={() => navigate("/workflows")}
+          />
+        </Col>
+        <Col {...statisticGridSpans}>
+          <StatisticCard
+            icon={<FolderCheckIcon size={48} strokeWidth={1} color={themeToken.colorSuccess} />}
+            label={t("dashboard.statistics.enabled_workflows")}
+            value={statistic?.workflowEnabled ?? "-"}
+            suffix={t("dashboard.statistics.unit")}
+            onClick={() => navigate("/workflows?state=enabled")}
+          />
+        </Col>
+      </Row>
 
-        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+      <Divider />
-          <div className="p-3">
-            <Workflow size={48} strokeWidth={1} className="text-emerald-500" />
-          </div>
-          <div>
-            <div className="text-muted-foreground font-semibold">{t("dashboard.statistics.all.workflow")}</div>
-            <div className="flex items-baseline">
-              <div className="text-3xl text-stone-700 dark:text-stone-200">
-                {statistic?.workflowTotal ? (
-                  <Link to="/workflows" className="hover:underline">
-                    {statistic?.workflowTotal}
-                  </Link>
-                ) : (
-                  0
-                )}
-              </div>
-              <div className="ml-1 text-stone-700 dark:text-stone-200">{t("dashboard.statistics.unit")}</div>
-            </div>
-          </div>
-        </div>
 
-        <div className="border w-full md:w-[250px] 3xl:w-[300px] flex items-center rounded-md p-3 shadow-lg">
+      <div>TODO: 最近执行的工作流 LatestWorkflowRun</div>
-          <div className="p-3">
+    </>
-            <FolderCheck size={48} strokeWidth={1} className="text-green-400" />
+  );
-          </div>
+};
-          <div>
-            <div className="text-muted-foreground font-semibold">{t("dashboard.statistics.enabled.workflow")}</div>
-            <div className="flex items-baseline">
-              <div className="text-3xl text-stone-700 dark:text-stone-200">
-                {statistic?.workflowEnabled ? (
-                  <Link to="/workflows?state=enabled" className="hover:underline">
-                    {statistic?.workflowEnabled}
-                  </Link>
-                ) : (
-                  0
-                )}
-              </div>
-              <div className="ml-1 text-stone-700 dark:text-stone-200">{t("dashboard.statistics.unit")}</div>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      <div className="my-4">
+const StatisticCard = ({
-        <hr />
+  label,
-      </div>
+  icon,
-
+  value,
-      <div>
+  suffix,
-        <div className="text-muted-foreground mt-5 text-sm">{t("dashboard.certificate")}</div>
+  onClick,
-
+}: {
-        <CertificateList />
+  label: React.ReactNode;
-      </div>
+  icon: React.ReactNode;
-    </div>
+  value?: string | number | React.ReactNode;
+  suffix?: React.ReactNode;
+  onClick?: () => void;
+}) => {
+  return (
+    <Card className="overflow-hidden" bordered={false} hoverable onClick={onClick}>
+      <Space size="middle">
+        {icon}
+        <Statistic
+          title={label}
+          valueRender={() => {
+            return <Typography.Text className="text-4xl">{value}</Typography.Text>;
+          }}
+          suffix={<Typography.Text className="text-sm">{suffix}</Typography.Text>}
+        />
+      </Space>
+    </Card>
   );
 };
 

ui/src/pages/workflows/WorkflowList.tsx

@@ -80,6 +80,7 @@ const WorkflowList = () => {
     {
       key: "state",
       title: t("workflow.props.state"),
+      defaultFilteredValue: searchParams.has("state") ? [searchParams.get("state") as string] : undefined,
       filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
         const items: Required<MenuProps>["items"] = [
           ["enabled", "workflow.props.state.filter.enabled"],
@@ -195,16 +196,14 @@ const WorkflowList = () => {
   const [tableData, setTableData] = useState<WorkflowType[]>([]);
   const [tableTotal, setTableTotal] = useState<number>(0);
 
-  const [filters, setFilters] = useState<Record<string, unknown>>({});
+  const [filters, setFilters] = useState<Record<string, unknown>>(() => {
+    return {
+      state: searchParams.get("state"),
+    };
+  });
 
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(() => parseInt(+searchParams.get("page")! + "") || 1);
-  const [pageSize, setPageSize] = useState<number>(10);
+  const [pageSize, setPageSize] = useState<number>(() => parseInt(+searchParams.get("perPage")! + "") || 10);
-
-  useEffect(() => {
-    setFilters({ ...filters, state: searchParams.get("state") });
-    setPage(parseInt(+searchParams.get("page")! + "") || 1);
-    setPageSize(parseInt(+searchParams.get("perPage")! + "") || 10);
-  }, []);
 
   const fetchTableData = useCallback(async () => {
     if (loading) return;