adamksmith/jbod-monitor
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Add ZFS drive state (ONLINE/FAULTED/DEGRADED) to UI

Browse Source
This commit is contained in:
adam
2026-03-07 04:44:31 +00:00
parent cea4db53fd
commit a25ce4ae21
5 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/App.jsx
View File

@@ -264,7 +264,7 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
<table style={{ width: "100%", borderCollapse: "separate", borderSpacing: "0 4px", fontSize: 13 }}>
<thead>
<tr style={{ textAlign: "left", color: t.textSecondary, fontSize: 11, textTransform: "uppercase", letterSpacing: 0.8 }}>
{["Slot", "Device", "Model", "Serial", "WWN", "FW", "Capacity", "Pool", "Vdev", "Temp", "Hours", "Health"].map((h) => (
{["Slot", "Device", "Model", "Serial", "WWN", "FW", "Capacity", "Pool", "Vdev", "ZFS State", "Temp", "Hours", "Health"].map((h) => (
<th key={h} style={{ padding: "6px 10px", fontWeight: 600, borderBottom: `2px solid ${t.divider}` }}>{h}</th>
))}
</tr>
@@ -314,6 +314,17 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
<span style={{ fontSize: 11, color: t.textMuted, fontStyle: "italic" }}>{"\u2014"}</span>
)}
</td>
<td style={{ padding: "8px 10px" }}>
{d.zfs_state ? (
<span style={{
fontSize: 11, fontWeight: 700,
fontFamily: "'JetBrains Mono', monospace",
color: d.zfs_state === "ONLINE" ? t.health.healthy.text : d.zfs_state === "DEGRADED" ? t.health.warning.text : d.zfs_state === "FAULTED" || d.zfs_state === "UNAVAIL" ? t.health.error.text : t.textSecondary,
}}>{d.zfs_state}</span>
) : (
<span style={{ fontSize: 11, color: t.textMuted, fontStyle: "italic" }}>{"\u2014"}</span>
)}
</td>
<td style={{ padding: "8px 10px", fontWeight: 600, color: d.temperature_c >= 40 ? t.health.warning.text : t.text }}>{d.temperature_c != null ? `${d.temperature_c}\u00B0C` : "\u2014"}</td>
<td style={{ padding: "8px 10px", color: t.text }}>{formatHours(d.power_on_hours)}</td>
<td style={{ padding: "8px 10px", borderRadius: "0 6px 6px 0" }}><StatusPill status={healthStatus} t={t} /></td>
@@ -431,12 +442,17 @@ function DriveDetail({ slot, onClose, t }) {
/ {d.zfs_vdev}
</span>
)}
<span style={{
fontSize: 10, fontWeight: 600, color: t.health.healthy.text, opacity: 0.7,
background: t.health.healthy.border + "33", padding: "2px 6px", borderRadius: 4,
}}>
MEMBER
</span>
{d.zfs_state && (
<span style={{
fontSize: 11, fontWeight: 700,
fontFamily: "'JetBrains Mono', monospace",
color: d.zfs_state === "ONLINE" ? t.health.healthy.text : d.zfs_state === "DEGRADED" ? t.health.warning.text : t.health.error.text,
background: (d.zfs_state === "ONLINE" ? t.health.healthy.border : d.zfs_state === "DEGRADED" ? t.health.warning.border : t.health.error.border) + "33",
padding: "2px 8px", borderRadius: 4,
}}>
{d.zfs_state}
</span>
)}
</>
) : (
<>