101 lines
2.7 KiB
Markdown
101 lines
2.7 KiB
Markdown
# 数据可视化展示大屏
|
|
|
|
多源 Prometheus 服务器监控展示大屏，支持对接多个 Prometheus 实例，实时展示所有服务器的 CPU、内存、磁盘、网络等关键指标。
|
|
|
|
## 功能特性
|
|
|
|
- 🔌 **多数据源管理** - MySQL 存储配置，支持对接多个 Prometheus 实例
|
|
- 📊 **NodeExporter 数据查询** - 自动聚合所有 Prometheus 中的 NodeExporter 数据
|
|
- 🌐 **网络流量统计** - 24 小时网络流量趋势图，总流量统计
|
|
- ⚡ **实时带宽监控** - 所有服务器网络带宽求和，实时显示
|
|
- 💻 **资源使用概览** - CPU、内存、磁盘的总使用率和详细统计
|
|
- 🖥️ **服务器列表** - 所有服务器的详细指标一览表
|
|
|
|
## 快速开始
|
|
|
|
### 1. 环境要求
|
|
|
|
- Node.js >= 16
|
|
- MySQL >= 5.7
|
|
- Valkey >= 7.0 (或 Redis >= 6.0)
|
|
|
|
### 2. 配置
|
|
|
|
复制环境变量文件并修改：
|
|
|
|
```bash
|
|
cp .env.example .env
|
|
```
|
|
|
|
编辑 `.env` 文件，配置 MySQL 和 Valkey 连接信息：
|
|
|
|
```env
|
|
# MySQL 配置
|
|
MYSQL_HOST=localhost
|
|
MYSQL_PORT=3306
|
|
MYSQL_USER=root
|
|
MYSQL_PASSWORD=your_password
|
|
MYSQL_DATABASE=display_wall
|
|
|
|
# Valkey/Redis 缓存配置 (可选)
|
|
VALKEY_HOST=localhost
|
|
VALKEY_PORT=6379
|
|
VALKEY_PASSWORD=
|
|
VALKEY_TTL=30
|
|
|
|
PORT=3000
|
|
```
|
|
|
|
### 3. 系统初始化
|
|
|
|
访问 `http://localhost:3000/init.html`，按照引导完成数据库和缓存的初始化。
|
|
|
|
### 4. 安装依赖并启动
|
|
|
|
```bash
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
访问 `http://localhost:3000` 即可看到展示大屏。
|
|
|
|
### 5. 配置 Prometheus 数据源
|
|
|
|
点击右上角的 ⚙️ 按钮，添加你的 Prometheus 地址（如 `http://prometheus.example.com:9090`）。
|
|
|
|
### 6. Prometheus 配置参考 (Example)
|
|
|
|
在您的 Prometheus 配置文件 `prometheus.yml` 中，建议执行以下配置（`scrape_interval` 建议设为 `5s` 以获取最佳实时展示效果）：
|
|
|
|
```yaml
|
|
global:
|
|
scrape_interval: 5s
|
|
scrape_configs:
|
|
- job_name: '机器名称'
|
|
static_configs:
|
|
- targets: ['IP:Port']
|
|
```
|
|
|
|
|
|
## 技术栈
|
|
|
|
- **后端**: Node.js + Express
|
|
- **数据库**: MySQL (存储配置数据)
|
|
- **缓存**: Valkey / Redis (用于加速流量计算结果读取)
|
|
- **数据源**: Prometheus HTTP API
|
|
- **前端**: 原生 HTML/CSS/JavaScript
|
|
- **图表**: 自定义 Canvas 渲染
|
|
|
|
## API 接口
|
|
|
|
| 方法 | 路径 | 说明 |
|
|
|------|------|------|
|
|
| GET | `/api/sources` | 获取所有数据源 |
|
|
| POST | `/api/sources` | 添加数据源 |
|
|
| PUT | `/api/sources/:id` | 更新数据源 |
|
|
| DELETE | `/api/sources/:id` | 删除数据源 |
|
|
| POST | `/api/sources/test` | 测试数据源连接 |
|
|
| GET | `/api/metrics/overview` | 获取聚合指标概览 |
|
|
| GET | `/api/metrics/network-history` | 获取24h网络流量历史 |
|
|
| GET | `/api/metrics/cpu-history` | 获取CPU使用率历史 |
|