feat: update storage renderer for disk grid

2026-04-06 07:37:02 +00:00
parent a779f5046b
commit 5da92cbf80
1 changed files with 23 additions and 49 deletions
@@ -1,54 +1,28 @@
-function gb(value) {
-  return `${Number(value).toFixed(1)} GB`;
-}
-
-function diskTone(status) {
-  if (status === "critical" || status === "offline") return "danger";
-  if (status === "warning") return "warning";
-  return "online";
-}
-
-function pillLabel(status) {
-  if (status === "critical") return "Critical";
-  if (status === "warning") return "Warning";
-  if (status === "offline") return "Offline";
-  return "Stable";
-}
-
 export function renderStorage(state) {
-  const { storage } = state.data;
-  const rootTone = diskTone(storage.root.status);
+  const storage = state.storage || {};
+  const grid = document.getElementById("storage-grid");
+  if (!grid) return;

-  const rootPill = document.getElementById("root-storage-pill");
-  rootPill.className = `status-pill ${rootTone === "danger" ? "offline" : rootTone}`;
-  rootPill.textContent = pillLabel(storage.root.status);
-
-  document.getElementById("root-storage-value").textContent = `${storage.root.usage_percent.toFixed(1)}%`;
-  document.getElementById("root-storage-value").className = `card-value value-${rootTone === "danger" ? "danger" : rootTone}`;
-  document.getElementById("root-storage-used").textContent = gb(storage.root.used_gb);
-  document.getElementById("root-storage-free").textContent = gb(storage.root.free_gb);
-
-  const rootBar = document.getElementById("root-storage-bar");
-  rootBar.className = `metric-bar${rootTone === "online" ? "" : ` ${rootTone === "danger" ? "danger" : rootTone}`}`;
-  document.getElementById("root-storage-bar-fill").style.width = `${storage.root.usage_percent}%`;
-
-  const signal = document.getElementById("disk-matrix-signal");
-  signal.className = `signal ${storage.summary.overall_status === "degraded" ? "warning" : storage.summary.overall_status === "offline" ? "offline" : "online"}`;
-
-  const list = document.getElementById("storage-list");
-  list.innerHTML = storage.disks
-    .map((disk) => {
-      const tone = diskTone(disk.status);
-      const pillClass = tone === "danger" ? "offline" : tone === "warning" ? "warning" : "online";
-      const barClass = tone === "online" ? "metric-bar" : `metric-bar ${tone === "danger" ? "danger" : tone}`;
-      return `
-        <div class="storage-row">
-          <strong>${disk.name}</strong>
-          <span>${disk.mount}</span>
-          <div class="${barClass}"><span style="width:${Math.max(0, Math.min(disk.usage_percent, 100))}%"></span></div>
-          <span class="status-pill ${pillClass}">${disk.usage_percent.toFixed(0)}%</span>
-        </div>
-      `;
-    })
-    .join("");
+  const disks = storage.disks || [];
+  if (!disks.length) {
+    grid.innerHTML = '<div class="card" style="opacity:0.5; font-family:var(--font-mono); font-size:10px; color:var(--text-dim); padding:12px;">No disk data</div>';
+    return;
+  }
+
+  grid.innerHTML = disks.map(disk => {
+    const pct = disk.usage_percent ?? 0;
+    const fillClass = pct > 85 ? "danger" : pct > 70 ? "warn" : "";
+    const statusColor = disk.status === "critical" ? "var(--red)" : disk.status === "warning" ? "var(--yellow)" : "var(--teal)";
+    return `
+      <div class="card">
+        <div class="disk-header">
+          <span class="disk-name">${disk.name || disk.mount}</span>
+          <span class="disk-usage" style="color:${statusColor}">${pct.toFixed(1)}%</span>
+        </div>
+        <div class="disk-sub">${disk.mount} · ${disk.used_gb?.toFixed(1)}/${disk.total_gb?.toFixed(1)} GB</div>
+        <div class="progress-bar">
+          <div class="progress-fill ${fillClass}" style="width:${Math.min(pct,100)}%"></div>
+        </div>
+      </div>`;
+  }).join("");
 }