플러스프로젝트 배경
1. 문제점
- 데이터센터 내 다수의 Rack과 PDU(전력분배장치)의 전력 사용량을 개별적으로 확인해야 하여 관리 효율이 낮았습니다.
- 전력 과부하(High) 또는 저전력(Low) 이상 상황 발생 시 신속한 대응이 어려웠습니다.
- 기간별/구역별 전력 사용 추이를 분석할 수 있는 시각화 도구가 부재했습니다.
- 알람 이력 관리 및 임계값 설정을 위한 통합 관리 콘솔이 필요했습니다.
2.프로젝트 목표
- 데이터센터 전체 Rack/PDU의 전력 사용량을 한 화면에서 실시간 모니터링하는 대시보드 개발
- 일간/주간/월간 최대 전력 사용량을 게이지 차트로 시각화
- XD열/Rack/PDU 단위로 상세 조회 가능한 기간별 그래프 제공
- High/Low 알람 임계값 설정 및 알람 로그 관리 기능 구현
3.주안점
- 실시간 전력 데이터를 직관적으로 표현하는 게이지 차트 및 막대 그래프 구현
- Rack별 전력 사용량과 PDU(L/R) 상태를 한눈에 파악할 수 있는 레이아웃 설계
- TradingView Lightweight Charts 라이브러리를 활용한 고성능 시계열 차트 구현
- 알람 임계값을 Total/Row/Rack/PDU 단위로 세분화하여 설정 가능하도록 구현
- 데이터센터 내 다수의 Rack과 PDU(전력분배장치)의 전력 사용량을 개별적으로 확인해야 하여 관리 효율이 낮았습니다.
- 전력 과부하(High) 또는 저전력(Low) 이상 상황 발생 시 신속한 대응이 어려웠습니다.
- 기간별/구역별 전력 사용 추이를 분석할 수 있는 시각화 도구가 부재했습니다.
- 알람 이력 관리 및 임계값 설정을 위한 통합 관리 콘솔이 필요했습니다.
2.프로젝트 목표
- 데이터센터 전체 Rack/PDU의 전력 사용량을 한 화면에서 실시간 모니터링하는 대시보드 개발
- 일간/주간/월간 최대 전력 사용량을 게이지 차트로 시각화
- XD열/Rack/PDU 단위로 상세 조회 가능한 기간별 그래프 제공
- High/Low 알람 임계값 설정 및 알람 로그 관리 기능 구현
3.주안점
- 실시간 전력 데이터를 직관적으로 표현하는 게이지 차트 및 막대 그래프 구현
- Rack별 전력 사용량과 PDU(L/R) 상태를 한눈에 파악할 수 있는 레이아웃 설계
- TradingView Lightweight Charts 라이브러리를 활용한 고성능 시계열 차트 구현
- 알람 임계값을 Total/Row/Rack/PDU 단위로 세분화하여 설정 가능하도록 구현
프로젝트 성과
PDU 상태 기능
42개 PDU 실시간 모니터링
6가지 조회 단위(1분~1개월) × 다중 세부 필터 조합 지원
High/Low 알람 임계값 5단계 커스텀 설정 및 이력 아카이빙
6가지 조회 단위(1분~1개월) × 다중 세부 필터 조합 지원
High/Low 알람 임계값 5단계 커스텀 설정 및 이력 아카이빙
핵심 기능
Power Usage Dashboard
Daily/Weekly/Monthly Max KW를 게이지 차트로 표시하고, 실시간 전력 사용량 그래프, Rack별 사용량 순위(High/Low Top 5), 주요 이벤트 날짜(역대/연간 최대/최소 사용일)제
Period Graph (기간별 전력 조회)
빠른 검색(최근 31분/5시간/31시간/31일/31개월), 조회기간 선택(캘린더), 조회단위 선택(1분/10분/1시간/1일/1주일/1개월), 조회영역 선택(XD열/Rack/PDU)을 조합하여 상세전력사용량그래프조회
PDU Status (전력 상태 현황)
D Cold Aisle Zone 전체 전력량과 Row별(Row 1, Row 2) 전력량을 표시하고, 각 Rack(01~21)의 전력량과 L/R PDU 상태를 그리드 레이아웃으로 시각화.
Alarm Log & Admin Console
계층별(Total→Row→Rack→PDU) 알람 임계값을 세분화하여 설정 가능, PIN 번호 기반 비밀번호 찾기 기능 제공
진행 단계
기획/설계
2024.10.
요구사항 분석, 화면 설계서 작성, 데이터 구조 설계
디자인
2024.10.
UI/UX 디자인, 대시보드/차트/상태판 컴포넌트 설계
프론트엔드 개발
2024.11.
React 개발, Lightweight Charts 연동, 실시간 데이터 바인딩
백엔드 연동
2024.11.
API 연동, 실시간 전력 데이터 수집, 알람 로직 구현
테스트/배포
2024.11.
실제 PDU 데이터 연동 테스트, 성능 최적화, 배포
프로젝트 상세
본 프로젝트는 데이터센터의 전력분배장치(PDU) 전력 사용량을 실시간으로
모니터링하고 관리하는 웹 대시보드 개발 프로젝트입니다.
[주요 화면 및 기능]
( 로그인 / 비밀번호 찾기)
- 로그인: ID/Password 입력, Power Monitoring 로고
- 비밀번호 찾기: 등록자 성명, 소속명, PIN번호(6자리) 입력 → 계정정보 표시
1. Dashboard (대시보드)
- Daily/Weekly/Monthly Max KW: 게이지 차트로 표시 (0~150 KW 범위)
· 녹색(정상) → 노란색(주의) → 빨간색(위험) 색상 구간
· 측정 일시 및 현재 값(예: 132.1 kw) 표시
- Power Usage Status Graph: 실시간 막대 그래프
· Highest(697.0), High Alarm(630.0), Low Alarm(100.0), Lowest(80.0) 라인 표시
· 시간대별(10:15~10:43 등) 전력 사용량 추이
- Rack Power Usage Rank: High/Low Top 5 Rack 순위 (단위: kw)
- Event Date: Historical Max, Yearly Max, Yearly Min 사용일 및 KW
- Alarm: 최근 알람 목록 (Low Alarm, High Alarm, Net Error)
2. Period Graph (기간별 그래프)
- Search Filter:
· 빠른 검색: 최근 31분/5시간/31시간/31일/31개월 보기 버튼
· 조회기간 선택: 시작일 ~ 종료일 캘린더
· 조회단위 선택: 1분/10분/1시간/1일/1주일/1개월 드롭다운
· 조회영역 선택: XD열(전체/1열/2열) → Rack(01~12) → PDU(전체/L/R)
- 차트: TradingView Lightweight Charts 라이브러리 사용
· 마우스 호버 시 Usage 값과 시간 툴팁 표시 (예: Usage 697.0, 11:58)
· High Power Alarm Line / Low Power Alarm Line 점선 표시
3. PDU Status (전력 상태 현황)
- XD_cold Aisle Zone 전체 전력량 (예: 135.4 KW)
- Row 1 (69.4 KW) / Row 2 (66.0 KW) 구분
- Rack별 카드:
· Rack 번호 및 전력량 (예: Rack 01, 22.0 KW)
· L/R PDU 전력량 (예: L 1.0, R 0.5)
· 상태 인디케이터: Status(녹색=Normal, 회색=Error Networking)
· 사용량 인디케이터: Usage(녹색=Normal, 빨간색=High, 파란색=Low, 회색=Not Displayable)
- 실제 배치 반영: Row 2에 pillar(기둥) 3개 위치 표시
4. Alarm Log (알람 로그)
- Search Filter: 조회기간 선택, 이벤트 타입 선택(All Events/High/Low/Network)
- 테이블: No, Time, Event(Networking error, High power error, Low power error), Device(R01-L 등)
- CSV 다운로드 버튼
- 페이지네이션
5. Admin Console (관리자 콘솔)
- Alarm Line setting:
· Total / Row1 / Row2 / Rack / Pdu 별로 High/Low Power Alarm Line value 설정
· 각 항목별 Confirm 버튼
- User 관리 테이블:
· User 구분(Administrator, User 1, User 2 등)
· id, password, name, affiliation(소속), PIN No.
· Confirm 버튼으로 저장
[사용 기술 스택]
- Frontend: React, TypeScript
- Chart Library: TradingView Lightweight Charts (코인/주식 차트 라이브러리)
- UI Components: 게이지 차트, 그리드 레이아웃, 드롭다운 필터, 테이블
- Data: 실시간 전력 데이터 API 연동
- Export: CSV 다운로드
모니터링하고 관리하는 웹 대시보드 개발 프로젝트입니다.
[주요 화면 및 기능]
( 로그인 / 비밀번호 찾기)
- 로그인: ID/Password 입력, Power Monitoring 로고
- 비밀번호 찾기: 등록자 성명, 소속명, PIN번호(6자리) 입력 → 계정정보 표시
1. Dashboard (대시보드)
- Daily/Weekly/Monthly Max KW: 게이지 차트로 표시 (0~150 KW 범위)
· 녹색(정상) → 노란색(주의) → 빨간색(위험) 색상 구간
· 측정 일시 및 현재 값(예: 132.1 kw) 표시
- Power Usage Status Graph: 실시간 막대 그래프
· Highest(697.0), High Alarm(630.0), Low Alarm(100.0), Lowest(80.0) 라인 표시
· 시간대별(10:15~10:43 등) 전력 사용량 추이
- Rack Power Usage Rank: High/Low Top 5 Rack 순위 (단위: kw)
- Event Date: Historical Max, Yearly Max, Yearly Min 사용일 및 KW
- Alarm: 최근 알람 목록 (Low Alarm, High Alarm, Net Error)
2. Period Graph (기간별 그래프)
- Search Filter:
· 빠른 검색: 최근 31분/5시간/31시간/31일/31개월 보기 버튼
· 조회기간 선택: 시작일 ~ 종료일 캘린더
· 조회단위 선택: 1분/10분/1시간/1일/1주일/1개월 드롭다운
· 조회영역 선택: XD열(전체/1열/2열) → Rack(01~12) → PDU(전체/L/R)
- 차트: TradingView Lightweight Charts 라이브러리 사용
· 마우스 호버 시 Usage 값과 시간 툴팁 표시 (예: Usage 697.0, 11:58)
· High Power Alarm Line / Low Power Alarm Line 점선 표시
3. PDU Status (전력 상태 현황)
- XD_cold Aisle Zone 전체 전력량 (예: 135.4 KW)
- Row 1 (69.4 KW) / Row 2 (66.0 KW) 구분
- Rack별 카드:
· Rack 번호 및 전력량 (예: Rack 01, 22.0 KW)
· L/R PDU 전력량 (예: L 1.0, R 0.5)
· 상태 인디케이터: Status(녹색=Normal, 회색=Error Networking)
· 사용량 인디케이터: Usage(녹색=Normal, 빨간색=High, 파란색=Low, 회색=Not Displayable)
- 실제 배치 반영: Row 2에 pillar(기둥) 3개 위치 표시
4. Alarm Log (알람 로그)
- Search Filter: 조회기간 선택, 이벤트 타입 선택(All Events/High/Low/Network)
- 테이블: No, Time, Event(Networking error, High power error, Low power error), Device(R01-L 등)
- CSV 다운로드 버튼
- 페이지네이션
5. Admin Console (관리자 콘솔)
- Alarm Line setting:
· Total / Row1 / Row2 / Rack / Pdu 별로 High/Low Power Alarm Line value 설정
· 각 항목별 Confirm 버튼
- User 관리 테이블:
· User 구분(Administrator, User 1, User 2 등)
· id, password, name, affiliation(소속), PIN No.
· Confirm 버튼으로 저장
[사용 기술 스택]
- Frontend: React, TypeScript
- Chart Library: TradingView Lightweight Charts (코인/주식 차트 라이브러리)
- UI Components: 게이지 차트, 그리드 레이아웃, 드롭다운 필터, 테이블
- Data: 실시간 전력 데이터 API 연동
- Export: CSV 다운로드
