29 lines
1.2 KiB
JavaScript
29 lines
1.2 KiB
JavaScript
export function renderStorage(state) {
|
|
const storage = state.storage || {};
|
|
const grid = document.getElementById("storage-grid");
|
|
if (!grid) return;
|
|
|
|
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("");
|
|
}
|