Compare commits
3 커밋
43c28eeccd
...
1192a1117f
| 작성자 | SHA1 | 날짜 | |
|---|---|---|---|
| 1192a1117f | |||
| f559b3959b | |||
| eb8ed22139 |
3
.gitignore
vendored
3
.gitignore
vendored
@ -34,6 +34,9 @@ dependency-reduced-pom.xml
|
||||
buildNumber.properties
|
||||
.mvn/timing.properties
|
||||
.mvn/wrapper/maven-wrapper.jar
|
||||
.mvn/wrapper/maven-wrapper.properties
|
||||
mvnw
|
||||
mvnw.cmd
|
||||
|
||||
# Gradle
|
||||
.gradle/
|
||||
|
||||
@ -287,6 +287,7 @@ export interface RecollectionSearchResponse {
|
||||
number: number;
|
||||
size: number;
|
||||
totalPages: number;
|
||||
failedRecordCounts: Record<number, number>;
|
||||
}
|
||||
|
||||
export interface RecollectionStatsResponse {
|
||||
|
||||
145
frontend/src/components/Pagination.tsx
Normal file
145
frontend/src/components/Pagination.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
interface PaginationProps {
|
||||
page: number;
|
||||
totalPages: number;
|
||||
totalElements: number;
|
||||
pageSize: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 표시할 페이지 번호 목록 생성 (Truncated Page Number)
|
||||
* - 총 7슬롯 이하면 전부 표시
|
||||
* - 7슬롯 초과면 현재 페이지 기준 양쪽 1개 + 처음/끝 + ellipsis
|
||||
*/
|
||||
function getPageNumbers(current: number, total: number): (number | 'ellipsis')[] {
|
||||
if (total <= 7) {
|
||||
return Array.from({ length: total }, (_, i) => i);
|
||||
}
|
||||
|
||||
const pages: (number | 'ellipsis')[] = [];
|
||||
const SIBLING = 1;
|
||||
|
||||
const leftSibling = Math.max(current - SIBLING, 0);
|
||||
const rightSibling = Math.min(current + SIBLING, total - 1);
|
||||
|
||||
const showLeftEllipsis = leftSibling > 1;
|
||||
const showRightEllipsis = rightSibling < total - 2;
|
||||
|
||||
pages.push(0);
|
||||
|
||||
if (showLeftEllipsis) {
|
||||
pages.push('ellipsis');
|
||||
} else {
|
||||
for (let i = 1; i < leftSibling; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = leftSibling; i <= rightSibling; i++) {
|
||||
if (i !== 0 && i !== total - 1) {
|
||||
pages.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
if (showRightEllipsis) {
|
||||
pages.push('ellipsis');
|
||||
} else {
|
||||
for (let i = rightSibling + 1; i < total - 1; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
if (total > 1) {
|
||||
pages.push(total - 1);
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
export default function Pagination({
|
||||
page,
|
||||
totalPages,
|
||||
totalElements,
|
||||
pageSize,
|
||||
onPageChange,
|
||||
}: PaginationProps) {
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const start = page * pageSize + 1;
|
||||
const end = Math.min((page + 1) * pageSize, totalElements);
|
||||
const pages = getPageNumbers(page, totalPages);
|
||||
|
||||
const btnBase =
|
||||
'inline-flex items-center justify-center w-7 h-7 text-xs rounded transition-colors';
|
||||
const btnEnabled = 'hover:bg-wing-hover text-wing-muted';
|
||||
const btnDisabled = 'opacity-30 cursor-not-allowed text-wing-muted';
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
|
||||
<span>
|
||||
{totalElements.toLocaleString()}건 중 {start.toLocaleString()}~
|
||||
{end.toLocaleString()}
|
||||
</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{/* First */}
|
||||
<button
|
||||
onClick={() => onPageChange(0)}
|
||||
disabled={page === 0}
|
||||
className={`${btnBase} ${page === 0 ? btnDisabled : btnEnabled}`}
|
||||
title="처음"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
{/* Prev */}
|
||||
<button
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page === 0}
|
||||
className={`${btnBase} ${page === 0 ? btnDisabled : btnEnabled}`}
|
||||
title="이전"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
{/* Page Numbers */}
|
||||
{pages.map((p, idx) =>
|
||||
p === 'ellipsis' ? (
|
||||
<span key={`e-${idx}`} className="w-7 h-7 inline-flex items-center justify-center text-wing-muted">
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onPageChange(p)}
|
||||
className={`${btnBase} ${
|
||||
p === page
|
||||
? 'bg-wing-accent text-white font-semibold'
|
||||
: btnEnabled
|
||||
}`}
|
||||
>
|
||||
{p + 1}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* Next */}
|
||||
<button
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page >= totalPages - 1}
|
||||
className={`${btnBase} ${page >= totalPages - 1 ? btnDisabled : btnEnabled}`}
|
||||
title="다음"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
{/* Last */}
|
||||
<button
|
||||
onClick={() => onPageChange(totalPages - 1)}
|
||||
disabled={page >= totalPages - 1}
|
||||
className={`${btnBase} ${page >= totalPages - 1 ? btnDisabled : btnEnabled}`}
|
||||
title="마지막"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -6,6 +6,7 @@ import { usePoller } from '../hooks/usePoller';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import EmptyState from '../components/EmptyState';
|
||||
import LoadingSpinner from '../components/LoadingSpinner';
|
||||
import Pagination from '../components/Pagination';
|
||||
|
||||
const POLLING_INTERVAL_MS = 5000;
|
||||
|
||||
@ -92,7 +93,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
const fetchLogs = useCallback(async (p: number, s: ApiLogStatus) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 50, status: s });
|
||||
const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 10, status: s });
|
||||
setLogData(data);
|
||||
} catch {
|
||||
setLogData(null);
|
||||
@ -163,7 +164,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
</div>
|
||||
) : logData && logData.content.length > 0 ? (
|
||||
<>
|
||||
<div className="overflow-x-auto max-h-80 overflow-y-auto">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-blue-100 text-blue-700 sticky top-0">
|
||||
<tr>
|
||||
@ -185,7 +186,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
key={log.logId}
|
||||
className={isError ? 'bg-red-50' : 'bg-white hover:bg-blue-50'}
|
||||
>
|
||||
<td className="px-2 py-1.5 text-blue-500">{page * 50 + idx + 1}</td>
|
||||
<td className="px-2 py-1.5 text-blue-500">{page * 10 + idx + 1}</td>
|
||||
<td className="px-2 py-1.5 max-w-[200px]">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<span className="font-mono text-blue-900 truncate" title={log.requestUri}>
|
||||
@ -225,33 +226,13 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{logData.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
|
||||
<span>
|
||||
{logData.totalElements.toLocaleString()}건 중{' '}
|
||||
{(page * 50 + 1).toLocaleString()}~{Math.min((page + 1) * 50, logData.totalElements).toLocaleString()}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0}
|
||||
className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
<span className="px-2">
|
||||
{page + 1} / {logData.totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(logData.totalPages - 1, p + 1))}
|
||||
disabled={page >= logData.totalPages - 1}
|
||||
className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={logData.totalPages}
|
||||
totalElements={logData.totalElements}
|
||||
pageSize={10}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-wing-muted py-3 text-center">조회된 로그가 없습니다.</p>
|
||||
@ -594,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) {
|
||||
@ -656,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>
|
||||
)}
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@ import { usePoller } from '../hooks/usePoller';
|
||||
import StatusBadge from '../components/StatusBadge';
|
||||
import EmptyState from '../components/EmptyState';
|
||||
import LoadingSpinner from '../components/LoadingSpinner';
|
||||
import Pagination from '../components/Pagination';
|
||||
|
||||
const POLLING_INTERVAL_MS = 10_000;
|
||||
|
||||
@ -97,7 +98,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
const fetchLogs = useCallback(async (p: number, s: ApiLogStatus) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 50, status: s });
|
||||
const data = await batchApi.getStepApiLogs(stepExecutionId, { page: p, size: 10, status: s });
|
||||
setLogData(data);
|
||||
} catch {
|
||||
setLogData(null);
|
||||
@ -168,7 +169,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
</div>
|
||||
) : logData && logData.content.length > 0 ? (
|
||||
<>
|
||||
<div className="overflow-x-auto max-h-80 overflow-y-auto">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-blue-100 text-blue-700 sticky top-0">
|
||||
<tr>
|
||||
@ -190,7 +191,7 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
key={log.logId}
|
||||
className={isError ? 'bg-red-50' : 'bg-white hover:bg-blue-50'}
|
||||
>
|
||||
<td className="px-2 py-1.5 text-blue-500">{page * 50 + idx + 1}</td>
|
||||
<td className="px-2 py-1.5 text-blue-500">{page * 10 + idx + 1}</td>
|
||||
<td className="px-2 py-1.5 max-w-[200px]">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<span className="font-mono text-blue-900 truncate" title={log.requestUri}>
|
||||
@ -230,33 +231,13 @@ function ApiLogSection({ stepExecutionId, summary }: ApiLogSectionProps) {
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{logData.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-2 text-xs text-wing-muted">
|
||||
<span>
|
||||
{logData.totalElements.toLocaleString()}건 중{' '}
|
||||
{(page * 50 + 1).toLocaleString()}~{Math.min((page + 1) * 50, logData.totalElements).toLocaleString()}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
||||
disabled={page === 0}
|
||||
className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
<span className="px-2">
|
||||
{page + 1} / {logData.totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPage((p) => Math.min(logData.totalPages - 1, p + 1))}
|
||||
disabled={page >= logData.totalPages - 1}
|
||||
className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Pagination
|
||||
page={page}
|
||||
totalPages={logData.totalPages}
|
||||
totalElements={logData.totalElements}
|
||||
pageSize={10}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-wing-muted py-3 text-center">조회된 로그가 없습니다.</p>
|
||||
@ -645,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) {
|
||||
@ -707,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>
|
||||
)}
|
||||
|
||||
|
||||
@ -94,6 +94,9 @@ export default function Recollects() {
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [useSearch, setUseSearch] = useState(false);
|
||||
|
||||
// 실패건 수 (jobExecutionId → count)
|
||||
const [failedRecordCounts, setFailedRecordCounts] = useState<Record<number, number>>({});
|
||||
|
||||
// 실패 로그 모달
|
||||
const [failLogTarget, setFailLogTarget] = useState<RecollectionHistoryDto | null>(null);
|
||||
|
||||
@ -256,6 +259,7 @@ export default function Recollects() {
|
||||
setHistories(data.content);
|
||||
setTotalPages(data.totalPages);
|
||||
setTotalCount(data.totalElements);
|
||||
setFailedRecordCounts(data.failedRecordCounts ?? {});
|
||||
if (!useSearch) setPage(data.number);
|
||||
} catch {
|
||||
setHistories([]);
|
||||
@ -684,6 +688,7 @@ export default function Recollects() {
|
||||
<th className="px-4 py-3 font-medium">재수집 시작일시</th>
|
||||
<th className="px-4 py-3 font-medium">재수집 종료일시</th>
|
||||
<th className="px-4 py-3 font-medium">소요시간</th>
|
||||
<th className="px-4 py-3 font-medium text-center">실패건</th>
|
||||
<th className="px-4 py-3 font-medium text-right">액션</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -727,6 +732,23 @@ export default function Recollects() {
|
||||
<td className="px-4 py-4 text-wing-muted whitespace-nowrap">
|
||||
{formatDuration(hist.durationMs)}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-center">
|
||||
{(() => {
|
||||
const count = hist.jobExecutionId
|
||||
? (failedRecordCounts[hist.jobExecutionId] ?? 0)
|
||||
: 0;
|
||||
if (hist.executionStatus === 'STARTED') {
|
||||
return <span className="text-xs text-wing-muted">-</span>;
|
||||
}
|
||||
return count > 0 ? (
|
||||
<span className="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700">
|
||||
{count}건
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-wing-muted">0</span>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<button
|
||||
onClick={() => navigate(`/recollects/${hist.historyId}`)}
|
||||
|
||||
@ -28,6 +28,7 @@ import java.time.format.DateTimeFormatter;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Objects;
|
||||
|
||||
@Slf4j
|
||||
@RestController
|
||||
@ -497,12 +498,21 @@ public class BatchController {
|
||||
Page<BatchRecollectionHistory> histories = recollectionHistoryService
|
||||
.getHistories(apiKey, jobName, status, from, to, PageRequest.of(page, size));
|
||||
|
||||
// 목록의 jobExecutionId들로 실패건수 한번에 조회
|
||||
List<Long> jobExecutionIds = histories.getContent().stream()
|
||||
.map(BatchRecollectionHistory::getJobExecutionId)
|
||||
.filter(Objects::nonNull)
|
||||
.toList();
|
||||
Map<Long, Long> failedRecordCounts = recollectionHistoryService
|
||||
.getFailedRecordCounts(jobExecutionIds);
|
||||
|
||||
Map<String, Object> response = new HashMap<>();
|
||||
response.put("content", histories.getContent());
|
||||
response.put("totalElements", histories.getTotalElements());
|
||||
response.put("totalPages", histories.getTotalPages());
|
||||
response.put("number", histories.getNumber());
|
||||
response.put("size", histories.getSize());
|
||||
response.put("failedRecordCounts", failedRecordCounts);
|
||||
return ResponseEntity.ok(response);
|
||||
}
|
||||
|
||||
|
||||
@ -33,6 +33,14 @@ public interface BatchFailedRecordRepository extends JpaRepository<BatchFailedRe
|
||||
*/
|
||||
long countByJobExecutionId(Long jobExecutionId);
|
||||
|
||||
/**
|
||||
* 여러 jobExecutionId에 대해 FAILED 상태 건수를 한번에 조회 (N+1 방지)
|
||||
*/
|
||||
@Query("SELECT r.jobExecutionId, COUNT(r) FROM BatchFailedRecord r " +
|
||||
"WHERE r.jobExecutionId IN :jobExecutionIds AND r.status = 'FAILED' " +
|
||||
"GROUP BY r.jobExecutionId")
|
||||
List<Object[]> countFailedByJobExecutionIds(@Param("jobExecutionIds") List<Long> jobExecutionIds);
|
||||
|
||||
/**
|
||||
* 특정 Step 실행의 실패 레코드를 RESOLVED로 벌크 업데이트
|
||||
*/
|
||||
|
||||
@ -330,6 +330,21 @@ public class RecollectionHistoryService {
|
||||
.build();
|
||||
}
|
||||
|
||||
/**
|
||||
* 재수집 이력 목록의 jobExecutionId별 FAILED 상태 실패건수 조회
|
||||
*/
|
||||
@Transactional(readOnly = true)
|
||||
public Map<Long, Long> getFailedRecordCounts(List<Long> jobExecutionIds) {
|
||||
if (jobExecutionIds.isEmpty()) {
|
||||
return Collections.emptyMap();
|
||||
}
|
||||
return failedRecordRepository.countFailedByJobExecutionIds(jobExecutionIds).stream()
|
||||
.collect(Collectors.toMap(
|
||||
row -> ((Number) row[0]).longValue(),
|
||||
row -> ((Number) row[1]).longValue()
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
* 대시보드용 최근 10건
|
||||
*/
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user