60 lines
2.7 KiB
React
60 lines
2.7 KiB
React
export function JobStatusPanel({ job }) {
|
|
const percent = Math.round(job?.progress?.percent || 0);
|
|
|
|
return (
|
|
<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 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'} />
|
|
<Info label="Progress" value={job ? `${percent}%` : '-'} />
|
|
<Info label="Started" value={formatTime(job?.startedAt)} />
|
|
<Info label="Finished" value={formatTime(job?.finishedAt)} />
|
|
{job?.error ? <Info label="Error" value={job.error} tone="text-red-300" /> : null}
|
|
</dl>
|
|
<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 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 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>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Info({ label, value, tone = 'text-zinc-300' }) {
|
|
return (
|
|
<div>
|
|
<dt className="text-xs uppercase tracking-wide text-zinc-500">{label}</dt>
|
|
<dd className={`mt-1 break-words ${tone}`}>{value}</dd>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function statusClass(status) {
|
|
if (status === 'success') return 'border-emerald-800 bg-emerald-950 text-emerald-300';
|
|
if (status === 'failed') return 'border-red-800 bg-red-950 text-red-300';
|
|
if (status === 'running' || status === 'queued') return 'border-cyan-800 bg-cyan-950 text-cyan-300';
|
|
return 'border-zinc-800 bg-zinc-950 text-zinc-400';
|
|
}
|
|
|
|
function formatTime(value) {
|
|
if (!value) return '-';
|
|
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'medium' }).format(new Date(value));
|
|
}
|