OpsGuard - 시뮬레이션 대시보드 🖥️
이것은 OpsGuard의 프론트엔드 UI입니다. 자율 SRE 에이전트의 작동을 시연하는 시각적 '두뇌' 역할을 합니다.
OpsGuard는 백엔드 우선 에이전트이므로, 이 대시보드는 프로덕션 환경을 시뮬레이션하고 데모 및 모니터링을 위해 에이전트의 보이지 않는 워크플로우(Ingest → Analyze → Fix)를 시각화하도록 설계되었습니다.
🌟 기능
- 사이버펑크/SRE 미학: 다크 모드, 스캔라인, 영화 같은 글로우 효과로 '미션 컨트롤' 센터 같은 느낌을 줍니다.
- 실시간 시뮬레이션 컨트롤:
- CRASH: API를 통해 수동으로 심각한 인시던트(예: 메모리 누수)를 트리거합니다.
- RESET: 시스템을 깨끗한 상태로 복원합니다.
- 실시간 로그: 에이전트의 '생각'(AI 분석, 근본 원인 찾기, 명령 실행)을 보여주는 터미널 스타일 피드.
- 파이프라인 시각화 도구: 인시던트가 라이프사이클(Ingest → Diagnose → Waiting → Executing → Resolved)의 어느 단계에 있는지 정확히 보여주는 진행 스테퍼.
- 메트릭 시뮬레이션: 시스템이 'Critical' 상태에 진입할 때 CPU/메모리 급증을 시각화합니다.
🛠️ 설정
사전 요구 사항
- OpsGuard 백엔드가
http://localhost:3000에서 실행 중인지 확인하세요.
1. 의존성 설치
2. 환경 구성
.env 파일을 생성하거나 (기본값 사용):
VITE_BACKEND_URL=http://localhost:3000
3. 개발 서버 실행
브라우저에서 http://localhost:5173을 여세요.
🎮 데모 실행 방법
- 백엔드와 이 프론트엔드를 시작합니다.
- 대시보드를 엽니다. 시스템 상태가 OPERATIONAL(녹색)이어야 합니다.
- CRASH 버튼(오른쪽 상단)을 클릭합니다.
- 관찰:
- 상태가 CRITICAL(빨간색)로 바뀝니다.
- 터미널에 AI 로그가 나타납니다.
- 'Diagnose' 단계가 활성화됩니다.
- 행동:
- AUTHORIZE AUTO-FIX 버튼이 나타날 때까지 기다립니다.
- 클릭합니다.
- 해결:
- 'Executing Fix'가 진행되는 동안 진행률 표시줄을 지켜봅니다.
- 시스템이 OPERATIONAL로 돌아갑니다.
🎨 사용자 정의
- 스타일: TailwindCSS v4로 구축되었습니다.
- 아이콘:
lucide-react 사용.
- 효과: '숨쉬는' 글로우 및 스캔라인을 위한 CSS 애니메이션은
App.tsx 및 index.css에 있습니다.
📄 라이선스
MIT
shubham-01-star/opsguard-simulation
