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:
@@ -501,8 +501,8 @@ export default function AdminDashboard() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border-light">
|
||||
{top_products.map((p) => (
|
||||
<tr key={p.pim_id}>
|
||||
{top_products.map((p, i) => (
|
||||
<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 text-content truncate max-w-[160px]">{p.product_name || '—'}</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'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
cad_file_id: string
|
||||
original_name: string
|
||||
processing_status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
interface ActivityResponse {
|
||||
cad_processing: ActivityEntry[]
|
||||
render_jobs: ActivityEntry[]
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
@@ -20,11 +25,11 @@ function Skeleton() {
|
||||
}
|
||||
|
||||
export default function QueueStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
const { data, isLoading, error } = useQuery<ActivityResponse>({
|
||||
queryKey: ['worker-activity-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
return res.data as ActivityResponse
|
||||
},
|
||||
refetchInterval: 15_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>
|
||||
}
|
||||
|
||||
const entries = data ?? []
|
||||
const processing = entries.filter((e) => e.status === 'processing').length
|
||||
const failed = entries.filter((e) => e.status === 'failed').length
|
||||
const entries = data?.cad_processing ?? []
|
||||
const processing = entries.filter((e) => e.processing_status === 'processing').length
|
||||
const failed = entries.filter((e) => e.processing_status === 'failed').length
|
||||
const recent = entries.slice(0, 5)
|
||||
|
||||
const statusDot = processing > 0
|
||||
@@ -71,26 +76,26 @@ export default function QueueStatusWidget() {
|
||||
)}
|
||||
{recent.map((entry) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
key={entry.cad_file_id}
|
||||
className="flex items-center gap-2 rounded px-2 py-1.5 text-xs"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface)' }}
|
||||
>
|
||||
<Activity size={12} className="text-content-muted shrink-0" />
|
||||
<span className="flex-1 truncate text-content-secondary" title={entry.filename}>
|
||||
{entry.filename}
|
||||
<span className="flex-1 truncate text-content-secondary" title={entry.original_name}>
|
||||
{entry.original_name}
|
||||
</span>
|
||||
<span
|
||||
className={`font-medium shrink-0 ${
|
||||
entry.status === 'completed'
|
||||
entry.processing_status === 'completed'
|
||||
? 'text-green-600'
|
||||
: entry.status === 'failed'
|
||||
: entry.processing_status === 'failed'
|
||||
? 'text-red-500'
|
||||
: entry.status === 'processing'
|
||||
: entry.processing_status === 'processing'
|
||||
? 'text-blue-500'
|
||||
: 'text-content-muted'
|
||||
}`}
|
||||
>
|
||||
{entry.status}
|
||||
{entry.processing_status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -3,13 +3,18 @@ import { Cpu } from 'lucide-react'
|
||||
import api from '../../../api/client'
|
||||
|
||||
interface ActivityEntry {
|
||||
id: string
|
||||
filename: string
|
||||
status: string
|
||||
cad_file_id: string
|
||||
original_name: string
|
||||
processing_status: string
|
||||
created_at: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
interface ActivityResponse {
|
||||
cad_processing: ActivityEntry[]
|
||||
render_jobs: ActivityEntry[]
|
||||
}
|
||||
|
||||
function Skeleton() {
|
||||
return (
|
||||
<div className="animate-pulse space-y-2">
|
||||
@@ -20,11 +25,11 @@ function Skeleton() {
|
||||
}
|
||||
|
||||
export default function WorkerStatusWidget() {
|
||||
const { data, isLoading, error } = useQuery<ActivityEntry[]>({
|
||||
const { data, isLoading, error } = useQuery<ActivityResponse>({
|
||||
queryKey: ['worker-status-widget'],
|
||||
queryFn: async () => {
|
||||
const res = await api.get('/worker/activity')
|
||||
return res.data as ActivityEntry[]
|
||||
return res.data as ActivityResponse
|
||||
},
|
||||
refetchInterval: 15_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>
|
||||
}
|
||||
|
||||
const entries = data ?? []
|
||||
const processing = entries.filter((e) => e.status === 'processing')
|
||||
const failed = entries.filter((e) => e.status === 'failed')
|
||||
const completed = entries.filter((e) => e.status === 'completed')
|
||||
const entries = data?.cad_processing ?? []
|
||||
const processing = entries.filter((e) => e.processing_status === 'processing')
|
||||
const failed = entries.filter((e) => e.processing_status === 'failed')
|
||||
const completed = entries.filter((e) => e.processing_status === 'completed')
|
||||
|
||||
const overallStatus =
|
||||
processing.length > 0
|
||||
|
||||
Reference in New Issue
Block a user