파노라마
파노라마는 등록된 모든 모니터를 육각형(Hexagon) 그리드 형태로 시각화하여 전체 시스템 상태를 한눈에 파악할 수 있는 뷰입니다. 그룹별 보기와 전체 보기를 전환하여 모니터링하십시오.
1. 페이지 개요
1.1 기능 설명
| 기능 | 설명 |
|---|---|
| 육각형 격자(그리드, Grid) | 모니터를 육각형 타일로 시각화 |
| 그룹 뷰 | 모니터 타입별 그룹화하여 표시 |
| 전체 뷰 | 모든 모니터를 한 화면에 표시 |
| 실시간 상태 | Socket.IO로 실시간 상태 업데이트 |
| 상세 사이드 패널 | 클릭 시 상세 정보 사이드 패널 표시 |
1.2 접근 경로
URL: /workgroup/[workgroupId]/availability/panorama
메뉴: 가용성 > 파노라마
접근 권한
로그인한 사용자면 누구나 접근할 수 있습니다.
2. 화면 구성
2.1 주요 영역
| 영역 | 설명 |
|---|---|
| 툴바 | 뷰 모드 전환, 그룹핑 우선순위 선택 |
| 격자(그리드, Grid) 영역 | 육각형 모니터 타일 표시 |
| 사이드 패널 | 선택한 모니터 상세 정보 |
2.2 전체 화면
2.3 UI 구성도
3. 사용 방법
3.1 기본 동작
- 뷰 모드 선택: 툴바에서 '그룹' 또는 '전체'를 선택하십시오.
- 모니터 클릭: 육각형 타일을 클릭하여 상세 정보를 확인합니다.
- 상태 확인: 타일 색상으로 현재 상태를 파악합니다.
상태 색상
- 초록색: 온라인 (ONLINE)
- 빨간색: 오프라인 (OFFLINE)
- 노란색/주황색: 점검 중 (maintenance)
- 회색: 비활성 (active=false)
3.2 뷰 모드
기본 뷰 모드는 전체(all) 입니다. 툴바에서 원하는 모드를 선택하면 localStorage에 자동 저장됩니다.
| 모드 | 기본값 | 설명 |
|---|---|---|
| 전체 뷰 | 기본값(all) | 모든 모니터를 그룹 없이 나열 — PanoramaAllView 레이아웃 |
| 그룹 뷰 | 선택 시 | 모니터 타입(HTTP, PORT, DNS 등)별로 그룹화하여 표시 |
PanoramaAllView 레이아웃
전체 뷰 모드는 별도의 PanoramaAllView 레이아웃을 사용합니다. CSS Grid 2열 구조로 표시되며, 홀수 번째 그룹은 전체 너비(1열 전체)로 표시됩니다.
- 모바일: 1열 배치
- 태블릿 이상: 2열 배치
그룹 확장 동작
특정 그룹을 확장하면 다른 그룹은 자동으로 숨겨집니다. 한 번에 하나의 그룹만 펼쳐서 집중 분석할 수 있습니다.
3.3 모니터 타입
파노라마에서 지원하는 모니터 타입은 아래와 같습니다.
| 타입 코드 | 표시명 | 설명 |
|---|---|---|
| HTTP | HTTP | 웹 서비스 상태 확인 |
| PORT | PORT | TCP 포트 연결 확인 (구 TCP) |
| DNS | DNS | DNS 레코드 조회 확인 |
| PING | PING | ICMP Ping 응답 확인 |
3.4 그룹핑 우선순위
| 우선순위 | 설명 |
|---|---|
| 기본 (default) | 모니터 타입 기준 그룹핑 |
| 웹 (web) | 웹 서비스 기준 그룹핑 |
| 데이터베이스 (database) | 데이터베이스 기준 그룹핑 |
| 네트워크 (network) | 네트워크 기준 그룹핑 |
4. 필터 및 검색
4.1 뷰 필터
| 필터 항목 | 설명 | 사용 예시 |
|---|---|---|
| 뷰 모드 | 그룹/전체 전환 | "그룹" 선택 |
| 그룹핑 기준 | 그룹화 방식 선택 | "웹" 선택 |
4.2 설정 저장
뷰 모드와 그룹핑 우선순위는 브라우저(localStorage)에 자동 저장되어 다음 방문 시 유지됩니다.
5. 사용자 상호작용
5.1 그룹 제어
| 액션 | 설명 | 동작 |
|---|---|---|
| 그룹 확장 | 그룹 내 모니터 표시 | 그룹 헤더의 화살표 클릭 |
| 그룹 축소 | 그룹 접기 | 확장된 그룹 헤더 클릭 |
5.2 뷰 모드 전환
| 액션 | 설명 | 동작 |
|---|---|---|
| 그룹 뷰 | 타입별 그룹 표시 | 툴바에서 "그룹" 선택 → localStorage 저장 |
| 전체 뷰 | 전체 모니터 표시 | 툴바에서 "전체" 선택 → localStorage 저장 |
5.3 모니터 상세
| 액션 | 설명 | 동작 |
|---|---|---|
| 모니터 선택 | 상세 정보 확인 | 육각형 타일 클릭 → 사이드 패널 열림 |
| 패널 닫기 | 상세 패널 종료 | 패널 외부 클릭 또는 닫기 버튼 |
5.4 그룹핑 우선순위 변경
| 액션 | 설명 | 동작 |
|---|---|---|
| 기본 | 모니터 타입 기준 | 선택 메뉴에서 "기본" 선택 |
| 웹 | 웹 서비스 기준 | 선택 메뉴에서 "웹" 선택 |
| 데이터베이스 | 데이터베이스 기준 | 선택 메뉴에서 "데이터베이스" 선택 |
| 네트워크 | 네트워크 기준 | 선택 메뉴에서 "네트워크" 선택 |
설정 자동 저장
뷰 모드와 그룹핑 설정은 브라우저에 자동 저장되어 다음 방문 시 복원됩니다.
6. 데이터 갱신
6.1 자동 갱신
- 갱신 주기: 실시간 (Socket.IO)
- 하트비트 표시: 각 육각형에 최근 상태 이력 표시
- 헥사곤 크기 자동 재계산: 창 크기가 변경될 때 ResizeObserver가 감지하여 육각형 격자를 자동으로 다시 계산합니다
실시간 연결
Socket.IO를 통해 실시간으로 상태 변화를 수신합니다. 연결 중에는 로딩 표시가 나타납니다.
PanoramaToolbar 두 가지 모드
툴바는 확장(expanded) 모드와 축소(collapsed) 모드를 지원합니다. 화면이 좁을 때 자동으로 축소 모드로 전환됩니다.
6.2 연결 상태
화면 중앙에 연결 상태가 표시됩니다. 연결이 끊기면 자동 재연결을 시도합니다.
7. 문제 해결
7.1 자주 발생하는 문제
| 증상 | 원인 | 해결 방법 |
|---|---|---|
| 화면이 로딩 상태로 멈춤 | Socket.IO 연결 실패 | 네트워크 확인 후 새로고침 |
| 타일이 표시되지 않음 | 등록된 모니터 없음 | 모니터 추가 |
| 상태가 업데이트되지 않음 | 연결 끊김 | 페이지 새로고침 |
| 사이드 패널이 열리지 않음 | 권한 문제 | 관리자 권한 확인 |
모니터가 많은 경우
모니터 개수가 많을 경우 전체 뷰에서 스크롤이 필요할 수 있습니다. 그룹 뷰를 사용하면 정리해서 볼 수 있습니다.