import { Head, router } from '@inertiajs/react'; import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react'; import { Fragment, useState } from 'react'; import { AdminSurface, AdminSurfaceBar } from '@/components/admin-surface'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { Button } from '@/components/ui/button'; import AdminLayout from '@/layouts/admin-layout'; import { useT } from '@/lib/i18n'; import { dashboard as adminDashboard } from '@/routes/admin'; import { failed as adminFailedJobsIndex } from '@/routes/admin/jobs'; import { flush as adminFailedJobsFlush, forget as adminFailedJobForget, retry as adminFailedJobRetry, retryAll as adminFailedJobsRetryAll, show as adminFailedJobShow, } from '@/routes/admin/jobs/failed'; type FailedJob = { id: number; uuid: string; connection: string; queue: string; job: string; failed_at: string; exception_first_line: string; }; type Props = { jobs: FailedJob[]; total: number; }; type DetailState = { loading: boolean; exception?: string; error?: string; }; export default function FailedJobsPage({ jobs, total }: Props) { const { t } = useT(); const confirm = useConfirm(); const [openUuid, setOpenUuid] = useState(null); const [detail, setDetail] = useState>({}); const toggle = async (uuid: string) => { if (openUuid === uuid) { setOpenUuid(null); return; } setOpenUuid(uuid); if (detail[uuid]?.exception) { return; } setDetail((d) => ({ ...d, [uuid]: { loading: true } })); try { const r = await fetch(adminFailedJobShow.url(uuid), { credentials: 'same-origin', headers: { Accept: 'application/json' }, }); if (!r.ok) { throw new Error(`HTTP ${r.status}`); } const j = await r.json(); setDetail((d) => ({ ...d, [uuid]: { loading: false, exception: j.data.exception }, })); } catch (e) { setDetail((d) => ({ ...d, [uuid]: { loading: false, error: e instanceof Error ? e.message : t('Fetch failed'), }, })); } }; return ( {t('Queue Failures')} {t(':count total', { count: total.toLocaleString() })} {jobs.length > 0 ? (
) : null}
{jobs.length === 0 ? (
{t('No queue failures. Queue health is good.')}
) : (
{jobs.map((job) => { const isOpen = openUuid === job.uuid; const d = detail[job.uuid]; return ( {isOpen && ( )} ); })}
{t('Job')} {t('Queue')} {t('Failed at')} {t('Exception')} {t('Actions')}
{job.job} {job.queue} {new Date( job.failed_at, ).toLocaleString()} toggle(job.uuid) } > { job.exception_first_line } {' '}
{d?.loading && (

{t( 'loading stack trace...', )}

)} {d?.error && (

{d.error}

)} {d?.exception && ( 
                                                                    {
                                                                        d.exception
                                                                    }
)}
)}
); }