Prometheus + Flask + Chart.js로 서버 성능 기간별 조회

* Prometheus + Flask + Chart.js로 서버 성능 기간별 조회

이번에는 Prometheus의 range query 기능을 이용해서,

사용자가 시작일/종료일과 조회 간격(step)을 선택하여 특정 기간의 CPU, RAM, Load 등의 데이터를 조회하고 시각화하는 기능을 구현해 보았다.

Prometheus	시간대별 메트릭 수집 및 range 쿼리 지원
Flask	/api/cpu_range, /api/ram_range 등 API 라우트
Chart.js	조회 결과로 받은 시계열 데이터 시각화
HTML + JS	날짜 & step 선택 UI

 

html

시작일, 종료일, 성능 항목, step(간격)을 선택할 수 있는 기간 조회 인터페이스.

 

 

flask API

query_range는 Prometheus에서 기간 기반 데이터 조회를 위한 API다.
step을 조절하면 1분, 5분, 10분 간격 등 원하는 해상도로 조회 가능하다.

 

 

JS fetch + 그래프 업데이트

사용자 입력값(start, end, step, metric) → URL 파라미터로 변환.

fetch()로 Flask API 호출 → Prometheus에서 query_range 실행.

결과 데이터를 Chart.js에 바인딩하여 차트 갱신.

 

 

 

조회된 CPU 사용률 데이터를 막대그래프로 시각화한 모습이다.
step 간격이 작은 경우 선형그래프보단 막대형 차트가 직관적일 수 있다.

 

 

 

선형그래프.

 

 

전체 성능 대시보드

서버 성능 대시보드.

 

 

대시보드 로그

임계치 초과 시 로그.

 

 

터미널 로그

터미널 로그.

 

끝.