philipp/incus-backup-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added disk restore only and changed UI

Browse Source
This commit is contained in:
Philipp
2026-05-21 11:10:12 +02:00
parent 05f4fda8af
commit bef27416bf
4 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/JobStatusPanel.jsx
+5 -5
View File
@@ -2,14 +2,14 @@ export function JobStatusPanel({ job }) {
const percent = Math.round(job?.progress?.percent || 0);
return (
<section className="rounded-md border border-zinc-800 bg-zinc-900/70">
<section className="min-w-0 overflow-hidden rounded-md border border-zinc-800 bg-zinc-900/70">
<div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
<h2 className="text-sm font-semibold">Job Status</h2>
<span className={`rounded-md border px-2 py-1 text-xs ${statusClass(job?.status)}`}>
{job?.status || 'idle'}
</span>
</div>
<div className="grid gap-4 p-4 lg:grid-cols-[280px_1fr]">
<div className="grid min-w-0 gap-4 p-4 lg:grid-cols-[280px_minmax(0,1fr)]">
<dl className="space-y-3 text-sm">
<Info label="Type" value={job?.type || '-'} />
<Info label="Current Step" value={job?.currentStep || 'No active job'} />
@@ -18,17 +18,17 @@ export function JobStatusPanel({ job }) {
<Info label="Finished" value={formatTime(job?.finishedAt)} />
{job?.error ? <Info label="Error" value={job.error} tone="text-red-300" /> : null}
</dl>
<div className="space-y-3">
<div className="min-w-0 space-y-3">
<div className="rounded-md border border-zinc-800 bg-zinc-950 p-3">
<div className="mb-2 flex items-center justify-between gap-3 text-xs text-zinc-400">
<span>{job?.progress?.detail || job?.currentStep || 'No active job'}</span>
<span className="min-w-0 truncate">{job?.progress?.detail || job?.currentStep || 'No active job'}</span>
<span className="font-mono text-zinc-300">{job ? `${percent}%` : '-'}</span>
</div>
<div className="h-2 overflow-hidden rounded-md bg-zinc-800">
<div className="h-full bg-cyan-400 transition-all" style={{ width: `${job ? percent : 0}%` }} />
</div>
</div>
<pre className="max-h-80 overflow-auto rounded-md border border-zinc-800 bg-zinc-950 p-3 text-xs leading-5 text-zinc-300">
<pre className="max-h-80 max-w-full overflow-auto rounded-md border border-zinc-800 bg-zinc-950 p-3 text-xs leading-5 text-zinc-300">
{(job?.logs || ['No logs yet.']).join('\n')}
</pre>
</div>