feat(infra): NAS↔Windows 워커 파이프라인 관측 페이지 /infra (Three.js)

분산 워커 관측 Part C — useNodeStatus 3초 폴링 훅 + statusVisual 색/라벨 매핑
+ 2D 워커 카드 그리드 + raw three.js 파이프라인 시각화(정상=시안 파티클 흐름 /
busy=가속 / paused=앰버 정지 / degraded=주황 / down=빨강 끊김, Redis 끊김=버스 빨강).
GET /api/agent-office/nodes(Part B) 소비. r3f 대신 기설치 three 직접 사용.
WebGL 미지원 시 카드 폴백 + 3D/그리드 토글. vitest 10 passed, build OK.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019LV86jBozkNhSFXJA412fq
This commit is contained in:
2026-06-30 10:39:08 +09:00
parent 696c2ade15
commit 6e415b3e45
10 changed files with 1073 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
import { render, screen, waitFor } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { getNodeStatus } from '../../api';
import InfraMonitor from './InfraMonitor';
vi.mock('../../api', () => ({ getNodeStatus: vi.fn() }));
const sample = {
redis_ok: true,
paused: false,
paused_reason: null,
workers: [
{ name: 'image-render', kind: 'render', alive: true, state: 'idle', queue_depth: 0, dead_letter: 0, processing: 0, jobs_done: 5, jobs_failed: 0, last_beat_age_s: 3 },
{ name: 'insta-render', kind: 'render', alive: false, state: null, queue_depth: 3, dead_letter: 0, processing: 0, jobs_done: 0, jobs_failed: 0, last_beat_age_s: null },
],
links: [],
};
describe('InfraMonitor', () => {
beforeEach(() => vi.clearAllMocks());
it('renders worker cards from /nodes (grid mode in jsdom — no WebGL)', async () => {
getNodeStatus.mockResolvedValue(sample);
render(<InfraMonitor />);
await waitFor(() => expect(screen.getByText('Image Render')).toBeInTheDocument());
expect(screen.getByText('Insta Render')).toBeInTheDocument();
// alive 워커(image-render, idle)는 '대기' 상태 라벨
expect(screen.getByText('대기')).toBeInTheDocument();
// 오프라인 워커(insta-render)는 '오프라인' 라벨
expect(screen.getByText('오프라인')).toBeInTheDocument();
});
it('shows error state when /nodes fails', async () => {
getNodeStatus.mockRejectedValue(new Error('down'));
render(<InfraMonitor />);
await waitFor(() => expect(screen.getByText('집계 서버 연결 끊김')).toBeInTheDocument());
});
});