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

Add container health status, multi-volume storage, auto-refresh Overview

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-22 17:11:17 +08:00
parent ae98811c23
commit 8797231f53
3 changed files with 38 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Dashboard.svelte
+28 -16
View File
@@ -1,5 +1,5 @@
<script>
import { onMount } from "svelte";
import { onMount, onDestroy } from "svelte";
import { get } from "../lib/api.js";
let containers = $state([]);
@@ -8,7 +8,6 @@
let loading = $state(true);
async function load() {
loading = true;
const [c, g, s] = await Promise.all([
get("/docker/containers"),
get("/gitea/repos"),
@@ -33,7 +32,10 @@
return "text-emerald-500";
}
onMount(load);
let interval;
onMount(() => { load(); interval = setInterval(load, 10000); });
onDestroy(() => clearInterval(interval));
</script>
<div class="space-y-8">
@@ -106,13 +108,13 @@
<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>
<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}/{containers.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="w-1.5 h-1.5 rounded-full {c.status !== 'running' ? 'bg-surface-300' : c.health === 'unhealthy' ? 'bg-rose-400' : c.health === 'healthy' ? 'bg-emerald-400' : 'bg-sky-400'}"></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>
@@ -147,19 +149,29 @@
</div>
</div>
<!-- Disk Usage Bar -->
{#if stats?.disk}
<!-- Storage Usage -->
{#if stats?.volumes?.length}
<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 class="space-y-3">
{#each stats.volumes as vol}
<div>
<div class="flex justify-between text-xs text-surface-500 mb-1">
<span class="font-medium">{vol.mount}</span>
<span>{vol.percent}%</span>
</div>
<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 {vol.percent > 90 ? 'bg-gradient-to-r from-rose-400 to-rose-500' : vol.percent > 70 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-emerald-400 to-emerald-500'}"
style="width: {vol.percent}%"
></div>
</div>
<div class="flex justify-between mt-1 text-xs text-surface-400">
<span>{fmtBytes(vol.used)} used</span>
<span>{fmtBytes(vol.free)} free</span>
</div>
</div>
{/each}
</div>
</div>
{/if}