jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Dashboard UI overhaul: modern design with system stats, SVG icons, Inter font, theme toggle, loading states, and log modal

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-19 02:29:25 +08:00
parent ae1b88732d
commit f3db7d3654
13 changed files with 854 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Dashboard.svelte
+157 -14
View File
@@ -1,24 +1,167 @@
<script>
import { onMount } from "svelte";
import { get } from "../lib/api.js";
let containers = $state([]);
let repos = $state([]);
let stats = $state(null);
let loading = $state(true);
async function load() {
containers = await get("/docker/containers").catch(() => []);
const data = await get("/gitea/repos").catch(() => ({ data: [] }));
repos = data?.data || [];
loading = true;
const [c, g, s] = await Promise.all([
get("/docker/containers"),
get("/gitea/repos"),
get("/system/stats"),
]);
containers = c || [];
repos = Array.isArray(g) ? g : g?.data || [];
stats = s;
loading = false;
}
load();
function fmtBytes(b) {
if (!b) return "0 B";
const u = ["B", "KB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(b) / Math.log(1024));
return (b / Math.pow(1024, i)).toFixed(1) + " " + u[i];
}
function pctColor(pct) {
if (pct > 90) return "text-rose-500";
if (pct > 70) return "text-amber-500";
return "text-emerald-500";
}
onMount(load);
</script>
<h2 class="text-2xl font-bold mb-6">Dashboard</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border rounded-lg p-4">
<h3 class="font-semibold mb-3">Docker Containers</h3>
<p class="text-3xl font-bold">{containers.length}</p>
<p class="text-sm text-gray-500">{containers.filter(c => c.status === "running").length} running</p>
</div>
<div class="border rounded-lg p-4">
<h3 class="font-semibold mb-3">Gitea Repos</h3>
<p class="text-3xl font-bold">{repos.length}</p>
<div class="space-y-8">
<div>
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Overview</h1>
<p class="text-sm text-surface-400 mt-1">System status at a glance</p>
</div>
{#if loading}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{#each Array(4) as _}
<div class="h-[120px] rounded-xl bg-surface-100 animate-pulse"></div>
{/each}
</div>
{:else}
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- CPU -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
<div class="w-8 h-8 rounded-lg bg-sky-50 flex items-center justify-center">
<svg class="w-4 h-4 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
</div>
</div>
<p class="text-2xl font-bold {pctColor(stats?.cpu_percent || 0)}">{stats?.cpu_percent || 0}%</p>
<p class="text-xs text-surface-400 mt-1">{stats?.cpu_count || 0} cores · Load {stats?.load_avg?.[0] || 0}</p>
</div>
<!-- Memory -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
<div class="w-8 h-8 rounded-lg bg-violet-50 flex items-center justify-center">
<svg class="w-4 h-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
</div>
<p class="text-2xl font-bold {pctColor(stats?.memory?.percent || 0)}">{stats?.memory?.percent || 0}%</p>
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.memory?.used)} / {fmtBytes(stats?.memory?.total)}</p>
</div>
<!-- Disk -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center">
<svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" /></svg>
</div>
</div>
<p class="text-2xl font-bold {pctColor(stats?.disk?.percent || 0)}">{stats?.disk?.percent || 0}%</p>
<p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.disk?.free)} free of {fmtBytes(stats?.disk?.total)}</p>
</div>
<!-- Uptime -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="flex items-center justify-between mb-3">
<p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center">
<svg class="w-4 h-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
</div>
</div>
<p class="text-2xl font-bold text-surface-800">{stats?.uptime || "—"}</p>
<p class="text-xs text-surface-400 mt-1 truncate" title={stats?.platform}>{stats?.platform || "—"}</p>
</div>
</div>
<!-- Services Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Docker Summary -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-surface-700">Docker Containers</h3>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length} running</span>
</div>
<div class="space-y-2">
{#each containers.slice(0, 5) as c}
<div class="flex items-center justify-between py-1.5 text-sm">
<div class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full {c.status === 'running' ? 'bg-emerald-400' : 'bg-surface-300'}"></span>
<span class="font-medium text-surface-700">{c.name}</span>
</div>
<span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
</div>
{/each}
{#if containers.length > 5}
<p class="text-xs text-primary-500 font-medium pt-1">+{containers.length - 5} more</p>
{/if}
</div>
</div>
<!-- Repos Summary -->
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-surface-700">Git Repositories</h3>
<span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
</div>
<div class="space-y-2">
{#each repos.slice(0, 5) as r}
<div class="flex items-center justify-between py-1.5 text-sm">
<div class="flex items-center gap-2">
<svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
<span class="font-medium text-surface-700">{r.name}</span>
</div>
<span class="text-xs text-surface-400">{r.language || "—"}</span>
</div>
{/each}
{#if repos.length > 5}
<p class="text-xs text-primary-500 font-medium pt-1">+{repos.length - 5} more</p>
{/if}
</div>
</div>
</div>
<!-- Disk Usage Bar -->
{#if stats?.disk}
<div class="bg-white rounded-xl border border-surface-200 p-5 shadow-sm">
<h3 class="text-sm font-semibold text-surface-700 mb-3">Storage Usage</h3>
<div class="w-full h-3 bg-surface-100 rounded-full overflow-hidden">
<div
class="h-full rounded-full transition-all duration-700 ease-out {stats.disk.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : stats.disk.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
style="width: {stats.disk.percent}%"
></div>
</div>
<div class="flex justify-between mt-2 text-xs text-surface-400">
<span>{fmtBytes(stats.disk.used)} used</span>
<span>{fmtBytes(stats.disk.free)} free</span>
</div>
</div>
{/if}
{/if}
</div>