fix(dashboard): fix widget crashes on /worker/activity response shape

- QueueStatusWidget + WorkerStatusWidget expected res.data to be ActivityEntry[]
  but /api/worker/activity returns {cad_processing: [...], render_jobs: [...]}
  → TypeError: entries.filter is not a function → blank screen (no error boundary)
- Both widgets now use ActivityResponse interface and read data?.cad_processing
- Field names updated: id→cad_file_id, filename→original_name, status→processing_status
- AdminDashboard: fix duplicate React key in top_products table (pim_id can repeat)
  → use index suffix to guarantee unique keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-06 22:06:55 +01:00
parent f1e02ded78
commit 208eb21988
3 changed files with 36 additions and 26 deletions
@@ -501,8 +501,8 @@ export default function AdminDashboard() {
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border-light"> <tbody className="divide-y divide-border-light">
{top_products.map((p) => ( {top_products.map((p, i) => (
<tr key={p.pim_id}> <tr key={`${p.pim_id}-${i}`}>
<td className="py-1.5 pr-3 font-mono text-xs text-content-muted">{p.pim_id}</td> <td className="py-1.5 pr-3 font-mono text-xs text-content-muted">{p.pim_id}</td>
<td className="py-1.5 pr-3 text-content truncate max-w-[160px]">{p.product_name || '—'}</td> <td className="py-1.5 pr-3 text-content truncate max-w-[160px]">{p.product_name || '—'}</td>
<td className="py-1.5 pr-3 text-content-muted">{p.category}</td> <td className="py-1.5 pr-3 text-content-muted">{p.category}</td>
@@ -3,12 +3,17 @@ import { Activity } from 'lucide-react'
import api from '../../../api/client' import api from '../../../api/client'
interface ActivityEntry { interface ActivityEntry {
id: string cad_file_id: string
filename: string original_name: string
status: string processing_status: string
created_at: string created_at: string
} }
interface ActivityResponse {
cad_processing: ActivityEntry[]
render_jobs: ActivityEntry[]
}
function Skeleton() { function Skeleton() {
return ( return (
<div className="animate-pulse space-y-2"> <div className="animate-pulse space-y-2">
@@ -20,11 +25,11 @@ function Skeleton() {
} }
export default function QueueStatusWidget() { export default function QueueStatusWidget() {
const { data, isLoading, error } = useQuery<ActivityEntry[]>({ const { data, isLoading, error } = useQuery<ActivityResponse>({
queryKey: ['worker-activity-widget'], queryKey: ['worker-activity-widget'],
queryFn: async () => { queryFn: async () => {
const res = await api.get('/worker/activity') const res = await api.get('/worker/activity')
return res.data as ActivityEntry[] return res.data as ActivityResponse
}, },
refetchInterval: 15_000, refetchInterval: 15_000,
staleTime: 10_000, staleTime: 10_000,
@@ -36,9 +41,9 @@ export default function QueueStatusWidget() {
return <p className="text-xs text-red-500">Failed to load queue status</p> return <p className="text-xs text-red-500">Failed to load queue status</p>
} }
const entries = data ?? [] const entries = data?.cad_processing ?? []
const processing = entries.filter((e) => e.status === 'processing').length const processing = entries.filter((e) => e.processing_status === 'processing').length
const failed = entries.filter((e) => e.status === 'failed').length const failed = entries.filter((e) => e.processing_status === 'failed').length
const recent = entries.slice(0, 5) const recent = entries.slice(0, 5)
const statusDot = processing > 0 const statusDot = processing > 0
@@ -71,26 +76,26 @@ export default function QueueStatusWidget() {
)} )}
{recent.map((entry) => ( {recent.map((entry) => (
<div <div
key={entry.id} key={entry.cad_file_id}
className="flex items-center gap-2 rounded px-2 py-1.5 text-xs" className="flex items-center gap-2 rounded px-2 py-1.5 text-xs"
style={{ backgroundColor: 'var(--color-bg-surface)' }} style={{ backgroundColor: 'var(--color-bg-surface)' }}
> >
<Activity size={12} className="text-content-muted shrink-0" /> <Activity size={12} className="text-content-muted shrink-0" />
<span className="flex-1 truncate text-content-secondary" title={entry.filename}> <span className="flex-1 truncate text-content-secondary" title={entry.original_name}>
{entry.filename} {entry.original_name}
</span> </span>
<span <span
className={`font-medium shrink-0 ${ className={`font-medium shrink-0 ${
entry.status === 'completed' entry.processing_status === 'completed'
? 'text-green-600' ? 'text-green-600'
: entry.status === 'failed' : entry.processing_status === 'failed'
? 'text-red-500' ? 'text-red-500'
: entry.status === 'processing' : entry.processing_status === 'processing'
? 'text-blue-500' ? 'text-blue-500'
: 'text-content-muted' : 'text-content-muted'
}`} }`}
> >
{entry.status} {entry.processing_status}
</span> </span>
</div> </div>
))} ))}
@@ -3,13 +3,18 @@ import { Cpu } from 'lucide-react'
import api from '../../../api/client' import api from '../../../api/client'
interface ActivityEntry { interface ActivityEntry {
id: string cad_file_id: string
filename: string original_name: string
status: string processing_status: string
created_at: string created_at: string
updated_at?: string updated_at?: string
} }
interface ActivityResponse {
cad_processing: ActivityEntry[]
render_jobs: ActivityEntry[]
}
function Skeleton() { function Skeleton() {
return ( return (
<div className="animate-pulse space-y-2"> <div className="animate-pulse space-y-2">
@@ -20,11 +25,11 @@ function Skeleton() {
} }
export default function WorkerStatusWidget() { export default function WorkerStatusWidget() {
const { data, isLoading, error } = useQuery<ActivityEntry[]>({ const { data, isLoading, error } = useQuery<ActivityResponse>({
queryKey: ['worker-status-widget'], queryKey: ['worker-status-widget'],
queryFn: async () => { queryFn: async () => {
const res = await api.get('/worker/activity') const res = await api.get('/worker/activity')
return res.data as ActivityEntry[] return res.data as ActivityResponse
}, },
refetchInterval: 15_000, refetchInterval: 15_000,
staleTime: 10_000, staleTime: 10_000,
@@ -36,10 +41,10 @@ export default function WorkerStatusWidget() {
return <p className="text-xs text-red-500">Failed to load worker status</p> return <p className="text-xs text-red-500">Failed to load worker status</p>
} }
const entries = data ?? [] const entries = data?.cad_processing ?? []
const processing = entries.filter((e) => e.status === 'processing') const processing = entries.filter((e) => e.processing_status === 'processing')
const failed = entries.filter((e) => e.status === 'failed') const failed = entries.filter((e) => e.processing_status === 'failed')
const completed = entries.filter((e) => e.status === 'completed') const completed = entries.filter((e) => e.processing_status === 'completed')
const overallStatus = const overallStatus =
processing.length > 0 processing.length > 0