mirror of
https://github.com/th30d4y/OpenLearnX.git
synced 2026-05-26 19:26:33 +00:00
Stalin
468 lines
20 KiB
TypeScript
468 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { useRouter } from "next/navigation"
|
|
|
|
type AdminLog = {
|
|
id: string
|
|
timestamp: string
|
|
event_type: string
|
|
action: string
|
|
status_code: number
|
|
severity: string
|
|
method: string
|
|
ip: string
|
|
path: string
|
|
user_agent?: string
|
|
metadata?: Record<string, unknown>
|
|
request_body?: unknown
|
|
response_body?: unknown
|
|
usage?: Record<string, unknown>
|
|
query?: Record<string, unknown>
|
|
duration_ms?: number
|
|
origin?: string
|
|
}
|
|
|
|
const API_BASE = "http://127.0.0.1:5000"
|
|
|
|
export default function AdminLogsPage() {
|
|
const router = useRouter()
|
|
const [ready, setReady] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
const [exporting, setExporting] = useState(false)
|
|
const [message, setMessage] = useState("")
|
|
const [logs, setLogs] = useState<AdminLog[]>([])
|
|
const [selectedLog, setSelectedLog] = useState<AdminLog | null>(null)
|
|
|
|
const safeJson = (value: unknown) => {
|
|
if (value === null || value === undefined || value === "") return "No data"
|
|
if (typeof value === "string") {
|
|
try {
|
|
return JSON.stringify(JSON.parse(value), null, 2)
|
|
} catch {
|
|
return value
|
|
}
|
|
}
|
|
try {
|
|
return JSON.stringify(value, null, 2)
|
|
} catch {
|
|
return String(value)
|
|
}
|
|
}
|
|
|
|
const copyText = async (value: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(value)
|
|
setMessage("Copied to clipboard")
|
|
} catch {
|
|
setMessage("Copy failed")
|
|
}
|
|
}
|
|
|
|
const selectedRequestData = selectedLog
|
|
? selectedLog.request_body
|
|
?? (selectedLog.metadata && (selectedLog.metadata as any).request_body)
|
|
?? (selectedLog.metadata && (selectedLog.metadata as any).request_details)
|
|
?? selectedLog.query
|
|
?? null
|
|
: null
|
|
|
|
const selectedResponseData = selectedLog
|
|
? selectedLog.response_body
|
|
?? (selectedLog.metadata && (selectedLog.metadata as any).response_body)
|
|
?? (selectedLog.metadata && (selectedLog.metadata as any).response_details)
|
|
?? null
|
|
: null
|
|
|
|
const selectedUsageData = selectedLog
|
|
? selectedLog.usage
|
|
?? (selectedLog.metadata && (selectedLog.metadata as any).usage)
|
|
?? {
|
|
duration_ms: selectedLog.duration_ms ?? 0,
|
|
note: "Usage metrics not captured for this log entry",
|
|
}
|
|
: null
|
|
const [filters, setFilters] = useState({
|
|
event_type: "",
|
|
severity: "",
|
|
status_code: "",
|
|
search: "",
|
|
})
|
|
const [pagination, setPagination] = useState({ page: 1, limit: 50, total: 0, pages: 1 })
|
|
|
|
const getToken = () => localStorage.getItem("admin_token")
|
|
const headers = () => {
|
|
const token = getToken()
|
|
return token
|
|
? { "Content-Type": "application/json", Authorization: `Bearer ${token}` }
|
|
: { "Content-Type": "application/json" }
|
|
}
|
|
|
|
const ensureAuth = async () => {
|
|
const token = getToken()
|
|
if (!token) {
|
|
router.push("/admin/login")
|
|
return false
|
|
}
|
|
const resp = await fetch(`${API_BASE}/api/admin/test`, { headers: headers() })
|
|
if (!resp.ok) {
|
|
localStorage.removeItem("admin_token")
|
|
router.push("/admin/login")
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
const fetchLogs = async (page = 1, nextFilters = filters) => {
|
|
setLoading(true)
|
|
setMessage("")
|
|
const params = new URLSearchParams()
|
|
params.set("page", String(page))
|
|
params.set("limit", String(pagination.limit))
|
|
if (nextFilters.event_type) params.set("event_type", nextFilters.event_type)
|
|
if (nextFilters.severity) params.set("severity", nextFilters.severity)
|
|
if (nextFilters.status_code) params.set("status_code", nextFilters.status_code)
|
|
if (nextFilters.search) params.set("search", nextFilters.search)
|
|
|
|
try {
|
|
const resp = await fetch(`${API_BASE}/api/admin/logs?${params.toString()}`, { headers: headers() })
|
|
if (resp.ok) {
|
|
const data = await resp.json()
|
|
setLogs(Array.isArray(data.logs) ? data.logs : [])
|
|
if (data.pagination) {
|
|
setPagination(data.pagination)
|
|
}
|
|
} else {
|
|
setLogs([])
|
|
}
|
|
} catch {
|
|
setLogs([])
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const triggerDownload = (content: string, filename: string, mimeType: string) => {
|
|
const blob = new Blob([content], { type: mimeType })
|
|
const url = URL.createObjectURL(blob)
|
|
const anchor = document.createElement("a")
|
|
anchor.href = url
|
|
anchor.download = filename
|
|
document.body.appendChild(anchor)
|
|
anchor.click()
|
|
anchor.remove()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
const exportLogs = async (format: "json" | "csv") => {
|
|
setExporting(true)
|
|
setMessage("")
|
|
|
|
const params = new URLSearchParams()
|
|
params.set("type", "logs")
|
|
params.set("format", format)
|
|
params.set("limit", "5000")
|
|
if (filters.event_type) params.set("event_type", filters.event_type)
|
|
if (filters.severity) params.set("severity", filters.severity)
|
|
if (filters.status_code) params.set("status_code", filters.status_code)
|
|
if (filters.search) params.set("search", filters.search)
|
|
|
|
try {
|
|
const resp = await fetch(`${API_BASE}/api/admin/reports/export?${params.toString()}`, { headers: headers() })
|
|
const data = await resp.json().catch(() => ({}))
|
|
|
|
if (!resp.ok) {
|
|
setMessage(String(data.error || "Failed to export logs."))
|
|
return
|
|
}
|
|
|
|
const stamp = new Date().toISOString().replace(/[.:]/g, "-")
|
|
if (format === "json") {
|
|
triggerDownload(JSON.stringify(data, null, 2), `admin-logs-${stamp}.json`, "application/json")
|
|
} else {
|
|
triggerDownload(String(data.content || ""), `admin-logs-${stamp}.csv`, "text/csv")
|
|
}
|
|
|
|
setMessage(`Logs exported as ${format.toUpperCase()}.`)
|
|
} catch {
|
|
setMessage("Network error while exporting logs.")
|
|
} finally {
|
|
setExporting(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
const ok = await ensureAuth()
|
|
if (!ok) return
|
|
setReady(true)
|
|
await fetchLogs(1)
|
|
}
|
|
init()
|
|
}, [])
|
|
|
|
if (!ready) {
|
|
return (
|
|
<div className="rounded-xl border border-gray-200 bg-white p-8 text-center dark:border-gray-800 dark:bg-gray-900">
|
|
<p className="text-gray-600 dark:text-gray-300">Loading logs...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
|
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Security and Activity Logs</h1>
|
|
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
|
|
Filter authentication, access-control, suspicious payload, and admin activity events.
|
|
</p>
|
|
<div className="mt-4 flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => exportLogs("json")}
|
|
disabled={exporting}
|
|
className="rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-60"
|
|
>
|
|
Export Logs JSON
|
|
</button>
|
|
<button
|
|
onClick={() => exportLogs("csv")}
|
|
disabled={exporting}
|
|
className="rounded-md bg-emerald-700 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-800 disabled:opacity-60"
|
|
>
|
|
Export Logs CSV
|
|
</button>
|
|
</div>
|
|
{message ? <p className="mt-2 text-sm text-gray-700 dark:text-gray-200">{message}</p> : null}
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
|
<div className="grid grid-cols-1 gap-3 border-b border-gray-100 p-4 md:grid-cols-6 dark:border-gray-800">
|
|
<input
|
|
placeholder="Search action, path, IP"
|
|
value={filters.search}
|
|
onChange={(e) => setFilters({ ...filters, search: e.target.value })}
|
|
className="md:col-span-2 rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
|
|
/>
|
|
<select
|
|
value={filters.event_type}
|
|
onChange={(e) => setFilters({ ...filters, event_type: e.target.value })}
|
|
className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
|
|
>
|
|
<option value="">All Event Types</option>
|
|
<option value="admin_panel">Admin Panel</option>
|
|
<option value="admin_panel_visit">Admin Visit</option>
|
|
<option value="signin">Sign In</option>
|
|
<option value="signup">Sign Up</option>
|
|
<option value="course_join">Course Join</option>
|
|
<option value="attendance">Attendance</option>
|
|
<option value="forbidden_access">403 Forbidden</option>
|
|
<option value="suspicious_payload">Suspicious Payload</option>
|
|
</select>
|
|
<select
|
|
value={filters.severity}
|
|
onChange={(e) => setFilters({ ...filters, severity: e.target.value })}
|
|
className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
|
|
>
|
|
<option value="">All Severity</option>
|
|
<option value="info">Info</option>
|
|
<option value="warning">Warning</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
<input
|
|
placeholder="Status code"
|
|
value={filters.status_code}
|
|
onChange={(e) => setFilters({ ...filters, status_code: e.target.value })}
|
|
className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => fetchLogs(1)}
|
|
className="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700"
|
|
>
|
|
Apply
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const reset = { event_type: "", severity: "", status_code: "", search: "" }
|
|
setFilters(reset)
|
|
fetchLogs(1, reset)
|
|
}}
|
|
className="w-full rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
|
|
<thead className="bg-gray-50 dark:bg-gray-800/50">
|
|
<tr>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Time</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Event</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Action</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Status</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">IP</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Path</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
{loading ? (
|
|
<tr>
|
|
<td className="px-4 py-4 text-sm text-gray-600" colSpan={6}>Loading logs...</td>
|
|
</tr>
|
|
) : logs.length === 0 ? (
|
|
<tr>
|
|
<td className="px-4 py-4 text-sm text-gray-500" colSpan={6}>No logs found for selected filters.</td>
|
|
</tr>
|
|
) : (
|
|
logs.map((log) => (
|
|
<tr
|
|
key={log.id}
|
|
onClick={() => setSelectedLog(log)}
|
|
className="cursor-pointer hover:bg-blue-50 dark:hover:bg-gray-800/60"
|
|
title="Click to view request and response details"
|
|
>
|
|
<td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{new Date(log.timestamp).toLocaleString()}</td>
|
|
<td className="px-4 py-3 text-xs font-medium text-gray-900 dark:text-white">{log.event_type}</td>
|
|
<td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.action}</td>
|
|
<td className="px-4 py-3 text-xs">
|
|
<span className={`rounded px-2 py-1 ${log.status_code >= 400 ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
|
|
{log.status_code}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.ip}</td>
|
|
<td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.path}</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between border-t border-gray-100 px-4 py-3 text-sm text-gray-600 dark:border-gray-800 dark:text-gray-300">
|
|
<span>
|
|
Page {pagination.page} of {pagination.pages} • Total {pagination.total}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => fetchLogs(Math.max(1, pagination.page - 1))}
|
|
disabled={pagination.page <= 1}
|
|
className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
|
|
>
|
|
Previous
|
|
</button>
|
|
<button
|
|
onClick={() => fetchLogs(Math.min(pagination.pages, pagination.page + 1))}
|
|
disabled={pagination.page >= pagination.pages}
|
|
className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedLog ? (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
|
<div className="w-full max-w-4xl rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-900">
|
|
<div className="flex items-center justify-between border-b border-gray-100 p-4 dark:border-gray-800">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Log Request and Response Details</h2>
|
|
<button
|
|
onClick={() => setSelectedLog(null)}
|
|
className="rounded-md bg-gray-200 px-3 py-1.5 text-sm text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[75vh] space-y-4 overflow-auto p-4">
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Event</p>
|
|
<p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.event_type}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Action</p>
|
|
<p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.action}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Path</p>
|
|
<p className="mt-1 text-sm break-all text-gray-900 dark:text-white">{selectedLog.path}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Method and Status</p>
|
|
<p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.method} {selectedLog.status_code}</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Duration</p>
|
|
<p className="mt-1 text-sm text-gray-900 dark:text-white">
|
|
{selectedLog.duration_ms ?? (selectedLog.metadata && (selectedLog.metadata as any).duration_ms) ?? 0} ms
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Client</p>
|
|
<p className="mt-1 text-sm break-all text-gray-900 dark:text-white">{selectedLog.ip}</p>
|
|
<p className="mt-1 text-xs break-all text-gray-600 dark:text-gray-300">{selectedLog.user_agent || "Unknown user agent"}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Request Body</p>
|
|
<button
|
|
onClick={() => copyText(safeJson(selectedRequestData))}
|
|
className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
|
|
{safeJson(selectedRequestData)}
|
|
</pre>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Response Body</p>
|
|
<button
|
|
onClick={() => copyText(safeJson(selectedResponseData))}
|
|
className="rounded bg-emerald-600 px-2 py-1 text-xs text-white hover:bg-emerald-700"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
|
|
{safeJson(selectedResponseData)}
|
|
</pre>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Usage Monitoring</p>
|
|
<pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
|
|
{safeJson(selectedUsageData)}
|
|
</pre>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs font-semibold uppercase text-gray-500">Full Metadata</p>
|
|
<button
|
|
onClick={() => copyText(safeJson(selectedLog.metadata ?? {}))}
|
|
className="rounded bg-gray-700 px-2 py-1 text-xs text-white hover:bg-gray-800"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
|
|
{safeJson(selectedLog.metadata ?? {})}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|