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

dashboard/backend/routers/docker_router.py

@@ -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

@@ -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

@@ -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 -->
+    <!-- Storage Usage -->
-    {#if stats?.disk}
+    {#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="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 {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'}"
+                  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: {stats.disk.percent}%"
+                  style="width: {vol.percent}%"
                 ></div>
               </div>
-        <div class="flex justify-between mt-2 text-xs text-surface-400">
+              <div class="flex justify-between mt-1 text-xs text-surface-400">
-          <span>{fmtBytes(stats.disk.used)} used</span>
+                <span>{fmtBytes(vol.used)} used</span>
-          <span>{fmtBytes(stats.disk.free)} free</span>
+                <span>{fmtBytes(vol.free)} free</span>
+              </div>
+            </div>
+          {/each}
         </div>
       </div>
     {/if}