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/backend/routers/docker_router.py
+1
View File
@@ -13,6 +13,7 @@ def list_containers():
"id": c.short_id,
"name": c.name,
"status": c.status,
"health": (c.attrs.get("State", {}).get("Health", {}) or {}).get("Status", ""),
"image": c.image.tags[0] if c.image.tags else str(c.image.id)[:20],
"ports": c.ports,
}
dashboard/backend/routers/system.py
+9
View File
@@ -28,6 +28,14 @@ async def send_notification(body: dict):
@router.get("/stats")
def system_stats():
disk = shutil.disk_usage("/volume1")
volumes = []
for mount in psutil.disk_partitions():
if mount.mountpoint.startswith(("/volume",)):
try:
u = shutil.disk_usage(mount.mountpoint)
volumes.append({"mount": mount.mountpoint, "total": u.total, "used": u.used, "free": u.free, "percent": round(u.used / u.total * 100, 1)})
except Exception:
pass
mem = psutil.virtual_memory()
cpu_pct = psutil.cpu_percent(interval=0.5)
load_1, load_5, load_15 = psutil.getloadavg()
@@ -53,6 +61,7 @@ def system_stats():
},
"uptime": f"{days}d {hours}h",
"platform": platform.platform(),
"volumes": volumes,
}
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}