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>
|
</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
|
||||||
|
|||||||
Reference in New Issue
Block a user