feat: The Other Dude v9.0.1 — full-featured email system
ci: add GitHub Pages deployment workflow for docs site Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jason Staack
421
frontend/src/components/audit/AuditLogTable.tsx
Normal file
421
frontend/src/components/audit/AuditLogTable.tsx
Normal file
@@ -0,0 +1,421 @@
|
||||
/**
|
||||
* Filterable, paginated audit log table with expandable row details and CSV export.
|
||||
*
|
||||
* Uses TanStack Query for data fetching and design system tokens for styling.
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ChevronLeft,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Download,
|
||||
Search,
|
||||
ClipboardList,
|
||||
} from 'lucide-react'
|
||||
import {
|
||||
auditLogsApi,
|
||||
type AuditLogEntry,
|
||||
type AuditLogParams,
|
||||
} from '@/lib/api'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { EmptyState } from '@/components/ui/empty-state'
|
||||
|
||||
// Predefined action types for the filter dropdown
|
||||
const ACTION_TYPES = [
|
||||
{ value: '', label: 'All Actions' },
|
||||
{ value: 'login', label: 'Login' },
|
||||
{ value: 'logout', label: 'Logout' },
|
||||
{ value: 'device_create', label: 'Device Create' },
|
||||
{ value: 'device_update', label: 'Device Update' },
|
||||
{ value: 'device_delete', label: 'Device Delete' },
|
||||
{ value: 'config_browse', label: 'Config Browse' },
|
||||
{ value: 'config_add', label: 'Config Add' },
|
||||
{ value: 'config_set', label: 'Config Set' },
|
||||
{ value: 'config_remove', label: 'Config Remove' },
|
||||
{ value: 'config_execute', label: 'Config Execute' },
|
||||
{ value: 'firmware_upgrade', label: 'Firmware Upgrade' },
|
||||
{ value: 'alert_rule_create', label: 'Alert Rule Create' },
|
||||
{ value: 'alert_rule_update', label: 'Alert Rule Update' },
|
||||
{ value: 'bulk_command', label: 'Bulk Command' },
|
||||
{ value: 'device_adopt', label: 'Device Adopt' },
|
||||
] as const
|
||||
|
||||
const PER_PAGE_OPTIONS = [25, 50, 100] as const
|
||||
|
||||
/** Formats an ISO timestamp into a human-readable relative time string. */
|
||||
function formatRelativeTime(iso: string): string {
|
||||
const now = Date.now()
|
||||
const then = new Date(iso).getTime()
|
||||
const diffMs = now - then
|
||||
|
||||
if (diffMs < 0) return 'just now'
|
||||
|
||||
const seconds = Math.floor(diffMs / 1000)
|
||||
if (seconds < 60) return 'just now'
|
||||
|
||||
const minutes = Math.floor(seconds / 60)
|
||||
if (minutes < 60) return `${minutes}m ago`
|
||||
|
||||
const hours = Math.floor(minutes / 60)
|
||||
if (hours < 24) return `${hours}h ago`
|
||||
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days < 7) return `${days}d ago`
|
||||
|
||||
const weeks = Math.floor(days / 7)
|
||||
if (weeks < 4) return `${weeks}w ago`
|
||||
|
||||
const months = Math.floor(days / 30)
|
||||
return `${months}mo ago`
|
||||
}
|
||||
|
||||
/** Maps action string to a styled badge color. */
|
||||
function actionBadgeClasses(action: string): string {
|
||||
if (action.startsWith('config_')) return 'bg-accent/10 text-accent border-accent/20'
|
||||
if (action.startsWith('device_')) return 'bg-info/10 text-info border-info/20'
|
||||
if (action.startsWith('alert_')) return 'bg-warning/10 text-warning border-warning/20'
|
||||
if (action === 'login' || action === 'logout') return 'bg-success/10 text-success border-success/20'
|
||||
if (action.startsWith('firmware')) return 'bg-purple-500/10 text-purple-400 border-purple-500/20'
|
||||
if (action.startsWith('bulk_')) return 'bg-error/10 text-error border-error/20'
|
||||
return 'bg-elevated text-text-secondary border-border'
|
||||
}
|
||||
|
||||
interface AuditLogTableProps {
|
||||
tenantId: string
|
||||
}
|
||||
|
||||
export function AuditLogTable({ tenantId }: AuditLogTableProps) {
|
||||
const [page, setPage] = useState(1)
|
||||
const [perPage, setPerPage] = useState<number>(50)
|
||||
const [actionFilter, setActionFilter] = useState('')
|
||||
const [dateFrom, setDateFrom] = useState('')
|
||||
const [dateTo, setDateTo] = useState('')
|
||||
const [userSearch, setUserSearch] = useState('')
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null)
|
||||
const [exporting, setExporting] = useState(false)
|
||||
|
||||
const params: AuditLogParams = {
|
||||
page,
|
||||
per_page: perPage,
|
||||
...(actionFilter ? { action: actionFilter } : {}),
|
||||
...(dateFrom ? { date_from: new Date(dateFrom).toISOString() } : {}),
|
||||
...(dateTo ? { date_to: new Date(dateTo + 'T23:59:59').toISOString() } : {}),
|
||||
}
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ['audit-logs', tenantId, page, perPage, actionFilter, dateFrom, dateTo],
|
||||
queryFn: () => auditLogsApi.list(tenantId, params),
|
||||
enabled: !!tenantId,
|
||||
})
|
||||
|
||||
const totalPages = data ? Math.ceil(data.total / perPage) : 0
|
||||
|
||||
// Client-side user email filter (since user search is by text, not UUID)
|
||||
const filteredItems = data?.items.filter((item) => {
|
||||
if (!userSearch) return true
|
||||
return item.user_email?.toLowerCase().includes(userSearch.toLowerCase())
|
||||
}) ?? []
|
||||
|
||||
const handleExport = async () => {
|
||||
setExporting(true)
|
||||
try {
|
||||
await auditLogsApi.exportCsv(tenantId, {
|
||||
...(actionFilter ? { action: actionFilter } : {}),
|
||||
...(dateFrom ? { date_from: new Date(dateFrom).toISOString() } : {}),
|
||||
...(dateTo ? { date_to: new Date(dateTo + 'T23:59:59').toISOString() } : {}),
|
||||
})
|
||||
} finally {
|
||||
setExporting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Filter bar */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Action filter */}
|
||||
<select
|
||||
value={actionFilter}
|
||||
onChange={(e) => { setActionFilter(e.target.value); setPage(1) }}
|
||||
className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
>
|
||||
{ACTION_TYPES.map((a) => (
|
||||
<option key={a.value} value={a.value}>
|
||||
{a.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Date from */}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-text-muted">From</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dateFrom}
|
||||
onChange={(e) => { setDateFrom(e.target.value); setPage(1) }}
|
||||
className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Date to */}
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-text-muted">To</span>
|
||||
<input
|
||||
type="date"
|
||||
value={dateTo}
|
||||
onChange={(e) => { setDateTo(e.target.value); setPage(1) }}
|
||||
className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* User search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search user..."
|
||||
value={userSearch}
|
||||
onChange={(e) => setUserSearch(e.target.value)}
|
||||
className="h-8 rounded-md border border-border bg-surface pl-7 pr-2 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent w-40"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Spacer */}
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* Export CSV */}
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting || !data?.total}
|
||||
className="inline-flex items-center gap-1.5 rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-elevated hover:text-text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
{exporting ? 'Exporting...' : 'Export CSV'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="rounded-lg border border-border bg-surface overflow-hidden">
|
||||
{isLoading ? (
|
||||
<div className="p-8 text-center">
|
||||
<div className="inline-block h-6 w-6 animate-spin rounded-full border-2 border-accent border-t-transparent" />
|
||||
<p className="mt-2 text-sm text-text-muted">Loading audit logs...</p>
|
||||
</div>
|
||||
) : isError ? (
|
||||
<div className="p-8 text-center">
|
||||
<p className="text-sm text-error">Failed to load audit logs.</p>
|
||||
</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={ClipboardList}
|
||||
title="No activity recorded"
|
||||
description={
|
||||
actionFilter || dateFrom || dateTo || userSearch
|
||||
? 'Try adjusting your filters.'
|
||||
: 'Audit logs will appear here as actions are performed.'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-elevated/50">
|
||||
<th className="w-8 px-3 py-2" />
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
Timestamp
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
User
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
Action
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
Resource
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
Device
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-medium text-text-muted">
|
||||
IP Address
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
{filteredItems.map((item) => (
|
||||
<AuditLogRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
isExpanded={expandedId === item.id}
|
||||
onToggle={() =>
|
||||
setExpandedId(expandedId === item.id ? null : item.id)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{data && data.total > 0 && (
|
||||
<div className="flex items-center justify-between text-xs text-text-muted">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Rows per page:</span>
|
||||
<select
|
||||
value={perPage}
|
||||
onChange={(e) => {
|
||||
setPerPage(Number(e.target.value))
|
||||
setPage(1)
|
||||
}}
|
||||
className="h-7 rounded border border-border bg-surface px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent"
|
||||
>
|
||||
{PER_PAGE_OPTIONS.map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span>
|
||||
{(page - 1) * perPage + 1}--
|
||||
{Math.min(page * perPage, data.total)} of {data.total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setPage(1)}
|
||||
disabled={page <= 1}
|
||||
className="rounded p-1 hover:bg-elevated disabled:opacity-30"
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPage(page - 1)}
|
||||
disabled={page <= 1}
|
||||
className="rounded p-1 hover:bg-elevated disabled:opacity-30"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="px-2">
|
||||
Page {page} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage(page + 1)}
|
||||
disabled={page >= totalPages}
|
||||
className="rounded p-1 hover:bg-elevated disabled:opacity-30"
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPage(totalPages)}
|
||||
disabled={page >= totalPages}
|
||||
className="rounded p-1 hover:bg-elevated disabled:opacity-30"
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Row sub-component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface AuditLogRowProps {
|
||||
item: AuditLogEntry
|
||||
isExpanded: boolean
|
||||
onToggle: () => void
|
||||
}
|
||||
|
||||
function AuditLogRow({ item, isExpanded, onToggle }: AuditLogRowProps) {
|
||||
const hasDetails =
|
||||
item.details && Object.keys(item.details).length > 0
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
className={cn(
|
||||
'hover:bg-elevated/30 transition-colors cursor-pointer',
|
||||
isExpanded && 'bg-elevated/20',
|
||||
)}
|
||||
onClick={onToggle}
|
||||
>
|
||||
<td className="px-3 py-2 text-center">
|
||||
{hasDetails ? (
|
||||
isExpanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5 text-text-muted" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5 text-text-muted" />
|
||||
)
|
||||
) : (
|
||||
<span className="inline-block h-3.5 w-3.5" />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 whitespace-nowrap">
|
||||
<span
|
||||
className="text-text-primary"
|
||||
title={new Date(item.created_at).toLocaleString()}
|
||||
>
|
||||
{formatRelativeTime(item.created_at)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-text-secondary truncate max-w-[160px]">
|
||||
{item.user_email ?? '--'}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium border',
|
||||
actionBadgeClasses(item.action),
|
||||
)}
|
||||
>
|
||||
{item.action.replace(/_/g, ' ')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-text-secondary text-xs truncate max-w-[180px]">
|
||||
{item.resource_type ? (
|
||||
<>
|
||||
<span className="text-text-muted">{item.resource_type}</span>
|
||||
{item.resource_id && (
|
||||
<span className="ml-1 font-mono text-[11px]">
|
||||
{item.resource_id.length > 12
|
||||
? item.resource_id.substring(0, 12) + '...'
|
||||
: item.resource_id}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
'--'
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-text-secondary truncate max-w-[120px]">
|
||||
{item.device_name ?? '--'}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-text-muted font-mono text-xs">
|
||||
{item.ip_address ?? '--'}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Expanded details row */}
|
||||
{isExpanded && hasDetails && (
|
||||
<tr className="bg-elevated/10">
|
||||
<td colSpan={7} className="px-6 py-3">
|
||||
<div className="text-xs text-text-muted mb-1 font-medium">
|
||||
Details
|
||||
</div>
|
||||
<pre className="rounded-md bg-background p-3 text-xs text-text-secondary font-mono overflow-x-auto max-h-48 whitespace-pre-wrap">
|
||||
{JSON.stringify(item.details, null, 2)}
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user