feat(ui): update CertificateDetail and CertificateList components with new certificate fields

ui/src/components/certificate/CertificateDetail.tsx

@@ -22,12 +22,20 @@ const CertificateDetail = ({ data, ...props }: CertificateDetailProps) => {
   return (
     <div {...props}>
       <Form layout="vertical">
-        <Form.Item label={t("certificate.props.subject_alt_names")}>
-          <Input value={data.subjectAltNames} variant="filled" placeholder="" />
+        <Form.Item label={t("certificate.props.subject_name")}>
+          <Input value={data.subjectName} variant="filled" placeholder="" />
         </Form.Item>
 
-        <Form.Item label={t("certificate.props.issuer")}>
-          <Input value={data.issuerOrg} variant="filled" placeholder="" />
+        <Form.Item label={t("certificate.props.subject_alt_names")}>
+          <Input value={data.subjectAltNames.split(";").join("; ")} variant="filled" placeholder="" />
+        </Form.Item>
+
+        <Form.Item label={t("certificate.props.issuer_name")}>
+          <Input value={`${data.issuerName}`} variant="filled" placeholder="" />
+        </Form.Item>
+
+        <Form.Item label={t("certificate.props.issuer_org")}>
+          <Input value={`${data.issuerOrg}`} variant="filled" placeholder="" />
         </Form.Item>
 
         <Form.Item label={t("certificate.props.validity")}>

ui/src/i18n/resources/en/nls.certificate.json

@@ -93,9 +93,9 @@
   },
 
   "props": {
-    "subject_alt_names": "Name",
+    "name": "Name",
     "validity": {
-      "": "Expiry",
+      "": "Validity period",
       "left_days": "{{left}} / {{total}} days left",
       "less_than_a_day": "≤1 / {{total}} days left",
       "expired": "Expired",
@@ -106,18 +106,21 @@
         "expired": "Expired"
       }
     },
-    "brand": "Brand",
     "source": {
       "": "Source",
       "request": "Request",
       "upload": "Upload"
     },
+    "brand": "Brand",
     "revoked": "Revoked",
     "certificate": "Certificate chain",
     "private_key": "Private key",
     "serial_number": "Serial number",
+    "subject_name": "Subject common name",
+    "subject_alt_names": "Subject alternative names",
+    "issuer_name": "Issuer common name",
+    "issuer_org": "Issuer organization",
     "key_algorithm": "Key algorithm",
-    "issuer": "Issuer",
     "created_at": "Created at",
     "updated_at": "Updated at"
   }

ui/src/i18n/resources/zh/nls.certificate.json

@@ -93,7 +93,7 @@
   },
 
   "props": {
-    "subject_alt_names": "名称",
+    "name": "名称",
     "validity": {
       "": "有效期限",
       "left_days": "{{left}} / {{total}} 天",
@@ -106,18 +106,21 @@
         "expired": "已过期"
       }
     },
-    "brand": "证书品牌",
     "source": {
       "": "来源",
       "request": "申请",
       "upload": "上传"
     },
+    "brand": "证书品牌",
     "revoked": "已吊销",
     "certificate": "证书内容",
     "private_key": "私钥内容",
     "serial_number": "证书序列号",
+    "subject_name": "主题通用名称",
+    "subject_alt_names": "主题备用名称",
+    "issuer_name": "颁发者通用名称",
+    "issuer_org": "颁发者组织",
     "key_algorithm": "私钥算法",
-    "issuer": "颁发者",
     "created_at": "创建时间",
     "updated_at": "更新时间"
   }

ui/src/pages/certificates/CertificateList.tsx

@@ -57,8 +57,10 @@ const CertificateList = () => {
   const tableColumns: TableProps<CertificateModel>["columns"] = [
     {
       key: "name",
-      title: t("certificate.props.subject_alt_names"),
-      render: (_, record) => <Typography.Text delete={record.isRevoked}>{record.subjectAltNames}</Typography.Text>,
+      title: t("certificate.props.name"),
+      render: (_, record) => {
+        return <Typography.Text delete={record.isRevoked}>{record.subjectAltNames.split(";").join("; ")}</Typography.Text>;
+      },
     },
     {
       key: "validity",
@@ -108,7 +110,10 @@ const CertificateList = () => {
       render: (_, record) => (
         <div className="flex max-w-full flex-col gap-1 truncate">
           <Typography.Text ellipsis>{record.issuerOrg || "\u00A0"}</Typography.Text>
-          <Typography.Text ellipsis>{record.keyAlgorithm || "\u00A0"}</Typography.Text>
+          <Typography.Text className="space-x-2" ellipsis>
+            <span>{record.keyAlgorithm || "\u00A0"}</span>
+            <span>{record.validationPolicy}</span>
+          </Typography.Text>
         </div>
       ),
     },

ui/src/repository/certificate.ts

@@ -9,10 +9,13 @@ const pbco = pb.collection(COLLECTION_NAME_CERTIFICATE);
 const _commonFields = [
   "id",
   "source",
-  "subjectAltNames",
   "serialNumber",
+  "subjectName",
+  "subjectAltNames",
+  "issuerName",
   "issuerOrg",
   "keyAlgorithm",
+  "validationPolicy",
   "validityNotBefore",
   "validityNotAfter",
   "validityInterval",