fix(ui): 타임라인 상세 화면 이동 오류 수정 및 실행 중 작업 상세 버튼 추가 (#34)

- Timeline 상세 링크 <a href> → <Link to> 변경 (SPA 라우팅 수정)
- WebViewController에 와일드카드 패턴 추가 (새로고침 시 SPA fallback 보장)
- 실행 이력에서 실행 중 작업에도 상세 버튼 표시 (중지/강제종료/상세)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
HYOJIN 2026-03-11 09:47:37 +09:00
부모 52f3ba728c
커밋 9f8af845a4
3개의 변경된 파일19개의 추가작업 그리고 18개의 파일을 삭제

파일 보기

@ -450,7 +450,7 @@ export default function Executions() {
</td> </td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
{isRunning(exec.status) ? ( {isRunning(exec.status) && (
<> <>
<button <button
onClick={() => onClick={() =>
@ -460,7 +460,6 @@ export default function Executions() {
> >
</button> </button>
{/* F1: 강제 종료 버튼 */}
<button <button
onClick={() => onClick={() =>
setAbandonTarget(exec) setAbandonTarget(exec)
@ -470,7 +469,7 @@ export default function Executions() {
</button> </button>
</> </>
) : ( )}
<button <button
onClick={() => onClick={() =>
navigate( navigate(
@ -481,7 +480,6 @@ export default function Executions() {
> >
</button> </button>
)}
</div> </div>
</td> </td>
</tr> </tr>

파일 보기

@ -1,4 +1,5 @@
import { useState, useCallback, useRef, useEffect } from 'react'; import { useState, useCallback, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { batchApi, type ExecutionInfo, type JobExecutionDto, type PeriodInfo, type ScheduleTimeline } from '../api/batchApi'; import { batchApi, type ExecutionInfo, type JobExecutionDto, type PeriodInfo, type ScheduleTimeline } from '../api/batchApi';
import { formatDateTime, calculateDuration } from '../utils/formatters'; import { formatDateTime, calculateDuration } from '../utils/formatters';
import { usePoller } from '../hooks/usePoller'; import { usePoller } from '../hooks/usePoller';
@ -446,12 +447,12 @@ export default function Timeline() {
{calculateDuration(exec.startTime, exec.endTime)} {calculateDuration(exec.startTime, exec.endTime)}
</td> </td>
<td className="py-2 px-3 text-right"> <td className="py-2 px-3 text-right">
<a <Link
href={`/executions/${exec.executionId}`} to={`/executions/${exec.executionId}`}
className="text-xs text-wing-accent hover:text-wing-accent font-medium" className="text-xs text-wing-accent hover:text-wing-accent font-medium no-underline"
> >
</a> </Link>
</td> </td>
</tr> </tr>
))} ))}

파일 보기

@ -14,7 +14,9 @@ public class WebViewController {
@GetMapping({"/", "/jobs", "/executions", "/executions/{id:\\d+}", @GetMapping({"/", "/jobs", "/executions", "/executions/{id:\\d+}",
"/recollects", "/recollects/{id:\\d+}", "/recollects", "/recollects/{id:\\d+}",
"/schedules", "/schedule-timeline", "/monitoring"}) "/schedules", "/schedule-timeline", "/monitoring",
"/jobs/**", "/executions/**", "/recollects/**",
"/schedules/**", "/schedule-timeline/**", "/monitoring/**"})
public String forward() { public String forward() {
return "forward:/index.html"; return "forward:/index.html";
} }