Skip to main content

프론트엔드 컴포넌트 문서

이 문서는 frontend-autopromaker-ai 프로젝트 내의 주요 프론트엔드 컴포넌트들을 설명합니다.

ServerMonitor.tsx​

ServerMonitor.tsx 컴포넌트는 관리자 페이지(admin/monitor)에서 AI 연산 노드의 실시간 시스템 상태 및 현재 진행 중인 작업의 진행 상황을 시각화하여 표시합니다.

주요 기능​

  • ComfyUI 연결 상태 표시: ComfyUI 서버와의 WebSocket 연결 상태(ONLINE/OFFLINE 등)를 표시합니다.
  • 생성 실행부 모니터링:
    • 각 생성 실행부의 CPU 사용률, RAM 사용량, 디스크 사용량 등 시스템 메트릭을 실시간으로 표시합니다.
    • ai-node-agent가 수집하여 Redis Pub/Sub을 통해 전달하는 node.monitor 이벤트를 useComfyWebSocket 훅을 통해 수신하여 업데이트됩니다.
  • 진행 중인 작업 표시:
    • 현재 시스템에서 진행 중인 모든 사용자 작업의 상태(예: queued, executing, in_progress, completed, failed)를 카드 형태로 표시합니다.
    • 각 작업 카드에는 작업 ID, 사용자 ID, 노드 ID, 이벤트 타입, 마지막 업데이트 시간 등의 정보가 포함됩니다.
    • in_progress 상태인 작업의 경우, progress_value와 progress_max를 기반으로 실시간 진행률 바를 표시합니다.
    • ai-node-agent가 Redis에 저장하고 AiRealtimeGateway를 통해 전달하는 prompt_progress_update 이벤트를 useComfyWebSocket 훅을 통해 수신하여 업데이트됩니다.
    • 작업이 완료(completed)되거나 실패(failed)하면 useComfyWebSocket 훅 내부 로직에 의해 해당 작업 카드는 자동으로 화면에서 제거됩니다.

데이터 흐름​

  1. ai-node-agent:
    • ComfyUI WebSocket으로부터 작업 진행 이벤트(execution_start, progress, executed 등)를 수신합니다.
    • 시스템 메트릭(node.monitor)을 주기적으로 수집합니다.
    • 수신/수집된 데이터를 Redis Pub/Sub 채널(ai-comfyui-events)에 발행하고, prompt_progress:{ourPromptId} 키에 작업 상태를 저장합니다.
  2. AiRealtimeGateway (백엔드):
    • Redis Pub/Sub 채널을 구독하여 ai-node-agent가 발행한 모든 이벤트를 수신합니다.
    • prompt_progress:{ourPromptId} 키를 Redis에서 조회하여 최신 작업 상태를 가져옵니다.
    • 수신된 이벤트와 조회된 상태를 결합하여 Socket.IO를 통해 프론트엔드로 prompt_progress_update 이벤트를 발행합니다.
  3. useComfyWebSocket (프론트엔드 훅):
    • Socket.IO 서버에 연결하여 prompt_progress_update, node.monitor 등의 이벤트를 수신합니다.
    • 수신된 데이터를 activeProgresses 및 nodeMonitorData 상태에 저장합니다.
    • 작업이 완료되거나 실패하면 activeProgresses에서 해당 작업을 제거합니다.
  4. ServerMonitor.tsx (프론트엔드 컴포넌트):
    • useComfyWebSocket 훅으로부터 activeProgresses 및 nodeMonitorData를 받아 화면에 시각화합니다.

사용 예시​

// src/app/admin/monitor/page.tsx (예시)
import ServerMonitor from '@/features/admin/components/ServerMonitor';

const AdminMonitorPage: React.FC = () => {
  return (
    <div>
      <h1>관리자 모니터링 대시보드</h1>
      <ServerMonitor />
    </div>
  );
};

export default AdminMonitorPage;