calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix various ui bugs

Browse Source
This commit is contained in:
Owen
2025-10-23 17:36:24 -07:00
parent 921285e5b1
commit adefbdbeb3
5 changed files with 107 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/[orgId]/settings/logs/access/page.tsx
View File

@@ -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<number>(0);
const [currentPage, setCurrentPage] = useState<number>(0);
const [pageSize, setPageSize] = useState<number>(20);
const [isLoading, setIsLoading] = useState(false);
// Initialize page size from storage or default
const [pageSize, setPageSize] = useState<number>(() => {
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() {
<LogDataTable
columns={columns}
data={rows}
persistPageSize="access-logs-table"
title={t("accessLogs")}
onRefresh={refreshData}
isRefreshing={isRefreshing}
@@ -599,10 +603,10 @@ export default function GeneralPage() {
// Server-side pagination props
totalCount={totalCount}
currentPage={currentPage}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}

12
src/app/[orgId]/settings/logs/action/page.tsx
View File

@@ -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 { Key, User } from "lucide-react";
@@ -44,9 +44,13 @@ export default function GeneralPage() {
// Pagination state
const [totalCount, setTotalCount] = useState<number>(0);
const [currentPage, setCurrentPage] = useState<number>(0);
const [pageSize, setPageSize] = useState<number>(20);
const [isLoading, setIsLoading] = useState(false);
// Initialize page size from storage or default
const [pageSize, setPageSize] = useState<number>(() => {
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() {
<LogDataTable
columns={columns}
data={rows}
persistPageSize="action-logs-table"
title={t("actionLogs")}
searchPlaceholder={t("searchLogs")}
searchColumn="action"
@@ -453,10 +457,10 @@ export default function GeneralPage() {
// Server-side pagination props
totalCount={totalCount}
currentPage={currentPage}
pageSize={pageSize}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}

14
src/app/[orgId]/settings/logs/request/page.tsx
View File

@@ -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 { Key, RouteOff, User, Lock, Unlock, ArrowUpRight } from "lucide-react";
@@ -28,9 +28,13 @@ export default function GeneralPage() {
// Pagination state
const [totalCount, setTotalCount] = useState<number>(0);
const [currentPage, setCurrentPage] = useState<number>(0);
const [pageSize, setPageSize] = useState<number>(20);
const [isLoading, setIsLoading] = useState(false);
// Initialize page size from storage or default
const [pageSize, setPageSize] = useState<number>(() => {
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() {
<LogDataTable
columns={columns}
data={rows}
persistPageSize="request-logs-table"
title={t("requestLogs")}
searchPlaceholder={t("searchLogs")}
searchColumn="host"
@@ -776,11 +780,11 @@ export default function GeneralPage() {
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
pageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}
/>
</>
);
}
}

2
src/components/DataTablePagination.tsx
View File

@@ -97,7 +97,7 @@ export function DataTablePagination<TData>({
value={`${table.getState().pagination.pageSize}`}
onValueChange={handlePageSizeChange}
>
<SelectTrigger className="h-8 w-[70px]">
<SelectTrigger className="h-8 w-[73px]">
<SelectValue
placeholder={table.getState().pagination.pageSize}
/>

178
src/components/LogDataTable.tsx
View File

@@ -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<TData, TValue> = {
};
tabs?: TabFilter[];
defaultTab?: string;
persistPageSize?: boolean | string;
defaultPageSize?: number;
onDateRangeChange?: (
startDate: DateTimeValue,
endDate: DateTimeValue
@@ -114,6 +112,7 @@ type DataTableProps<TData, TValue> = {
};
// 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<TData, TValue>({
defaultSort,
tabs,
defaultTab,
persistPageSize = false,
defaultPageSize = 20,
onDateRangeChange,
pageSize,
dateRange,
totalCount,
currentPage = 0,
@@ -150,18 +148,6 @@ export function LogDataTable<TData, TValue>({
}: DataTableProps<TData, TValue>) {
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<number>(() => {
if (persistPageSize) {
return getStoredPageSize(tableId, defaultPageSize);
}
return defaultPageSize;
});
const [sorting, setSorting] = useState<SortingState>(
defaultSort ? [defaultSort] : []
);
@@ -289,17 +275,17 @@ export function LogDataTable<TData, TValue>({
}
});
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<TData, TValue>({
// 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<TData, TValue>({
table.getRowModel().rows.map((row) => {
const isExpanded =
expandable && expandedRows.has(row.id);
return (
<>
<TableRow
key={row.id}
data-state={
row.getIsSelected() &&
"selected"
}
onClick={() =>
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 [
<TableRow
key={row.id}
data-state={
row.getIsSelected() &&
"selected"
}
onClick={() =>
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 (
<TableCell
key={cell.id}
className={`${className} py-2`} // made smaller
>
{flexRender(
cell.column
.columnDef
.cell,
cell.getContext()
)}
</TableCell>
);
})}
</TableRow>
{isExpanded &&
renderExpandedRow && (
<TableRow
key={`${row.id}-expanded`}
>
return (
<TableCell
colSpan={
enhancedColumns.length
}
className="p-4 bg-muted/50"
key={cell.id}
className={`${className} py-2`} // made smaller
>
{renderExpandedRow(
row.original
{flexRender(
cell.column
.columnDef
.cell,
cell.getContext()
)}
</TableCell>
</TableRow>
)}
</>
);
})
);
})}
</TableRow>,
isExpanded &&
renderExpandedRow && (
<TableRow
key={`${row.id}-expanded`}
>
<TableCell
colSpan={
enhancedColumns.length
}
className="p-4 bg-muted/50"
>
{renderExpandedRow(
row.original
)}
</TableCell>
</TableRow>
)
].filter(Boolean);
}).flat()
) : (
<TableRow>
<TableCell