diff --git a/frontend/src/pages/ExecutionDetail.tsx b/frontend/src/pages/ExecutionDetail.tsx index 5a9a92a..f5f5482 100644 --- a/frontend/src/pages/ExecutionDetail.tsx +++ b/frontend/src/pages/ExecutionDetail.tsx @@ -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 {open && ( -
- - - - - - - - - - - - {records.map((record) => ( - - - - - - +
+
+
Record Key에러 메시지재시도상태생성 시간
- {record.recordKey} - - {record.errorMessage || '-'} - - {record.retryCount} - - - {record.status} - - - {formatDateTime(record.createdAt)} -
+ + + + + + + - ))} - -
Record Key에러 메시지재시도상태생성 시간
+ + + {pagedRecords.map((record) => ( + + + {record.recordKey} + + + {record.errorMessage || '-'} + + + {record.retryCount} + + + + {record.status} + + + + {formatDateTime(record.createdAt)} + + + ))} + + +
+ )} diff --git a/frontend/src/pages/RecollectDetail.tsx b/frontend/src/pages/RecollectDetail.tsx index 3686f07..eb6235a 100644 --- a/frontend/src/pages/RecollectDetail.tsx +++ b/frontend/src/pages/RecollectDetail.tsx @@ -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 {open && ( -
- - - - - - - - - - - - {records.map((record) => ( - - - - - - +
+
+
Record Key에러 메시지재시도상태생성 시간
- {record.recordKey} - - {record.errorMessage || '-'} - - {record.retryCount} - - - {record.status} - - - {formatDateTime(record.createdAt)} -
+ + + + + + + - ))} - -
Record Key에러 메시지재시도상태생성 시간
+ + + {pagedRecords.map((record) => ( + + + {record.recordKey} + + + {record.errorMessage || '-'} + + + {record.retryCount} + + + + {record.status} + + + + {formatDateTime(record.createdAt)} + + + ))} + + +
+ )}