Compare commits
8 Commits
e49c962cee
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 7062a81d33 | |||
| 79a7fc1550 | |||
| bf10a1d000 | |||
| 8bcb5c7ff7 | |||
| 248eb6e6e0 | |||
| 474e20eb5c | |||
| bd9d2a703f | |||
| 240e096bd8 |
506
README.md
506
README.md
@@ -1,284 +1,336 @@
|
||||
# OSOLIT Monitor
|
||||
|
||||
시스템 헬스체크 & 모니터링 대시보드 (Nuxt 3 + SQLite + SSE)
|
||||
시스템 헬스체크 & 모니터링 대시보드 (Nuxt 3 + PostgreSQL + WebSocket)
|
||||
|
||||
## 주요 기능
|
||||
|
||||
### 📊 실시간 대시보드 (웹소켓/SSE 기반)
|
||||
- **네트워크 점검** 포틀릿 (단일, 핵심)
|
||||
- Server-Sent Events (SSE)로 실시간 업데이트
|
||||
- 점검 시간과 상태 즉시 반영
|
||||
- 연결 상태 표시 (🟢 연결됨 / 🔴 연결 끊김)
|
||||
- 향후 추가 포틀릿 확장 가능
|
||||
### 📊 실시간 대시보드
|
||||
- **서버 상태 모니터링**: 다중 서버 헬스체크 및 상태 표시
|
||||
- **네트워크 점검**: Public(외부망) / Private(내부망) 분리 모니터링
|
||||
- **위치별 통계**: 서버 위치(Location)별 현황 요약
|
||||
- **WebSocket 기반 실시간 업데이트**
|
||||
- **다크/라이트 테마 지원**
|
||||
|
||||
### 🔄 적응형 스케줄러
|
||||
- **정상 시**: 5분 간격 점검
|
||||
- **장애 시**: 1분 간격 점검 (빠른 복구 감지)
|
||||
- 자동으로 간격 조정
|
||||
- DB 시간 기준으로 로그 저장
|
||||
### 🌐 네트워크 모니터링
|
||||
- **Public Network (pubnet)**: 외부망 연결 상태 점검
|
||||
- **Private Network (privnet)**: 내부망 연결 상태 점검
|
||||
- 응답 시간 측정 및 에러 메시지 상세 표시
|
||||
|
||||
### 🌐 네트워크 점검
|
||||
- World Time API를 통한 외부 네트워크 상태 확인
|
||||
- 응답 시간 측정
|
||||
- 에러 메시지 상세 표시
|
||||
### 🖥️ 서버 모니터링
|
||||
- 다중 서버 대상 관리
|
||||
- 서버별 헬스체크 이력 조회
|
||||
- 위치별 서버 현황 통계
|
||||
- 스케줄러 제어 (시작/중지)
|
||||
|
||||
### 💾 데이터 저장
|
||||
- **SQLite 파일 DB** (`database/health_logs.db`)
|
||||
- 별도 DB 서버 설치 불필요
|
||||
- 상태: UP(정상) / DOWN(장애)
|
||||
### 📈 이상탐지 (Anomaly Detection)
|
||||
- **Baseline 분석**: 정상 기준선 대비 이상 탐지
|
||||
- **Z-Score 분석**: 통계적 이상치 탐지
|
||||
- **Trend 분석**: 장기 추세 분석
|
||||
- **Short-term 분석**: 단기 변동 탐지
|
||||
- Chart.js 기반 시각화
|
||||
|
||||
### ⚙️ 설정 관리
|
||||
- 임계값(Threshold) 설정
|
||||
- 스케줄러 간격 조정
|
||||
|
||||
## 기술 스택
|
||||
|
||||
| 구분 | 기술 |
|
||||
|------|------|
|
||||
| **Frontend** | Nuxt 3, Vue 3, Chart.js |
|
||||
| **Backend** | Nitro (Node.js) |
|
||||
| **Database** | PostgreSQL |
|
||||
| **Real-time** | WebSocket |
|
||||
| **Container** | Docker |
|
||||
| **Timezone** | Asia/Seoul |
|
||||
|
||||
## 프로젝트 구조
|
||||
|
||||
```
|
||||
osolit-monitor/
|
||||
├── frontend/ # 프론트엔드 (Pages & Components)
|
||||
│ ├── index.vue # 📊 메인 대시보드
|
||||
│ ├── components/
|
||||
│ │ ├── DashboardControl.vue
|
||||
│ │ ├── ServerPortlet.vue
|
||||
│ │ ├── NetworkPortlet.vue
|
||||
│ │ ├── LocationStatsPortlet.vue
|
||||
│ │ ├── SidebarNav.vue
|
||||
│ │ └── ThemeToggle.vue
|
||||
│ ├── network/ # 네트워크 모니터링
|
||||
│ ├── server/ # 서버 모니터링
|
||||
│ │ ├── list.vue
|
||||
│ │ └── history.vue
|
||||
│ ├── anomaly/ # 이상탐지
|
||||
│ │ ├── baseline.vue
|
||||
│ │ ├── zscore.vue
|
||||
│ │ ├── trend.vue
|
||||
│ │ └── short-term.vue
|
||||
│ ├── settings/ # 설정
|
||||
│ ├── assets/css/
|
||||
│ └── composables/
|
||||
│
|
||||
├── backend/ # 백엔드 (API & Plugins)
|
||||
│ ├── api/
|
||||
│ │ ├── network/
|
||||
│ │ │ ├── pubnet/ # 외부망 API
|
||||
│ │ │ └── privnet/ # 내부망 API
|
||||
│ │ ├── server/ # 서버 모니터링 API
|
||||
│ │ │ ├── status.get.ts
|
||||
│ │ │ ├── location-stats.get.ts
|
||||
│ │ │ ├── targets/
|
||||
│ │ │ ├── history/
|
||||
│ │ │ └── scheduler/
|
||||
│ │ ├── anomaly/ # 이상탐지 API
|
||||
│ │ │ ├── baseline.get.ts
|
||||
│ │ │ ├── zscore.get.ts
|
||||
│ │ │ ├── trend.get.ts
|
||||
│ │ │ ├── short-term.get.ts
|
||||
│ │ │ ├── chart.get.ts
|
||||
│ │ │ └── logs.get.ts
|
||||
│ │ └── settings/ # 설정 API
|
||||
│ │ ├── thresholds.get.ts
|
||||
│ │ └── thresholds.put.ts
|
||||
│ ├── plugins/
|
||||
│ │ ├── pubnet-init.ts # 외부망 스케줄러 초기화
|
||||
│ │ ├── privnet-init.ts # 내부망 스케줄러 초기화
|
||||
│ │ └── server-init.ts # 서버 스케줄러 초기화
|
||||
│ ├── routes/ # WebSocket 라우트
|
||||
│ └── utils/
|
||||
│ ├── db.ts # PostgreSQL 연결
|
||||
│ ├── pubnet-scheduler.ts
|
||||
│ ├── privnet-scheduler.ts
|
||||
│ └── server-scheduler.ts
|
||||
│
|
||||
├── database/ # DB 관련 (마이그레이션 등)
|
||||
├── .env # 개발 환경변수
|
||||
├── .env.prod # 운영 환경변수
|
||||
├── Dockerfile # 프로덕션 Docker 이미지
|
||||
├── nuxt.config.ts
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## 설치 및 실행
|
||||
|
||||
### 환경 요구사항
|
||||
- Node.js 20+
|
||||
- PostgreSQL 14+
|
||||
|
||||
### 1. 의존성 설치
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. 개발 서버 실행
|
||||
### 2. 환경변수 설정
|
||||
```bash
|
||||
# .env 파일 생성
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
```env
|
||||
# 환경 설정
|
||||
NODE_ENV=development
|
||||
|
||||
# PostgreSQL 연결 정보
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=osolit_monitor
|
||||
DB_USER=postgres
|
||||
DB_PASSWORD=your_password
|
||||
|
||||
# 스케줄러 자동시작 (development: false 권장)
|
||||
AUTO_START_SCHEDULER=false
|
||||
```
|
||||
|
||||
### 3. 개발 서버 실행
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
서버 시작 시:
|
||||
- DB 자동 초기화
|
||||
- 즉시 첫 네트워크 점검 실행
|
||||
- SSE 서버 시작
|
||||
- 개발 서버: http://localhost:3000
|
||||
- 개발 서버: http://localhost:4055
|
||||
- WebSocket: ws://localhost:4055/_ws
|
||||
|
||||
### 3. 프로덕션 빌드
|
||||
### 4. 프로덕션 빌드
|
||||
```bash
|
||||
npm run build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## Docker 배포
|
||||
|
||||
### 빌드 및 실행
|
||||
```bash
|
||||
# 이미지 빌드
|
||||
docker build -t osolit-monitor .
|
||||
|
||||
# 컨테이너 실행
|
||||
docker run -d \
|
||||
--name osolit-monitor \
|
||||
-p 4055:4055 \
|
||||
-e DB_HOST=your-db-host \
|
||||
-e DB_PORT=5432 \
|
||||
-e DB_NAME=osolit_monitor \
|
||||
-e DB_USER=osolit \
|
||||
-e DB_PASSWORD=your_password \
|
||||
osolit-monitor
|
||||
```
|
||||
|
||||
### Docker 특징
|
||||
- Multi-stage 빌드 (최적화된 이미지 크기)
|
||||
- Asia/Seoul 타임존 설정
|
||||
- 비root 사용자 실행 (보안)
|
||||
- 환경변수 기반 설정
|
||||
|
||||
## 화면 구성
|
||||
|
||||
### 홈 (실시간 대시보드)
|
||||
**http://localhost:3000**
|
||||
|
||||
#### 네트워크 점검 포틀릿
|
||||
### 메인 대시보드 (`/`)
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 🌐 네트워크 점검 ✓ │ ← 상태 아이콘
|
||||
├─────────────────────────────────┤
|
||||
│ [ UP ] │ ← 상태 뱃지
|
||||
│ │
|
||||
│ 점검 시간: 12/25 14:35:20 │ ← 마지막 점검 시간
|
||||
│ 응답 시간: 123ms │ ← 응답 속도
|
||||
├─────────────────────────────────┤
|
||||
│ 5분 전 ⏱️ 5분 간격 │ ← 상대시간 & 점검주기
|
||||
└─────────────────────────────────┘
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 📊 대시보드 2024-12-25 14:30:00 │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ ┌─────────────────────────────────┐ ┌─────────────────┐ │
|
||||
│ │ │ │ 🌐 Public ✓ │ │
|
||||
│ │ 서버 현황 (90%) │ │ [UP] │ │
|
||||
│ │ │ ├─────────────────┤ │
|
||||
│ │ 서버 목록 & 상태 │ │ 🔒 Private ✓ │ │
|
||||
│ │ │ │ [UP] │ │
|
||||
│ │ │ ├─────────────────┤ │
|
||||
│ │ │ │ 📍 위치별 통계 │ │
|
||||
│ └─────────────────────────────────┘ └─────────────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
🟢 연결됨
|
||||
```
|
||||
|
||||
**실시간 업데이트:**
|
||||
- 점검 완료 시 즉시 화면 반영
|
||||
- 별도 새로고침 불필요
|
||||
- SSE 연결 상태 표시
|
||||
### 서버 관리 (`/server/list`, `/server/history`)
|
||||
- 모니터링 대상 서버 목록 관리
|
||||
- 서버별 헬스체크 이력 조회
|
||||
|
||||
**향후 확장:**
|
||||
- 데이터베이스 점검 포틀릿
|
||||
- 서버 상태 포틀릿
|
||||
- 디스크 용량 포틀릿
|
||||
- 기타 모니터링 항목
|
||||
### 이상탐지 (`/anomaly/*`)
|
||||
- Baseline / Z-Score / Trend / Short-term 분석
|
||||
- 차트 기반 시각화
|
||||
|
||||
### 로그 & 통계
|
||||
**http://localhost:3000/logs**
|
||||
- 전체 점검 이력
|
||||
- 통계 정보
|
||||
|
||||
### 시스템 헬스체크
|
||||
**http://localhost:3000/health**
|
||||
- 실시간 상태 조회
|
||||
|
||||
### 글로벌 표준시
|
||||
**http://localhost:3000/time**
|
||||
- Time API 직접 테스트
|
||||
|
||||
## 프로젝트 구조
|
||||
|
||||
```
|
||||
osolit-monitor/
|
||||
├── frontend/
|
||||
│ ├── index.vue # 🏠 실시간 대시보드
|
||||
│ ├── logs.vue # 📊 로그 & 통계
|
||||
│ ├── health.vue # 🏥 헬스체크
|
||||
│ └── time.vue # 🌍 시간 API
|
||||
├── backend/
|
||||
│ ├── api/
|
||||
│ │ ├── dashboard.get.ts # 대시보드 초기 데이터
|
||||
│ │ ├── stream.get.ts # SSE 스트림 (실시간)
|
||||
│ │ ├── logs.get.ts
|
||||
│ │ └── stats.get.ts
|
||||
│ ├── plugins/
|
||||
│ │ └── scheduler.ts # 적응형 스케줄러
|
||||
│ └── utils/
|
||||
│ ├── database.ts # SQLite
|
||||
│ └── timecheck.ts # 네트워크 체크
|
||||
├── database/
|
||||
│ └── health_logs.db # SQLite (자동 생성)
|
||||
└── nuxt.config.ts
|
||||
```
|
||||
|
||||
## 실시간 업데이트 (SSE)
|
||||
|
||||
### Server-Sent Events
|
||||
```javascript
|
||||
// 프론트엔드
|
||||
const eventSource = new EventSource('/api/stream')
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
const message = JSON.parse(event.data)
|
||||
|
||||
if (message.type === 'health_update') {
|
||||
// 화면 즉시 업데이트
|
||||
networkStatus.value = message.data
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 메시지 타입
|
||||
- `health_update`: 헬스체크 결과
|
||||
- `ping`: 연결 유지 (30초마다)
|
||||
|
||||
### 자동 재연결
|
||||
연결 끊김 시 5초 후 자동 재연결 시도
|
||||
|
||||
## 적응형 스케줄링
|
||||
|
||||
### 동작 방식
|
||||
1. **서버 시작**: 즉시 첫 점검
|
||||
2. **정상(UP)**: 다음 점검 5분 후
|
||||
3. **장애(DOWN)**: 다음 점검 1분 후 (빠른 복구 감지)
|
||||
4. **상태 변경 시**: 자동으로 간격 조정
|
||||
|
||||
### 콘솔 로그
|
||||
```
|
||||
🚀 Initializing Health Check Scheduler...
|
||||
✅ Database initialized
|
||||
⏰ Running network health check...
|
||||
Result: UP (123ms)
|
||||
✅ Health Check Scheduler started
|
||||
|
||||
[5분 후]
|
||||
⏰ Running network health check...
|
||||
Result: DOWN (5001ms)
|
||||
🔄 Interval changed: 1 minutes
|
||||
|
||||
[1분 후]
|
||||
⏰ Running network health check...
|
||||
Result: UP (125ms)
|
||||
🔄 Interval changed: 5 minutes
|
||||
```
|
||||
### 설정 (`/settings/*`)
|
||||
- 임계값 설정 관리
|
||||
|
||||
## API 엔드포인트
|
||||
|
||||
### GET /api/dashboard
|
||||
초기 대시보드 데이터
|
||||
### 네트워크
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/api/network/pubnet/status` | 외부망 상태 |
|
||||
| GET | `/api/network/privnet/status` | 내부망 상태 |
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"networkStatus": {
|
||||
"id": 123,
|
||||
"service_name": "Network",
|
||||
"status": "UP",
|
||||
"check_time": "2024-12-25T12:34:56.000Z",
|
||||
"response_time": 123,
|
||||
"error_message": null
|
||||
},
|
||||
"lastUpdate": "2024-12-25T12:34:56.789Z"
|
||||
### 서버
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/api/server/status` | 서버 현황 |
|
||||
| GET | `/api/server/location-stats` | 위치별 통계 |
|
||||
| GET | `/api/server/targets` | 모니터링 대상 목록 |
|
||||
| GET | `/api/server/history` | 헬스체크 이력 |
|
||||
|
||||
### 이상탐지
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/api/anomaly/baseline` | Baseline 분석 |
|
||||
| GET | `/api/anomaly/zscore` | Z-Score 분석 |
|
||||
| GET | `/api/anomaly/trend` | Trend 분석 |
|
||||
| GET | `/api/anomaly/short-term` | 단기 분석 |
|
||||
| GET | `/api/anomaly/chart` | 차트 데이터 |
|
||||
|
||||
### 설정
|
||||
| Method | Endpoint | 설명 |
|
||||
|--------|----------|------|
|
||||
| GET | `/api/settings/thresholds` | 임계값 조회 |
|
||||
| PUT | `/api/settings/thresholds` | 임계값 수정 |
|
||||
|
||||
## WebSocket 통신
|
||||
|
||||
### 연결
|
||||
```javascript
|
||||
const ws = new WebSocket('ws://localhost:4055/_ws')
|
||||
```
|
||||
|
||||
### 메시지 타입
|
||||
|
||||
**클라이언트 → 서버:**
|
||||
```javascript
|
||||
// 새로고침 간격 설정
|
||||
{ type: 'set_interval', interval: 1 }
|
||||
|
||||
// 자동 새로고침 토글
|
||||
{ type: 'set_auto_refresh', enabled: true }
|
||||
|
||||
// 즉시 새로고침
|
||||
{ type: 'refresh' }
|
||||
|
||||
// 특정 시점 데이터 조회
|
||||
{ type: 'fetch_at', datetime: '2024-12-25T14:30:00' }
|
||||
```
|
||||
|
||||
**서버 → 클라이언트:**
|
||||
```javascript
|
||||
// 실시간 상태
|
||||
{ type: 'status', data: { pubnet: {...}, privnet: {...} } }
|
||||
|
||||
// 서버 현황
|
||||
{ type: 'server', data: { servers: [...], summary: {...} } }
|
||||
|
||||
// 과거 데이터
|
||||
{ type: 'historical', data: {...} }
|
||||
```
|
||||
|
||||
## 데이터베이스
|
||||
|
||||
### PostgreSQL 연결
|
||||
```typescript
|
||||
// backend/utils/db.ts
|
||||
const config = {
|
||||
host: process.env.DB_HOST,
|
||||
port: parseInt(process.env.DB_PORT || '5432'),
|
||||
database: process.env.DB_NAME,
|
||||
user: process.env.DB_USER,
|
||||
password: process.env.DB_PASSWORD,
|
||||
}
|
||||
```
|
||||
|
||||
### GET /api/stream (SSE)
|
||||
실시간 업데이트 스트림
|
||||
### 주요 테이블
|
||||
- `health_check_log`: 헬스체크 로그
|
||||
- `server_targets`: 모니터링 대상 서버
|
||||
- `thresholds`: 임계값 설정
|
||||
|
||||
**Event Stream:**
|
||||
```
|
||||
data: {"type":"health_update","data":{...}}
|
||||
## 스케줄러
|
||||
|
||||
data: {"type":"ping","timestamp":"2024-12-25T12:34:56.789Z"}
|
||||
```
|
||||
### 동작 방식
|
||||
- **개발 환경**: 수동 시작 (`AUTO_START_SCHEDULER=false`)
|
||||
- **운영 환경**: 자동 시작 (`AUTO_START_SCHEDULER=true`)
|
||||
|
||||
### GET /api/logs
|
||||
헬스체크 로그 조회
|
||||
|
||||
### GET /api/stats
|
||||
통계 조회
|
||||
|
||||
## 데이터베이스 스키마
|
||||
|
||||
### health_check_log 테이블
|
||||
```sql
|
||||
CREATE TABLE health_check_log (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
check_time DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
service_name TEXT NOT NULL, -- 'Network'
|
||||
status TEXT NOT NULL, -- 'UP' or 'DOWN'
|
||||
response_time INTEGER, -- 밀리초
|
||||
error_message TEXT,
|
||||
details TEXT
|
||||
)
|
||||
```
|
||||
|
||||
## 데이터 관리
|
||||
|
||||
### DB 백업
|
||||
```bash
|
||||
cp database/health_logs.db database/backup_$(date +%Y%m%d).db
|
||||
```
|
||||
|
||||
### DB 조회
|
||||
```bash
|
||||
sqlite3 database/health_logs.db
|
||||
|
||||
# 최근 로그
|
||||
SELECT * FROM health_check_log
|
||||
WHERE service_name = 'Network'
|
||||
ORDER BY check_time DESC LIMIT 20;
|
||||
|
||||
# 통계
|
||||
SELECT
|
||||
status,
|
||||
COUNT(*) as count,
|
||||
AVG(response_time) as avg_ms
|
||||
FROM health_check_log
|
||||
WHERE service_name = 'Network'
|
||||
GROUP BY status;
|
||||
```
|
||||
### 스케줄러 종류
|
||||
| 스케줄러 | 설명 | 간격 |
|
||||
|----------|------|------|
|
||||
| `pubnet-scheduler` | 외부망 점검 | 적응형 (정상 5분, 장애 1분) |
|
||||
| `privnet-scheduler` | 내부망 점검 | 적응형 (정상 5분, 장애 1분) |
|
||||
| `server-scheduler` | 서버 점검 | 설정 가능 |
|
||||
|
||||
## 브라우저 호환성
|
||||
|
||||
SSE 지원 브라우저:
|
||||
- ✅ Chrome
|
||||
- ✅ Firefox
|
||||
- ✅ Safari
|
||||
- ✅ Edge
|
||||
- ❌ IE (미지원)
|
||||
|
||||
## 다음 단계
|
||||
## 개발 로드맵
|
||||
|
||||
- [ ] 데이터베이스 점검 포틀릿 추가
|
||||
- [ ] 서버 상태 점검 포틀릿 추가
|
||||
- [ ] 디스크 용량 점검 포틀릿 추가
|
||||
- [ ] Jenkins Job 통합
|
||||
- [x] 서버 모니터링 포틀릿
|
||||
- [x] 네트워크 모니터링 (Public/Private)
|
||||
- [x] 이상탐지 기능
|
||||
- [x] Chart.js 차트
|
||||
- [x] 다크/라이트 테마
|
||||
- [x] Docker 지원
|
||||
- [ ] 장애 알림 (이메일/Slack)
|
||||
- [ ] 차트/그래프
|
||||
- [ ] 오래된 로그 자동 삭제
|
||||
- [ ] Jenkins Job 통합
|
||||
|
||||
## 기술 스택
|
||||
## 라이선스
|
||||
|
||||
- **Frontend**: Nuxt 3, Vue 3
|
||||
- **Backend**: Nitro (Node.js)
|
||||
- **Database**: SQLite (better-sqlite3)
|
||||
- **Real-time**: Server-Sent Events (SSE)
|
||||
- **Scheduler**: 적응형 (정상 5분, 장애 1분)
|
||||
- **External API**: World Time API
|
||||
|
||||
## 특징
|
||||
|
||||
✅ **실시간 업데이트** - SSE로 즉시 반영
|
||||
✅ **적응형 스케줄링** - 장애 시 빠른 점검
|
||||
✅ **단순한 구조** - 네트워크 점검 중심
|
||||
✅ **확장 가능** - 포틀릿 추가 용이
|
||||
✅ **파일 DB** - 별도 서버 불필요
|
||||
Private - TurboSoft
|
||||
|
||||
@@ -163,7 +163,7 @@ async function getServerDashboard() {
|
||||
|
||||
// 서버 목록
|
||||
const servers = await query(`
|
||||
SELECT target_id, server_name, is_active
|
||||
SELECT target_id, server_name, server_ip, is_active
|
||||
FROM server_targets
|
||||
WHERE is_active = 1
|
||||
ORDER BY server_name
|
||||
@@ -176,16 +176,19 @@ async function getServerDashboard() {
|
||||
for (const server of servers) {
|
||||
// 최신 스냅샷
|
||||
const snapshot = await queryOne(`
|
||||
SELECT cpu_percent, memory_percent, collected_at
|
||||
SELECT cpu_percent, memory_percent, memory_total, memory_free, memory_used,
|
||||
cpu_temp, load_percent, uptime_str, collected_at
|
||||
FROM server_snapshots
|
||||
WHERE target_id = $1 AND is_online = 1
|
||||
ORDER BY collected_at DESC
|
||||
LIMIT 1
|
||||
`, [server.target_id])
|
||||
|
||||
// 최신 디스크 사용률 (최대값)
|
||||
// 최신 디스크 사용률 (최대값) + 용량
|
||||
const diskData = await queryOne(`
|
||||
SELECT MAX(disk_percent) as disk_percent
|
||||
SELECT MAX(disk_percent) as disk_percent,
|
||||
SUM(disk_used) as disk_used,
|
||||
SUM(disk_total) as disk_total
|
||||
FROM server_disks
|
||||
WHERE target_id = $1
|
||||
AND collected_at = (SELECT MAX(collected_at) FROM server_disks WHERE target_id = $1)
|
||||
@@ -209,6 +212,7 @@ async function getServerDashboard() {
|
||||
|
||||
if (!isOffline && snapshot) {
|
||||
cpuLevel = getLevel(Number(snapshot.cpu_percent), thresholds.server?.cpu || { warning: 70, critical: 85, danger: 95 })
|
||||
// 메모리: snapshot.memory_percent 직접 사용
|
||||
memLevel = getLevel(Number(snapshot.memory_percent), thresholds.server?.memory || { warning: 80, critical: 90, danger: 95 })
|
||||
diskLevel = getLevel(Number(diskData?.disk_percent), thresholds.server?.disk || { warning: 80, critical: 90, danger: 95 })
|
||||
serverLevel = getHighestLevel([cpuLevel, memLevel, diskLevel])
|
||||
@@ -286,13 +290,22 @@ async function getServerDashboard() {
|
||||
serverStatuses.push({
|
||||
target_id: server.target_id,
|
||||
server_name: server.server_name,
|
||||
server_ip: server.server_ip,
|
||||
level: serverLevel,
|
||||
cpu_percent: snapshot?.cpu_percent ?? null,
|
||||
cpu_level: cpuLevel,
|
||||
memory_percent: snapshot?.memory_percent ?? null,
|
||||
memory_percent: snapshot?.memory_percent ?? null, // snapshot의 memory_percent 직접 사용
|
||||
memory_level: memLevel,
|
||||
memory_total: snapshot?.memory_total ?? null,
|
||||
memory_free: snapshot?.memory_free ?? null,
|
||||
memory_used: snapshot?.memory_used ?? null,
|
||||
disk_percent: diskData?.disk_percent ?? null,
|
||||
disk_level: diskLevel,
|
||||
disk_used: diskData?.disk_used ?? null,
|
||||
disk_total: diskData?.disk_total ?? null,
|
||||
cpu_temp: snapshot?.cpu_temp ?? null,
|
||||
load_percent: snapshot?.load_percent ?? null,
|
||||
uptime_str: snapshot?.uptime_str ?? null,
|
||||
last_collected: lastCollected,
|
||||
containers: containers,
|
||||
container_summary: containerSummary
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { query, queryOne, execute, getPool } from './db'
|
||||
import { ofetch } from 'ofetch'
|
||||
|
||||
interface ServerTarget {
|
||||
target_id: number
|
||||
@@ -20,16 +21,20 @@ function timestamp(): string {
|
||||
return new Date().toLocaleString('sv-SE', { timeZone: 'Asia/Seoul' }).replace('T', ' ')
|
||||
}
|
||||
|
||||
// Glances API 호출 (버전 지정)
|
||||
// Glances API 호출 (버전 지정) - ofetch 사용
|
||||
async function fetchGlancesApi(baseUrl: string, endpoint: string, version: string): Promise<any> {
|
||||
const url = `${baseUrl}/api/${version}/${endpoint}`
|
||||
try {
|
||||
const url = `${baseUrl}/api/${version}/${endpoint}`
|
||||
const response = await fetch(url, {
|
||||
signal: AbortSignal.timeout(5000)
|
||||
const data = await ofetch(url, {
|
||||
timeout: 5000,
|
||||
retry: 0
|
||||
})
|
||||
if (!response.ok) return null
|
||||
return await response.json()
|
||||
} catch (err) {
|
||||
return data
|
||||
} catch (err: any) {
|
||||
// 404, timeout 등 에러는 조용히 null 반환
|
||||
if (err.statusCode !== 404) {
|
||||
console.error(`[fetchGlancesApi] ${url} - Error: ${err.message}`)
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
@@ -84,6 +89,8 @@ async function detectAnomalies(targetId: number, serverName: string) {
|
||||
|
||||
const currCpuAvg = currSnapshots.reduce((sum, s) => sum + (s.cpu_percent || 0), 0) / currSnapshots.length
|
||||
const prevCpuAvg = prevSnapshots.reduce((sum, s) => sum + (s.cpu_percent || 0), 0) / prevSnapshots.length
|
||||
|
||||
// 메모리: memory_percent 직접 사용
|
||||
const currMemAvg = currSnapshots.reduce((sum, s) => sum + (s.memory_percent || 0), 0) / currSnapshots.length
|
||||
const prevMemAvg = prevSnapshots.reduce((sum, s) => sum + (s.memory_percent || 0), 0) / prevSnapshots.length
|
||||
|
||||
@@ -152,7 +159,7 @@ async function detectAnomalies(targetId: number, serverName: string) {
|
||||
if (hourSnapshots.length >= 10) {
|
||||
const current = hourSnapshots[0]
|
||||
const currCpu = current.cpu_percent ?? 0
|
||||
const currMem = current.memory_percent ?? 0
|
||||
const currMem = current.memory_percent ?? 0 // memory_percent 직접 사용
|
||||
|
||||
const cpuValues = hourSnapshots.map(s => s.cpu_percent ?? 0)
|
||||
const memValues = hourSnapshots.map(s => s.memory_percent ?? 0)
|
||||
@@ -244,7 +251,7 @@ async function detectAnomalies(targetId: number, serverName: string) {
|
||||
|
||||
if (baselineData.length >= 5 && currentSnapshot) {
|
||||
const currCpu = currentSnapshot.cpu_percent ?? 0
|
||||
const currMem = currentSnapshot.memory_percent ?? 0
|
||||
const currMem = currentSnapshot.memory_percent ?? 0 // memory_percent 직접 사용
|
||||
|
||||
const cpuValues = baselineData.map(s => s.cpu_percent ?? 0)
|
||||
const memValues = baselineData.map(s => s.memory_percent ?? 0)
|
||||
@@ -485,12 +492,12 @@ async function collectServerData(target: ServerTarget) {
|
||||
quicklook?.cpu_name || null,
|
||||
quicklook?.cpu_number || quicklook?.cpu_log_core || cpu?.cpucore || null,
|
||||
cpu?.total ?? quicklook?.cpu ?? null,
|
||||
mem?.total || null,
|
||||
mem?.used || null,
|
||||
mem?.free || null,
|
||||
mem?.total ? Math.round(mem.total) : null, // bigint: 정수 변환
|
||||
mem?.total && mem?.percent ? Math.round(mem.total * mem.percent / 100) : null, // bigint: 정수 변환
|
||||
mem?.free ? Math.round(mem.free) : null, // bigint: 정수 변환
|
||||
mem?.percent || null,
|
||||
memswap?.total || null,
|
||||
memswap?.used || null,
|
||||
memswap?.total ? Math.round(memswap.total) : null, // bigint: 정수 변환
|
||||
memswap?.used ? Math.round(memswap.used) : null, // bigint: 정수 변환
|
||||
memswap?.percent || null,
|
||||
isOnline ? 1 : 0,
|
||||
apiVersion,
|
||||
@@ -516,8 +523,8 @@ async function collectServerData(target: ServerTarget) {
|
||||
disk.device_name || null,
|
||||
disk.mnt_point || null,
|
||||
disk.fs_type || null,
|
||||
disk.size || null,
|
||||
disk.used || null,
|
||||
disk.size ? Math.round(disk.size) : null, // bigint: 정수 변환
|
||||
disk.used ? Math.round(disk.used) : null, // bigint: 정수 변환
|
||||
disk.percent || null,
|
||||
now
|
||||
])
|
||||
@@ -528,6 +535,26 @@ async function collectServerData(target: ServerTarget) {
|
||||
if (Array.isArray(docker) && docker.length > 0) {
|
||||
console.log(`[${now}] 🐳 [${target.server_name}] container 저장 (${docker.length}개 컨테이너)`)
|
||||
for (const container of docker) {
|
||||
// CPU 값 추출 로직
|
||||
const cpuPercent = container.cpu?.total ?? container.cpu_percent ?? null
|
||||
const memoryUsage = container.memory?.usage || container.memory_usage || null
|
||||
const memoryLimit = container.memory?.limit || container.memory_limit || null
|
||||
const memoryPercent = container.memory?.usage && container.memory?.limit
|
||||
? (container.memory.usage / container.memory.limit * 100)
|
||||
: container.memory_percent ?? null
|
||||
|
||||
// 각 컨테이너별 상세 로그
|
||||
console.log(`[${now}] 🐳 - ${container.name}: CPU=${cpuPercent?.toFixed(2) ?? 'null'}%, MEM=${memoryPercent?.toFixed(2) ?? 'null'}%`)
|
||||
|
||||
// CPU가 null인 경우 상세 디버깅
|
||||
if (cpuPercent === null) {
|
||||
console.warn(`[${now}] ⚠️ - ${container.name}: CPU 값 null! 원본:`, JSON.stringify({
|
||||
'cpu.total': container.cpu?.total,
|
||||
'cpu_percent': container.cpu_percent,
|
||||
'cpu': container.cpu
|
||||
}))
|
||||
}
|
||||
|
||||
await execute(`
|
||||
INSERT INTO server_containers (
|
||||
target_id, docker_id, container_name, container_image,
|
||||
@@ -540,12 +567,10 @@ async function collectServerData(target: ServerTarget) {
|
||||
container.name || null,
|
||||
Array.isArray(container.image) ? container.image.join(', ') : container.image || null,
|
||||
container.status || null,
|
||||
container.cpu?.total ?? container.cpu_percent ?? null,
|
||||
container.memory?.usage || container.memory_usage || null,
|
||||
container.memory?.limit || container.memory_limit || null,
|
||||
container.memory?.usage && container.memory?.limit
|
||||
? (container.memory.usage / container.memory.limit * 100)
|
||||
: container.memory_percent ?? null,
|
||||
cpuPercent,
|
||||
memoryUsage ? Math.round(memoryUsage) : null, // bigint: 정수 변환
|
||||
memoryLimit ? Math.round(memoryLimit) : null, // bigint: 정수 변환
|
||||
memoryPercent,
|
||||
container.uptime || null,
|
||||
container.network?.rx ?? container.network_rx ?? null,
|
||||
container.network?.tx ?? container.network_tx ?? null,
|
||||
@@ -558,6 +583,11 @@ async function collectServerData(target: ServerTarget) {
|
||||
if (Array.isArray(network) && network.length > 0) {
|
||||
console.log(`[${now}] 🌐 [${target.server_name}] network 저장 (${network.length}개 인터페이스)`)
|
||||
for (const iface of network) {
|
||||
const bytesRecv = iface.bytes_recv || iface.cumulative_rx || null
|
||||
const bytesSent = iface.bytes_sent || iface.cumulative_tx || null
|
||||
const packetsRecv = iface.packets_recv || null
|
||||
const packetsSent = iface.packets_sent || null
|
||||
|
||||
await execute(`
|
||||
INSERT INTO server_networks (
|
||||
target_id, interface_name, bytes_recv, bytes_sent,
|
||||
@@ -567,10 +597,10 @@ async function collectServerData(target: ServerTarget) {
|
||||
`, [
|
||||
target.target_id,
|
||||
iface.interface_name || null,
|
||||
iface.bytes_recv || iface.cumulative_rx || null,
|
||||
iface.bytes_sent || iface.cumulative_tx || null,
|
||||
iface.packets_recv || null,
|
||||
iface.packets_sent || null,
|
||||
bytesRecv ? Math.round(bytesRecv) : null, // bigint: 정수 변환
|
||||
bytesSent ? Math.round(bytesSent) : null, // bigint: 정수 변환
|
||||
packetsRecv ? Math.round(packetsRecv) : null, // bigint: 정수 변환
|
||||
packetsSent ? Math.round(packetsSent) : null, // bigint: 정수 변환
|
||||
iface.bytes_recv_rate_per_sec || iface.rx || iface.bytes_recv_rate || null,
|
||||
iface.bytes_sent_rate_per_sec || iface.tx || iface.bytes_sent_rate || null,
|
||||
iface.is_up ? 1 : 0,
|
||||
|
||||
@@ -35,27 +35,36 @@
|
||||
<div class="server-info" @dblclick="goToServerStatus(server.target_id)">
|
||||
<div class="server-name">
|
||||
<span class="level-icon">{{ levelIcon(server.level) }}</span>
|
||||
<span class="name">{{ server.server_name }}</span>
|
||||
<div class="name-wrap">
|
||||
<span class="name">{{ server.server_name }}</span>
|
||||
<span class="server-ip">{{ server.server_ip }}</span>
|
||||
</div>
|
||||
<span class="container-count" v-if="server.level !== 'offline'">📦{{ server.container_summary.total }}</span>
|
||||
</div>
|
||||
|
||||
<template v-if="server.level !== 'offline'">
|
||||
<!-- 업타임 -->
|
||||
<div class="info-row">
|
||||
<span class="info-label">UP</span>
|
||||
<span class="info-value">{{ server.uptime_str || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">CPU</span>
|
||||
<div class="progress-bar">
|
||||
<div :class="['progress-fill', server.cpu_level]" :style="{ width: (server.cpu_percent || 0) + '%' }"></div>
|
||||
</div>
|
||||
<span :class="['metric-value', server.cpu_level, { 'value-changed': isChanged(server.target_id, 'cpu') }]">
|
||||
{{ server.cpu_percent?.toFixed(0) || '-' }}
|
||||
{{ server.cpu_percent?.toFixed(0) || '-' }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<span class="metric-label">MEM</span>
|
||||
<div class="progress-bar">
|
||||
<div :class="['progress-fill', server.memory_level]" :style="{ width: (server.memory_percent || 0) + '%' }"></div>
|
||||
<div :class="['progress-fill', server.memory_level]" :style="{ width: calcMemPercent(server) + '%' }"></div>
|
||||
</div>
|
||||
<span :class="['metric-value', server.memory_level, { 'value-changed': isChanged(server.target_id, 'mem') }]">
|
||||
{{ server.memory_percent?.toFixed(0) || '-' }}
|
||||
{{ calcMemPercent(server).toFixed(0) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
@@ -64,9 +73,27 @@
|
||||
<div :class="['progress-fill', server.disk_level]" :style="{ width: (server.disk_percent || 0) + '%' }"></div>
|
||||
</div>
|
||||
<span :class="['metric-value', server.disk_level, { 'value-changed': isChanged(server.target_id, 'disk') }]">
|
||||
{{ server.disk_percent?.toFixed(0) || '-' }}
|
||||
{{ server.disk_percent?.toFixed(0) || '-' }}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 추가 정보: 온도, Load, 메모리용량, 디스크용량 -->
|
||||
<div class="info-row">
|
||||
<span class="info-label">TEMP</span>
|
||||
<span class="info-value">{{ server.cpu_temp ? server.cpu_temp + '°C' : '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">LOAD</span>
|
||||
<span class="info-value">{{ server.load_percent ? server.load_percent.toFixed(1) + '%' : '-' }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">RAM</span>
|
||||
<span class="info-value">{{ formatServerMem(server) }}</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">HDD</span>
|
||||
<span class="info-value">{{ formatServerDisk(server) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
@@ -157,13 +184,22 @@ interface ContainerStatus {
|
||||
interface ServerStatus {
|
||||
target_id: number
|
||||
server_name: string
|
||||
server_ip: string
|
||||
level: string
|
||||
cpu_percent: number | null
|
||||
cpu_level: string
|
||||
memory_percent: number | null
|
||||
memory_level: string
|
||||
memory_total: number | null
|
||||
memory_free: number | null
|
||||
memory_used: number | null
|
||||
disk_percent: number | null
|
||||
disk_level: string
|
||||
disk_used: number | null
|
||||
disk_total: number | null
|
||||
cpu_temp: number | null
|
||||
load_percent: number | null
|
||||
uptime_str: string | null
|
||||
last_collected: string | null
|
||||
containers: ContainerStatus[]
|
||||
container_summary: { total: number; normal: number; warning: number; critical: number; stopped: number }
|
||||
@@ -265,6 +301,31 @@ function isContainerChanged(serverId: number, containerName: string, metric: str
|
||||
return changedKeys.value.has(`container-${serverId}-${containerName}-${metric}`)
|
||||
}
|
||||
|
||||
// 서버 메모리 퍼센트: memory_percent 직접 사용
|
||||
function calcMemPercent(server: ServerStatus): number {
|
||||
return server.memory_percent || 0
|
||||
}
|
||||
|
||||
// 서버 메모리 용량 포맷: used/total GB (memory_used는 DB에서 계산된 값)
|
||||
function formatServerMem(server: ServerStatus): string {
|
||||
const used = Number(server.memory_used) || 0
|
||||
const total = Number(server.memory_total) || 0
|
||||
if (total === 0) return '-'
|
||||
const usedGB = (used / (1024 * 1024 * 1024)).toFixed(1)
|
||||
const totalGB = (total / (1024 * 1024 * 1024)).toFixed(1)
|
||||
return `${usedGB}/${totalGB}G`
|
||||
}
|
||||
|
||||
// 서버 디스크 용량 포맷: used/total GB
|
||||
function formatServerDisk(server: ServerStatus): string {
|
||||
const used = Number(server.disk_used) || 0
|
||||
const total = Number(server.disk_total) || 0
|
||||
if (total === 0) return '-'
|
||||
const usedGB = (used / (1024 * 1024 * 1024)).toFixed(0)
|
||||
const totalGB = (total / (1024 * 1024 * 1024)).toFixed(0)
|
||||
return `${usedGB}/${totalGB}G`
|
||||
}
|
||||
|
||||
function sortContainers(containers: ContainerStatus[]) {
|
||||
return [...containers].sort((a, b) => a.name.localeCompare(b.name))
|
||||
}
|
||||
@@ -362,12 +423,14 @@ function formatTimeAgo(datetime: string | null): string {
|
||||
.server-unit.danger { border-left: 5px solid #ef4444; }
|
||||
.server-unit.offline { border-left: 5px solid #6b7280; opacity: 0.7; }
|
||||
|
||||
.server-info { width: 200px; min-width: 200px; padding: 16px; border-right: 1px solid var(--border-color); cursor: pointer; }
|
||||
.server-info { width: 240px; min-width: 240px; padding: 16px; border-right: 1px solid var(--border-color); cursor: pointer; }
|
||||
.server-info:hover { background: var(--bg-tertiary, #f8fafc); }
|
||||
|
||||
.server-name { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
|
||||
.server-name .level-icon { font-size: 16px; flex-shrink: 0; }
|
||||
.server-name .name { font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
||||
.server-name .name-wrap { flex: 1; min-width: 0; overflow: hidden; }
|
||||
.server-name .name { display: block; font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.server-name .server-ip { display: block; font-size: 12px; color: var(--text-muted); font-family: monospace; margin-top: 2px; }
|
||||
.server-name .container-count { font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
|
||||
|
||||
.metric-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
||||
@@ -378,19 +441,23 @@ function formatTimeAgo(datetime: string | null): string {
|
||||
.progress-fill.warning { background: #eab308; }
|
||||
.progress-fill.critical { background: #f97316; }
|
||||
.progress-fill.danger { background: #ef4444; }
|
||||
.metric-value { font-size: 17px; font-weight: 700; width: 36px; text-align: right; transition: all 0.3s; padding: 2px 4px; border-radius: 4px; }
|
||||
.metric-value { font-size: 17px; font-weight: 700; width: 44px; text-align: right; transition: all 0.3s; padding: 2px 4px; border-radius: 4px; }
|
||||
.metric-value.normal { color: #16a34a; }
|
||||
.metric-value.warning { color: #ca8a04; }
|
||||
.metric-value.critical { color: #ea580c; }
|
||||
.metric-value.danger { color: #dc2626; }
|
||||
|
||||
.info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
||||
.info-label { font-size: 14px; font-weight: 600; color: var(--text-muted); width: 42px; }
|
||||
.info-value { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-secondary); font-family: monospace; text-align: right; }
|
||||
|
||||
.offline-info { text-align: center; padding: 24px 0; color: var(--text-muted); }
|
||||
.offline-text { font-size: 18px; margin-bottom: 8px; }
|
||||
.offline-time { font-size: 15px; opacity: 0.7; }
|
||||
|
||||
.container-area { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; align-content: flex-start; min-width: 140px; }
|
||||
|
||||
.container-card { width: 200px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.15s; overflow: hidden; }
|
||||
.container-card { width: 208px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); cursor: pointer; transition: all 0.15s; overflow: hidden; }
|
||||
.container-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||
.container-card.normal { background: var(--container-normal-bg, #f0fdf4); border-color: var(--container-normal-border, #86efac); }
|
||||
.container-card.warning { background: var(--container-warning-bg, #fefce8); border-color: var(--container-warning-border, #fde047); }
|
||||
@@ -405,7 +472,7 @@ function formatTimeAgo(datetime: string | null): string {
|
||||
.card-uptime { font-size: 12px; color: var(--text-muted); flex-shrink: 0; margin-left: 8px; white-space: nowrap; }
|
||||
|
||||
.card-metrics { display: flex; flex-wrap: wrap; gap: 5px 8px; }
|
||||
.card-metric { display: flex; align-items: center; gap: 4px; width: calc(50% - 4px); overflow: hidden; }
|
||||
.card-metric { display: flex; align-items: center; gap: 4px; width: calc(50% - 4px); overflow: visible; }
|
||||
.card-metric .label { font-size: 11px; color: var(--text-muted); width: 22px; flex-shrink: 0; font-weight: 500; }
|
||||
.mini-bar { flex: 1; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; min-width: 20px; }
|
||||
.mini-fill { height: 100%; border-radius: 3px; }
|
||||
@@ -413,7 +480,7 @@ function formatTimeAgo(datetime: string | null): string {
|
||||
.mini-fill.warning { background: #eab308; }
|
||||
.mini-fill.critical { background: #f97316; }
|
||||
.mini-fill.danger { background: #ef4444; }
|
||||
.card-metric .value { font-size: 13px; font-weight: 700; color: var(--text-secondary); min-width: 38px; text-align: right; flex-shrink: 0; transition: all 0.3s; padding: 1px 2px; border-radius: 3px; }
|
||||
.card-metric .value { font-size: 13px; font-weight: 700; color: var(--text-secondary); min-width: 44px; text-align: right; flex-shrink: 0; transition: all 0.3s; padding: 1px 2px; border-radius: 3px; }
|
||||
.card-metric .value.mem-highlight { color: #dc2626; font-weight: 800; }
|
||||
.card-metric .value.net { color: var(--text-muted); font-weight: 600; }
|
||||
|
||||
@@ -421,24 +488,25 @@ function formatTimeAgo(datetime: string | null): string {
|
||||
|
||||
.no-container { font-size: 16px; color: var(--text-muted); padding: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
|
||||
/* 값 변경 시 하이라이트 애니메이션 - 더 눈에 띄게 */
|
||||
/* 값 변경 시 하이라이트 애니메이션 - 글자색 변경 */
|
||||
@keyframes valueFlash {
|
||||
0% {
|
||||
background-color: rgba(59, 130, 246, 0.6);
|
||||
transform: scale(1.1);
|
||||
color: #3b82f6;
|
||||
text-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(59, 130, 246, 0.3);
|
||||
transform: scale(1.05);
|
||||
color: #60a5fa;
|
||||
text-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
100% {
|
||||
background-color: transparent;
|
||||
text-shadow: none;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.value-changed {
|
||||
animation: valueFlash 1.5s ease-out;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -405,24 +405,24 @@ async function fetchSnapshots() {
|
||||
load: validLoad.length ? (validLoad.reduce((a: number, b: number) => a + b, 0) / validLoad.length).toFixed(1) : '-'
|
||||
}
|
||||
|
||||
// Memory/Swap 라인 차트
|
||||
// Memory/Swap 라인 차트 - memory_percent 직접 사용
|
||||
const memData = data.map((d: any) => d.memory_percent || 0)
|
||||
const swapData = data.map((d: any) => d.swap_percent || 0)
|
||||
const swapData = data.map((d: any) => {
|
||||
const total = Number(d.swap_total) || 0
|
||||
const used = Number(d.swap_used) || 0
|
||||
if (total === 0) return 0
|
||||
return (used / total) * 100
|
||||
})
|
||||
memChart = createLineChart(memChartRef.value!, labels, [
|
||||
{ label: 'Memory %', data: memData, borderColor: chartColors[1] },
|
||||
{ label: 'Swap %', data: swapData, borderColor: chartColors[2] }
|
||||
])
|
||||
|
||||
// 평균 계산 (Memory, Swap) + 사용량/전체용량 (BigInt는 문자열로 반환되므로 Number로 변환)
|
||||
// 메모리 사용량 = total - free (free가 있으면 사용, 없으면 used 사용)
|
||||
// 메모리 사용량 = memory_used (DB에서 계산된 값)
|
||||
const validMem = memData.filter((v: number) => v > 0)
|
||||
const validSwap = swapData.filter((v: number) => v >= 0)
|
||||
const memUsedData = data.map((d: any) => {
|
||||
const total = Number(d.memory_total) || 0
|
||||
const free = Number(d.memory_free) || 0
|
||||
const used = Number(d.memory_used) || 0
|
||||
return free > 0 ? (total - free) : used
|
||||
}).filter((v: number) => v > 0)
|
||||
const memUsedData = data.map((d: any) => Number(d.memory_used) || 0).filter((v: number) => v > 0)
|
||||
const avgMemUsedGB = memUsedData.length ? (memUsedData.reduce((a: number, b: number) => a + b, 0) / memUsedData.length / (1024 * 1024 * 1024)).toFixed(1) : '-'
|
||||
const memTotalGB = data[0]?.memory_total ? (Number(data[0].memory_total) / (1024 * 1024 * 1024)).toFixed(1) : '-'
|
||||
const swapUsedData = data.map((d: any) => Number(d.swap_used) || 0).filter((v: number) => v >= 0)
|
||||
|
||||
15
package-lock.json
generated
15
package-lock.json
generated
@@ -50,7 +50,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@@ -3294,7 +3293,6 @@
|
||||
"integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
@@ -3543,7 +3541,6 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.26.tgz",
|
||||
"integrity": "sha512-egp69qDTSEZcf4bGOSsprUr4xI73wfrY5oRs6GSgXFTiHrWj4Y3X5Ydtip9QMqiCMCPVwLglB9GBxXtTadJ3mA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.28.5",
|
||||
"@vue/compiler-core": "3.5.26",
|
||||
@@ -3714,7 +3711,6 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -4059,7 +4055,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.9.0",
|
||||
"caniuse-lite": "^1.0.30001759",
|
||||
@@ -4161,7 +4156,6 @@
|
||||
"resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
|
||||
"integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@@ -4239,7 +4233,6 @@
|
||||
"resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
|
||||
"integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"consola": "^3.2.3"
|
||||
}
|
||||
@@ -7645,7 +7638,6 @@
|
||||
"resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.102.0.tgz",
|
||||
"integrity": "sha512-xMiyHgr2FZsphQ12ZCsXRvSYzmKXCm1ejmyG4GDZIiKOmhyt5iKtWq0klOfFsEQ6jcgbwrUdwcCVYzr1F+h5og==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@oxc-project/types": "^0.102.0"
|
||||
},
|
||||
@@ -7829,7 +7821,6 @@
|
||||
"resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
|
||||
"integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"pg-connection-string": "^2.9.1",
|
||||
"pg-pool": "^3.10.1",
|
||||
@@ -7962,7 +7953,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -8714,7 +8704,6 @@
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
|
||||
"integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.8"
|
||||
},
|
||||
@@ -9575,7 +9564,6 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -10021,7 +10009,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
|
||||
"integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.27.0",
|
||||
"fdir": "^6.5.0",
|
||||
@@ -10378,7 +10365,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",
|
||||
"integrity": "sha512-SJ/NTccVyAoNUJmkM9KUqPcYlY+u8OVL1X5EW9RIs3ch5H2uERxyyIUI4MRxVCSOiEcupX9xNGde1tL9ZKpimA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/compiler-dom": "3.5.26",
|
||||
"@vue/compiler-sfc": "3.5.26",
|
||||
@@ -10415,7 +10401,6 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
|
||||
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user