diff --git a/src/app/[orgId]/settings/logs/access/page.tsx b/src/app/[orgId]/settings/logs/access/page.tsx index d58dd09d..07e33824 100644 --- a/src/app/[orgId]/settings/logs/access/page.tsx +++ b/src/app/[orgId]/settings/logs/access/page.tsx @@ -6,7 +6,7 @@ import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; import { useParams, useRouter, useSearchParams } from "next/navigation"; import { useTranslations } from "next-intl"; -import { LogDataTable } from "@app/components/LogDataTable"; +import { getStoredPageSize, LogDataTable, setStoredPageSize } from "@app/components/LogDataTable"; import { ColumnDef } from "@tanstack/react-table"; import { DateTimeValue } from "@app/components/DateTimePicker"; import { ArrowUpRight, Key, User } from "lucide-react"; @@ -56,9 +56,13 @@ export default function GeneralPage() { // Pagination state const [totalCount, setTotalCount] = useState(0); const [currentPage, setCurrentPage] = useState(0); - const [pageSize, setPageSize] = useState(20); const [isLoading, setIsLoading] = useState(false); + // Initialize page size from storage or default + const [pageSize, setPageSize] = useState(() => { + return getStoredPageSize("access-audit-logs", 20); + }); + // Set default date range to last 24 hours const getDefaultDateRange = () => { // if the time is in the url params, use that instead @@ -133,6 +137,7 @@ export default function GeneralPage() { // Handle page size changes const handlePageSizeChange = (newPageSize: number) => { setPageSize(newPageSize); + setStoredPageSize(newPageSize, "access-audit-logs"); setCurrentPage(0); // Reset to first page when changing page size queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize); }; @@ -581,7 +586,6 @@ export default function GeneralPage() { (0); const [currentPage, setCurrentPage] = useState(0); - const [pageSize, setPageSize] = useState(20); const [isLoading, setIsLoading] = useState(false); + // Initialize page size from storage or default + const [pageSize, setPageSize] = useState(() => { + return getStoredPageSize("action-audit-logs", 20); + }); + // Set default date range to last 24 hours const getDefaultDateRange = () => { // if the time is in the url params, use that instead @@ -121,6 +125,7 @@ export default function GeneralPage() { // Handle page size changes const handlePageSizeChange = (newPageSize: number) => { setPageSize(newPageSize); + setStoredPageSize(newPageSize, "action-audit-logs"); setCurrentPage(0); // Reset to first page when changing page size queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize); }; @@ -433,7 +438,6 @@ export default function GeneralPage() { (0); const [currentPage, setCurrentPage] = useState(0); - const [pageSize, setPageSize] = useState(20); const [isLoading, setIsLoading] = useState(false); + // Initialize page size from storage or default + const [pageSize, setPageSize] = useState(() => { + return getStoredPageSize("request-audit-logs", 20); + }); + const [filterAttributes, setFilterAttributes] = useState<{ actors: string[]; resources: { @@ -143,6 +147,7 @@ export default function GeneralPage() { // Handle page size changes const handlePageSizeChange = (newPageSize: number) => { setPageSize(newPageSize); + setStoredPageSize(newPageSize, "request-audit-logs"); setCurrentPage(0); // Reset to first page when changing page size queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize); }; @@ -753,7 +758,6 @@ export default function GeneralPage() { ); -} +} \ No newline at end of file diff --git a/src/components/DataTablePagination.tsx b/src/components/DataTablePagination.tsx index a07354f7..5c7af9d4 100644 --- a/src/components/DataTablePagination.tsx +++ b/src/components/DataTablePagination.tsx @@ -97,7 +97,7 @@ export function DataTablePagination({ value={`${table.getState().pagination.pageSize}`} onValueChange={handlePageSizeChange} > - + diff --git a/src/components/LogDataTable.tsx b/src/components/LogDataTable.tsx index bb5131a4..566eb0fe 100644 --- a/src/components/LogDataTable.tsx +++ b/src/components/LogDataTable.tsx @@ -49,7 +49,7 @@ const STORAGE_KEYS = { tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE }; -const getStoredPageSize = (tableId?: string, defaultSize = 20): number => { +export const getStoredPageSize = (tableId?: string, defaultSize = 20): number => { if (typeof window === "undefined") return defaultSize; try { @@ -68,7 +68,7 @@ const getStoredPageSize = (tableId?: string, defaultSize = 20): number => { return defaultSize; }; -const setStoredPageSize = (pageSize: number, tableId?: string): void => { +export const setStoredPageSize = (pageSize: number, tableId?: string): void => { if (typeof window === "undefined") return; try { @@ -102,8 +102,6 @@ type DataTableProps = { }; tabs?: TabFilter[]; defaultTab?: string; - persistPageSize?: boolean | string; - defaultPageSize?: number; onDateRangeChange?: ( startDate: DateTimeValue, endDate: DateTimeValue @@ -114,6 +112,7 @@ type DataTableProps = { }; // Server-side pagination props totalCount?: number; + pageSize: number; currentPage?: number; onPageChange?: (page: number) => void; onPageSizeChange?: (pageSize: number) => void; @@ -136,9 +135,8 @@ export function LogDataTable({ defaultSort, tabs, defaultTab, - persistPageSize = false, - defaultPageSize = 20, onDateRangeChange, + pageSize, dateRange, totalCount, currentPage = 0, @@ -150,18 +148,6 @@ export function LogDataTable({ }: DataTableProps) { const t = useTranslations(); - // Determine table identifier for storage - const tableId = - typeof persistPageSize === "string" ? persistPageSize : undefined; - - // Initialize page size from storage or default - const [pageSize, setPageSize] = useState(() => { - if (persistPageSize) { - return getStoredPageSize(tableId, defaultPageSize); - } - return defaultPageSize; - }); - const [sorting, setSorting] = useState( defaultSort ? [defaultSort] : [] ); @@ -289,17 +275,17 @@ export function LogDataTable({ } }); - useEffect(() => { - const currentPageSize = table.getState().pagination.pageSize; - if (currentPageSize !== pageSize) { - table.setPageSize(pageSize); + // useEffect(() => { + // const currentPageSize = table.getState().pagination.pageSize; + // if (currentPageSize !== pageSize) { + // table.setPageSize(pageSize); - // Persist to localStorage if enabled - if (persistPageSize) { - setStoredPageSize(pageSize, tableId); - } - } - }, [pageSize, table, persistPageSize, tableId]); + // // Persist to localStorage if enabled + // if (persistPageSize) { + // setStoredPageSize(pageSize, tableId); + // } + // } + // }, [pageSize, table, persistPageSize, tableId]); // Update table page index when currentPage prop changes (server pagination) useEffect(() => { @@ -319,13 +305,13 @@ export function LogDataTable({ // Enhanced pagination component that updates our local state const handlePageSizeChange = (newPageSize: number) => { - setPageSize(newPageSize); + // setPageSize(newPageSize); table.setPageSize(newPageSize); // Persist immediately when changed - if (persistPageSize) { - setStoredPageSize(newPageSize, tableId); - } + // if (persistPageSize) { + // setStoredPageSize(newPageSize, tableId); + // } // For server pagination, notify parent component if (isServerPagination && onPageSizeChangeProp) { @@ -421,77 +407,75 @@ export function LogDataTable({ table.getRowModel().rows.map((row) => { const isExpanded = expandable && expandedRows.has(row.id); - return ( - <> - - expandable - ? toggleRowExpansion( - row.id - ) - : undefined - } - className="text-xs" // made smaller - > - {row - .getVisibleCells() - .map((cell) => { - const originalRow = - row.original as any; - const actionValue = - originalRow?.action; - let className = ""; + return [ + + expandable + ? toggleRowExpansion( + row.id + ) + : undefined + } + className="text-xs" // made smaller + > + {row + .getVisibleCells() + .map((cell) => { + const originalRow = + row.original as any; + const actionValue = + originalRow?.action; + let className = ""; - if ( - typeof actionValue === - "boolean" - ) { - className = - actionValue - ? "bg-green-100 dark:bg-green-900/50" - : "bg-red-100 dark:bg-red-900/50"; - } + if ( + typeof actionValue === + "boolean" + ) { + className = + actionValue + ? "bg-green-100 dark:bg-green-900/50" + : "bg-red-100 dark:bg-red-900/50"; + } - return ( - - {flexRender( - cell.column - .columnDef - .cell, - cell.getContext() - )} - - ); - })} - - {isExpanded && - renderExpandedRow && ( - + return ( - {renderExpandedRow( - row.original + {flexRender( + cell.column + .columnDef + .cell, + cell.getContext() )} - - )} - - ); - }) + ); + })} + , + isExpanded && + renderExpandedRow && ( + + + {renderExpandedRow( + row.original + )} + + + ) + ].filter(Boolean); + }).flat() ) : (