Mitchell-JohnsonandClaude Opus 5
daf33a44b2
Renamed Datasets to Snapshots and turned the columns around to match: how many each dataset has and what they cost come first, the dataset's own size after. Opening one lists its snapshots with when it was taken, when it expires — read from the TTL in its own name, so no server call is needed — its size, and a Delete button. Deleting takes the same-named snapshot on descendant datasets too, which is how a recursive schedule made it, and says so before it does anything. Dropped "What would it delete?" from the schedule cards, and the endpoint behind it. Run now says plainly that expired snapshots go at the same time, which is the whole of what the preview was telling anyone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
360 lines
21 KiB
TypeScript
360 lines
21 KiB
TypeScript
// ZFS: pools, datasets, snapshots, and a schedule for taking and expiring them.
|
|
//
|
|
// Split out of the Disks tab on 2026-09-24. Disks is the hardware; this is the filesystem
|
|
// on top of it, which has enough of its own to say.
|
|
//
|
|
// On the schedule: `grid` has run zfSnap from root cron since before Ham Lab existed, and it
|
|
// works. So this reads and writes the same snapshot names — `2026-09-24_02.30.01--6w`, with
|
|
// the retention in the name — rather than inventing a second convention for the two tools to
|
|
// disagree over. An existing cron job is detected and shown, so the page tells the truth
|
|
// about the machine whether Ham Lab or something else is doing the work.
|
|
import { FormEvent, useCallback, useEffect, useState } from 'react'
|
|
import { api, ZFSExternal, ZFSInfo, ZFSOverview, ZFSPolicy, ZFSRun, ZFSSnapshot } from './api'
|
|
import { fmtBytes } from './fmt'
|
|
import { useRefreshMs } from './prefs'
|
|
import { askText, askYes, Btn, Loading, Meter, Spinner, toast, useEscape } from './ui'
|
|
|
|
const ago = (t?: string | number) => {
|
|
if (!t) return 'never'
|
|
const s = Math.max(0, (Date.now() - new Date(t).getTime()) / 1000)
|
|
return s < 60 ? 'just now' : s < 3600 ? `${Math.floor(s / 60)} min ago` : s < 86400 ? `${Math.floor(s / 3600)} h ago` : `${Math.floor(s / 86400)} d ago`
|
|
}
|
|
const soon = (t?: string) => {
|
|
if (!t) return '—'
|
|
const s = (new Date(t).getTime() - Date.now()) / 1000
|
|
return s < 60 ? 'any moment' : s < 3600 ? `in ${Math.round(s / 60)} min` : s < 86400 ? `in ${Math.round(s / 3600)} h` : `in ${Math.round(s / 86400)} d`
|
|
}
|
|
const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
|
const describe = (p: ZFSPolicy) => {
|
|
const when = p.every === 'custom' ? `on ${p.cron}`
|
|
: p.every === 'hourly' ? `every hour at :${(p.at.split(':')[1] ?? '00').padStart(2, '0')}`
|
|
: p.every === 'daily' ? `every day at ${p.at}`
|
|
: p.every === 'weekly' ? `every ${WEEKDAYS[p.weekday] ?? 'Sunday'} at ${p.at}`
|
|
: `on day ${p.day} of the month at ${p.at}`
|
|
return `${when} · keep ${p.keep_for}${p.recursive ? ' · recursive' : ''}`
|
|
}
|
|
|
|
// ---- pools and datasets (moved from the Disks tab) ----
|
|
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>
|
|
)
|
|
}
|
|
|
|
// A snapshot's name carries when it was taken and how long it lives — 2026-09-24_02.30.01--6w
|
|
// — so the explorer can say when each one goes without asking the server anything.
|
|
function snapMeta(full: string): { taken?: Date; expires?: Date } {
|
|
const snap = full.split('@')[1] ?? ''
|
|
const [body, ttl] = snap.split('--')
|
|
const m = /(\d{4})-(\d{2})-(\d{2})_(\d{2})\.(\d{2})\.(\d{2})$/.exec(body)
|
|
if (!m) return {}
|
|
const taken = new Date(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6])
|
|
const a = /^(\d+)([mhdw])$/.exec(ttl ?? '')
|
|
if (!a) return { taken }
|
|
const ms = { m: 60e3, h: 3600e3, d: 86400e3, w: 7 * 86400e3 }[a[2]]!
|
|
return { taken, expires: new Date(taken.getTime() + +a[1] * ms) }
|
|
}
|
|
|
|
// One dataset in the snapshot explorer: how many it has and what they cost, opening into
|
|
// the snapshots themselves, each of which can be taken now or deleted.
|
|
function DatasetRow({ d, onChanged }: { d: ZFSInfo['datasets'][number]; onChanged: () => void }) {
|
|
const [snaps, setSnaps] = useState<ZFSSnapshot[] | null>(null)
|
|
const [open, setOpen] = useState(false)
|
|
const reload = useCallback(async () => {
|
|
try { setSnaps(await api.zfsSnapshots(d.name)) } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err'); setSnaps([]) }
|
|
}, [d.name])
|
|
async function toggle() {
|
|
setOpen(!open)
|
|
if (!open && !snaps) await reload()
|
|
}
|
|
async function snapshot() {
|
|
const def = new Date().toISOString().slice(0, 19).replace('T', '_').replace(/:/g, '.')
|
|
const name = await askText(`Snapshot name for ${d.name}@`, def)
|
|
if (!name) return
|
|
try { await api.zfsSnapshot(d.name, name.trim()); toast(`${d.name}@${name.trim()} created`); await reload(); onChanged() }
|
|
catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
|
|
}
|
|
async function destroy(s: ZFSSnapshot) {
|
|
const short = s.name.split('@')[1]
|
|
if (!await askYes(`Delete ${s.name}? It is removed from this dataset and from every dataset beneath it that has a snapshot of the same name. This cannot be undone.`, 'Delete')) return
|
|
try { await api.deleteZfsSnapshot(s.name, true); toast(`${short} deleted`); await reload(); 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">{d.snapshots}</span>
|
|
<span className="num muted">{d.used_by_snapshots ? fmtBytes(d.used_by_snapshots) : '—'}</span>
|
|
<span className="num muted">{fmtBytes(d.used)}</span>
|
|
<span className="num muted">{fmtBytes(d.refer)}</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 small">{d.snapshots} snapshot{d.snapshots === 1 ? '' : 's'} · {fmtBytes(d.avail)} free on this dataset</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) => {
|
|
const { taken, expires } = snapMeta(s.name)
|
|
const gone = expires && expires.getTime() < Date.now()
|
|
return (
|
|
<div key={s.name} className="snap">
|
|
<span className="mono snap-name" title={s.name}>{s.name.split('@')[1]}</span>
|
|
<span className="muted snap-when">{taken ? taken.toLocaleString() : new Date(s.created).toLocaleString()}</span>
|
|
<span className={'muted snap-exp' + (gone ? ' warn' : '')}>{expires ? (gone ? 'expired' : `expires ${expires.toLocaleDateString()}`) : 'kept'}</span>
|
|
<span className="num muted">{fmtBytes(s.used)}</span>
|
|
<Btn className="btn danger snap-del" onClick={() => destroy(s)}>Delete</Btn>
|
|
</div>
|
|
)
|
|
})}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
// ---- schedules ----
|
|
|
|
function ExternalNotice({ x, mine, onAdopt }: { x: ExternalJob; mine: number; onAdopt: () => void }) {
|
|
return (
|
|
<div className={'notice' + (mine > 0 ? ' attn' : '')} style={{ marginBottom: 8 }}>
|
|
<b>{x.tool}</b> is already taking snapshots on this machine, from cron as <b>{x.user}</b>:
|
|
<div className="mono small" style={{ margin: '4px 0', wordBreak: 'break-all' }}>{x.schedule} {x.command}</div>
|
|
<span className="muted">in {x.source}{x.last ? ` · last ran ${ago(x.last)}` : ''}</span>
|
|
{mine > 0
|
|
? <div className="warn" style={{ marginTop: 6 }}>A Ham Lab schedule is running as well. Both use the same names and both only remove snapshots that have passed the expiry written into them, so they will not fight — but they will take twice as many. Keep one.</div>
|
|
: <div className="svc-actions" style={{ marginTop: 6 }}>
|
|
<Btn className="btn" onClick={onAdopt}>Adopt as a schedule</Btn>
|
|
<span className="muted small">Copies it into a Ham Lab schedule you can edit here. Turn the old cron job off on the Jobs tab once you are happy with it.</span>
|
|
</div>}
|
|
</div>
|
|
)
|
|
}
|
|
type ExternalJob = ZFSExternal
|
|
|
|
function ScheduleCard({ p, cron, next, last, onChanged, onEdit }: { p: ZFSPolicy; cron: string; next?: string; last: ZFSRun; onChanged: () => void; onEdit: () => void }) {
|
|
const [busy, setBusy] = useState('')
|
|
const run = async () => {
|
|
if (!await askYes(`Take a snapshot of ${p.dataset} now? Snapshots past their retention are removed at the same time, as they would be on the schedule.`, 'Run now')) return
|
|
setBusy('run')
|
|
try { const r = await api.runZfsSchedule(p.id); toast(`${r.taken}${r.pruned.length ? ` · ${r.pruned.length} expired removed` : ''}`); onChanged() }
|
|
catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') } finally { setBusy('') }
|
|
}
|
|
const remove = async () => {
|
|
if (!await askYes(`Remove the schedule "${p.name}"? The snapshots it already took are left exactly as they are.`, 'Remove')) return
|
|
try { await api.deleteZfsSchedule(p.id); toast('schedule removed'); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
|
|
}
|
|
const toggle = async () => {
|
|
try { await api.saveZfsSchedule({ ...p, enabled: !p.enabled }); onChanged() } catch (e) { toast(e instanceof Error ? e.message : 'failed', 'err') }
|
|
}
|
|
return (
|
|
<section className="card">
|
|
<div className="sub-head">
|
|
<span className={'dot ' + (last.error ? 'bad' : p.enabled ? 'ok' : '')} />
|
|
<span className="dname">{p.name || p.dataset}</span>
|
|
{!p.enabled && <span className="badge">paused</span>}
|
|
<span className="spacer" />
|
|
<span className="muted small">{p.enabled ? soon(next) : 'not scheduled'}</span>
|
|
</div>
|
|
<div className="props" style={{ marginTop: 6 }}>
|
|
<div><span className="k">Dataset</span><span className="mono">{p.dataset}</span></div>
|
|
<div><span className="k">When</span><span>{describe(p)}</span></div>
|
|
<div><span className="k">Cron</span><span className="mono small" title={`in ${'/etc/cron.d/hamlab-zfs'}`}>{cron}</span></div>
|
|
<div><span className="k">Last run</span><span>{ago(last.at)}{last.pruned?.length ? ` · ${last.pruned.length} expired removed` : ''}</span></div>
|
|
{last.taken && <div><span className="k">Last snapshot</span><span className="mono small">{last.taken.split('@')[1]}</span></div>}
|
|
{p.keep_min > 0 && <div><span className="k">Floor</span><span>always keep the newest {p.keep_min}</span></div>}
|
|
</div>
|
|
{last.error && <div className="error" style={{ marginTop: 8 }}>{last.error}</div>}
|
|
<div className="svc-actions">
|
|
<Btn className="btn on" busy={busy === 'run'} onClick={run}>Run now</Btn>
|
|
<button className="btn" onClick={onEdit}>Edit</button>
|
|
<Btn className="btn" onClick={toggle}>{p.enabled ? 'Pause' : 'Resume'}</Btn>
|
|
<Btn className="btn danger" onClick={remove}>Remove</Btn>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
const BLANK: Partial<ZFSPolicy> = { name: '', dataset: '', recursive: true, every: 'daily', at: '02:30', weekday: 0, day: 1, keep_for: '6w', keep_min: 1, enabled: true }
|
|
|
|
function ScheduleDialog({ p, datasets, onClose, onSaved }: { p: Partial<ZFSPolicy>; datasets: string[]; onClose: () => void; onSaved: () => void }) {
|
|
const [f, setF] = useState<Partial<ZFSPolicy>>({ ...BLANK, ...p })
|
|
const [err, setErr] = useState('')
|
|
useEscape(onClose)
|
|
const set = (k: keyof ZFSPolicy, v: unknown) => setF((x) => ({ ...x, [k]: v }))
|
|
const save = async (e: FormEvent) => {
|
|
e.preventDefault(); setErr('')
|
|
try { await api.saveZfsSchedule({ ...f, name: (f.name || '').trim() || f.dataset }); onSaved() }
|
|
catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
|
|
}
|
|
return (
|
|
<div className="modal-back" onClick={onClose}>
|
|
<form className="modal" onClick={(e) => e.stopPropagation()} onSubmit={save}>
|
|
<h3>{f.id ? 'Edit schedule' : 'New snapshot schedule'}</h3>
|
|
<label className="muted">Dataset
|
|
<select value={f.dataset} onChange={(e) => set('dataset', e.target.value)} required>
|
|
<option value="">choose…</option>
|
|
{datasets.map((d) => <option key={d} value={d}>{d}</option>)}
|
|
</select>
|
|
</label>
|
|
<label className="muted">Name — what this schedule is for
|
|
<input value={f.name} onChange={(e) => set('name', e.target.value)} placeholder={f.dataset || 'nightly'} maxLength={64} />
|
|
</label>
|
|
<label className="muted">How often
|
|
<span className="chips">
|
|
{(['hourly', 'daily', 'weekly', 'monthly', 'custom'] as const).map((k) => (
|
|
<button type="button" key={k} className={'chip' + (f.every === k ? ' on' : '')} onClick={() => set('every', k)}>{k}</button>
|
|
))}
|
|
</span>
|
|
</label>
|
|
{f.every === 'custom' ? (
|
|
<label className="muted">Cron expression — minute hour day month weekday
|
|
<input className="mono" value={f.cron ?? ''} onChange={(e) => set('cron', e.target.value)} placeholder="0 */6 * * *" spellCheck={false} required />
|
|
</label>
|
|
) : (
|
|
<label className="muted">At
|
|
<input type="time" value={f.at} onChange={(e) => set('at', e.target.value)} />
|
|
</label>
|
|
)}
|
|
{f.every === 'weekly' && (
|
|
<label className="muted">On
|
|
<select value={f.weekday} onChange={(e) => set('weekday', Number(e.target.value))}>
|
|
{WEEKDAYS.map((d, i) => <option key={d} value={i}>{d}</option>)}
|
|
</select>
|
|
</label>
|
|
)}
|
|
{f.every === 'monthly' && (
|
|
<label className="muted">Day of the month — 1 to 28, so every month has one
|
|
<input type="number" min={1} max={28} value={f.day} onChange={(e) => set('day', Number(e.target.value))} />
|
|
</label>
|
|
)}
|
|
<label className="muted">Snapshot name prefix — optional; the timestamp and retention follow it
|
|
<input value={f.prefix ?? ''} onChange={(e) => set('prefix', e.target.value)} placeholder="none" spellCheck={false} />
|
|
</label>
|
|
<label className="muted">Keep for — written into each snapshot's name, as zfSnap does it: 6w, 30d, 12h
|
|
<input value={f.keep_for} onChange={(e) => set('keep_for', e.target.value)} placeholder="6w" spellCheck={false} required />
|
|
</label>
|
|
<label className="muted">Always keep the newest — a floor, whatever their age
|
|
<input type="number" min={0} max={99} value={f.keep_min} onChange={(e) => set('keep_min', Number(e.target.value))} />
|
|
</label>
|
|
<label className="muted" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<input type="checkbox" checked={!!f.recursive} onChange={(e) => set('recursive', e.target.checked)} style={{ width: 'auto' }} />
|
|
Recursive — one atomic snapshot of this dataset and everything under it
|
|
</label>
|
|
<label className="muted" style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
|
|
<input type="checkbox" checked={!!f.enabled} onChange={(e) => set('enabled', e.target.checked)} style={{ width: 'auto' }} />
|
|
Enabled
|
|
</label>
|
|
{err && <div className="error">{err}</div>}
|
|
<div className="svc-actions">
|
|
<button type="submit" className="btn on" disabled={!f.dataset || !f.keep_for}>Save</button>
|
|
<span className="spacer" />
|
|
<button type="button" className="btn" onClick={onClose}>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// adopt reads an existing cron job into the fields of a new schedule, so replacing it is a
|
|
// matter of checking the numbers rather than retyping them. zfSnap's own flags are read
|
|
// where they can be: -a <age> is the retention, -r is recursive.
|
|
function adopt(x: ExternalJob, fallbackDataset: string): Partial<ZFSPolicy> {
|
|
const cmd = x.command
|
|
const keep = /-a\s+(\d+[mhdwMy])/.exec(cmd)?.[1] ?? /--\s*(\d+[mhdw])\b/.exec(cmd)?.[1] ?? '6w'
|
|
const f = x.schedule.trim().split(/\s+/)
|
|
const min = Number(f[0]), hour = Number(f[1])
|
|
const simple = f.length === 5 && Number.isInteger(min) && Number.isInteger(hour) && f[2] === '*' && f[3] === '*' && f[4] === '*'
|
|
const ds = /\b(tank[\w/-]*)\b/.exec(cmd)?.[1] ?? fallbackDataset
|
|
return {
|
|
...BLANK, name: `${x.tool} (adopted)`, dataset: ds,
|
|
recursive: /\s-\w*r/.test(cmd) || true,
|
|
every: simple ? 'daily' : 'custom',
|
|
at: simple ? `${String(hour).padStart(2, '0')}:${String(min).padStart(2, '0')}` : '02:30',
|
|
cron: simple ? '' : x.schedule.trim(),
|
|
keep_for: keep, keep_min: 1, enabled: true,
|
|
}
|
|
}
|
|
|
|
// ---- page ----
|
|
|
|
export default function ZFS() {
|
|
const [ov, setOv] = useState<ZFSOverview | null>(null)
|
|
const [err, setErr] = useState('')
|
|
const [editing, setEditing] = useState<Partial<ZFSPolicy> | null>(null)
|
|
const rate = useRefreshMs()
|
|
|
|
const load = useCallback(async () => {
|
|
try { setOv(await api.zfsOverview()); setErr('') } catch (e) { setErr(e instanceof Error ? e.message : 'failed') }
|
|
}, [])
|
|
useEffect(() => { load() }, [load])
|
|
useEffect(() => { const t = setInterval(load, Math.max(5000, rate * 10)); return () => clearInterval(t) }, [load, rate])
|
|
|
|
if (err && !ov) return <div className="dash"><div className="error">{err}</div></div>
|
|
if (!ov) return <div className="dash"><Loading label="Reading ZFS…" /></div>
|
|
const zfs: ZFSInfo = ov.zfs
|
|
const datasets = zfs.datasets.filter((d) => d.type !== 'volume').map((d) => d.name)
|
|
const mine = ov.policies.filter((x) => x.policy.enabled).length
|
|
|
|
if (!zfs.available) return <div className="dash"><div className="notice">{zfs.message || 'No ZFS on this host.'}</div></div>
|
|
|
|
return (
|
|
<div className="dash">
|
|
<div className="dash-bar"><h2 className="section">Pools</h2></div>
|
|
{zfs.pools.length === 0 && <div className="notice">ZFS is present but no pools are imported.</div>}
|
|
<div className="cards">{zfs.pools.map((p) => <PoolCard key={p.name} p={p} onChanged={load} />)}</div>
|
|
|
|
<div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Snapshot schedules</h2><span className="spacer" />
|
|
<Btn className="btn on" onClick={() => setEditing({ ...BLANK, dataset: zfs.pools[0]?.name ?? '' })}>+ New schedule</Btn>
|
|
</div>
|
|
{ov.external && <ExternalNotice x={ov.external} mine={mine} onAdopt={() => setEditing(adopt(ov.external!, zfs.pools[0]?.name ?? ''))} />}
|
|
{ov.policies.length === 0 && !ov.external && <div className="notice">Nothing is taking snapshots on a schedule. Snapshots are written the way zfSnap writes them, with the retention in the name, so anything already here is understood.</div>}
|
|
<div className="cards">{ov.policies.map(({ policy, cron, next, last }) => (
|
|
<ScheduleCard key={policy.id} p={policy} cron={cron} next={next} last={last ?? {}} onChanged={load} onEdit={() => setEditing(policy)} />
|
|
))}</div>
|
|
|
|
<div className="dash-bar" style={{ marginTop: 12 }}><h2 className="section">Snapshots</h2><span className="spacer" />
|
|
<span className="muted small">{zfs.datasets.reduce((a, d) => a + d.snapshots, 0)} across {zfs.datasets.length} datasets · open one to browse, take or delete</span>
|
|
</div>
|
|
<section className="card ds-table">
|
|
<div className="ds-row head">
|
|
<span>Dataset</span><span className="num">Snapshots</span><span className="num">They use</span>
|
|
<span className="num">Dataset uses</span><span className="num">Referenced</span><span>Mount</span>
|
|
</div>
|
|
{zfs.datasets.map((d) => <DatasetRow key={d.name} d={d} onChanged={load} />)}
|
|
</section>
|
|
|
|
{editing && <ScheduleDialog p={editing} datasets={datasets.length ? datasets : zfs.pools.map((p) => p.name)} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); load() }} />}
|
|
</div>
|
|
)
|
|
}
|