e228faabf5
G-1: 메신저 Webhook Relay + _send_to_room 실제 httpx 호출 구현 G-2: POST /api/tasks/bulk SR 대량작업 엔드포인트 (최대 100건) G-3: 라이선스 만료 알림 스케줄러 (매일 09:00 KST) G-4: 체험판 upgrade_banner 필드 + license.py 배너 로직 G-5: core/auto_rca.py + incidents/problem auto-rca 엔드포인트 G-6: core/deploy_impact.py + vibe impact-analysis 엔드포인트 G-7: core/ticket_classifier.py + SR 생성 시 AI 분류 + ai-suggestion API G-8: VulnPatchRecord 모델 + vuln_scan 패치추적 4개 엔드포인트 G-9: core/jira_sync.py + gateway Jira/Confluence 연동 엔드포인트 G-10: core/push_notify.py + routers/push.py + PushSubscription 모델 G-11: approvals 다중승인 (위임/서명/기한초과/마감연장) G-12: alembic.ini + migrations/ + cicd/migrate_to_postgres.sh 하네스: guardia-orchestrator 확장기능 Phase 반영 봇명령어: /sr /status /license /bulk 슬래시 명령어 추가 설치스크립트: setup/ (Ubuntu, CentOS, RHEL, Windows) --test 옵션 포함 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
207 lines
6.5 KiB
Markdown
207 lines
6.5 KiB
Markdown
# GUARDiA ITSM — Priority 1: UI 없는 백엔드 모듈 화면 구현
|
||
|
||
**문서 버전**: 1.0 | **작성일**: 2026-05-25
|
||
|
||
---
|
||
|
||
## 개요
|
||
|
||
백엔드 API는 완성되어 있으나 프론트엔드 HTML 페이지가 없는 7개 모듈의 SPA 구현.
|
||
각 페이지는 `/static/style.css` 공유 테마를 사용하며 독립 경로로 접근한다.
|
||
|
||
---
|
||
|
||
## 구현 목록
|
||
|
||
| 페이지 | URL 경로 | 파일 | 백엔드 라우터 |
|
||
|--------|---------|------|-------------|
|
||
| 장애 관리 | /incidents | static/incidents.html | routers/incidents.py |
|
||
| SSL 관리 | /ssl | static/ssl.html | routers/ssl_manager.py |
|
||
| PM 점검 | /pm | static/pm.html | routers/pm.py |
|
||
| 온콜 관리 | /oncall | static/oncall.html | routers/oncall.py |
|
||
| 배치 작업 | /batch | static/batch.html | routers/batch.py |
|
||
| 바이브 코딩 | /vibe | static/vibe.html | routers/vibe.py |
|
||
| SI 프로젝트 | /si | static/si.html | si_projects/wbs/requirements/issues/risks/milestones/change_requests/tests.py |
|
||
| 라이선스 관리 | /license | static/license.html | routers/license.py |
|
||
|
||
---
|
||
|
||
## 공통 설계 원칙
|
||
|
||
### 인증
|
||
```javascript
|
||
const token = localStorage.getItem('guardia_token');
|
||
if (!token) { location.href = '/login'; return; }
|
||
|
||
async function api(method, path, body) {
|
||
const res = await fetch(path, {
|
||
method,
|
||
headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||
body: body ? JSON.stringify(body) : undefined
|
||
});
|
||
if (res.status === 401) { localStorage.removeItem('guardia_token'); location.href = '/login'; }
|
||
return res;
|
||
}
|
||
```
|
||
|
||
### 테마 복원
|
||
```javascript
|
||
document.body.dataset.theme = localStorage.getItem('guardia_theme') || 'dark';
|
||
```
|
||
|
||
### 상단 네비게이션 바
|
||
모든 외부 페이지는 공통 topnav를 가진다:
|
||
- GUARDiA ITSM 로고 (/ 링크)
|
||
- 페이지 링크: 대시보드, 장애관리, SSL, PM점검, 온콜, 배치, 바이브, SI, AI에이전트
|
||
- 우측: 사용자명, 로그아웃 버튼
|
||
|
||
### 자동 새로고침
|
||
```javascript
|
||
setInterval(loadData, 30000);
|
||
```
|
||
|
||
---
|
||
|
||
## 1. 장애 관리 (incidents.html)
|
||
|
||
### 화면 구성
|
||
1. **통계 카드 행** (4개): 전체, OPEN, P1/P2, 평균 MTTR
|
||
2. **필터 툴바**: 상태 / 등급 / 키워드 검색
|
||
3. **장애 테이블**: INC번호, 제목, 등급배지, 상태, 발생시각, 담당자, MTTR
|
||
4. **등록 모달**: 제목, 설명, grade, assigned_to, affected_services, occurred_at
|
||
5. **상세 모달**: 전체 정보 + 상태 전환 버튼 + SR 연결 + RCA 종료
|
||
|
||
### 등급 배지
|
||
| 등급 | 색상 | 의미 |
|
||
|------|------|------|
|
||
| P1 | 빨강 #f87171 | 서비스 전체 중단 |
|
||
| P2 | 주황 #fb923c | 주요 기능 영향 |
|
||
| P3 | 노랑 #fcd34d | 일부 기능 저하 |
|
||
| P4 | 초록 #4ade80 | 경미한 영향 |
|
||
|
||
### 상태 전환 규칙
|
||
```
|
||
OPEN → INVESTIGATING | CLOSED
|
||
INVESTIGATING → MITIGATED | RESOLVED
|
||
MITIGATED → INVESTIGATING | RESOLVED
|
||
RESOLVED → CLOSED
|
||
CLOSED → (전환 불가)
|
||
```
|
||
|
||
---
|
||
|
||
## 2. SSL 인증서 관리 (ssl.html)
|
||
|
||
### 화면 구성
|
||
1. **현황 카드** (4개): OK / WARN / URGENT / EXPIRED — 클릭 시 필터
|
||
2. **만료 현황 테이블**: 서버명, 만료일, 남은일수 게이지, 경고레벨 배지, 점검/갱신 버튼
|
||
3. **days 슬라이더**: 0~90일 범위 조회
|
||
4. **갱신 기록 모달**: new_expire_date, renewed_by, notes
|
||
5. **갱신 이력 모달**: 서버별 이력 테이블
|
||
|
||
### 경고 레벨 기준
|
||
| 레벨 | 조건 | 배지 색상 |
|
||
|------|------|----------|
|
||
| OK | days_left > 30 | 초록 |
|
||
| WARN | 7 < days_left ≤ 30 | 노랑 |
|
||
| URGENT | 0 < days_left ≤ 7 | 주황 |
|
||
| EXPIRED | days_left ≤ 0 | 빨강 |
|
||
|
||
---
|
||
|
||
## 3. PM 정기점검 (pm.html)
|
||
|
||
### 탭 구성
|
||
- **탭 1 — 점검 스케줄**: 스케줄 목록, 즉시 실행, 스케줄 등록
|
||
- **탭 2 — 점검 결과**: 타임테이블 선택 → 체크리스트 항목별 결과 입력 + Excel 다운로드
|
||
- **탭 3 — 체크리스트 템플릿**: 서버역할별 템플릿 CRUD
|
||
|
||
### 점검 주기 옵션
|
||
WEEKLY / BIWEEKLY / MONTHLY / QUARTERLY / SEMIANNUAL / ANNUAL / CUSTOM
|
||
|
||
### 결과 상태
|
||
| 상태 | 의미 | 색상 |
|
||
|------|------|------|
|
||
| PASS | 정상 | 초록 |
|
||
| FAIL | 실패 | 빨강 |
|
||
| WARNING | 경고 | 노랑 |
|
||
| NA | 해당없음 | 회색 |
|
||
|
||
---
|
||
|
||
## 4. 온콜/당직 관리 (oncall.html)
|
||
|
||
### 탭 구성
|
||
- **탭 1 — 월간 캘린더**: 연/월 네비게이션, 날짜 클릭 시 당직 등록 모달
|
||
- **탭 2 — 목록 & 일괄 등록**: 당직 목록 테이블 + JSON 일괄 등록
|
||
|
||
### 상단 배너
|
||
```
|
||
📞 오늘 당직: [이름] ([시프트]) | 백업: [백업담당자]
|
||
```
|
||
|
||
### 시프트 종류
|
||
| 값 | 시간 | 색상 |
|
||
|----|------|------|
|
||
| ALL_DAY | 24시간 | 파랑 |
|
||
| DAYTIME | 09:00~18:00 | 초록 |
|
||
| NIGHTTIME | 18:00~익일09:00 | 보라 |
|
||
|
||
---
|
||
|
||
## 5. 배치 작업 관리 (batch.html)
|
||
|
||
### 탭 구성
|
||
- **탭 1 — 배치 작업**: 작업 목록, 활성/비활성 토글, 즉시 실행, 등록
|
||
- **탭 2 — 실행 이력**: 최근 실행 이력 통합, 상세 모달 (stdout 전체)
|
||
|
||
### 작업 등록 필드
|
||
| 필드 | 설명 |
|
||
|------|------|
|
||
| job_name | 작업명 |
|
||
| server_id | 대상 서버 |
|
||
| cron_expr | cron 표현식 (예: `0 2 * * *`) |
|
||
| command | 실행 명령어 |
|
||
| timeout_sec | 타임아웃 (초) |
|
||
| alert_on_fail | 실패 시 SR 자동 생성 여부 |
|
||
|
||
### 실행 결과 상태
|
||
SUCCESS(초록) / FAILED(빨강) / TIMEOUT(주황) / RUNNING(파랑 깜빡)
|
||
|
||
---
|
||
|
||
## 6. 바이브 코딩 세션 (vibe.html)
|
||
|
||
### 탭 구성
|
||
- **탭 1 — 활성 세션**: 세션 카드 그리드, 파이프라인 스텝 바
|
||
- **탭 2 — 이력**: 전체 세션 이력 테이블
|
||
- **탭 3 — 프로젝트**: 등록된 프로젝트 목록 + 등록 모달
|
||
|
||
### 파이프라인 단계
|
||
```
|
||
PENDING → CODING → BUILDING → TESTING → DEPLOYING → COMPLETED
|
||
```
|
||
|
||
### Jenkins 연결 상태
|
||
- 상단 배너: `GET /api/vibe/jenkins/health` 결과 표시
|
||
- 연결됨(초록) / 오프라인(빨강)
|
||
|
||
---
|
||
|
||
## 7. SI 프로젝트 관리 (si.html)
|
||
|
||
### 탭 구성 (7탭)
|
||
- **프로젝트**: SI 프로젝트 목록, 등록, 단계 전환
|
||
- **WBS**: Gantt 차트 스타일 WBS 트리, 진척률 시각화
|
||
- **요구사항**: RFP → 확정 요구사항 관리
|
||
- **이슈**: 프로젝트 이슈 목록, 상태 전환
|
||
- **리스크**: 위험 매트릭스 (확률 × 영향도), 이슈 전환
|
||
- **마일스톤**: 마일스톤 타임라인, 산출물 목록
|
||
- **변경요청(CR)**: CR 등록, 영향도 분석, 승인 워크플로우
|
||
- **테스트**: 테스트 계획 → 케이스 → 실행 → 결함 관리
|
||
|
||
### SI 프로젝트 상태 전환
|
||
```
|
||
PLANNING → ANALYSIS → DESIGN → DEVELOPMENT → TESTING → DEPLOYMENT → COMPLETED
|
||
```
|