gc/snp-batch-validation
7
0
포크 0
코드 이슈 8 풀 리퀘스트 Actions 위키 활동

feat: 수집 실패건 로그 페이징 기능 상세화

소스 검색
This commit is contained in:
hyojin kim 2026-02-27 11:15:07 +09:00
부모 f559b3959b
커밋 1192a1117f
2개의 변경된 파일과 102개의 추가작업 그리고 74개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
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 }) { function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [showConfirm, setShowConfirm] = useState(false); const [showConfirm, setShowConfirm] = useState(false);
const [retrying, setRetrying] = useState(false); const [retrying, setRetrying] = useState(false);
const [page, setPage] = useState(0);
const navigate = useNavigate(); const navigate = useNavigate();
const failedRecords = records.filter((r) => r.status === 'FAILED'); 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) => { const statusColor = (status: string) => {
switch (status) { switch (status) {
@ -637,9 +642,10 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</div> </div>
{open && ( {open && (
<div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto"> <div className="mt-2">
<div className="overflow-x-auto">
<table className="w-full text-xs text-left"> <table className="w-full text-xs text-left">
<thead className="bg-red-100 text-red-700 sticky top-0"> <thead className="bg-red-100 text-red-700">
<tr> <tr>
<th className="px-2 py-1.5 font-medium">Record Key</th> <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">에러 메시지</th>
@ -649,7 +655,7 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-red-100"> <tbody className="divide-y divide-red-100">
{records.map((record) => ( {pagedRecords.map((record) => (
<tr <tr
key={record.id} key={record.id}
className="bg-white hover:bg-red-50" className="bg-white hover:bg-red-50"
@ -676,6 +682,14 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</tbody> </tbody>
</table> </table>
</div> </div>
<Pagination
page={page}
totalPages={totalPages}
totalElements={records.length}
pageSize={FAILED_PAGE_SIZE}
onPageChange={setPage}
/>
</div>
)} )}
{/* 확인 다이얼로그 */} {/* 확인 다이얼로그 */}

20
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 }) { function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: FailedRecordDto[]; jobName: string; stepExecutionId: number }) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [showConfirm, setShowConfirm] = useState(false); const [showConfirm, setShowConfirm] = useState(false);
const [retrying, setRetrying] = useState(false); const [retrying, setRetrying] = useState(false);
const [page, setPage] = useState(0);
const navigate = useNavigate(); const navigate = useNavigate();
const failedRecords = records.filter((r) => r.status === 'FAILED'); 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) => { const statusColor = (status: string) => {
switch (status) { switch (status) {
@ -688,9 +693,10 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</div> </div>
{open && ( {open && (
<div className="mt-2 overflow-x-auto max-h-80 overflow-y-auto"> <div className="mt-2">
<div className="overflow-x-auto">
<table className="w-full text-xs text-left"> <table className="w-full text-xs text-left">
<thead className="bg-red-100 text-red-700 sticky top-0"> <thead className="bg-red-100 text-red-700">
<tr> <tr>
<th className="px-2 py-1.5 font-medium">Record Key</th> <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">에러 메시지</th>
@ -700,7 +706,7 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-red-100"> <tbody className="divide-y divide-red-100">
{records.map((record) => ( {pagedRecords.map((record) => (
<tr <tr
key={record.id} key={record.id}
className="bg-white hover:bg-red-50" className="bg-white hover:bg-red-50"
@ -727,6 +733,14 @@ function FailedRecordsToggle({ records, jobName, stepExecutionId }: { records: F
</tbody> </tbody>
</table> </table>
</div> </div>
<Pagination
page={page}
totalPages={totalPages}
totalElements={records.length}
pageSize={FAILED_PAGE_SIZE}
onPageChange={setPage}
/>
</div>
)} )}
{/* 확인 다이얼로그 */} {/* 확인 다이얼로그 */}