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

Add expandable columns

Browse Source
This commit is contained in:
Owen
2025-10-22 18:21:54 -07:00
parent 0211f75cb6
commit eae2c37388
8 changed files with 316 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
server/private/routers/auditLogs/queryActionAuditLog.ts
View File

@@ -24,6 +24,7 @@ import { fromError } from "zod-validation-error";
import { QueryActionAuditLogResponse } from "@server/routers/auditLogs/types";
import response from "@server/lib/response";
import logger from "@server/logger";
import { metadata } from "@app/app/[orgId]/settings/layout";
export const queryActionAuditLogsQuery = z.object({
// iso string just validate its a parseable date
@@ -65,6 +66,7 @@ export function queryAction(timeStart: number, timeEnd: number, orgId: string) {
orgId: actionAuditLog.orgId,
action: actionAuditLog.action,
actorType: actionAuditLog.actorType,
metadata: actionAuditLog.metadata,
actorId: actionAuditLog.actorId,
timestamp: actionAuditLog.timestamp,
actor: actionAuditLog.actor

10
server/routers/auditLogs/exportRequstAuditLog.ts
View File

@@ -41,7 +41,6 @@ export async function exportRequestAuditLogs(
)
);
}
const { timeStart, timeEnd, limit, offset } = parsedQuery.data;
const parsedParams = queryRequestAuditLogsParams.safeParse(req.params);
if (!parsedParams.success) {
@@ -52,16 +51,17 @@ export async function exportRequestAuditLogs(
)
);
}
const { orgId } = parsedParams.data;
const baseQuery = queryRequest(timeStart, timeEnd, orgId);
const data = { ...parsedQuery.data, ...parsedParams.data };
const log = await baseQuery.limit(limit).offset(offset);
const baseQuery = queryRequest(data);
const log = await baseQuery.limit(data.limit).offset(data.offset);
const csvData = generateCSV(log);
res.setHeader('Content-Type', 'text/csv');
res.setHeader('Content-Disposition', `attachment; filename="request-audit-logs-${orgId}-${Date.now()}.csv"`);
res.setHeader('Content-Disposition', `attachment; filename="request-audit-logs-${data.orgId}-${Date.now()}.csv"`);
return res.send(csvData);
} catch (error) {

106
server/routers/auditLogs/queryRequstAuditLog.ts
View File

@@ -28,6 +28,11 @@ export const queryAccessAuditLogsQuery = z.object({
.transform((val) => Math.floor(new Date(val).getTime() / 1000))
.optional()
.default(new Date().toISOString()),
action: z.boolean().optional(),
method: z.enum(["GET", "POST", "PUT", "DELETE", "PATCH"]).optional(),
reason: z.number().optional(),
resourceId: z.number().optional(),
actor: z.string().optional(),
limit: z
.string()
.optional()
@@ -46,55 +51,64 @@ export const queryRequestAuditLogsParams = z.object({
orgId: z.string()
});
export function queryRequest(timeStart: number, timeEnd: number, orgId: string) {
export const queryRequestAuditLogsCombined =
queryAccessAuditLogsQuery.merge(queryRequestAuditLogsParams);
type Q = z.infer<typeof queryRequestAuditLogsCombined>;
function getWhere(data: Q) {
return and(
gt(requestAuditLog.timestamp, data.timeStart),
lt(requestAuditLog.timestamp, data.timeEnd),
eq(requestAuditLog.orgId, data.orgId),
data.resourceId
? eq(requestAuditLog.resourceId, data.resourceId)
: undefined,
data.actor ? eq(requestAuditLog.actor, data.actor) : undefined,
data.method ? eq(requestAuditLog.method, data.method) : undefined,
data.reason ? eq(requestAuditLog.reason, data.reason) : undefined
);
}
export function queryRequest(data: Q) {
return db
.select({
timestamp: requestAuditLog.timestamp,
orgId: requestAuditLog.orgId,
action: requestAuditLog.action,
reason: requestAuditLog.reason,
actorType: requestAuditLog.actorType,
actor: requestAuditLog.actor,
actorId: requestAuditLog.actorId,
resourceId: requestAuditLog.resourceId,
ip: requestAuditLog.ip,
location: requestAuditLog.location,
userAgent: requestAuditLog.userAgent,
metadata: requestAuditLog.metadata,
headers: requestAuditLog.headers,
query: requestAuditLog.query,
originalRequestURL: requestAuditLog.originalRequestURL,
scheme: requestAuditLog.scheme,
host: requestAuditLog.host,
path: requestAuditLog.path,
method: requestAuditLog.method,
timestamp: requestAuditLog.timestamp,
orgId: requestAuditLog.orgId,
action: requestAuditLog.action,
reason: requestAuditLog.reason,
actorType: requestAuditLog.actorType,
actor: requestAuditLog.actor,
actorId: requestAuditLog.actorId,
resourceId: requestAuditLog.resourceId,
ip: requestAuditLog.ip,
location: requestAuditLog.location,
userAgent: requestAuditLog.userAgent,
metadata: requestAuditLog.metadata,
headers: requestAuditLog.headers,
query: requestAuditLog.query,
originalRequestURL: requestAuditLog.originalRequestURL,
scheme: requestAuditLog.scheme,
host: requestAuditLog.host,
path: requestAuditLog.path,
method: requestAuditLog.method,
tls: requestAuditLog.tls,
resourceName: resources.name,
resourceNiceId: resources.niceId
})
.from(requestAuditLog)
.leftJoin(resources, eq(requestAuditLog.resourceId, resources.resourceId)) // TODO: Is this efficient?
.where(
and(
gt(requestAuditLog.timestamp, timeStart),
lt(requestAuditLog.timestamp, timeEnd),
eq(requestAuditLog.orgId, orgId)
)
)
.leftJoin(
resources,
eq(requestAuditLog.resourceId, resources.resourceId)
) // TODO: Is this efficient?
.where(getWhere(data))
.orderBy(requestAuditLog.timestamp);
}
export function countRequestQuery(timeStart: number, timeEnd: number, orgId: string) {
const countQuery = db
.select({ count: count() })
.from(requestAuditLog)
.where(
and(
gt(requestAuditLog.timestamp, timeStart),
lt(requestAuditLog.timestamp, timeEnd),
eq(requestAuditLog.orgId, orgId)
)
);
export function countRequestQuery(data: Q) {
const countQuery = db
.select({ count: count() })
.from(requestAuditLog)
.where(getWhere(data));
return countQuery;
}
@@ -125,7 +139,6 @@ export async function queryRequestAuditLogs(
)
);
}
const { timeStart, timeEnd, limit, offset } = parsedQuery.data;
const parsedParams = queryRequestAuditLogsParams.safeParse(req.params);
if (!parsedParams.success) {
@@ -136,13 +149,14 @@ export async function queryRequestAuditLogs(
)
);
}
const { orgId } = parsedParams.data;
const baseQuery = queryRequest(timeStart, timeEnd, orgId);
const data = { ...parsedQuery.data, ...parsedParams.data };
const log = await baseQuery.limit(limit).offset(offset);
const baseQuery = queryRequest(data);
const totalCountResult = await countRequestQuery(timeStart, timeEnd, orgId);
const log = await baseQuery.limit(data.limit).offset(data.offset);
const totalCountResult = await countRequestQuery(data);
const totalCount = totalCountResult[0].count;
return response<QueryRequestAuditLogResponse>(res, {
@@ -150,8 +164,8 @@ export async function queryRequestAuditLogs(
log: log,
pagination: {
total: totalCount,
limit,
offset
limit: data.limit,
offset: data.offset
}
},
success: true,

11
server/routers/auditLogs/types.ts
View File

@@ -4,6 +4,7 @@ export type QueryActionAuditLogResponse = {
action: string;
actorType: string;
actorId: string;
metadata: string | null;
timestamp: number;
actor: string;
}[];
@@ -49,8 +50,9 @@ export type QueryRequestAuditLogResponse = {
export type QueryAccessAuditLogResponse = {
log: {
orgId: string;
action: string;
type: string;
action: boolean;
actorType: string | null;
actorId: string | null;
resourceId: number | null;
resourceName: string | null;
resourceNiceId: string | null;
@@ -58,10 +60,9 @@ export type QueryAccessAuditLogResponse = {
location: string | null;
userAgent: string | null;
metadata: string | null;
actorType: string;
actorId: string;
type: string;
timestamp: number;
actor: string;
actor: string | null;
}[];
pagination: {
total: number;

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

@@ -340,6 +340,21 @@ export default function GeneralPage() {
}
];
const renderExpandedRow = (row: any) => {
return (
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div>
<strong>Metadata:</strong>
<pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
{row.metadata ? JSON.stringify(JSON.parse(row.metadata), null, 2) : "N/A"}
</pre>
</div>
</div>
</div>
);
};
return (
<>
<LogDataTable
@@ -369,6 +384,9 @@ export default function GeneralPage() {
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}
/>
</>
);

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

@@ -269,6 +269,21 @@ export default function GeneralPage() {
}
];
const renderExpandedRow = (row: any) => {
return (
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div>
<strong>Metadata:</strong>
<pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
{row.metadata ? JSON.stringify(JSON.parse(row.metadata), null, 2) : "N/A"}
</pre>
</div>
</div>
</div>
);
};
return (
<>
<LogDataTable
@@ -298,6 +313,9 @@ export default function GeneralPage() {
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}
/>
</>
);

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

@@ -313,6 +313,7 @@ export default function GeneralPage() {
return (
<Link
href={`/${row.original.orgId}/settings/resources/${row.original.resourceNiceId}`}
onClick={(e) => e.stopPropagation()}
>
<Button
variant="outline"
@@ -402,6 +403,55 @@ export default function GeneralPage() {
}
];
const renderExpandedRow = (row: any) => {
return (
<div className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
<div>
<strong>User Agent:</strong>
<p className="text-muted-foreground mt-1 break-all">
{row.userAgent || "N/A"}
</p>
</div>
<div>
<strong>Original URL:</strong>
<p className="text-muted-foreground mt-1 break-all">
{row.originalRequestURL || "N/A"}
</p>
</div>
<div>
<strong>Scheme:</strong>
<p className="text-muted-foreground mt-1">
{row.scheme || "N/A"}
</p>
</div>
<div>
<strong>Metadata:</strong>
<pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
{row.metadata ? JSON.stringify(JSON.parse(row.metadata), null, 2) : "N/A"}
</pre>
</div>
{row.headers && (
<div className="md:col-span-2">
<strong>Headers:</strong>
<pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
{JSON.stringify(JSON.parse(row.headers), null, 2)}
</pre>
</div>
)}
{row.query && (
<div className="md:col-span-2">
<strong>Query Parameters:</strong>
<pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
{JSON.stringify(JSON.parse(row.query), null, 2)}
</pre>
</div>
)}
</div>
</div>
);
};
return (
<>
<LogDataTable
@@ -431,6 +481,9 @@ export default function GeneralPage() {
onPageSizeChange={handlePageSizeChange}
isLoading={isLoading}
defaultPageSize={pageSize}
// Row expansion props
expandable={true}
renderExpandedRow={renderExpandedRow}
/>
</>
);

204
src/components/LogDataTable.tsx
View File

@@ -23,7 +23,16 @@ import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw, Filter, X, Download } from "lucide-react";
import {
Plus,
Search,
RefreshCw,
Filter,
X,
Download,
ChevronRight,
ChevronDown
} from "lucide-react";
import {
Card,
CardContent,
@@ -109,6 +118,9 @@ type DataTableProps<TData, TValue> = {
onPageChange?: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
isLoading?: boolean;
// Row expansion props
expandable?: boolean;
renderExpandedRow?: (row: TData) => React.ReactNode;
};
export function LogDataTable<TData, TValue>({
@@ -132,7 +144,9 @@ export function LogDataTable<TData, TValue>({
currentPage = 0,
onPageChange,
onPageSizeChange: onPageSizeChangeProp,
isLoading = false
isLoading = false,
expandable = false,
renderExpandedRow
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -161,6 +175,7 @@ export function LogDataTable<TData, TValue>({
dateRange?.start || {}
);
const [endDate, setEndDate] = useState<DateTimeValue>(dateRange?.end || {});
const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
// Sync internal date state with external dateRange prop
useEffect(() => {
@@ -186,25 +201,77 @@ export function LogDataTable<TData, TValue>({
return data.filter(activeTabFilter.filterFn);
}, [data, tabs, activeTab]);
// Toggle row expansion
const toggleRowExpansion = (rowId: string) => {
setExpandedRows((prev) => {
const newSet = new Set(prev);
if (newSet.has(rowId)) {
newSet.delete(rowId);
} else {
newSet.add(rowId);
}
return newSet;
});
};
// Determine if using server-side pagination
const isServerPagination = totalCount !== undefined;
// Create columns with expansion column if expandable
const enhancedColumns = useMemo(() => {
if (!expandable) {
return columns;
}
const expansionColumn: ColumnDef<TData, TValue> = {
id: "expand",
header: () => null,
cell: ({ row }) => {
const isExpanded = expandedRows.has(row.id);
return (
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0"
onClick={(e) => {
toggleRowExpansion(row.id);
e.stopPropagation();
}}
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
);
},
size: 40
};
return [expansionColumn, ...columns];
}, [columns, expandable, expandedRows, toggleRowExpansion]);
const table = useReactTable({
data: filteredData,
columns,
columns: enhancedColumns,
getCoreRowModel: getCoreRowModel(),
// Only use client-side pagination if totalCount is not provided
...(isServerPagination ? {} : { getPaginationRowModel: getPaginationRowModel() }),
...(isServerPagination
? {}
: { getPaginationRowModel: getPaginationRowModel() }),
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
// Configure pagination state
...(isServerPagination ? {
manualPagination: true,
pageCount: totalCount ? Math.ceil(totalCount / pageSize) : 0,
} : {}),
...(isServerPagination
? {
manualPagination: true,
pageCount: totalCount ? Math.ceil(totalCount / pageSize) : 0
}
: {}),
initialState: {
pagination: {
pageSize: pageSize,
@@ -321,10 +388,7 @@ export function LogDataTable<TData, TValue>({
</Button>
)}
{onExport && (
<Button
onClick={onExport}
disabled={isExporting}
>
<Button onClick={onExport} disabled={isExporting}>
<Download
className={`mr-2 h-4 w-4 ${isExporting ? "animate-spin" : ""}`}
/>
@@ -354,48 +418,84 @@ export function LogDataTable<TData, TValue>({
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={
row.getIsSelected() && "selected"
}
className="text-xs" // made smaller
>
{row.getVisibleCells().map((cell) => {
const originalRow =
row.original as any;
const actionValue =
originalRow?.action;
let className = "";
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 = "";
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>
))
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`}
>
<TableCell
colSpan={
enhancedColumns.length
}
className="p-4 bg-muted/50"
>
{renderExpandedRow(
row.original
)}
</TableCell>
</TableRow>
)}
</>
);
})
) : (
<TableRow>
<TableCell
colSpan={columns.length}
colSpan={enhancedColumns.length}
className="h-24 text-center"
>
No results found.
@@ -408,7 +508,11 @@ export function LogDataTable<TData, TValue>({
<DataTablePagination
table={table}
onPageSizeChange={handlePageSizeChange}
onPageChange={isServerPagination ? handlePageChange : undefined}
onPageChange={
isServerPagination
? handlePageChange
: undefined
}
totalCount={totalCount}
isServerPagination={isServerPagination}
isLoading={isLoading}