diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx
index 75b12ecc..543c2f3b 100644
--- a/ui/src/pages/accesses/AccessList.tsx
+++ b/ui/src/pages/accesses/AccessList.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
@@ -13,9 +13,6 @@ import { useConfigContext } from "@/providers/config";
const AccessList = () => {
const { t } = useTranslation();
- // a flag to fix the twice-rendering issue in strict mode
- const mountRef = useRef(true);
-
const [modalApi, ModelContextHolder] = Modal.useModal();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -134,11 +131,6 @@ const AccessList = () => {
}, [page, pageSize, configContext.config.accesses]);
useEffect(() => {
- if (mountRef.current) {
- mountRef.current = false;
- return;
- }
-
fetchTableData();
}, [fetchTableData]);
diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx
index fccb1be0..5e91ce33 100644
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@@ -1,15 +1,14 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
-import { Button, Empty, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
+import { Button, Divider, Empty, Menu, notification, Radio, Space, Table, theme, Tooltip, Typography, type MenuProps, type TableProps } from "antd";
import { PageHeader } from "@ant-design/pro-components";
-import { Eye as EyeIcon } from "lucide-react";
+import { Eye as EyeIcon, Filter as FilterIcon } from "lucide-react";
import moment from "moment";
import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
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 navigate = useNavigate();
@@ -17,8 +16,7 @@ const CertificateList = () => {
const { t } = useTranslation();
- // a flag to fix the twice-rendering issue in strict mode
- const mountRef = useRef(true);
+ const { token: themeToken } = theme.useToken();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -40,21 +38,65 @@ const CertificateList = () => {
{
key: "expiry",
title: t("certificate.props.expiry"),
+ filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => {
+ const items: Required
["items"] = [
+ ["expireSoon", "certificate.props.expiry.filter.expire_soon"],
+ ["expired", "certificate.props.expiry.filter.expired"],
+ ].map(([key, label]) => {
+ return {
+ key,
+ label: {t(label)},
+ onClick: () => {
+ if (filters["state"] !== key) {
+ setFilters((prev) => ({ ...prev, state: key }));
+ setSelectedKeys([key]);
+ }
+
+ confirm({ closeDropdown: true });
+ },
+ };
+ });
+
+ const handleResetClick = () => {
+ setFilters((prev) => ({ ...prev, state: undefined }));
+ setSelectedKeys([]);
+ clearFilters?.();
+ confirm();
+ };
+
+ const handleConfirmClick = () => {
+ confirm();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+