dennisthiessen
6d951bd760
The Jobs panel only surfaced live progress; once a job finished you couldn't see when it ran, whether it succeeded, or its message (e.g. a regime/collector error). Add a "Last run <ago> · <status> — <message>" line per job, colored by status, from the runtime_* fields the backend already returns. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
238 lines
9.7 KiB
TypeScript
238 lines
9.7 KiB
TypeScript
import { useJobs, useToggleJob, useTriggerJob } from '../../hooks/useAdmin';
|
|
import { SkeletonTable } from '../ui/Skeleton';
|
|
|
|
function formatNextRun(iso: string | null): string {
|
|
if (!iso) return '—';
|
|
const d = new Date(iso);
|
|
const now = new Date();
|
|
const diffMs = d.getTime() - now.getTime();
|
|
if (diffMs < 0) return 'imminent';
|
|
const mins = Math.round(diffMs / 60_000);
|
|
if (mins < 60) return `in ${mins}m`;
|
|
const hrs = Math.round(mins / 60);
|
|
return `in ${hrs}h`;
|
|
}
|
|
|
|
function formatAgo(iso: string | null | undefined): string {
|
|
if (!iso) return '';
|
|
const mins = Math.floor((Date.now() - new Date(iso).getTime()) / 60_000);
|
|
if (mins < 1) return 'just now';
|
|
if (mins < 60) return `${mins}m ago`;
|
|
const hrs = Math.floor(mins / 60);
|
|
if (hrs < 24) return `${hrs}h ago`;
|
|
return `${Math.floor(hrs / 24)}d ago`;
|
|
}
|
|
|
|
function lastRunColor(status: string | null | undefined): string {
|
|
if (status === 'error') return 'text-red-300';
|
|
if (status === 'rate_limited') return 'text-amber-300';
|
|
return 'text-gray-500';
|
|
}
|
|
|
|
export function JobControls() {
|
|
const { data: jobs, isLoading } = useJobs();
|
|
const toggleJob = useToggleJob();
|
|
const triggerJob = useTriggerJob();
|
|
const anyJobRunning = (jobs ?? []).some((job) => job.running);
|
|
const runningJob = jobs?.find((job) => job.running);
|
|
const pausedJob = jobs?.find((job) => !job.running && job.runtime_status === 'rate_limited');
|
|
const runningJobLabel = runningJob?.label;
|
|
|
|
if (isLoading) return <SkeletonTable rows={4} cols={3} />;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{runningJob && (
|
|
<div className="rounded-xl border border-blue-400/30 bg-blue-500/10 px-4 py-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-xs font-semibold text-blue-300">
|
|
Active job: {runningJob.label}
|
|
</div>
|
|
<div className="mt-0.5 text-[11px] text-blue-100/80">
|
|
Manual triggers are blocked until this run finishes.
|
|
</div>
|
|
</div>
|
|
<div className="text-[11px] text-blue-200">
|
|
{runningJob.runtime_processed ?? 0}
|
|
{typeof runningJob.runtime_total === 'number'
|
|
? ` / ${runningJob.runtime_total}`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 h-1.5 w-full rounded-full bg-slate-700/80 overflow-hidden">
|
|
<div
|
|
className="h-full bg-blue-400 transition-all duration-500"
|
|
style={{
|
|
width: `${
|
|
typeof runningJob.runtime_progress_pct === 'number'
|
|
? Math.max(5, Math.min(100, runningJob.runtime_progress_pct))
|
|
: 30
|
|
}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
{runningJob.runtime_current_ticker && (
|
|
<div className="mt-1 text-[11px] text-blue-100/80">
|
|
Current: {runningJob.runtime_current_ticker}
|
|
</div>
|
|
)}
|
|
{runningJob.runtime_message && (
|
|
<div className="mt-1 text-[11px] text-blue-100/80">
|
|
{runningJob.runtime_message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{!runningJob && pausedJob && (
|
|
<div className="rounded-xl border border-amber-400/30 bg-amber-500/10 px-4 py-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-xs font-semibold text-amber-300">
|
|
Last run paused: {pausedJob.label}
|
|
</div>
|
|
<div className="mt-0.5 text-[11px] text-amber-100/90">
|
|
{pausedJob.runtime_message || 'Rate limit hit. The collector stopped early and will resume from last progress on the next run.'}
|
|
</div>
|
|
</div>
|
|
<div className="text-[11px] text-amber-200">
|
|
{pausedJob.runtime_processed ?? 0}
|
|
{typeof pausedJob.runtime_total === 'number'
|
|
? ` / ${pausedJob.runtime_total}`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{jobs?.map((job) => (
|
|
<div key={job.name} className="glass p-4 glass-hover">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3">
|
|
{/* Status dot */}
|
|
<span
|
|
className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${
|
|
job.running
|
|
? 'bg-blue-400 shadow-lg shadow-blue-400/40'
|
|
: job.enabled
|
|
? 'bg-emerald-400 shadow-lg shadow-emerald-400/40'
|
|
: 'bg-gray-500'
|
|
}`}
|
|
/>
|
|
<div>
|
|
<span className="text-sm font-medium text-gray-200">{job.label}</span>
|
|
<div className="flex items-center gap-3 mt-0.5">
|
|
<span
|
|
className={`text-[11px] font-medium ${
|
|
job.running
|
|
? 'text-blue-300'
|
|
: job.runtime_status === 'rate_limited'
|
|
? 'text-amber-300'
|
|
: job.runtime_status === 'error'
|
|
? 'text-red-300'
|
|
: job.enabled
|
|
? 'text-emerald-400'
|
|
: 'text-gray-500'
|
|
}`}
|
|
>
|
|
{job.running
|
|
? 'Running'
|
|
: job.runtime_status === 'rate_limited'
|
|
? 'Paused (rate-limited)'
|
|
: job.runtime_status === 'error'
|
|
? 'Last run error'
|
|
: job.enabled
|
|
? 'Active'
|
|
: 'Inactive'}
|
|
</span>
|
|
{job.enabled && job.next_run_at && (
|
|
<span className="text-[11px] text-gray-500">
|
|
Next run {formatNextRun(job.next_run_at)}
|
|
</span>
|
|
)}
|
|
{!job.registered && (
|
|
<span className="text-[11px] text-red-400">Not registered</span>
|
|
)}
|
|
</div>
|
|
{!job.running && job.runtime_finished_at && (
|
|
<div className={`mt-1 text-[11px] ${lastRunColor(job.runtime_status)}`}>
|
|
Last run {formatAgo(job.runtime_finished_at)}
|
|
{job.runtime_status ? ` · ${job.runtime_status}` : ''}
|
|
{job.runtime_message ? ` — ${job.runtime_message}` : ''}
|
|
</div>
|
|
)}
|
|
{job.running && (
|
|
<div className="mt-2 space-y-1.5">
|
|
<div className="flex items-center justify-between text-[11px] text-gray-400">
|
|
<span>
|
|
{job.runtime_processed ?? 0}
|
|
{typeof job.runtime_total === 'number' ? ` / ${job.runtime_total}` : ''}
|
|
{' '}processed
|
|
</span>
|
|
{typeof job.runtime_progress_pct === 'number' && (
|
|
<span>{Math.max(0, Math.min(100, job.runtime_progress_pct)).toFixed(0)}%</span>
|
|
)}
|
|
</div>
|
|
<div className="h-1.5 w-56 rounded-full bg-slate-700/80 overflow-hidden">
|
|
<div
|
|
className="h-full bg-blue-400 transition-all duration-500"
|
|
style={{
|
|
width: `${
|
|
typeof job.runtime_progress_pct === 'number'
|
|
? Math.max(5, Math.min(100, job.runtime_progress_pct))
|
|
: 30
|
|
}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
{job.runtime_current_ticker && (
|
|
<div className="text-[11px] text-gray-500">Current: {job.runtime_current_ticker}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleJob.mutate({ jobName: job.name, enabled: !job.enabled })}
|
|
disabled={toggleJob.isPending}
|
|
className={`rounded-lg border px-3 py-1.5 text-xs transition-all duration-200 disabled:opacity-50 ${
|
|
job.enabled
|
|
? 'border-red-500/20 bg-red-500/10 text-red-400 hover:bg-red-500/20'
|
|
: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
|
|
}`}
|
|
>
|
|
{job.enabled ? 'Disable' : 'Enable'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => triggerJob.mutate(job.name)}
|
|
disabled={triggerJob.isPending || !job.enabled || anyJobRunning}
|
|
className="btn-primary px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<span>
|
|
{job.running
|
|
? 'Running…'
|
|
: triggerJob.isPending
|
|
? 'Triggering…'
|
|
: anyJobRunning
|
|
? 'Blocked'
|
|
: 'Trigger Now'}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{anyJobRunning && !job.running && (
|
|
<div className="mt-2 text-[11px] text-gray-500">
|
|
Manual trigger blocked while {runningJobLabel ?? 'another job'} is running.
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|