feat(manage): add R2 storage management page with stats, browser, cleanup
This commit is contained in:
@@ -0,0 +1,448 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import {
|
||||
Loader2,
|
||||
HardDriveIcon,
|
||||
TrashIcon,
|
||||
SearchIcon,
|
||||
RefreshCwIcon,
|
||||
AlertTriangleIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
FileIcon,
|
||||
CheckCircle2Icon,
|
||||
} from "lucide-react"
|
||||
import { ConfirmDialog } from "@/components/ui/modal"
|
||||
|
||||
type EntityType = "all" | "avatar" | "entry_screenshot" | "game_cover" | "hardware_image" | "orphaned"
|
||||
|
||||
interface StorageStats {
|
||||
configured: boolean
|
||||
bucketName: string
|
||||
totalObjects: number
|
||||
totalSizeBytes: number
|
||||
orphanedCount: number
|
||||
orphanedSizeBytes: number
|
||||
byEntityType: Record<string, { count: number; totalSizeBytes: number }>
|
||||
}
|
||||
|
||||
interface StorageObject {
|
||||
id: string
|
||||
key: string
|
||||
bucket: string
|
||||
size: number
|
||||
mimeType: string
|
||||
entityType: string
|
||||
entityId: string | null
|
||||
uploadedBy: string
|
||||
uploaderName: string | null
|
||||
createdAt: string
|
||||
lastAccessedAt: string | null
|
||||
isOrphaned: boolean
|
||||
}
|
||||
|
||||
interface ObjectsResponse {
|
||||
data: StorageObject[]
|
||||
total: number
|
||||
limit: number
|
||||
offset: number
|
||||
}
|
||||
|
||||
const LIMIT = 50
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return "0 B"
|
||||
const k = 1024
|
||||
const sizes = ["B", "KB", "MB", "GB", "TB"]
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
|
||||
}
|
||||
|
||||
function formatDate(value: string | null | undefined) {
|
||||
if (!value) return "—"
|
||||
return new Date(value).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
|
||||
}
|
||||
|
||||
function entityTypeLabel(type: string) {
|
||||
const labels: Record<string, string> = {
|
||||
avatar: "Avatar",
|
||||
entry_screenshot: "Screenshot",
|
||||
game_cover: "Game Cover",
|
||||
hardware_image: "Hardware Img",
|
||||
}
|
||||
return labels[type] ?? type
|
||||
}
|
||||
|
||||
function entityTypeBadgeClass(type: string) {
|
||||
const classes: Record<string, string> = {
|
||||
avatar: "bg-purple-500/10 text-purple-400",
|
||||
entry_screenshot: "bg-blue-500/10 text-blue-400",
|
||||
game_cover: "bg-green-500/10 text-green-400",
|
||||
hardware_image: "bg-amber-500/10 text-amber-400",
|
||||
}
|
||||
return classes[type] ?? "bg-text/5 text-text/50"
|
||||
}
|
||||
|
||||
export function StorageClient() {
|
||||
const [stats, setStats] = useState<StorageStats | null>(null)
|
||||
const [objects, setObjects] = useState<StorageObject[]>([])
|
||||
const [total, setTotal] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [statsLoading, setStatsLoading] = useState(true)
|
||||
const [search, setSearch] = useState("")
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [entityFilter, setEntityFilter] = useState<EntityType>("all")
|
||||
const [deleting, setDeleting] = useState<string | null>(null)
|
||||
const [confirmDelete, setConfirmDelete] = useState<StorageObject | null>(null)
|
||||
const [cleanupLoading, setCleanupLoading] = useState(false)
|
||||
const [cleanupResult, setCleanupResult] = useState<{ deleted: number; errors: number } | null>(null)
|
||||
|
||||
const isSearchChangeRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
setStatsLoading(true)
|
||||
fetch("/api/admin/storage/stats")
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
setStats(data)
|
||||
setStatsLoading(false)
|
||||
})
|
||||
.catch(() => setStatsLoading(false))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const delay = isSearchChangeRef.current ? 300 : 0
|
||||
isSearchChangeRef.current = false
|
||||
|
||||
let cancelled = false
|
||||
const timer = setTimeout(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
limit: String(LIMIT),
|
||||
offset: String(offset),
|
||||
})
|
||||
if (entityFilter === "orphaned") {
|
||||
params.set("orphaned", "true")
|
||||
} else if (entityFilter !== "all") {
|
||||
params.set("entityType", entityFilter)
|
||||
}
|
||||
if (search.trim()) {
|
||||
params.set("search", search.trim())
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/admin/storage/objects?${params.toString()}`)
|
||||
if (res.ok && !cancelled) {
|
||||
const json = (await res.json()) as ObjectsResponse
|
||||
setObjects(json.data)
|
||||
setTotal(json.total)
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
}, delay)
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}, [search, offset, entityFilter])
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearch(value)
|
||||
setOffset(0)
|
||||
isSearchChangeRef.current = true
|
||||
}
|
||||
|
||||
const handleDelete = async (obj: StorageObject) => {
|
||||
setDeleting(obj.id)
|
||||
try {
|
||||
const res = await fetch(`/api/admin/storage/objects/${obj.id}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
if (res.ok) {
|
||||
setObjects((prev) => prev.filter((o) => o.id !== obj.id))
|
||||
setTotal((prev) => Math.max(0, prev - 1))
|
||||
setConfirmDelete(null)
|
||||
const statsRes = await fetch("/api/admin/storage/stats")
|
||||
if (statsRes.ok) {
|
||||
setStats(await statsRes.json())
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setDeleting(null)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCleanup = async () => {
|
||||
setCleanupLoading(true)
|
||||
setCleanupResult(null)
|
||||
try {
|
||||
const res = await fetch("/api/admin/storage/cleanup", { method: "POST" })
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setCleanupResult({ deleted: data.deleted, errors: data.errors })
|
||||
const statsRes = await fetch("/api/admin/storage/stats")
|
||||
if (statsRes.ok) setStats(await statsRes.json())
|
||||
setOffset(0)
|
||||
}
|
||||
} finally {
|
||||
setCleanupLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const hasMore = offset + objects.length < total
|
||||
|
||||
const filterTabs: { label: string; value: EntityType }[] = [
|
||||
{ label: "All", value: "all" },
|
||||
{ label: "Avatars", value: "avatar" },
|
||||
{ label: "Screenshots", value: "entry_screenshot" },
|
||||
{ label: "Covers", value: "game_cover" },
|
||||
{ label: "Hardware", value: "hardware_image" },
|
||||
{ label: "Orphaned", value: "orphaned" },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<HardDriveIcon className="h-5 w-5 text-text/70" />
|
||||
<h1 className="text-lg font-semibold text-text">Storage</h1>
|
||||
</div>
|
||||
|
||||
{stats && !stats.configured && (
|
||||
<div className="rounded-lg border border-amber-500/30 bg-amber-500/10 p-4 flex items-start gap-3">
|
||||
<AlertTriangleIcon className="h-5 w-5 text-amber-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-amber-400">R2 Not Configured</p>
|
||||
<p className="text-xs text-text/60 mt-1">
|
||||
Set the R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY, and R2_PUBLIC_URL environment variables to enable storage management.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{statsLoading ? (
|
||||
<div className="animate-pulse h-20 rounded-lg bg-zinc-800" />
|
||||
) : stats && stats.configured ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<FileIcon className="h-4 w-4 text-blue-400" />
|
||||
<span className="text-xs text-zinc-500">Total Objects</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{stats.totalObjects.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<HardDriveIcon className="h-4 w-4 text-green-400" />
|
||||
<span className="text-xs text-zinc-500">Total Size</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{formatBytes(stats.totalSizeBytes)}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertTriangleIcon className="h-4 w-4 text-amber-400" />
|
||||
<span className="text-xs text-zinc-500">Orphaned</span>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">{stats.orphanedCount.toLocaleString()}</p>
|
||||
{stats.orphanedSizeBytes > 0 && (
|
||||
<p className="text-xs text-zinc-500">{formatBytes(stats.orphanedSizeBytes)}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<HardDriveIcon className="h-4 w-4 text-purple-400" />
|
||||
<span className="text-xs text-zinc-500">Bucket</span>
|
||||
</div>
|
||||
<p className="text-sm font-mono text-text truncate">{stats.bucketName}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{stats?.byEntityType && Object.keys(stats.byEntityType).length > 0 && (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
|
||||
<h3 className="mb-3 font-semibold text-sm">Storage by Type</h3>
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
{Object.entries(stats.byEntityType).map(([type, data]) => (
|
||||
<div key={type} className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider ${entityTypeBadgeClass(type)}`}>
|
||||
{entityTypeLabel(type)}
|
||||
</span>
|
||||
<span className="text-xs text-text/70">{data.count} · {formatBytes(data.totalSizeBytes)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{stats?.configured && (
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleCleanup}
|
||||
disabled={cleanupLoading || !stats?.configured}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-amber-500/10 text-amber-400 text-sm font-medium hover:bg-amber-500/20 transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{cleanupLoading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCwIcon className="h-4 w-4" />
|
||||
)}
|
||||
Run Orphan Cleanup
|
||||
</button>
|
||||
{cleanupResult && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<CheckCircle2Icon className="h-4 w-4 text-green-400" />
|
||||
<span className="text-text/70">
|
||||
Deleted {cleanupResult.deleted} objects
|
||||
{cleanupResult.errors > 0 && `, ${cleanupResult.errors} errors`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text/40" />
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
placeholder="Search by key..."
|
||||
className="w-full pl-9 pr-4 py-2 rounded-md bg-text/5 border border-border text-sm text-text placeholder:text-text/40 focus:outline-none focus:border-primary/60 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{filterTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => {
|
||||
setEntityFilter(tab.value)
|
||||
setOffset(0)
|
||||
}}
|
||||
className={`px-3 py-1.5 rounded-md text-xs font-medium transition-colors cursor-pointer ${
|
||||
entityFilter === tab.value
|
||||
? "bg-primary/10 text-primary"
|
||||
: "bg-text/5 text-text/70 hover:bg-text/10"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-text/[0.03]">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Key</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Type</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Size</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Uploaded By</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Date</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Status</th>
|
||||
<th className="text-left px-4 py-3 text-xs font-medium uppercase tracking-wider text-text/50">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-4 py-8 text-center text-text/50">
|
||||
<Loader2 className="h-5 w-5 animate-spin mx-auto" />
|
||||
</td>
|
||||
</tr>
|
||||
) : objects.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="px-4 py-8 text-center text-text/50">No objects found.</td>
|
||||
</tr>
|
||||
) : (
|
||||
objects.map((obj) => (
|
||||
<tr
|
||||
key={obj.id}
|
||||
className="border-t border-border hover:bg-text/[0.02] transition-colors"
|
||||
>
|
||||
<td className="px-4 py-3">
|
||||
<p className="font-mono text-xs text-text/70 truncate max-w-[300px]" title={obj.key}>{obj.key}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider ${entityTypeBadgeClass(obj.entityType)}`}>
|
||||
{entityTypeLabel(obj.entityType)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-text/70">{formatBytes(obj.size)}</td>
|
||||
<td className="px-4 py-3 text-xs text-text/70">{obj.uploaderName || "System"}</td>
|
||||
<td className="px-4 py-3 text-xs text-text/50">{formatDate(obj.createdAt)}</td>
|
||||
<td className="px-4 py-3">
|
||||
{obj.isOrphaned && (
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium uppercase tracking-wider bg-amber-500/10 text-amber-400">
|
||||
Orphaned
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => setConfirmDelete(obj)}
|
||||
disabled={deleting === obj.id}
|
||||
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{deleting === obj.id ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<TrashIcon className="h-3.5 w-3.5" />
|
||||
)}
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{objects.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs text-text/50">
|
||||
Showing {offset + 1}–{Math.min(offset + objects.length, total)} of {total}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setOffset((prev) => Math.max(0, prev - LIMIT))}
|
||||
disabled={offset === 0 || loading}
|
||||
className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
<ChevronLeftIcon className="h-3.5 w-3.5" />
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOffset((prev) => prev + LIMIT)}
|
||||
disabled={!hasMore || loading}
|
||||
className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text hover:bg-text/10 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1"
|
||||
>
|
||||
Next
|
||||
<ChevronRightIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{confirmDelete && (
|
||||
<ConfirmDialog
|
||||
open={!!confirmDelete}
|
||||
onClose={() => setConfirmDelete(null)}
|
||||
onConfirm={() => handleDelete(confirmDelete)}
|
||||
title="Delete Storage Object"
|
||||
message={`Are you sure you want to delete "${confirmDelete.key}"? This will remove the file from R2 storage and the database record. This action cannot be undone.`}
|
||||
confirmLabel="Delete"
|
||||
variant="destructive"
|
||||
loading={deleting === confirmDelete.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user