55 lines
2.4 KiB
JavaScript
55 lines
2.4 KiB
JavaScript
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 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("");
|
|
}
|