Big refactoring
This commit is contained in:
Dennis Thiessen
@@ -17,11 +17,79 @@ 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">
|
||||
@@ -29,7 +97,9 @@ export function JobControls() {
|
||||
{/* Status dot */}
|
||||
<span
|
||||
className={`inline-block h-2.5 w-2.5 rounded-full shrink-0 ${
|
||||
job.enabled
|
||||
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'
|
||||
}`}
|
||||
@@ -37,8 +107,28 @@ export function JobControls() {
|
||||
<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.enabled ? 'text-emerald-400' : 'text-gray-500'}`}>
|
||||
{job.enabled ? 'Active' : 'Inactive'}
|
||||
<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">
|
||||
@@ -49,6 +139,35 @@ export function JobControls() {
|
||||
<span className="text-[11px] text-red-400">Not registered</span>
|
||||
)}
|
||||
</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>
|
||||
|
||||
@@ -68,13 +187,26 @@ export function JobControls() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => triggerJob.mutate(job.name)}
|
||||
disabled={triggerJob.isPending || !job.enabled}
|
||||
disabled={triggerJob.isPending || !job.enabled || anyJobRunning}
|
||||
className="btn-gradient px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span>{triggerJob.isPending ? 'Triggering…' : 'Trigger Now'}</span>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user