From 220d98a66851b8108b43bce19f86722924f17f24 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Thu, 12 Dec 2024 09:48:50 +0800
Subject: [PATCH] feat(ui): show more details in CertificateDetail

---
 .../certificate/CertificateDetail.tsx         |  5 ++
 ui/src/i18n/locales/en/nls.certificate.json   |  2 +-
 ui/src/i18n/locales/zh/nls.certificate.json   |  2 +-
 ui/src/pages/ConsoleLayout.tsx                | 77 +++++++------------
 ui/src/pages/certificates/CertificateList.tsx |  2 +-
 5 files changed, 34 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/certificate/CertificateDetail.tsx b/ui/src/components/certificate/CertificateDetail.tsx
index 02b7a91e..05b492d3 100644
--- a/ui/src/components/certificate/CertificateDetail.tsx
+++ b/ui/src/components/certificate/CertificateDetail.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { Button, Dropdown, Form, Input, message, Space, Tooltip } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { ChevronDown as ChevronDownIcon, Clipboard as ClipboardIcon, ThumbsUp as ThumbsUpIcon } from "lucide-react";
+import dayjs from "dayjs";
 
 import { type CertificateModel } from "@/domain/certificate";
 import { saveFiles2Zip } from "@/utils/file";
@@ -36,6 +37,10 @@ const CertificateDetail = ({ data }: CertificateDetailProps) => {
       {MessageContextHolder}
 
       <Form layout="vertical">
+        <Form.Item label={t("certificate.props.san")}>{data.san}</Form.Item>
+
+        <Form.Item label={t("certificate.props.expiry")}>{dayjs(data.expireAt).format("YYYY-MM-DD HH:mm:ss")}</Form.Item>
+
         <Form.Item>
           <div className="flex items-center justify-between w-full mb-2">
             <label className="font-medium">{t("certificate.props.certificate_chain")}</label>
diff --git a/ui/src/i18n/locales/en/nls.certificate.json b/ui/src/i18n/locales/en/nls.certificate.json
index 88ebed31..d1146930 100644
--- a/ui/src/i18n/locales/en/nls.certificate.json
+++ b/ui/src/i18n/locales/en/nls.certificate.json
@@ -6,7 +6,7 @@
   "certificate.action.view": "View Certificate",
   "certificate.action.download": "Download Certificate",
 
-  "certificate.props.domain": "Name",
+  "certificate.props.san": "Name",
   "certificate.props.expiry": "Expiry",
   "certificate.props.expiry.left_days": "{{left}} / {{total}} days left",
   "certificate.props.expiry.expired": "Expired",
diff --git a/ui/src/i18n/locales/zh/nls.certificate.json b/ui/src/i18n/locales/zh/nls.certificate.json
index 538e24bf..1c4d3d24 100644
--- a/ui/src/i18n/locales/zh/nls.certificate.json
+++ b/ui/src/i18n/locales/zh/nls.certificate.json
@@ -6,7 +6,7 @@
   "certificate.action.view": "查看证书",
   "certificate.action.download": "下载证书",
 
-  "certificate.props.domain": "名称",
+  "certificate.props.san": "名称",
   "certificate.props.expiry": "有效期限",
   "certificate.props.expiry.left_days": "{{left}} / {{total}} 天",
   "certificate.props.expiry.expired": "已到期",
diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx
index de053fa8..c21ab1bf 100644
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -120,43 +120,21 @@ const SiderMenu = React.memo(({ onSelect }: { onSelect?: (key: string) => void }
   const MENU_KEY_CERTIFICATES = "/certificates";
   const MENU_KEY_ACCESSES = "/accesses";
   const menuItems: Required<MenuProps>["items"] = [
-    {
-      key: MENU_KEY_HOME,
-      icon: <HomeIcon size={16} />,
-      label: t("dashboard.page.title"),
+    [MENU_KEY_HOME, <HomeIcon size={16} />, t("dashboard.page.title")],
+    [MENU_KEY_WORKFLOWS, <WorkflowIcon size={16} />, t("workflow.page.title")],
+    [MENU_KEY_CERTIFICATES, <ShieldCheckIcon size={16} />, t("certificate.page.title")],
+    [MENU_KEY_ACCESSES, <ServerIcon size={16} />, t("access.page.title")],
+  ].map(([key, icon, label]) => {
+    return {
+      key: key as string,
+      icon: icon,
+      label: label,
       onClick: () => {
-        navigate(MENU_KEY_HOME);
-        onSelect?.(MENU_KEY_HOME);
+        navigate(key as string);
+        onSelect?.(key as string);
       },
-    },
-    {
-      key: MENU_KEY_WORKFLOWS,
-      icon: <WorkflowIcon size={16} />,
-      label: t("workflow.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_WORKFLOWS);
-        onSelect?.(MENU_KEY_WORKFLOWS);
-      },
-    },
-    {
-      key: MENU_KEY_CERTIFICATES,
-      icon: <ShieldCheckIcon size={16} />,
-      label: t("certificate.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_CERTIFICATES);
-        onSelect?.(MENU_KEY_CERTIFICATES);
-      },
-    },
-    {
-      key: MENU_KEY_ACCESSES,
-      icon: <ServerIcon size={16} />,
-      label: t("access.page.title"),
-      onClick: () => {
-        navigate(MENU_KEY_ACCESSES);
-        onSelect?.(MENU_KEY_ACCESSES);
-      },
-    },
-  ];
+    };
+  });
   const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
 
   const getActiveMenuItem = () => {
@@ -207,22 +185,19 @@ const ThemeToggleButton = React.memo(({ size }: { size?: ButtonProps["size"] })
   const { theme, setThemeMode } = useTheme();
 
   const items: Required<MenuProps>["items"] = [
-    {
-      key: "light",
-      label: <>{t("common.theme.light")}</>,
-      onClick: () => setThemeMode("light"),
-    },
-    {
-      key: "dark",
-      label: <>{t("common.theme.dark")}</>,
-      onClick: () => setThemeMode("dark"),
-    },
-    {
-      key: "system",
-      label: <>{t("common.theme.system")}</>,
-      onClick: () => setThemeMode("system"),
-    },
-  ];
+    ["light", t("common.theme.light")],
+    ["dark", t("common.theme.dark")],
+    ["system", t("common.theme.system")],
+  ].map(([key, label]) => {
+    return {
+      key: key as string,
+      label: label,
+      onClick: () => {
+        setThemeMode(key as Parameters<typeof setThemeMode>[0]);
+        window.location.reload();
+      },
+    };
+  });
 
   return (
     <Dropdown menu={{ items }} trigger={["click"]}>
diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx
index ae7525d5..aa744fff 100644
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@@ -33,7 +33,7 @@ const CertificateList = () => {
     },
     {
       key: "name",
-      title: t("certificate.props.domain"),
+      title: t("certificate.props.san"),
       render: (_, record) => <Typography.Text>{record.san}</Typography.Text>,
     },
     {