forked from 0xWheatyz/SPARC
feat: add loading skeletons, error states, and empty state to Batch page
Add a Job History section that loads past jobs via useQuery with: - Animated skeleton placeholders while the job list is loading - Error banner with retry button when the API call fails - Empty state with helpful message when no jobs exist - Job list cards with status badges and progress bars Also improve the batch submission error state with a retry button alongside the existing dismiss button. Closes leeworks-agents/SPARC#343 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
agent-company
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { analysisApi } from '../api/client';
|
||||
import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp, RefreshCw, Inbox } from 'lucide-react';
|
||||
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
|
||||
import type { BatchAnalysisResult } from '../types';
|
||||
|
||||
@@ -11,10 +11,18 @@ export function Batch() {
|
||||
const [result, setResult] = useState<BatchAnalysisResult | null>(null);
|
||||
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
|
||||
|
||||
const jobsQuery = useQuery({
|
||||
queryKey: ['jobs'],
|
||||
queryFn: () => analysisApi.listJobs(undefined, 20),
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: ({ companies, workers }: { companies: string[]; workers: number }) =>
|
||||
analysisApi.analyzeBatch(companies, workers),
|
||||
onSuccess: (data) => setResult(data),
|
||||
onSuccess: (data) => {
|
||||
setResult(data);
|
||||
jobsQuery.refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
@@ -123,12 +131,29 @@ export function Batch() {
|
||||
{mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
|
||||
{' '}Check your connection and try again.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => mutation.reset()}
|
||||
className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
<div className="ml-7 mt-2 flex items-center gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
const companies = companiesInput
|
||||
.split(/[,\n]/)
|
||||
.map((c) => c.trim())
|
||||
.filter((c) => c.length > 0);
|
||||
if (companies.length > 0) {
|
||||
mutation.mutate({ companies, workers: maxWorkers });
|
||||
}
|
||||
}}
|
||||
className="text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Retry
|
||||
</button>
|
||||
<button
|
||||
onClick={() => mutation.reset()}
|
||||
className="text-sm text-text-secondary hover:text-text-primary underline"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -230,6 +255,123 @@ export function Batch() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Job History */}
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
|
||||
Job History
|
||||
</h3>
|
||||
|
||||
{/* Loading skeleton */}
|
||||
{jobsQuery.isLoading && (
|
||||
<div className="space-y-3">
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="bg-bg-card/60 border border-primary/15 rounded-xl p-4 animate-pulse"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-5 w-5 rounded-full bg-primary/20" />
|
||||
<div className="h-4 w-32 rounded bg-primary/20" />
|
||||
<div className="h-4 w-20 rounded bg-primary/10" />
|
||||
</div>
|
||||
<div className="h-6 w-20 rounded-full bg-primary/15" />
|
||||
</div>
|
||||
<div className="mt-3 flex gap-4">
|
||||
<div className="h-3 w-24 rounded bg-primary/10" />
|
||||
<div className="h-3 w-16 rounded bg-primary/10" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Job history error */}
|
||||
{jobsQuery.isError && (
|
||||
<div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
|
||||
<div className="flex items-center gap-2 text-error">
|
||||
<AlertCircle size={18} />
|
||||
<span className="font-semibold">Failed to load job history</span>
|
||||
</div>
|
||||
<p className="text-text-secondary text-sm mt-1 ml-7">
|
||||
{jobsQuery.error instanceof Error ? jobsQuery.error.message : 'Could not retrieve past jobs.'}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => jobsQuery.refetch()}
|
||||
className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
|
||||
>
|
||||
<RefreshCw size={14} />
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{jobsQuery.isSuccess && jobsQuery.data.length === 0 && !result && (
|
||||
<div className="bg-bg-card/60 border border-primary/15 border-dashed rounded-xl p-8 text-center">
|
||||
<Inbox className="mx-auto text-text-secondary/40 mb-3" size={40} />
|
||||
<p className="text-text-secondary font-medium">No batch jobs yet</p>
|
||||
<p className="text-text-secondary/70 text-sm mt-1">
|
||||
Submit a batch analysis above to get started. Your job history will appear here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Job list */}
|
||||
{jobsQuery.isSuccess && jobsQuery.data.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{jobsQuery.data.map((job) => (
|
||||
<div
|
||||
key={job.job_id}
|
||||
className="bg-bg-card/60 border border-primary/15 rounded-xl p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{job.status === 'completed' && <CheckCircle className="text-success" size={18} />}
|
||||
{job.status === 'failed' && <AlertCircle className="text-error" size={18} />}
|
||||
{(job.status === 'pending' || job.status === 'running') && (
|
||||
<div className="animate-spin rounded-full h-[18px] w-[18px] border-t-2 border-b-2 border-secondary" />
|
||||
)}
|
||||
<span className="font-mono text-sm text-text-primary">{job.job_id.slice(0, 8)}</span>
|
||||
<span className="text-text-secondary text-sm">
|
||||
{job.total_companies} {job.total_companies === 1 ? 'company' : 'companies'}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
|
||||
job.status === 'completed'
|
||||
? 'bg-success/15 text-success'
|
||||
: job.status === 'failed'
|
||||
? 'bg-error/15 text-error'
|
||||
: 'bg-secondary/15 text-secondary'
|
||||
}`}
|
||||
>
|
||||
{job.status}
|
||||
</span>
|
||||
</div>
|
||||
{(job.status === 'running' || job.status === 'pending') && job.total_companies > 0 && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between text-xs text-text-secondary mb-1">
|
||||
<span>Progress</span>
|
||||
<span>{job.completed_companies}/{job.total_companies}</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-bg-dark rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300"
|
||||
style={{ width: `${(job.completed_companies / job.total_companies) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{job.status === 'failed' && job.error && (
|
||||
<p className="mt-2 text-sm text-error/80">{job.error}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user