Micha/homelab-infra
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: update storage renderer for disk grid

Browse Source
This commit is contained in:
Micha
2026-04-06 07:37:02 +00:00
parent a779f5046b
commit 5da92cbf80
1 changed files with 23 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/assets/js/renderers/storage.js
+23 -49
View File
@@ -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) { export function renderStorage(state) {
const { storage } = state.data; const storage = state.storage || {};
const rootTone = diskTone(storage.root.status); const grid = document.getElementById("storage-grid");
if (!grid) return;
const rootPill = document.getElementById("root-storage-pill"); const disks = storage.disks || [];
rootPill.className = `status-pill ${rootTone === "danger" ? "offline" : rootTone}`; if (!disks.length) {
rootPill.textContent = pillLabel(storage.root.status); 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;
}
document.getElementById("root-storage-value").textContent = `${storage.root.usage_percent.toFixed(1)}%`; grid.innerHTML = disks.map(disk => {
document.getElementById("root-storage-value").className = `card-value value-${rootTone === "danger" ? "danger" : rootTone}`; const pct = disk.usage_percent ?? 0;
document.getElementById("root-storage-used").textContent = gb(storage.root.used_gb); const fillClass = pct > 85 ? "danger" : pct > 70 ? "warn" : "";
document.getElementById("root-storage-free").textContent = gb(storage.root.free_gb); const statusColor = disk.status === "critical" ? "var(--red)" : disk.status === "warning" ? "var(--yellow)" : "var(--teal)";
return `
const rootBar = document.getElementById("root-storage-bar"); <div class="card">
rootBar.className = `metric-bar${rootTone === "online" ? "" : ` ${rootTone === "danger" ? "danger" : rootTone}`}`; <div class="disk-header">
document.getElementById("root-storage-bar-fill").style.width = `${storage.root.usage_percent}%`; <span class="disk-name">${disk.name || disk.mount}</span>
<span class="disk-usage" style="color:${statusColor}">${pct.toFixed(1)}%</span>
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> </div>
`; <div class="disk-sub">${disk.mount} · ${disk.used_gb?.toFixed(1)}/${disk.total_gb?.toFixed(1)} GB</div>
}) <div class="progress-bar">
.join(""); <div class="progress-fill ${fillClass}" style="width:${Math.min(pct,100)}%"></div>
</div>
</div>`;
}).join("");
} }