feature/ISSUE-001-fail-record-list #11
@ -575,13 +575,18 @@ export default function ExecutionDetail() {
|
||||
);
|
||||
}
|
||||
|
||||
const FAILED_PAGE_SIZE = 10;
|
||||
|
||||
function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [retrying, setRetrying] = useState(false);
|
||||
const [page, setPage] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const failedRecords = records.filter((r) => r.status === 'FAILED');
|
||||
const totalPages = Math.ceil(records.length / FAILED_PAGE_SIZE);
|
||||
const pagedRecords = records.slice(page * FAILED_PAGE_SIZE, (page + 1) * FAILED_PAGE_SIZE);
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
@ -637,44 +642,53 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-red-100 text-red-700 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-2 py-1.5 font-medium">Record Key</th>
|
||||
<th className="px-2 py-1.5 font-medium">에러 메시지</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">재시도</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">상태</th>
|
||||
<th className="px-2 py-1.5 font-medium">생성 시간</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-red-100">
|
||||
{records.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="bg-white hover:bg-red-50"
|
||||
>
|
||||
<td className="px-2 py-1.5 font-mono text-red-900">
|
||||
{record.recordKey}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
|
||||
{record.errorMessage || '-'}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center text-red-900">
|
||||
{record.retryCount}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
|
||||
{record.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
|
||||
{formatDateTime(record.createdAt)}
|
||||
</td>
|
||||
<div className="mt-2">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-red-100 text-red-700">
|
||||
<tr>
|
||||
<th className="px-2 py-1.5 font-medium">Record Key</th>
|
||||
<th className="px-2 py-1.5 font-medium">에러 메시지</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">재시도</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">상태</th>
|
||||
<th className="px-2 py-1.5 font-medium">생성 시간</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-red-100">
|
||||
{pagedRecords.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="bg-white hover:bg-red-50"
|
||||
>
|
||||
<td className="px-2 py-1.5 font-mono text-red-900">
|
||||
{record.recordKey}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
|
||||
{record.errorMessage || '-'}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center text-red-900">
|
||||
{record.retryCount}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
|
||||
{record.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
|
||||
{formatDateTime(record.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
totalElements={records.length}
|
||||
pageSize={FAILED_PAGE_SIZE}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@ -626,13 +626,18 @@ export default function RecollectDetail() {
|
||||
);
|
||||
}
|
||||
|
||||
const FAILED_PAGE_SIZE = 10;
|
||||
|
||||
function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [retrying, setRetrying] = useState(false);
|
||||
const [page, setPage] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const failedRecords = records.filter((r) => r.status === 'FAILED');
|
||||
const totalPages = Math.ceil(records.length / FAILED_PAGE_SIZE);
|
||||
const pagedRecords = records.slice(page * FAILED_PAGE_SIZE, (page + 1) * FAILED_PAGE_SIZE);
|
||||
|
||||
const statusColor = (status: string) => {
|
||||
switch (status) {
|
||||
@ -688,44 +693,53 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-red-100 text-red-700 sticky top-0">
|
||||
<tr>
|
||||
<th className="px-2 py-1.5 font-medium">Record Key</th>
|
||||
<th className="px-2 py-1.5 font-medium">에러 메시지</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">재시도</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">상태</th>
|
||||
<th className="px-2 py-1.5 font-medium">생성 시간</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-red-100">
|
||||
{records.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="bg-white hover:bg-red-50"
|
||||
>
|
||||
<td className="px-2 py-1.5 font-mono text-red-900">
|
||||
{record.recordKey}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
|
||||
{record.errorMessage || '-'}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center text-red-900">
|
||||
{record.retryCount}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
|
||||
{record.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
|
||||
{formatDateTime(record.createdAt)}
|
||||
</td>
|
||||
<div className="mt-2">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-red-100 text-red-700">
|
||||
<tr>
|
||||
<th className="px-2 py-1.5 font-medium">Record Key</th>
|
||||
<th className="px-2 py-1.5 font-medium">에러 메시지</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">재시도</th>
|
||||
<th className="px-2 py-1.5 font-medium text-center">상태</th>
|
||||
<th className="px-2 py-1.5 font-medium">생성 시간</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-red-100">
|
||||
{pagedRecords.map((record) => (
|
||||
<tr
|
||||
key={record.id}
|
||||
className="bg-white hover:bg-red-50"
|
||||
>
|
||||
<td className="px-2 py-1.5 font-mono text-red-900">
|
||||
{record.recordKey}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-600 max-w-[200px] truncate" title={record.errorMessage || ''}>
|
||||
{record.errorMessage || '-'}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center text-red-900">
|
||||
{record.retryCount}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded-full ${statusColor(record.status)}`}>
|
||||
{record.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-red-500 whitespace-nowrap">
|
||||
{formatDateTime(record.createdAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={totalPages}
|
||||
totalElements={records.length}
|
||||
pageSize={FAILED_PAGE_SIZE}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user