feat(frontend): /admin dashboard with users/mangas/system views (0.41.0)
Adds the SvelteKit /admin route tree backed by the admin endpoints landed in PR 1-4. Pages: Overview (alerts + summary cards), Users (list / promote-demote / delete), Mangas (list with sync state + expandable per-chapter state), System (live disk/mem/cpu bars, refreshing every 5s). Security model: the backend's RequireAdmin extractor is the actual boundary. /admin/+layout.ts calls getSystemStats() at load and translates the response — 401 → redirect to /login, 403 → throw SvelteKit error(403) which renders the framework error page. The header's "Admin" link is hidden unless `session.user?.is_admin`, but that's UX only. Carries `is_admin: boolean` through to the frontend User TS type so the header check works and so admin tables can show role per row. Vitest covers lib/api/admin.ts (10 tests: list/delete/PATCH for users, sync-state filter for mangas, nested chapter route, system disk-nullable case). Playwright is intentionally deferred until the routes stabilise — admin UI is operator-only and changes shape often in v0.
This commit is contained in:
MechaCat02
203
frontend/src/routes/admin/system/+page.svelte
Normal file
203
frontend/src/routes/admin/system/+page.svelte
Normal file
@@ -0,0 +1,203 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { getSystemStats, type SystemStats } from '$lib/api/admin';
|
||||
|
||||
let stats: SystemStats | null = $state(null);
|
||||
let error: string | null = $state(null);
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
stats = await getSystemStats();
|
||||
error = null;
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'refresh failed';
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
refresh();
|
||||
timer = setInterval(refresh, 5000);
|
||||
});
|
||||
onDestroy(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
|
||||
function fmtBytes(n: number): string {
|
||||
const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
|
||||
let i = 0;
|
||||
let v = n;
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${v.toFixed(2)} ${units[i]}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>System</h1>
|
||||
|
||||
{#if error}
|
||||
<p class="error" role="alert">{error}</p>
|
||||
{/if}
|
||||
|
||||
{#if stats}
|
||||
{#if stats.alerts.length > 0}
|
||||
<section class="alerts">
|
||||
{#each stats.alerts as a (a.message)}
|
||||
<div class="alert">{a.message}</div>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section class="grid">
|
||||
<article>
|
||||
<h2>Disk (storage_dir)</h2>
|
||||
{#if stats.disk}
|
||||
{@render Bar({ percent: stats.disk.percent_used })}
|
||||
<dl>
|
||||
<dt>Total</dt>
|
||||
<dd>{fmtBytes(stats.disk.total_bytes)}</dd>
|
||||
<dt>Used</dt>
|
||||
<dd>{fmtBytes(stats.disk.used_bytes)}</dd>
|
||||
<dt>Free</dt>
|
||||
<dd>{fmtBytes(stats.disk.free_bytes)}</dd>
|
||||
</dl>
|
||||
{:else}
|
||||
<p class="muted">n/a — non-local storage backend</p>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>Memory</h2>
|
||||
{@render Bar({ percent: stats.memory.percent_used })}
|
||||
<dl>
|
||||
<dt>Total</dt>
|
||||
<dd>{fmtBytes(stats.memory.total_bytes)}</dd>
|
||||
<dt>Used</dt>
|
||||
<dd>{fmtBytes(stats.memory.used_bytes)}</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article>
|
||||
<h2>CPU</h2>
|
||||
{@render Bar({ percent: stats.cpu.percent_used })}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<p class="hint">refreshing every 5 s</p>
|
||||
{:else}
|
||||
<p>Loading…</p>
|
||||
{/if}
|
||||
|
||||
{#snippet Bar({ percent }: { percent: number })}
|
||||
<div
|
||||
class="bar"
|
||||
role="progressbar"
|
||||
aria-valuenow={percent}
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-label="{percent.toFixed(1)}% used"
|
||||
>
|
||||
<div
|
||||
class="fill"
|
||||
class:high={percent >= 90}
|
||||
class:mid={percent >= 70 && percent < 90}
|
||||
style:width="{Math.min(100, Math.max(0, percent))}%"
|
||||
></div>
|
||||
<span class="label">{percent.toFixed(1)}%</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
article {
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
article h2 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.bar {
|
||||
position: relative;
|
||||
background: var(--surface-elevated);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
height: 1.5rem;
|
||||
margin-bottom: var(--space-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.fill {
|
||||
height: 100%;
|
||||
background: #22c55e;
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
.fill.mid {
|
||||
background: #f59e0b;
|
||||
}
|
||||
.fill.high {
|
||||
background: #dc2626;
|
||||
}
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: var(--space-1) var(--space-3);
|
||||
margin: 0;
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
dt {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
dd {
|
||||
margin: 0;
|
||||
font-family: var(--font-mono, monospace);
|
||||
}
|
||||
.alerts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.alert {
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-elevated);
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
.hint {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.error {
|
||||
color: var(--danger, #dc2626);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--danger, #dc2626);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user