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

Make table view full-width and add fixed column layout

Browse Source
This commit is contained in:
adam
2026-03-07 04:48:34 +00:00
parent a25ce4ae21
commit 51e6b49830
1 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/App.jsx
View File

@@ -261,11 +261,26 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
const populated = enclosure.slots.filter((s) => s.populated); const populated = enclosure.slots.filter((s) => s.populated);
return ( return (
<div style={{ overflowX: "auto" }}> <div style={{ overflowX: "auto" }}>
<table style={{ width: "100%", borderCollapse: "separate", borderSpacing: "0 4px", fontSize: 13 }}> <table style={{ width: "100%", tableLayout: "fixed", borderCollapse: "separate", borderSpacing: "0 4px", fontSize: 13 }}>
<colgroup>
<col style={{ width: "4%" }} />
<col style={{ width: "5%" }} />
<col style={{ width: "15%" }} />
<col style={{ width: "12%" }} />
<col style={{ width: "14%" }} />
<col style={{ width: "5%" }} />
<col style={{ width: "6%" }} />
<col style={{ width: "10%" }} />
<col style={{ width: "8%" }} />
<col style={{ width: "7%" }} />
<col style={{ width: "5%" }} />
<col style={{ width: "5%" }} />
<col style={{ width: "7%" }} />
</colgroup>
<thead> <thead>
<tr style={{ textAlign: "left", color: t.textSecondary, fontSize: 11, textTransform: "uppercase", letterSpacing: 0.8 }}> <tr style={{ textAlign: "left", color: t.textSecondary, fontSize: 11, textTransform: "uppercase", letterSpacing: 0.8 }}>
{["Slot", "Device", "Model", "Serial", "WWN", "FW", "Capacity", "Pool", "Vdev", "ZFS State", "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> <th key={h} style={{ padding: "6px 10px", fontWeight: 600, borderBottom: `2px solid ${t.divider}`, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{h}</th>
))} ))}
</tr> </tr>
</thead> </thead>
@@ -287,13 +302,13 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = t.tableRowHover; }} onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = t.tableRowHover; }}
onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "transparent"; }} onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "transparent"; }}
> >
<td style={{ padding: "8px 10px", borderLeft: `3px solid ${c.dot}`, borderRadius: "6px 0 0 6px", color: t.text }}>{slot.slot}</td> <td style={{ padding: "8px 10px", borderLeft: `3px solid ${c.dot}`, borderRadius: "6px 0 0 6px", color: t.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{slot.slot}</td>
<td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: 12, color: t.mono }}>{slot.device}</td> <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: 12, color: t.mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{slot.device}</td>
<td style={{ padding: "8px 10px", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: t.text }}>{d.model}</td> <td style={{ padding: "8px 10px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: t.text }}>{d.model}</td>
<td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.mono }}>{d.serial}</td> <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.serial}</td>
<td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: t.textSecondary }}>{d.wwn}</td> <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: t.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.wwn}</td>
<td style={{ padding: "8px 10px", fontSize: 11, color: t.textSecondary }}>{d.firmware}</td> <td style={{ padding: "8px 10px", fontSize: 11, color: t.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.firmware}</td>
<td style={{ padding: "8px 10px", color: t.text }}>{formatCapacity(d.capacity_bytes)}</td> <td style={{ padding: "8px 10px", color: t.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{formatCapacity(d.capacity_bytes)}</td>
<td style={{ padding: "8px 10px" }}> <td style={{ padding: "8px 10px" }}>
{d.zfs_pool ? ( {d.zfs_pool ? (
<span style={{ <span style={{
@@ -595,7 +610,7 @@ export default function App() {
::-webkit-scrollbar-thumb { background: ${t.scrollThumb}; border-radius: 3px; } ::-webkit-scrollbar-thumb { background: ${t.scrollThumb}; border-radius: 3px; }
`}</style> `}</style>
<div style={{ maxWidth: 1100, margin: "0 auto", padding: "32px 20px 60px" }}> <div style={{ maxWidth: view === "table" ? "none" : 1100, margin: "0 auto", padding: "32px 20px 60px", transition: "max-width 0.3s" }}>
{/* Header */} {/* Header */}
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 12 }}> <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
<div> <div>