Disks tab: lsblk devices with partitions/usage/live IO, SMART via smartctl (standby-aware, self-tests, install button), ZFS pools/datasets/snapshots with scrub and snapshot-now

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/Disks.tsx

@@ -0,0 +1,228 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api, Sample, SmartInfo, StorageDevice, ZFSInfo, ZFSSnapshot } from './api'
+import { fmtBytes, fmtRate } from './Dashboard'
+import TaskOutput from './TaskOutput'
+import { Btn, Loading, Spinner, toast } from './ui'
+
+const pct = (v: number) => `${Math.round(v)}%`
+const KIND: Record<string, string> = { nvme: 'NVMe', ssd: 'SSD', hdd: 'HDD', usb: 'USB', other: 'disk' }
+const hours = (h: number) => (h >= 24 * 365 ? `${(h / 8760).toFixed(1)} y` : h >= 48 ? `${Math.round(h / 24)} d` : `${h} h`)
+const ago = (ms: number) => { const s = (Date.now() - ms) / 1000; return s < 3600 ? `${Math.round(s / 60)}m ago` : s < 86400 ? `${Math.round(s / 3600)}h ago` : `${Math.round(s / 86400)}d ago` }
+
+function Meter({ frac, cls }: { frac: number; cls?: string }) {
+  const c = cls ?? (frac >= 0.95 ? 'bad' : frac >= 0.85 ? 'warn' : '')
+  return <div className="meter"><div className={'fill ' + c} style={{ width: `${Math.min(100, Math.max(0, frac * 100))}%` }} /></div>
+}
+
+// ---- SMART panel ----
+function SmartPanel({ dev, rotational }: { dev: string; rotational: boolean }) {
+  const [s, setS] = useState<SmartInfo | null>(null)
+  const [err, setErr] = useState('')
+  const load = useCallback(async (force = false) => {
+    setS(null)
+    try { setS(await api.smart(dev, force)); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }, [dev])
+  useEffect(() => { load() }, [load])
+
+  if (err) return <div className="error">{err}</div>
+  if (!s) return <Loading label="Reading SMART…" />
+  if (!s.available) return <div className="notice">smartmontools isn't installed, so there's no SMART data. Install it from the button above.</div>
+  if (s.standby) return <div className="notice">Disk is spun down; SMART wasn't read so it stays asleep. <Btn className="btn" onClick={() => load(true)}>Wake and read</Btn></div>
+  if (s.error) return <div className="notice">{s.error}</div>
+  const ok = s.passed === true && s.warnings.length === 0
+  return (
+    <div className="smart">
+      <div className="props">
+        <div><span className="k">Health</span><span className={ok ? 'good' : 'warn-text'}>{s.passed === null ? 'unknown' : s.passed ? 'PASSED' : 'FAILED'}{s.warnings.length > 0 && ` · ${s.warnings.length} warning${s.warnings.length > 1 ? 's' : ''}`}</span></div>
+        {s.temp > 0 && <div><span className="k">Temperature</span><span>{s.temp}°C</span></div>}
+        {s.power_on_hours > 0 && <div><span className="k">Powered on</span><span>{hours(s.power_on_hours)} · {s.power_cycles} cycles</span></div>}
+        {s.firmware && <div><span className="k">Firmware</span><span className="mono">{s.firmware}</span></div>}
+        {s.serial && <div><span className="k">Serial</span><span className="mono">{s.serial}</span></div>}
+        {s.self_test && <div><span className="k">Self-test</span><span>{s.self_test}{s.self_test_remaining ? ` (${s.self_test_remaining}% left)` : ''}</span></div>}
+        <div><span className="k">Read</span><span className="muted">{ago(s.fetched_at)} <button className="link" onClick={() => load(true)}>refresh</button></span></div>
+      </div>
+      {s.warnings.length > 0 && <div className="notice attn">{s.warnings.join(' · ')}</div>}
+      {s.nvme && (
+        <div className="props">
+          <div><span className="k">Endurance</span><span>{s.nvme.percentage_used}% used · spare {s.nvme.available_spare}% (threshold {s.nvme.spare_threshold}%)</span></div>
+          <div><span className="k">Written</span><span>{fmtBytes(s.nvme.data_written_bytes)} · read {fmtBytes(s.nvme.data_read_bytes)}</span></div>
+          <div><span className="k">Errors</span><span>{s.nvme.media_errors} media · {s.nvme.error_log_entries} logged · {s.nvme.unsafe_shutdowns} unsafe shutdowns</span></div>
+        </div>
+      )}
+      {s.attrs.length > 0 && (
+        <table className="attrs">
+          <thead><tr><th>ID</th><th>Attribute</th><th>Raw</th><th>Value</th><th>Worst</th><th>Thresh</th></tr></thead>
+          <tbody>
+            {s.attrs.map((a) => (
+              <tr key={a.id} className={a.warn ? 'warn' : ''}>
+                <td className="num">{a.id}</td><td>{a.name.replace(/_/g, ' ')}{a.failed && <span className="badge bad">{a.failed}</span>}</td>
+                <td className="num">{a.raw}</td><td className="num">{a.value}</td><td className="num">{a.worst}</td><td className="num">{a.thresh}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      <div className="svc-actions">
+        <Btn className="btn" confirm={`Start a short self-test on ${dev}?`} onClick={async () => { if (await api.smartTest(dev, 'short').then(() => true, (e) => { toast(String(e.message ?? e), 'err'); return false })) { toast('short test started'); load(true) } }}>Short test</Btn>
+        <Btn className="btn" confirm={`Start a long self-test on ${dev}? ${rotational ? 'This can take hours on a spinning disk.' : ''}`} onClick={async () => { if (await api.smartTest(dev, 'long').then(() => true, (e) => { toast(String(e.message ?? e), 'err'); return false })) { toast('long test started'); load(true) } }}>Long test</Btn>
+      </div>
+    </div>
+  )
+}
+
+// ---- device card ----
+function DeviceCard({ d, live }: { d: StorageDevice; live?: { read_bps: number; write_bps: number; util_pct: number } }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <section className="card disk">
+      <div className="sub-head">
+        <span className="badge">{KIND[d.kind] ?? d.kind}</span>
+        <span className="dname">{d.name}</span>
+        <span className="model">{[d.vendor, d.model].filter(Boolean).join(' ')}</span>
+        <span className="spacer" />
+        <span className="num">{fmtBytes(d.size)}{d.temp ? ` · ${d.temp.toFixed(0)}°C` : ''}</span>
+      </div>
+      {live && <div className="sub-head num muted">read {fmtRate(live.read_bps)} · write {fmtRate(live.write_bps)} · {pct(live.util_pct)} busy</div>}
+      {d.parts.map((p) => (
+        <div className="row" key={p.name}>
+          <span className="k">{p.name}<small>{p.fstype || p.type}{p.label ? ` · ${p.label}` : ''}</small></span>
+          {p.fs_size ? <Meter frac={(p.used ?? 0) / p.fs_size} /> : <span className="muted">{p.mount === '[SWAP]' ? 'swap' : p.mount ? '' : 'not mounted'}</span>}
+          <span className="num">{p.fs_size ? `${fmtBytes(p.used ?? 0)} / ${fmtBytes(p.fs_size)} · ${p.mount}` : fmtBytes(p.size)}</span>
+        </div>
+      ))}
+      {d.parts.length === 0 && <div className="muted">No partitions.</div>}
+      <div className="svc-actions"><button className="btn" onClick={() => setOpen(!open)}>{open ? 'Hide SMART' : 'SMART'}</button></div>
+      {open && <SmartPanel dev={d.name} rotational={d.rotational} />}
+    </section>
+  )
+}
+
+// ---- ZFS ----
+function PoolCard({ p, onChanged }: { p: ZFSInfo['pools'][number]; onChanged: () => void }) {
+  const scrubbing = /scrub in progress/i.test(p.scan ?? '')
+  const paused = /scrub paused/i.test(p.scan ?? '')
+  const [cfg, setCfg] = useState(false)
+  const act = (a: 'start' | 'pause' | 'stop') => async () => {
+    try { await api.zfsScrub(p.name, a); toast(`scrub ${a}: ok`); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  return (
+    <section className="card">
+      <div className="sub-head">
+        <span className={'dot ' + (p.health === 'ONLINE' ? 'ok' : p.health === 'DEGRADED' ? 'warn' : 'bad')} />
+        <span className="dname">{p.name}</span>
+        <span className="badge">{p.health}</span>
+        <span className="spacer" />
+        <span className="num">{fmtBytes(p.alloc)} / {fmtBytes(p.size)} · {p.cap}%</span>
+      </div>
+      <Meter frac={p.cap / 100} cls={p.cap >= 90 ? 'bad' : p.cap >= 80 ? 'warn' : ''} />
+      <div className="props" style={{ marginTop: 8 }}>
+        <div><span className="k">Free</span><span>{fmtBytes(p.free)} · fragmentation {p.frag}% · dedup {p.dedup}</span></div>
+        {p.scan && <div><span className="k">Scan</span><span style={{ whiteSpace: 'normal' }}>{p.scan}</span></div>}
+        {p.errors && <div><span className="k">Errors</span><span className={p.errors.startsWith('No known') ? '' : 'warn-text'}>{p.errors}</span></div>}
+      </div>
+      <div className="svc-actions">
+        {!scrubbing && <Btn className="btn" confirm={`Start a scrub of ${p.name}? It reads the whole pool and can take many hours.`} onClick={act('start')}>{paused ? 'Resume scrub' : 'Scrub'}</Btn>}
+        {scrubbing && <Btn className="btn" onClick={act('pause')}>Pause scrub</Btn>}
+        {(scrubbing || paused) && <Btn className="btn" confirm="Stop the scrub?" onClick={act('stop')}>Stop scrub</Btn>}
+        <button className="btn" onClick={() => setCfg(!cfg)}>{cfg ? 'Hide vdevs' : 'Vdevs'}</button>
+      </div>
+      {cfg && <pre className="unit-file">{p.config}</pre>}
+    </section>
+  )
+}
+
+function DatasetRow({ d, onChanged }: { d: ZFSInfo['datasets'][number]; onChanged: () => void }) {
+  const [snaps, setSnaps] = useState<ZFSSnapshot[] | null>(null)
+  const [open, setOpen] = useState(false)
+  async function toggle() {
+    setOpen(!open)
+    if (!open && !snaps) { try { setSnaps(await api.zfsSnapshots(d.name)) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err'); setSnaps([]) } }
+  }
+  async function snapshot() {
+    const def = 'hamlab-' + new Date().toISOString().slice(0, 16).replace(/[-:T]/g, '').replace(/(\d{8})(\d{4})/, '$1-$2')
+    const name = window.prompt(`Snapshot name for ${d.name}@`, def)
+    if (!name) return
+    try { await api.zfsSnapshot(d.name, name.trim()); toast(`${d.name}@${name.trim()} created`); setSnaps(null); onChanged() }
+    catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
+  }
+  const depth = d.name.split('/').length - 1
+  return (
+    <>
+      <div className="ds-row" style={{ paddingLeft: 12 + depth * 16 }}>
+        <span className="ds-name" onClick={toggle}><span className="chev">{open ? '▾' : '▸'}</span>{d.name.split('/').pop()}{d.type === 'volume' && <span className="badge">zvol</span>}</span>
+        <span className="num">{fmtBytes(d.used)}</span>
+        <span className="num muted">{fmtBytes(d.refer)}</span>
+        <span className="num muted">{d.used_by_snapshots ? fmtBytes(d.used_by_snapshots) : '—'}</span>
+        <span className="num muted">{d.snapshots}</span>
+        <span className="num muted">{d.compressratio}</span>
+        <span className="ds-mount muted">{d.mount}</span>
+      </div>
+      {open && (
+        <div className="ds-snaps">
+          <div className="svc-actions"><Btn className="btn" onClick={snapshot}>Snapshot now</Btn><span className="muted">avail {fmtBytes(d.avail)}</span></div>
+          {snaps === null ? <div className="muted"><Spinner /> listing…</div> : snaps.length === 0 ? <div className="muted">No snapshots.</div> : (
+            <div className="snap-list">{snaps.slice().reverse().map((s) => <div key={s.name} className="snap"><span className="mono">{s.name.split('@')[1]}</span><span className="num muted">{new Date(s.created).toLocaleString()} · {fmtBytes(s.used)}</span></div>)}</div>
+          )}
+        </div>
+      )}
+    </>
+  )
+}
+
+// ---- page ----
+export default function Disks() {
+  const [devs, setDevs] = useState<StorageDevice[] | null>(null)
+  const [zfs, setZfs] = useState<ZFSInfo | null>(null)
+  const [hasSmart, setHasSmart] = useState(true)
+  const [live, setLive] = useState<Sample | null>(null)
+  const [err, setErr] = useState('')
+  const [task, setTask] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api.storage()
+      setDevs(r.devices); setZfs(r.zfs); setHasSmart(r.smartctl); setErr('')
+    } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
+  }, [])
+  useEffect(() => { load() }, [load])
+  useEffect(() => {
+    let stop = false
+    const tick = async () => { if (!stop && document.visibilityState === 'visible') { try { setLive(await api.metrics()) } catch { /* ignore */ } } }
+    tick()
+    const t = setInterval(tick, 2000)
+    return () => { stop = true; clearInterval(t) }
+  }, [])
+
+  if (!devs) return <div className="dash">{err ? <div className="error">{err}</div> : <Loading label="Scanning disks…" />}</div>
+  const liveFor = (n: string) => live?.disks.find((d) => d.name === n)
+
+  return (
+    <div className="dash disks">
+      {err && <div className="error">{err}</div>}
+      <div className="dash-bar">
+        <h2 className="section">Devices · {devs.length}</h2>
+        <span className="spacer" />
+        {!hasSmart && <Btn className="btn" onClick={async () => { try { const t = await api.installPackages(['smartmontools']); setTask(t.id) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } }}>Install smartmontools</Btn>}
+        <Btn className="btn" title="reload" onClick={load}>↻</Btn>
+      </div>
+      {!hasSmart && <div className="notice">SMART health needs smartmontools on this host. Install it with the button, then reload.</div>}
+      {task && <TaskOutput id={task} onDone={(t) => { toast(`${t.title}: ${t.exit_code === 0 ? 'finished' : `exited ${t.exit_code}`}`, t.exit_code === 0 ? 'ok' : 'err'); load() }} />}
+      <div className="cards">
+        {devs.map((d) => <DeviceCard key={d.name} d={d} live={liveFor(d.name)} />)}
+      </div>
+
+      <div className="dash-bar"><h2 className="section">ZFS</h2></div>
+      {zfs && !zfs.available && <div className="notice">{zfs.message || 'No ZFS pools on this host.'}</div>}
+      {zfs?.available && zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
+      {zfs?.available && zfs.pools.length > 0 && (
+        <>
+          <div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
+          <section className="card datasets">
+            <div className="ds-row head"><span>Dataset</span><span className="num">Used</span><span className="num">Refer</span><span className="num">In snaps</span><span className="num">Snaps</span><span className="num">Ratio</span><span>Mount</span></div>
+            {zfs.datasets.map((d) => <DatasetRow key={d.name} d={d} onChanged={load} />)}
+          </section>
+        </>
+      )}
+    </div>
+  )
+}

web/src/Shell.tsx

@@ -7,6 +7,7 @@ import Dashboard from './Dashboard'
 import Services from './Services'
 import Cron from './Cron'
 import Updates from './Updates'
+import Disks from './Disks'
 import Power from './Power'
 import { Btn, NetBar, Toasts, toast } from './ui'
 
@@ -16,10 +17,10 @@ const GROUPS: Group[] = [
   { id: 'services', label: 'Services', icon: '⚙', page: true },
   { id: 'cron', label: 'Cron', icon: '⏱', page: true },
   { id: 'updates', label: 'Updates', icon: '⇪', page: true },
-  { id: 'zfs', label: 'ZFS', icon: '▤', soon: true },
+  { id: 'disks', label: 'Disks', icon: '▤', page: true },
 ]
 
-type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates'
+type View = 'terminal' | 'dashboard' | 'services' | 'cron' | 'updates' | 'disks'
 
 function fmtUptime(s: number): string {
   const d = Math.floor(s / 86400), h = Math.floor((s % 86400) / 3600), m = Math.floor((s % 3600) / 60)
@@ -97,6 +98,7 @@ export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () =>
           {view === 'services' && <Services />}
           {view === 'cron' && <Cron />}
           {view === 'updates' && <Updates />}
+          {view === 'disks' && <Disks />}
           {termView && terms.length === 0 && (
             <div className="center muted">
               <div>No terminals.</div>
@@ -119,7 +121,7 @@ export default function Shell({ me, onLoggedOut }: { me: Me; onLoggedOut: () =>
         <span>{me.version.startsWith('v') ? me.version : 'v' + me.version}</span>
         <span>up {fmtUptime(me.uptime)}</span>
         <span className="spacer" />
-        <span className="muted">{view === 'dashboard' ? 'Dashboard' : view === 'services' ? 'Services' : view === 'cron' ? 'Cron' : view === 'updates' ? 'Updates' : activeTerm ? activeTerm.name : ''}</span>
+        <span className="muted">{view === 'dashboard' ? 'Dashboard' : view === 'services' ? 'Services' : view === 'cron' ? 'Cron' : view === 'updates' ? 'Updates' : view === 'disks' ? 'Disks' : activeTerm ? activeTerm.name : ''}</span>
       </footer>
     </div>
   )

web/src/api.ts

@@ -69,7 +69,21 @@ export interface TaskInfo { id: string; kind: string; title: string; command: st
 export interface UpdatePackage { name: string; current: string; candidate: string; suite?: string; security: boolean; description?: string }
 export interface UpdatesStatus { manager: string; can_upgrade: boolean; packages: UpdatePackage[]; security_count: number; last_refresh?: number; last_upgrade?: number; reboot_needed: boolean; reboot_pkgs: string[]; auto_upgrades: boolean; running_task?: string; sudo: boolean }
 
+export interface StoragePart { name: string; type: string; fstype?: string; mount?: string; label?: string; size: number; used?: number; fs_size?: number }
+export interface StorageDevice { name: string; kind: string; model?: string; vendor?: string; serial?: string; tran?: string; size: number; rotational: boolean; removable: boolean; temp?: number; parts: StoragePart[] }
+export interface SmartAttr { id: number; name: string; value: number; worst: number; thresh: number; raw: string; failed?: string; warn: boolean }
+export interface SmartInfo { device: string; available: boolean; supported: boolean; standby: boolean; passed: boolean | null; temp: number; power_on_hours: number; power_cycles: number; model?: string; serial?: string; firmware?: string; attrs: SmartAttr[]; nvme?: { critical_warning: number; percentage_used: number; available_spare: number; spare_threshold: number; media_errors: number; error_log_entries: number; data_read_bytes: number; data_written_bytes: number; unsafe_shutdowns: number }; self_test?: string; self_test_remaining?: number; warnings: string[]; error?: string; fetched_at: number }
+export interface ZFSSnapshot { name: string; used: number; created: number }
+export interface ZFSInfo { available: boolean; message?: string; pools: { name: string; size: number; alloc: number; free: number; frag: number; cap: number; health: string; dedup: string; scan?: string; errors?: string; config?: string }[]; datasets: { name: string; type: string; used: number; avail: number; refer: number; used_by_snapshots: number; mount?: string; compressratio: string; snapshots: number }[] }
+
 export const api = {
+  storage: () => req<{ devices: StorageDevice[]; zfs: ZFSInfo; smartctl: boolean }>('GET', '/api/storage'),
+  smart: (dev: string, force = false) => req<SmartInfo>('GET', `/api/storage/smart/${dev}${force ? '?force=1' : ''}`),
+  smartTest: (dev: string, kind: 'short' | 'long') => req<void>('POST', `/api/storage/smart/${dev}/test/${kind}`),
+  zfsSnapshots: (dataset: string) => req<ZFSSnapshot[]>('GET', `/api/storage/zfs/snapshots?dataset=${encodeURIComponent(dataset)}`),
+  zfsScrub: (pool: string, action: 'start' | 'pause' | 'stop') => req<void>('POST', `/api/storage/zfs/scrub/${encodeURIComponent(pool)}/${action}`),
+  zfsSnapshot: (dataset: string, name: string) => req<void>('POST', '/api/storage/zfs/snapshot', { dataset, name }),
+  installPackages: (packages: string[]) => req<TaskInfo>('POST', '/api/updates/install', { packages }),
   tasks: () => req<TaskInfo[]>('GET', '/api/tasks'),
   task: (id: string) => req<TaskInfo>('GET', `/api/tasks/${id}`),
   cancelTask: (id: string) => req<void>('POST', `/api/tasks/${id}/cancel`),

web/src/styles.css

@@ -229,3 +229,23 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .task.running .logs-bar { background: rgba(57,135,229,.12); }
 .task.failed .logs-bar { background: rgba(255,123,114,.12); }
 .task.done .logs-bar { background: rgba(63,185,80,.10); }
+
+/* disks */
+h2.section { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
+.disk .dname, .card .dname { font-weight: 600; }
+.badge { font-size: 10px; text-transform: uppercase; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; color: var(--muted); }
+.good { color: var(--ok); } .warn-text { color: var(--s2); }
+.smart { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
+.attrs { width: 100%; border-collapse: collapse; font-size: 12px; }
+.attrs th { text-align: left; color: var(--muted); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--border); }
+.attrs td { padding: 3px 6px; border-bottom: 1px solid var(--border); } .attrs td.num, .attrs th:not(:nth-child(2)) { text-align: right; }
+.attrs tr.warn td { color: var(--s2); }
+.datasets { padding: 0; overflow-x: auto; }
+.ds-row { display: grid; grid-template-columns: minmax(160px, 1fr) 80px 80px 80px 50px 50px minmax(120px, 1fr); gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 13px; min-width: 640px; }
+.ds-row.head { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
+.ds-row .num { text-align: right; }
+.ds-name { cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ds-mount { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 12px; }
+.ds-snaps { padding: 8px 12px 10px 40px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
+.snap-list { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
+.snap { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }