Add storage analytics page
This commit is contained in:
@@ -121,6 +121,7 @@
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<a href="/" class="nav-link">← BACK_TO_UPLOADER</a>
|
||||
<a href="/config" class="nav-link">CONFIG_MODULE</a>
|
||||
<a href="/admin/stats" class="nav-link">STORAGE_MATRIX</a>
|
||||
<a href="/logout" class="nav-link text-red-600">LOGOUT_SESSION</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
309
templates/admin_stats.html
Normal file
309
templates/admin_stats.html
Normal file
@@ -0,0 +1,309 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Storage Matrix</title>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<style>
|
||||
* { border-radius: 0 !important; }
|
||||
|
||||
body {
|
||||
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 4px solid #000;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: 900;
|
||||
text-decoration: underline;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 2px solid #000;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: #ffff00;
|
||||
}
|
||||
|
||||
.meter {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 3px solid #000;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meter-fill {
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.status-live {
|
||||
background: #00ff00;
|
||||
color: #000;
|
||||
font-weight: 900;
|
||||
padding: 4px 8px;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.status-deleted {
|
||||
background: #ff0000;
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
padding: 4px 8px;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
.glitch {
|
||||
animation: glitch 0.6s infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch {
|
||||
0% { transform: translate(0px, 0px); }
|
||||
20% { transform: translate(-2px, 1px); }
|
||||
40% { transform: translate(2px, -1px); }
|
||||
60% { transform: translate(-1px, 2px); }
|
||||
80% { transform: translate(1px, -2px); }
|
||||
100% { transform: translate(0px, 0px); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<header class="mb-8 border-b-8 border-black pb-4 flex justify-between items-start">
|
||||
<div>
|
||||
<h1 class="text-5xl font-black uppercase tracking-tighter leading-none">
|
||||
STORAGE_ANALYTICS
|
||||
</h1>
|
||||
|
||||
<div class="text-sm font-black uppercase mt-2 text-gray-600">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-end gap-2">
|
||||
<a href="/admin" class="nav-link">← BACK_TO_ADMIN</a>
|
||||
<a href="/config" class="nav-link">CONFIG_MODULE</a>
|
||||
<a href="/logout" class="nav-link text-red-600">LOGOUT_SESSION</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
|
||||
<div class="box p-6">
|
||||
<div class="text-xs font-black uppercase mb-2">
|
||||
TOTAL_STORAGE_USED
|
||||
</div>
|
||||
|
||||
<div class="text-5xl font-black">
|
||||
{{humanSize .Stats.TotalBytes}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box p-6">
|
||||
<div class="text-xs font-black uppercase mb-2">
|
||||
DISK_FREE_SPACE
|
||||
</div>
|
||||
|
||||
<div class="text-5xl font-black text-green-600">
|
||||
{{humanSize .Stats.DiskFreeBytes}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box p-6">
|
||||
<div class="text-xs font-black uppercase mb-2">
|
||||
TEMP_CHUNK_STORAGE
|
||||
</div>
|
||||
|
||||
<div class="text-5xl font-black text-yellow-500">
|
||||
{{humanSize .Stats.TempBytes}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- DISK BAR -->
|
||||
<div class="box p-6 mb-8">
|
||||
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="text-xl font-black uppercase">
|
||||
DISK_CONSUMPTION
|
||||
</div>
|
||||
|
||||
<div class="text-sm font-black uppercase">
|
||||
{{humanSize .Stats.DiskUsedBytes}}
|
||||
/
|
||||
{{humanSize .Stats.DiskTotalBytes}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meter">
|
||||
<div
|
||||
class="meter-fill"
|
||||
style="width: {{percent .Stats.DiskUsedBytes .Stats.DiskTotalBytes}}%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-6xl font-black">
|
||||
{{percent .Stats.DiskUsedBytes .Stats.DiskTotalBytes}}%
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SECONDARY STATS -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
|
||||
<div class="box p-4">
|
||||
<div class="text-xs uppercase font-black">
|
||||
TOTAL_FILES
|
||||
</div>
|
||||
|
||||
<div class="text-4xl font-black mt-2">
|
||||
{{.Stats.TotalFiles}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box p-4">
|
||||
<div class="text-xs uppercase font-black">
|
||||
ACTIVE_FILES
|
||||
</div>
|
||||
|
||||
<div class="text-4xl font-black text-green-600 mt-2">
|
||||
{{.Stats.ActiveFiles}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box p-4">
|
||||
<div class="text-xs uppercase font-black">
|
||||
DELETED_FILES
|
||||
</div>
|
||||
|
||||
<div class="text-4xl font-black text-red-600 mt-2">
|
||||
{{.Stats.DeletedFiles}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box p-4">
|
||||
<div class="text-xs uppercase font-black">
|
||||
AVERAGE_SIZE
|
||||
</div>
|
||||
|
||||
<div class="text-4xl font-black mt-2">
|
||||
{{humanSize .Stats.AverageFileSize}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box overflow-x-auto mb-8">
|
||||
|
||||
<div class="bg-black text-white p-4 font-black uppercase text-lg">
|
||||
LARGEST_FILES_ON_SYSTEM
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Filename</th>
|
||||
<th>Size</th>
|
||||
<th>Downloads</th>
|
||||
<th>Created</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{{if not .Stats.LargestFiles}}
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-10 uppercase font-black italic">
|
||||
No files detected in storage matrix
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
|
||||
{{range .Stats.LargestFiles}}
|
||||
<tr>
|
||||
|
||||
<td class="font-bold">
|
||||
{{.Filename}}
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap">
|
||||
{{humanSize .Size}}
|
||||
</td>
|
||||
|
||||
<td class="font-black text-lg">
|
||||
{{.DownloadCount}}
|
||||
</td>
|
||||
|
||||
<td class="text-[11px]">
|
||||
{{.CreatedAt.Format "02/01/06 15:04"}}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{if .Deleted}}
|
||||
<span class="status-deleted">
|
||||
DELETED
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="status-live">
|
||||
LIVE
|
||||
</span>
|
||||
{{end}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
{{end}}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="border-t-8 border-black pt-4 flex justify-between items-center">
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user