steve
e22b41d452
Bug fixes from the Playwright sweep against the live smoke server:
1. Snapshot-picker layout. The .snap-row class was used in the wireframe
but never landed in web/styles/input.css; rows rendered as vertical
blocks instead of a 6-column grid. Added the token (mirrors host-row
shape with restore-specific column widths).
2. Tree expansion. hx-target='closest .tree-row + .tree-children' isn't
a valid HTMX selector — modifiers don't chain. Replaced HTMX-driven
expansion with a small window.__rmTreeToggle helper that uses plain
fetch + .tree-pair wrapper structure for trivial sibling lookup.
Caches loaded state per node.
3. --no-ownership flag dropped. Restic 0.17 introduced --no-ownership;
0.16 rejects it ('unknown flag') before doing any work. Since the
agent runs as root in the systemd unit, restored files keep their
original uid/gid either way and the parent dir is root-owned, so
the 'cp without sudo' rationale doesn't hold. Drop the flag entirely.
4. Default target dir moved to /var/lib/restic-manager/restore. The
systemd unit pins ReadWritePaths to /etc/restic-manager +
/var/lib/restic-manager (with ProtectSystem=strict making the rest
of /var read-only); writes to /var/restic-restore failed with
'read-only file system'.
5. Confirm summary HTML escaping. defaultTarget JS literal evaluates
to a string with literal angle brackets; insertion into innerHTML
must escape them. Added an inline HTML-escape pass.
tasks.md ticked for the Restore sub-phase with a sweep summary
covering the live end-to-end test.
374 lines
21 KiB
HTML
374 lines
21 KiB
HTML
{{define "title"}}{{.Title}}{{end}}
|
|
|
|
{{define "content"}}
|
|
{{template "host_chrome" .}}
|
|
{{$page := .Page}}
|
|
{{$host := $page.Host}}
|
|
<div class="max-w-[1280px] mx-auto px-8 pt-6 pb-14">
|
|
|
|
<div class="flex items-baseline justify-between mb-4">
|
|
<div>
|
|
<h2 class="text-[19px] font-medium tracking-[-0.005em]">Restore from snapshot</h2>
|
|
<div class="text-[12.5px] text-ink-mute mt-1">
|
|
Pick a snapshot, choose paths, decide where files go, then dispatch.
|
|
Live progress streams to a job page once you start.
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="/hosts/{{$host.ID}}" class="btn">Cancel</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{if $page.Error}}
|
|
<div class="rounded-[6px] px-3.5 py-3 text-[13px] mb-4"
|
|
style="border: 1px solid color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%);">
|
|
{{$page.Error}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<form method="post" action="/hosts/{{$host.ID}}/restore" id="restore-form" class="space-y-4">
|
|
|
|
{{/* ============ STEP 1 — snapshot picker ============ */}}
|
|
<section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden">
|
|
<header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
|
|
style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
|
|
<div class="flex items-center gap-3">
|
|
{{if $page.Selected}}
|
|
<span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
|
|
style="background: color-mix(in oklch, var(--ok), transparent 86%); color: var(--ok); border: 1px solid color-mix(in oklch, var(--ok), transparent 60%);">✓</span>
|
|
{{else}}
|
|
<span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
|
|
style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">1</span>
|
|
{{end}}
|
|
<div>
|
|
<div class="text-[14px] font-medium">Snapshot</div>
|
|
<div class="text-[12px] text-ink-mute mt-0.5">Pick the point-in-time you want to restore from.</div>
|
|
</div>
|
|
</div>
|
|
<span class="mono text-[11px] text-ink-fade">step 1 of 4</span>
|
|
</header>
|
|
<div class="p-[18px]">
|
|
{{if $page.Selected}}
|
|
{{/* selected summary card */}}
|
|
<div class="grid items-center gap-4 px-3.5 py-3 rounded-[6px] bg-bg border border-line-soft"
|
|
style="grid-template-columns: auto 1fr auto auto;">
|
|
<span class="mono text-[12px] text-accent">{{$page.Selected.ShortID}}</span>
|
|
<div>
|
|
<div class="text-[13px] text-ink">{{$page.Selected.Time.Format "2006-01-02 15:04 MST"}} <span class="text-ink-fade mx-2">·</span><span class="text-ink-mute">{{relTime $page.Selected.Time}}</span></div>
|
|
<div class="mt-1 text-[12px] text-ink-mute">
|
|
{{range $page.Selected.Tags}}<span class="tag mr-1.5">{{.}}</span>{{end}}
|
|
paths:
|
|
{{range $i, $p := $page.Selected.Paths}}{{if $i}}, {{end}}<span class="mono text-ink-mid">{{$p}}</span>{{end}}
|
|
{{if $page.Selected.SizeBytes}} · {{bytes $page.Selected.SizeBytes}}{{end}}
|
|
</div>
|
|
</div>
|
|
<span class="text-ink-fade text-[12px]">picked from {{len $page.Snapshots}} snapshots</span>
|
|
<a href="/hosts/{{$host.ID}}/restore" class="btn">Change</a>
|
|
</div>
|
|
<input type="hidden" name="snapshot_id" value="{{$page.Selected.ID}}" />
|
|
{{else}}
|
|
{{/* full picker table */}}
|
|
<div class="rounded-[6px] border border-line-soft bg-bg overflow-hidden">
|
|
<div class="snap-row head">
|
|
<div>Time</div>
|
|
<div>Tag</div>
|
|
<div>Paths</div>
|
|
<div>Size</div>
|
|
<div>Snapshot ID</div>
|
|
<div></div>
|
|
</div>
|
|
{{if not $page.Snapshots}}
|
|
<div class="px-4 py-8 text-center text-ink-mute text-[13px]">No snapshots yet. Run a backup first.</div>
|
|
{{end}}
|
|
{{range $page.Snapshots}}
|
|
<a href="/hosts/{{$host.ID}}/snapshots/{{.ID}}/restore" class="snap-row" style="text-decoration: none; color: inherit;">
|
|
<div class="mono text-ink-mid">{{relTime .Time}}</div>
|
|
<div>{{range .Tags}}<span class="tag">{{.}}</span>{{end}}</div>
|
|
<div class="text-ink-mute" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
|
{{range $i, $p := .Paths}}{{if $i}}, {{end}}<span class="mono text-ink-mid">{{$p}}</span>{{end}}
|
|
</div>
|
|
<div class="mono text-ink-mid">{{if .SizeBytes}}{{bytes .SizeBytes}}{{else}}—{{end}}</div>
|
|
<div class="mono text-ink-mid">{{.ShortID}}</div>
|
|
<div></div>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
{{/* ============ STEP 2 — paths (tree browser) ============ */}}
|
|
<section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
|
|
<header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
|
|
style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
|
|
style="{{if $page.Selected}}background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);{{else}}background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line);{{end}}">2</span>
|
|
<div>
|
|
<div class="text-[14px] font-medium">Paths</div>
|
|
<div class="text-[12px] text-ink-mute mt-0.5">Tick files and directories to restore. Folders restore recursively.</div>
|
|
</div>
|
|
</div>
|
|
<span class="mono text-[11px] text-ink-fade">step 2 of 4</span>
|
|
</header>
|
|
<div class="p-[18px]">
|
|
{{if $page.Selected}}
|
|
<div class="rounded-[6px] border border-line-soft bg-bg overflow-hidden p-2">
|
|
{{/* Root tree node — fetched on first wizard render; child
|
|
expansions reuse the same tree.list cache server-side. */}}
|
|
<div id="tree-root">
|
|
<div class="text-ink-mute text-[12.5px] mono px-3 py-2">loading…</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
fetch('/hosts/{{$host.ID}}/restore/tree?snapshot={{$page.Selected.ID}}&path=/', { credentials: 'same-origin' })
|
|
.then(function(r) { return r.text(); })
|
|
.then(function(html) {
|
|
document.getElementById('tree-root').innerHTML = html;
|
|
document.body.dispatchEvent(new CustomEvent('tree:loaded'));
|
|
});
|
|
})();
|
|
</script>
|
|
<div class="mt-3 px-3.5 py-2.5 rounded-[6px] text-[12.5px]"
|
|
style="border: 1px solid color-mix(in oklch, var(--accent), transparent 70%); background: color-mix(in oklch, var(--accent), transparent 92%);">
|
|
<span class="text-accent" id="tally-count">0 files selected</span>
|
|
<span class="text-ink-fade mx-2">·</span>
|
|
<span class="text-ink-mute mono" id="tally-paths">tick a file or directory above</span>
|
|
</div>
|
|
{{else}}
|
|
<div class="text-ink-mute text-[13px]">Pick a snapshot above to load its paths.</div>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
|
|
{{/* ============ STEP 3 — target ============ */}}
|
|
<section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
|
|
<header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
|
|
style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
|
|
style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">3</span>
|
|
<div>
|
|
<div class="text-[14px] font-medium">Target</div>
|
|
<div class="text-[12px] text-ink-mute mt-0.5">Where should the files land? Defaults to a fresh, isolated directory.</div>
|
|
</div>
|
|
</div>
|
|
<span class="mono text-[11px] text-ink-fade">step 3 of 4</span>
|
|
</header>
|
|
<div class="p-[18px]">
|
|
<div class="grid grid-cols-2 gap-3.5">
|
|
<label class="block rounded-[7px] p-4 cursor-pointer transition border target-card-new"
|
|
id="target-new-card"
|
|
style="border-color: color-mix(in oklch, var(--accent), transparent 50%); background: color-mix(in oklch, var(--accent), transparent 95%);">
|
|
<div class="flex items-start gap-3">
|
|
<input type="radio" name="target_mode" value="new_dir" class="mt-1" {{if not $page.FormInPlace}}checked{{end}} />
|
|
<div class="flex-1">
|
|
<div class="text-[14px] font-medium text-ink">New directory</div>
|
|
<div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">
|
|
Files restore into a fresh path on the host. Original files untouched.
|
|
Original ownership (uid/gid/mode) is preserved.
|
|
</div>
|
|
<div class="mt-3 px-3 py-[9px] rounded-[5px] mono text-[12px] text-ink flex items-center gap-2.5"
|
|
style="background: var(--bg); border: 1px solid var(--line-soft);">
|
|
<span class="text-ink-fade">→</span>
|
|
<span>{{$page.DefaultTargetDir}}</span>
|
|
</div>
|
|
<div class="text-[11.5px] text-ink-fade mt-1.5">Final job-id slug substituted on dispatch.</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="block rounded-[7px] p-4 cursor-pointer transition border target-card-inplace"
|
|
id="target-inplace-card"
|
|
style="border-color: color-mix(in oklch, var(--bad), transparent 70%); background: color-mix(in oklch, var(--bad), transparent 96%);">
|
|
<div class="flex items-start gap-3">
|
|
<input type="radio" name="target_mode" value="in_place" class="mt-1" {{if $page.FormInPlace}}checked{{end}} />
|
|
<div class="flex-1">
|
|
<div class="text-[14px] font-medium">
|
|
<span class="text-bad">In place</span>
|
|
<span class="text-ink-mute font-normal">— overwrite original paths</span>
|
|
</div>
|
|
<div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">
|
|
Files replace whatever is at their original paths.
|
|
Original ownership and permissions are preserved.
|
|
<span class="text-bad">Destructive — cannot be undone.</span>
|
|
</div>
|
|
<div class="mt-3 px-3 py-3 rounded-[5px]"
|
|
style="background: color-mix(in oklch, var(--bad), transparent 92%); border: 1px solid color-mix(in oklch, var(--bad), transparent 60%);">
|
|
<div class="text-[11px] text-bad uppercase tracking-[0.08em] font-medium">Confirm host name</div>
|
|
<div class="text-[11.5px] text-ink-mute mt-1 leading-[1.55]">
|
|
Type <span class="mono text-ink">{{$host.Name}}</span> to enable this option.
|
|
</div>
|
|
<input type="text" name="confirm_hostname" class="field mono mt-2"
|
|
placeholder="{{$host.Name}}"
|
|
value="{{$page.FormConfirmHN}}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{/* ============ STEP 4 — confirm ============ */}}
|
|
<section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
|
|
<header class="flex items-center justify-between px-[18px] py-[14px]"
|
|
style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
|
|
<div class="flex items-center gap-3">
|
|
<span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
|
|
style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">4</span>
|
|
<div>
|
|
<div class="text-[14px] font-medium">Confirm & start</div>
|
|
<div class="text-[12px] text-ink-mute mt-0.5">Final review. Logs and progress will stream live.</div>
|
|
</div>
|
|
</div>
|
|
<span class="mono text-[11px] text-ink-fade">step 4 of 4</span>
|
|
</header>
|
|
<div class="px-[18px] pb-[18px]" id="confirm-summary">
|
|
<div class="text-[12px] text-ink-mute py-2">A summary will appear here once you've made your selections.</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{/* sticky-style action bar */}}
|
|
<div class="rounded-[8px] border border-line-soft px-[18px] py-[14px] flex items-center justify-between"
|
|
style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
|
|
<div class="text-[12.5px] text-ink-mute">
|
|
Audit row <span class="mono text-ink-mid">host.restore</span> will be written on dispatch.
|
|
</div>
|
|
<div class="flex items-center gap-2.5">
|
|
<a href="/hosts/{{$host.ID}}" class="btn">Back</a>
|
|
<button type="submit" id="dispatch-btn" class="btn btn-primary btn-lg" {{if not $page.Online}}disabled title="agent is offline"{{end}}>
|
|
Start restore →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{{/* Lightweight JS to drive the live tally + summary card + tree toggle.
|
|
The tree-toggle is plain fetch (not HTMX) so its target lookup is
|
|
trivial — the .tree-children div is always the next sibling
|
|
inside the same .tree-pair wrapper. */}}
|
|
<script>
|
|
window.__rmTreeToggle = function(btn) {
|
|
var pair = btn.closest('.tree-pair');
|
|
if (!pair) return;
|
|
var kids = pair.querySelector(':scope > .tree-children');
|
|
if (!kids) return;
|
|
var loaded = btn.getAttribute('data-loaded') === 'true';
|
|
if (!loaded) {
|
|
var url = btn.getAttribute('data-tree-url');
|
|
btn.disabled = true;
|
|
fetch(url, { credentials: 'same-origin' })
|
|
.then(function(r) { return r.text(); })
|
|
.then(function(html) {
|
|
kids.innerHTML = html;
|
|
kids.classList.remove('hidden');
|
|
btn.textContent = '▾';
|
|
btn.setAttribute('data-loaded', 'true');
|
|
btn.disabled = false;
|
|
// Notify the wizard's recompute() that tally state may have changed.
|
|
document.body.dispatchEvent(new CustomEvent('tree:loaded'));
|
|
})
|
|
.catch(function(e) {
|
|
kids.innerHTML = '<div class="px-3 py-2 mono text-[12px] text-bad">load failed: ' + e + '</div>';
|
|
kids.classList.remove('hidden');
|
|
btn.textContent = '▾';
|
|
btn.disabled = false;
|
|
});
|
|
return;
|
|
}
|
|
kids.classList.toggle('hidden');
|
|
btn.textContent = kids.classList.contains('hidden') ? '▸' : '▾';
|
|
};
|
|
(function() {
|
|
const form = document.getElementById('restore-form');
|
|
if (!form) return;
|
|
const tallyCount = document.getElementById('tally-count');
|
|
const tallyPaths = document.getElementById('tally-paths');
|
|
const dispatchBtn = document.getElementById('dispatch-btn');
|
|
const summary = document.getElementById('confirm-summary');
|
|
const inplaceRadio = document.querySelector('input[name="target_mode"][value="in_place"]');
|
|
const newRadio = document.querySelector('input[name="target_mode"][value="new_dir"]');
|
|
const newCard = document.getElementById('target-new-card');
|
|
const inplaceCard = document.getElementById('target-inplace-card');
|
|
const confirmInput = document.querySelector('input[name="confirm_hostname"]');
|
|
const hostName = {{$host.Name | js}};
|
|
const defaultTarget = {{$page.DefaultTargetDir | js}};
|
|
const selectedSnapID = {{if $page.Selected}}{{$page.Selected.ShortID | js}}{{else}}""{{end}};
|
|
const selectedSnapTime = {{if $page.Selected}}{{$page.Selected.Time.Format "2006-01-02 15:04 MST" | js}}{{else}}""{{end}};
|
|
|
|
function getCheckedPaths() {
|
|
return Array.from(form.querySelectorAll('input[name="paths"]:checked')).map(i => i.value);
|
|
}
|
|
function recompute() {
|
|
const paths = getCheckedPaths();
|
|
const count = paths.length;
|
|
if (tallyCount) tallyCount.textContent = count + ' file' + (count === 1 ? '' : 's') + ' selected';
|
|
if (tallyPaths) {
|
|
tallyPaths.textContent = count === 0 ? 'tick a file or directory above'
|
|
: paths.slice(0, 4).join(' · ') + (count > 4 ? ' …' : '');
|
|
}
|
|
// Card emphasis on radio change
|
|
if (newCard && inplaceCard && inplaceRadio && newRadio) {
|
|
const isInPlace = inplaceRadio.checked;
|
|
newCard.style.borderColor = isInPlace ? 'var(--line-soft)' : 'color-mix(in oklch, var(--accent), transparent 50%)';
|
|
newCard.style.background = isInPlace ? 'var(--bg)' : 'color-mix(in oklch, var(--accent), transparent 95%)';
|
|
inplaceCard.style.borderColor = isInPlace ? 'color-mix(in oklch, var(--bad), transparent 35%)' : 'color-mix(in oklch, var(--bad), transparent 70%)';
|
|
inplaceCard.style.background = isInPlace ? 'color-mix(in oklch, var(--bad), transparent 90%)' : 'color-mix(in oklch, var(--bad), transparent 96%)';
|
|
}
|
|
// Dispatch button state
|
|
if (dispatchBtn) {
|
|
const inPlace = inplaceRadio && inplaceRadio.checked;
|
|
const okConfirm = !inPlace || (confirmInput && confirmInput.value.trim() === hostName);
|
|
const enabled = count > 0 && okConfirm;
|
|
dispatchBtn.disabled = !enabled || !{{if $page.Online}}true{{else}}false{{end}};
|
|
dispatchBtn.textContent = inPlace ? 'Start restore (overwrite) →' : 'Start restore →';
|
|
if (inPlace) dispatchBtn.classList.add('btn-danger'); else dispatchBtn.classList.remove('btn-danger');
|
|
}
|
|
// Summary card
|
|
if (summary) {
|
|
if (count === 0) {
|
|
summary.innerHTML = '<div class="text-[12px] text-ink-mute py-2">A summary will appear here once you\'ve made your selections.</div>';
|
|
} else {
|
|
const inPlace = inplaceRadio && inplaceRadio.checked;
|
|
const escTarget = defaultTarget
|
|
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
|
const targetLine = inPlace
|
|
? '<span class="text-bad">in place · originals will be overwritten</span>'
|
|
: '<span class="text-ink">New directory</span> <span class="text-ink-fade mx-2">·</span> <span class="mono text-ink-mid">' + escTarget + '</span>';
|
|
const ownLine = 'preserved (uid/gid/mode/mtime)';
|
|
const pathLines = paths.slice(0, 12).map(p => '<div>' + p + '</div>').join('');
|
|
const more = paths.length > 12 ? ('<div class="text-ink-fade">… and ' + (paths.length - 12) + ' more</div>') : '';
|
|
summary.innerHTML = `
|
|
<div class="rounded-[6px] border border-line-soft p-3.5 bg-bg">
|
|
<div class="grid gap-y-2.5" style="grid-template-columns: 140px 1fr; column-gap: 18px; font-size: 13px;">
|
|
<span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Source</span>
|
|
<div>snapshot <span class="mono text-accent">${selectedSnapID}</span> · <span class="text-ink-mid">${selectedSnapTime}</span></div>
|
|
<span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Paths</span>
|
|
<div>
|
|
<span class="text-ink">${count} file${count === 1 ? '' : 's'}</span>
|
|
<div class="mono text-[11.5px] text-ink-mute mt-1.5 leading-[1.7]">${pathLines}${more}</div>
|
|
</div>
|
|
<span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Target</span>
|
|
<div>${targetLine}</div>
|
|
<span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Ownership</span>
|
|
<div class="text-ink-mute">${ownLine}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
// Recompute on any change in the form (path checks, radio swap, typed-confirm).
|
|
form.addEventListener('change', recompute);
|
|
form.addEventListener('input', recompute);
|
|
// Also after HTMX swaps in tree fragments (so initial state is right).
|
|
document.body.addEventListener('htmx:afterSwap', recompute);
|
|
recompute();
|
|
})();
|
|
</script>
|
|
|
|
{{end}}
|