94 Commits
v0.1.0 ... main

Author SHA1 Message Date
CN-JS-HuiBai
c254923bd6 不小心给CDN页面提交来了 2026-04-22 21:38:01 +08:00
CN-JS-HuiBai
e865006cee 设置一个更快的CDN 2026-04-22 21:37:16 +08:00
CN-JS-HuiBai
1430ecf366 添加db_migrate功能 2026-04-22 21:24:43 +08:00
CN-JS-HuiBai
ce739d1232 支持为静态资源设置独立地址 2026-04-22 21:23:12 +08:00
CN-JS-HuiBai
ba633c8be4 添加连接数指标评估 2026-04-18 16:18:13 +08:00
CN-JS-HuiBai
44843475c8 修复安全和请求策略问题 2026-04-14 16:56:46 +08:00
CN-JS-HuiBai
5e9dac6197 允许拖动95带宽展示 2026-04-14 14:53:05 +08:00
CN-JS-HuiBai
77743ce097 优化日本绘图 2026-04-13 15:43:47 +08:00
CN-JS-HuiBai
28667bcbee 优化中国台湾绘图 2026-04-13 15:42:00 +08:00
CN-JS-HuiBai
395b3f3c4e 优化界面布局 2026-04-13 15:34:03 +08:00
CN-JS-HuiBai
0c3ef3d07e 添加全局刷新按钮 2026-04-13 15:30:24 +08:00
CN-JS-HuiBai
83e8a96b2b 支持服务器详情24h流量统计 2026-04-13 15:21:26 +08:00
CN-JS-HuiBai
0a8efaf29d 修复打开页面时弹出登录页面的BUG 2026-04-12 18:05:17 +08:00
CN-JS-HuiBai
34bf4d5e91 优化后端逻辑 2026-04-12 17:56:49 +08:00
CN-JS-HuiBai
24b5f8455e 优化布局 2026-04-12 17:51:40 +08:00
CN-JS-HuiBai
e60fa2b982 优化数据库查询布局 2026-04-12 17:48:43 +08:00
CN-JS-HuiBai
b79cb09987 修改数据源查询逻辑 2026-04-12 17:37:26 +08:00
CN-JS-HuiBai
d7ac1bedb4 优化数据库稳定性 2026-04-11 18:14:04 +08:00
CN-JS-HuiBai
a876c854f4 优化系统初始化过程中数据库报错的问题 2026-04-11 17:57:26 +08:00
CN-JS-HuiBai
18c81fb8bb 修复数据库初始化的错误 2026-04-11 17:53:11 +08:00
CN-JS-HuiBai
d8c33ca3ee 修复数据库无法保存的BUG 2026-04-11 17:46:50 +08:00
CN-JS-HuiBai
27c2fb0b95 修复数据库查询错误导致的故障 2026-04-11 17:41:44 +08:00
CN-JS-HuiBai
bdc723d197 修复关键函数缺失导致的故障 2026-04-11 00:24:35 +08:00
CN-JS-HuiBai
531913a83c 完善报错信息 2026-04-11 00:20:44 +08:00
CN-JS-HuiBai
b7e7c173d7 修复了项目无法启动的错误 2026-04-11 00:12:03 +08:00
CN-JS-HuiBai
14796231f1 优化数据库自检 2026-04-11 00:10:36 +08:00
CN-JS-HuiBai
1826d4e34a 修复无法保存数据的错误 2026-04-11 00:06:18 +08:00
CN-JS-HuiBai
e373e1ce62 尝试修复页面无法正常加载的问题 2026-04-11 00:00:25 +08:00
CN-JS-HuiBai
4467b62a01 优化无法登录的错误 2026-04-10 23:53:25 +08:00
CN-JS-HuiBai
3519003a77 新增项目数据库自检流程 2026-04-10 23:44:46 +08:00
CN-JS-HuiBai
7362bcf206 修复项目逻辑错误
新增数据库检查
2026-04-10 23:42:55 +08:00
CN-JS-HuiBai
2cd6c6ef27 修复语法错误 2026-04-10 22:25:04 +08:00
CN-JS-HuiBai
cb27d1a249 加入自定义指标支持 2026-04-10 22:22:54 +08:00
CN-JS-HuiBai
710b6a719e 安全性能优化 2026-04-10 22:16:43 +08:00
CN-JS-HuiBai
66b5702d03 优化安全策略 2026-04-10 21:58:42 +08:00
CN-JS-HuiBai
90634dfacf 修改采集逻辑 2026-04-10 21:38:02 +08:00
CN-JS-HuiBai
c9784ec48e 新功能:允许查看服务器地址 2026-04-10 21:27:33 +08:00
CN-JS-HuiBai
cf1842f4e5 优化数据刷新间隔 2026-04-10 15:18:48 +08:00
CN-JS-HuiBai
f1a215d504 优化布局 2026-04-10 15:16:44 +08:00
CN-JS-HuiBai
9beba2a306 修复普罗米修斯数据库统计不准确的BUG 2026-04-10 15:10:52 +08:00
CN-JS-HuiBai
a3340cb630 修复数据源统计的选择影响服务器详情的BUG 2026-04-10 15:05:20 +08:00
CN-JS-HuiBai
5afcd3d86a 修复数据统计错误的问题 2026-04-10 14:56:06 +08:00
CN-JS-HuiBai
e65de2c30b 添加对指定数据源统计带宽 2026-04-10 14:49:27 +08:00
CN-JS-HuiBai
bfb40f4947 修复安装脚本的潜在问题 2026-04-09 14:02:58 +08:00
CN-JS-HuiBai
9854f478c0 优化数据库自检能力 2026-04-09 13:55:24 +08:00
CN-JS-HuiBai
3963d137de 添加设置项 2026-04-09 13:47:51 +08:00
CN-JS-HuiBai
60d8a3d550 修复安全边界问题 2026-04-09 13:37:47 +08:00
CN-JS-HuiBai
09f20ec81d 2D 地图路由修复:
服务器详情体验增强:
2026-04-09 12:50:40 +08:00
CN-JS-HuiBai
06ddd5a8e1 优化内存显示 2026-04-09 12:47:01 +08:00
CN-JS-HuiBai
a14fcdf158 修复2D地图无法渲染的问题 2026-04-09 12:25:41 +08:00
CN-JS-HuiBai
6aa8ba5fbc 添加95计费出入去大带宽 2026-04-09 12:21:41 +08:00
CN-JS-HuiBai
2eae34bb96 修复无法绘图的故障 2026-04-08 14:38:43 +08:00
CN-JS-HuiBai
05ae5dff2a 修复错误 2026-04-07 20:49:03 +08:00
CN-JS-HuiBai
64fc023f7b 资源本地化 2026-04-07 16:01:29 +08:00
CN-JS-HuiBai
307a26c0db 修复websocket 2026-04-07 12:20:09 +08:00
CN-JS-HuiBai
73401309f2 进一步优化2 2026-04-07 00:32:02 +08:00
CN-JS-HuiBai
f169dd4267 进一步优化 2026-04-07 00:29:46 +08:00
CN-JS-HuiBai
09887b52d0 渲染优化 2026-04-07 00:26:00 +08:00
CN-JS-HuiBai
c94b697319 添加刷新按钮 2026-04-06 23:13:50 +08:00
CN-JS-HuiBai
1bfee2026f 优化 2026-04-06 19:49:32 +08:00
CN-JS-HuiBai
c47e483028 优化动画 2026-04-06 19:47:33 +08:00
CN-JS-HuiBai
864cbc3569 优化线条2 2026-04-06 19:44:57 +08:00
CN-JS-HuiBai
47a795cd73 优化线条 2026-04-06 19:43:17 +08:00
CN-JS-HuiBai
92f97b7e51 优化算法 2026-04-06 19:35:30 +08:00
CN-JS-HuiBai
3bdde47c60 优化分布 2026-04-06 19:32:54 +08:00
CN-JS-HuiBai
1583758f29 支持数据源编辑 2026-04-06 18:46:51 +08:00
CN-JS-HuiBai
0602e37bc9 修复数据库 2026-04-06 18:27:11 +08:00
CN-JS-HuiBai
41bdb38d51 优化渲染逻辑 2026-04-06 18:20:29 +08:00
CN-JS-HuiBai
d958aa8d74 设置标题 2026-04-06 18:05:35 +08:00
CN-JS-HuiBai
2024523b46 修复保存后前端卡死的问题 2026-04-06 18:02:53 +08:00
CN-JS-HuiBai
da722ee07e 2 2026-04-06 17:56:36 +08:00
CN-JS-HuiBai
bc8414df3d 优化 2026-04-06 17:49:31 +08:00
CN-JS-HuiBai
15f4b610af 修复无法保存配置的问题 2026-04-06 17:44:58 +08:00
CN-JS-HuiBai
94ed27199a Dlogo 2026-04-06 17:27:56 +08:00
CN-JS-HuiBai
131c011c5c 优化备案号结构 2026-04-06 17:23:07 +08:00
CN-JS-HuiBai
6d5b8bbb08 添加备案号 2026-04-06 17:05:26 +08:00
CN-JS-HuiBai
b4415f25ac 添加copyright 2026-04-06 16:58:58 +08:00
CN-JS-HuiBai
d469dacc08 进一步优化移动端显示 2026-04-06 16:52:35 +08:00
CN-JS-HuiBai
ee4354b571 支持自动识别目录 2026-04-06 16:45:00 +08:00
CN-JS-HuiBai
50818b54ca 升级数据库 2026-04-06 16:39:19 +08:00
CN-JS-HuiBai
480cdf3f6d 优化升级脚本 2026-04-06 16:34:21 +08:00
CN-JS-HuiBai
832fd0fde1 添加升级脚本 2026-04-06 16:32:24 +08:00
CN-JS-HuiBai
fd0a52368a 优化黑暗模式和白天模式 2026-04-06 16:26:13 +08:00
CN-JS-HuiBai
650cc6f1b5 修复移动布局错误 2026-04-06 16:21:38 +08:00
CN-JS-HuiBai
ff1c53ea40 服务器分布居中 2026-04-06 16:19:23 +08:00
CN-JS-HuiBai
b79655ccdc 优化安卓界面布局 2026-04-06 16:13:31 +08:00
CN-JS-HuiBai
1f12197a91 优化移动端显示 2026-04-06 16:09:00 +08:00
CN-JS-HuiBai
d0455fb032 优化时间点 2026-04-06 16:02:01 +08:00
CN-JS-HuiBai
b2f6f7d2d0 优化 2026-04-06 15:59:37 +08:00
CN-JS-HuiBai
ff439bb831 恢复BUSY SYSTEM 2026-04-06 15:36:11 +08:00
CN-JS-HuiBai
3980d66b49 优化CPU绘图 2026-04-06 15:32:54 +08:00
b16d910051 更新 README.md 2026-04-06 15:17:16 +08:00
CN-JS-HuiBai
7e3a8e12d0 优化ENV 2026-04-06 15:15:56 +08:00
CN-JS-HuiBai
1d728d991e 优化安装脚本逻辑 2026-04-06 15:14:49 +08:00
18 changed files with 4084 additions and 1090 deletions

View File

@@ -1,10 +1,19 @@
# PromdataPanel Environment Configuration
# Note: Database and Cache settings will be automatically configured upon visiting /init.html
# Server Binding
HOST=0.0.0.0 HOST=0.0.0.0
PORT=3051 PORT=3000
# Aggregation interval in milliseconds (default 5s)
REFRESH_INTERVAL=5000 REFRESH_INTERVAL=5000
# Valkey/Redis Cache Configuration # Security
VALKEY_HOST=localhost # Keep remote setup disabled unless you explicitly need to initialize from another host.
VALKEY_PORT=6379 ALLOW_REMOTE_SETUP=false
VALKEY_PASSWORD= COOKIE_SECURE=false
VALKEY_DB=dashboard SESSION_TTL_SECONDS=86400
VALKEY_TTL=30 PASSWORD_ITERATIONS=210000
# Runtime external data providers
ENABLE_EXTERNAL_GEO_LOOKUP=false

155
README.md
View File

@@ -1,100 +1,119 @@
# 数据可视化展示大屏 # PromdataPanel
多源 Prometheus 服务器监控展示大屏支持对接多个 Prometheus 实例,实时展示所有服务器的 CPU、内存、磁盘、网络等关键指标。 多源 Prometheus 服务器监控展示大屏支持对接多个 Prometheus 实例,实时聚合展示所有服务器的 CPU、内存、磁盘、带宽等关键指标,并提供可视化节点分布图
## 功能特性 ## 功能特性
- 🔌 **多数据源管理** - MySQL 存储配置,支持对接多个 Prometheus 实例 - 🔌 **多数据源管理** - 支持对接多个 Prometheus 实例Node_Exporter / BlackboxExporter
- 📊 **NodeExporter 数据查询** - 自动聚合所有 Prometheus 中的 NodeExporter 数据 - 📊 **指标自动聚合** - 自动汇总所有数据源的 NodeExporter 指标,实时计算全网负载
- 🌐 **网络流量统计** - 24 小时网络流量趋势图,总流量统计 - 🌐 **网络流量统计** - 24 小时流量趋势图,实时带宽Rx/Tx求和显示
- **实时带宽监控** - 所有服务器网络带宽求和,实时显示 - 🗺️ **节点分布可视化** - 自动识别服务器地理位置,并在全球地图上展示实时连接状态与延迟
- 💻 **资源使用概览** - CPU、内存、磁盘的总使用率和详细统计 - **毫秒级实时性** - 深度优化查询逻辑,支持 5s 采集频率的实时动态展示
- 🖥️ **服务器列表** - 所有服务器的详细指标一览表 - 📱 **响应式与美学设计** - 现代 UI/UX 体验,支持暗色模式,极致性能优化
## 快速开始 ## 快速安装
### 1. 环境要求 ### 方式一:一键脚本安装 (推荐)
- Node.js >= 16 在 Linux 服务器上,您可以使用以下脚本一键完成下载、环境检测、依赖安装并将其注册为 Systemd 系统服务:
- MySQL >= 5.7
- Valkey >= 7.0 (或 Redis >= 6.0)
### 2. 配置
复制环境变量文件并修改:
```bash ```bash
cp .env.example .env # 下载安装最新版本 (默认 v0.1.0)
VERSION=v0.1.0 curl -sSL https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel/raw/branch/main/install.sh | bash
``` ```
编辑 `.env` 文件,配置 MySQL 和 Valkey 连接信息: ### 方式二:手动安装
```env #### 1. 环境要求
# MySQL 配置 - **Node.js** >= 18
MYSQL_HOST=localhost - **MySQL** >= 8.0
MYSQL_PORT=3306 - **Valkey** >= 7.0 (或 Redis >= 6.0)
MYSQL_USER=root
MYSQL_PASSWORD=your_password
MYSQL_DATABASE=display_wall
# Valkey/Redis 缓存配置 (可选) #### 2. 配置与启动
VALKEY_HOST=localhost 1. 克隆代码库:`git clone https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel.git`
VALKEY_PORT=6379 2. 复制配置文件:`cp .env.example .env`
VALKEY_PASSWORD= 3. 安装依赖:`npm install --production`
VALKEY_TTL=30 4. 启动服务:`npm start`
PORT=3000 ### 方式三:更新现有版本
```
### 3. 系统初始化 如果您已经安装了本系统,可以使用随附的 `update.sh` 脚本一键升级到最新代码:
访问 `http://localhost:3000/init.html`,按照引导完成数据库和缓存的初始化。
### 4. 安装依赖并启动
```bash ```bash
npm install # 进入程序目录
npm run dev curl -sSL https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel/raw/branch/main/update.sh | bash
``` ```
访问 `http://localhost:3000` 即可看到展示大屏。 #### 3. 系统初始化
首次运行后,访问 `http://your-ip:3000/init.html`,按照引导完成 MySQL 数据库和 Valkey 缓存的连接。
### 5. 配置 Prometheus 数据源 ## 使用指引
点击右上角的 ⚙️ 按钮,添加你的 Prometheus 地址(如 `http://prometheus.example.com:9090`)。 ### 1. 添加 Prometheus 数据源
点击页面右上角的 ⚙️ 按钮进入设置,添加并测试您的 Prometheus HTTP 地址。
### 6. Prometheus 配置参考 (Example) ### 2. Prometheus 采集配置
建议在 `prometheus.yml` 中设置采集周期为 `5s` 以实现平滑的实时动态效果:
在您的 Prometheus 配置文件 `prometheus.yml` 中,建议执行以下配置(`scrape_interval` 建议设为 `5s` 以获取最佳实时展示效果):
```yaml ```yaml
global: global:
scrape_interval: 5s scrape_interval: 5s
scrape_configs:
- job_name: '机器名称'
static_configs:
- targets: ['IP:Port']
```
scrape_configs:
- job_name: 'nodes'
static_configs:
- targets: ['your-server-ip:9100']
```
## 技术栈 ## 技术栈
- **后端**: Node.js + Express - **Runtime**: Node.js
- **数据库**: MySQL (存储配置数据) - **Framework**: Express.js
- **缓存**: Valkey / Redis (用于加速流量计算结果读取) - **Database**: MySQL 8.0+
- **数据源**: Prometheus HTTP API - **Caching**: Valkey / Redis
- **前端**: 原生 HTML/CSS/JavaScript - **Visualization**: ECharts / Canvas
- **图表**: 自定义 Canvas 渲染 - **Frontend**: Vanilla JS / CSS3
## API 接口 ## API 接口文档
| 方法 | 路径 | 说明 | 本项提供了完整的 RESTful API用于数据采集、系统配置和状态监控。
|------|------|------|
| GET | `/api/sources` | 获取所有数据源 | ### 1. 认证接口 (`/api/auth`)
| POST | `/api/sources` | 添加数据源 | - `POST /api/auth/login`: 用户登录
| PUT | `/api/sources/:id` | 更新数据源 | - `POST /api/auth/logout`: 退出登录
| DELETE | `/api/sources/:id` | 删除数据源 | - `POST /api/auth/change-password`: 修改密码 (需登录)
| POST | `/api/sources/test` | 测试数据源连接 | - `GET /api/auth/status`: 获取当前登录状态
| GET | `/api/metrics/overview` | 获取聚合指标概览 |
| GET | `/api/metrics/network-history` | 获取24h网络流量历史 | ### 2. 数据源管理 (`/api/sources`)
| GET | `/api/metrics/cpu-history` | 获取CPU使用率历史 | - `GET /api/sources`: 获取所有 Prometheus 数据源及其状态
- `POST /api/sources`: 添加新数据源 (需登录)
- `PUT /api/sources/:id`: 修改数据源信息 (需登录)
- `DELETE /api/sources/:id`: 删除数据源 (需登录)
- `POST /api/sources/test`: 测试数据源连接性 (需登录)
### 3. 指标数据获取 (`/api/metrics`)
- `GET /api/metrics/overview`: 获取所有服务器的聚合实时指标 (CPU, 内存, 磁盘, 网络)
- `GET /api/metrics/network-history`: 获取全网 24 小时流量历史趋势
- `GET /api/metrics/cpu-history`: 获取全网 CPU 使用率历史记录
- `GET /api/metrics/server-details`: 获取特定服务器的详细实时指标
- `GET /api/metrics/server-history`: 获取特定服务器的历史指标数据
- `GET /api/metrics/latency`: 获取节点间的实时延迟数据
### 4. 系统配置与监控
- `GET /api/settings`: 获取站点全局配置
- `POST /api/settings`: 修改站点全局配置 (需登录)
- `GET /health`: 获取系统健康检查报告 (数据库、缓存、内存等状态)
### 5. 延迟链路管理 (`/api/latency-routes`)
- `GET /api/latency-routes`: 获取配置的所有延迟检测链路
- `POST /api/latency-routes`: 添加延迟检测链路 (需登录)
- `PUT /api/latency-routes/:id`: 修改延迟检测链路 (需登录)
- `DELETE /api/latency-routes/:id`: 删除延迟检测链路 (需登录)
### 6. 实时通信 (WebSocket)
系统支持通过 WebSocket 接收实时推送,默认端口与 HTTP 服务一致:
- **消息类型 `overview`**: 包含聚合指标、服务器在线状态以及地理分布后的延迟链路数据。
## LICENSE
MIT License

View File

@@ -1,238 +1,262 @@
#!/bin/bash #!/bin/bash
# Data Visualization Display Wall - Systemd Installer set -euo pipefail
# Requirements: Node.js, NPM, Systemd (Linux)
# Colors for output
RED='\033[0;31m' RED='\033[0;31m'
GREEN='\033[0;32m' GREEN='\033[0;32m'
YELLOW='\033[1;33m' YELLOW='\033[1;33m'
BLUE='\033[0;34m' BLUE='\033[0;34m'
NC='\033[0m' # No Color NC='\033[0m'
echo -e "${BLUE}=== Data Visualization Display Wall Installer ===${NC}" VERSION=${VERSION:-"v0.1.0"}
DOWNLOAD_URL="https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel/archive/${VERSION}.zip"
MIN_NODE_VERSION=18
SERVICE_NAME="promdatapanel"
SERVICE_FILE="/etc/systemd/system/${SERVICE_NAME}.service"
# 1. Permission check (no longer mandatory) OS_ID=""
if [ "$EUID" -eq 0 ]; then OS_VER=""
# If run as sudo, get the real user that called it PROJECT_DIR=""
REAL_USER=${SUDO_USER:-$USER} REAL_USER=""
else
REAL_USER=$USER
fi
# 2. Get current directory and user echo -e "${BLUE}================================================${NC}"
PROJECT_DIR=$(pwd) echo -e "${BLUE} PromdataPanel Auto-Installer ${NC}"
USER_HOME=$(getent passwd "$REAL_USER" | cut -d: -f6) echo -e "${BLUE} Version: ${VERSION} ${NC}"
echo -e "${BLUE}================================================${NC}"
echo -e "Project Directory: ${GREEN}$PROJECT_DIR${NC}" detect_os() {
echo -e "Running User: ${GREEN}$REAL_USER${NC}" if [ -f /etc/os-release ]; then
# shellcheck disable=SC1091
. /etc/os-release
OS_ID="${ID:-}"
OS_VER="${VERSION_ID:-}"
else
echo -e "${RED}Error: Cannot detect operating system type (/etc/os-release missing).${NC}"
exit 1
fi
# 3. Check for mandatory files if [ -z "$OS_ID" ]; then
if [ ! -f "server/index.js" ]; then echo -e "${RED}Error: Unable to determine operating system ID.${NC}"
echo -e "${RED}Error: server/index.js not found. Please run this script from the project root.${NC}" exit 1
exit 1 fi
fi
# 4. Check for dependencies echo -e "Detected OS: ${GREEN}${OS_ID} ${OS_VER}${NC}"
echo -e "${BLUE}Checking dependencies...${NC}" }
check_dep() {
if ! command -v "$1" &> /dev/null; then require_cmd() {
echo -e "${RED}$1 is not installed. Please install $1 first.${NC}" local cmd="$1"
local hint="${2:-}"
if ! command -v "$cmd" >/dev/null 2>&1; then
echo -e "${RED}Missing required command: ${cmd}.${NC}"
if [ -n "$hint" ]; then
echo -e "${YELLOW}${hint}${NC}"
fi
exit 1 exit 1
fi fi
} }
check_dep node
check_dep npm
# 5. Check for .env file install_packages() {
if [ ! -f ".env" ]; then case "$OS_ID" in
echo -e "${YELLOW}Warning: .env file not found.${NC}" ubuntu|debian|raspbian)
if [ -f ".env.example" ]; then sudo apt-get update
echo -e "Creating .env from .env.example..." sudo apt-get install -y "$@"
cp .env.example .env ;;
echo -e "${GREEN}Created .env file. Please ensure values are correct.${NC}" centos|rhel|almalinux|rocky)
else sudo yum install -y "$@"
echo -e "${RED}Error: .env.example not found. Configuration missing.${NC}" ;;
fedora)
sudo dnf install -y "$@"
;;
*)
echo -e "${RED}Unsupported OS for automatic package installation: ${OS_ID}${NC}"
echo -e "${YELLOW}Please install the following packages manually: $*${NC}"
exit 1
;;
esac
}
ensure_tooling() {
if ! command -v curl >/dev/null 2>&1; then
echo -e "${BLUE}Installing curl...${NC}"
install_packages curl
fi fi
fi
# 6. Install NPM dependencies if ! command -v unzip >/dev/null 2>&1; then
echo -e "${BLUE}Installing dependencies...${NC}" echo -e "${BLUE}Installing unzip...${NC}"
npm install install_packages unzip
fi
}
if [ $? -ne 0 ]; then configure_nodesource_apt_repo() {
echo -e "${RED}NPM install failed.${NC}" sudo install -d -m 0755 /etc/apt/keyrings
exit 1 curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
fi echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list >/dev/null
}
# 7. Create Systemd Service File install_node() {
SERVICE_FILE="/etc/systemd/system/promdatapanel.service" echo -e "${BLUE}Verifying Node.js environment...${NC}"
NODE_PATH=$(command -v node)
echo -e "${BLUE}Creating systemd service at $SERVICE_FILE... (May require password)${NC}" local node_installed=false
sudo bash -c "cat <<EOF > '$SERVICE_FILE' if command -v node >/dev/null 2>&1; then
local current_node_ver
current_node_ver=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
if [ "$current_node_ver" -ge "$MIN_NODE_VERSION" ]; then
echo -e "${GREEN}Node.js $(node -v) is already installed.${NC}"
node_installed=true
else
echo -e "${YELLOW}Existing Node.js $(node -v) is too old (requires >= ${MIN_NODE_VERSION}).${NC}"
fi
fi
if [ "$node_installed" = true ]; then
return
fi
echo -e "${BLUE}Installing Node.js 20.x...${NC}"
case "$OS_ID" in
ubuntu|debian|raspbian)
install_packages ca-certificates curl gnupg
configure_nodesource_apt_repo
sudo apt-get update
sudo apt-get install -y nodejs
;;
centos|rhel|almalinux|rocky)
install_packages nodejs
;;
fedora)
install_packages nodejs
;;
*)
echo -e "${RED}Unsupported OS for automatic Node.js installation: ${OS_ID}${NC}"
echo -e "${YELLOW}Please install Node.js >= ${MIN_NODE_VERSION} manually.${NC}"
exit 1
;;
esac
require_cmd node "Please install Node.js >= ${MIN_NODE_VERSION} manually and rerun the installer."
local installed_major
installed_major=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)
if [ "$installed_major" -lt "$MIN_NODE_VERSION" ]; then
echo -e "${RED}Installed Node.js $(node -v) is still below the required version.${NC}"
echo -e "${YELLOW}Please upgrade Node.js manually to >= ${MIN_NODE_VERSION}.${NC}"
exit 1
fi
}
download_project_if_needed() {
if [ -f "server/index.js" ]; then
return
fi
echo -e "${YELLOW}Project files not found. Starting download...${NC}"
ensure_tooling
local temp_dir
temp_dir=$(mktemp -d "${TMPDIR:-/tmp}/promdatapanel-install-XXXXXX")
local temp_zip="${temp_dir}/promdatapanel_${VERSION}.zip"
echo -e "${BLUE}Downloading ${DOWNLOAD_URL}...${NC}"
curl -fL "$DOWNLOAD_URL" -o "$temp_zip"
echo -e "${BLUE}Extracting files...${NC}"
unzip -q "$temp_zip" -d "$temp_dir"
local extracted_dir
extracted_dir=$(find "$temp_dir" -mindepth 1 -maxdepth 1 -type d | head -n 1)
if [ -z "$extracted_dir" ] || [ ! -f "$extracted_dir/server/index.js" ]; then
echo -e "${RED}Download succeeded, but archive structure is invalid.${NC}"
exit 1
fi
cd "$extracted_dir"
}
detect_runtime_user() {
if [ "$EUID" -eq 0 ]; then
REAL_USER="${SUDO_USER:-${USER:-root}}"
else
REAL_USER="${USER}"
fi
}
write_service_file() {
local node_path
node_path=$(command -v node)
if [ -z "$node_path" ]; then
echo -e "${RED}Unable to locate node executable after installation.${NC}"
exit 1
fi
local tmp_service
tmp_service=$(mktemp "${TMPDIR:-/tmp}/${SERVICE_NAME}.service.XXXXXX")
cat > "$tmp_service" <<EOF
[Unit] [Unit]
Description=Data Visualization Display Wall Description=PromdataPanel Monitoring Dashboard
After=network.target mysql.service redis-server.service valkey-server.service After=network.target mysql.service redis-server.service valkey-server.service
Wants=mysql.service Wants=mysql.service
[Service] [Service]
Type=simple Type=simple
User=$REAL_USER User=${REAL_USER}
WorkingDirectory=$PROJECT_DIR WorkingDirectory=${PROJECT_DIR}
ExecStart=$NODE_PATH server/index.js ExecStart=${node_path} server/index.js
Restart=always Restart=always
RestartSec=10 RestartSec=10
StandardOutput=syslog StandardOutput=journal
StandardError=syslog StandardError=journal
SyslogIdentifier=promdatapanel SyslogIdentifier=${SERVICE_NAME}
# Pass environment via .env file injection EnvironmentFile=-${PROJECT_DIR}/.env
EnvironmentFile=-$PROJECT_DIR/.env
Environment=NODE_ENV=production Environment=NODE_ENV=production
# Security Hardening
CapabilityBoundingSet=
NoNewPrivileges=true
LimitNOFILE=65535
[Install] [Install]
WantedBy=multi-user.target WantedBy=multi-user.target
EOF" EOF
# 8. Reload Systemd and Start echo -e "${BLUE}Creating systemd service at ${SERVICE_FILE}...${NC}"
echo -e "${BLUE}Reloading systemd and restarting service... (May require password)${NC}" sudo install -m 0644 "$tmp_service" "$SERVICE_FILE"
sudo systemctl daemon-reload rm -f "$tmp_service"
sudo systemctl enable promdatapanel }
sudo systemctl restart promdatapanel
# 9. Check Status detect_os
echo -e "${BLUE}Checking service status...${NC}" download_project_if_needed
sleep 2 detect_runtime_user
if sudo systemctl is-active --quiet promdatapanel; then install_node
echo -e "${GREEN}SUCCESS: Service is now running.${NC}"
PORT=$(grep "^PORT=" .env | cut -d'=' -f2) PROJECT_DIR=$(pwd)
PORT=${PORT:-3000} echo -e "Project Directory: ${GREEN}${PROJECT_DIR}${NC}"
echo -e "Dashboard URL: ${YELLOW}http://localhost:${PORT}${NC}" echo -e "Running User: ${GREEN}${REAL_USER}${NC}"
echo -e "View logs: ${BLUE}journalctl -u promdatapanel -f${NC}"
else if [ ! -f ".env" ] && [ -f ".env.example" ]; then
echo -e "${RED}FAILED: Service failed to start.${NC}" echo -e "${BLUE}Creating .env from .env.example...${NC}"
echo -e "Check logs with: ${BLUE}journalctl -u promdatapanel -xe${NC}" cp .env.example .env
fi fi
# 10. Reverse Proxy Configuration echo -e "${BLUE}Installing NPM dependencies...${NC}"
echo -ne "${YELLOW}Do you want to configure a reverse proxy (Nginx/Caddy)? (y/n): ${NC}" npm install --production
read -r CONF_PROXY
if [[ "$CONF_PROXY" =~ ^[Yy]$ ]]; then
echo -e "${BLUE}=== Reverse Proxy Configuration ===${NC}"
# Get Domain
echo -ne "Enter your domain name (e.g., monitor.example.com): "
read -r DOMAIN
if [ -z "$DOMAIN" ]; then
echo -e "${RED}Error: Domain cannot be empty. Skipping proxy configuration.${NC}"
else
# Get Port from .env
PORT=$(grep "^PORT=" .env | cut -d'=' -f2)
PORT=${PORT:-3000}
# Choose Proxy write_service_file
echo -e "Select Proxy Type:"
echo -e " 1) Caddy (Automatic SSL, easy to use)"
echo -e " 2) Nginx (Advanced, manual SSL)"
echo -ne "Choose (1/2): "
read -r PROXY_TYPE
# Enable HTTPS? echo -e "${BLUE}Reloading systemd and restarting service...${NC}"
echo -ne "Enable HTTPS (SSL)? (y/n): " sudo systemctl daemon-reload
read -r ENABLE_HTTPS sudo systemctl enable "$SERVICE_NAME"
sudo systemctl restart "$SERVICE_NAME"
if [ "$PROXY_TYPE" == "1" ]; then echo -e "${BLUE}Checking service status...${NC}"
# Caddy Config sleep 2
CADDY_FILE="Caddyfile" if sudo systemctl is-active --quiet "$SERVICE_NAME"; then
echo -e "${BLUE}Generating Caddyfile...${NC}" echo -e "${GREEN}SUCCESS: PromdataPanel is now running.${NC}"
PORT=$(grep "^PORT=" .env 2>/dev/null | cut -d'=' -f2 || true)
if [[ "$ENABLE_HTTPS" =~ ^[Yy]$ ]]; then PORT=${PORT:-3000}
cat <<EOF > "$CADDY_FILE" IP_ADDR=$(hostname -I 2>/dev/null | awk '{print $1}')
$DOMAIN { if [ -n "${IP_ADDR:-}" ]; then
reverse_proxy localhost:$PORT echo -e "Dashboard URL: ${YELLOW}http://${IP_ADDR}:${PORT}${NC}"
}
EOF
else
cat <<EOF > "$CADDY_FILE"
http://$DOMAIN {
reverse_proxy localhost:$PORT
}
EOF
fi
echo -e "${GREEN}Caddyfile generated at $PROJECT_DIR/$CADDY_FILE${NC}"
echo -e "${YELLOW}Tip: Ensure Caddy is installed and pointing to this file.${NC}"
elif [ "$PROXY_TYPE" == "2" ]; then
# Nginx Config
echo -ne "Enter Nginx configuration export path (default: ./${DOMAIN}.conf): "
read -r NGINX_PATH
NGINX_PATH=${NGINX_PATH:-"./${DOMAIN}.conf"}
echo -e "${BLUE}Generating Nginx configuration...${NC}"
if [[ "$ENABLE_HTTPS" =~ ^[Yy]$ ]]; then
echo -ne "Enter SSL Certificate Path: "
read -r SSL_CERT
echo -ne "Enter SSL Key Path: "
read -r SSL_KEY
cat <<EOF > "$NGINX_PATH"
server {
listen 80;
server_name $DOMAIN;
return 301 https://\$host\$request_uri;
}
server {
listen 443 ssl http2;
server_name $DOMAIN;
ssl_certificate $SSL_CERT;
ssl_certificate_key $SSL_KEY;
location / {
proxy_pass http://localhost:$PORT;
proxy_http_version 1.1;
proxy_set_header Upgrade \$http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host \$host;
proxy_set_header X-Real-IP \$remote_addr;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto \$scheme;
}
}
EOF
else
cat <<EOF > "$NGINX_PATH"
server {
listen 80;
server_name $DOMAIN;
location / {
proxy_pass http://localhost:$PORT;
proxy_http_version 1.1;
proxy_set_header Upgrade \$http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host \$host;
proxy_set_header X-Real-IP \$remote_addr;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto \$scheme;
}
}
EOF
fi
echo -e "${GREEN}Nginx config generated at $NGINX_PATH${NC}"
echo -e "${YELLOW}Tip: You can symlink this to /etc/nginx/sites-enabled/ to activate.${NC}"
else
echo -e "${YELLOW}Unknown proxy type selected. Skipping.${NC}"
fi
fi fi
else
echo -e "${RED}FAILED: Service failed to start.${NC}"
echo -e "Check logs with: ${BLUE}journalctl -u ${SERVICE_NAME} -xe${NC}"
fi fi
echo -e "${BLUE}================================================${NC}" echo -e "${BLUE}================================================${NC}"
echo -e "${GREEN}Setup completed successfully!${NC}" echo -e "${GREEN}Installation completed!${NC}"
echo -e "${BLUE}================================================${NC}"

View File

@@ -1,12 +1,13 @@
{ {
"name": "data-visualization-display-wall", "name": "promdatapanel",
"version": "1.0.0", "version": "1.0.0",
"description": "Data Visualization Display Wall - Multi-Prometheus Monitoring Dashboard", "description": "Data Visualization Display Wall - Multi-Prometheus Monitoring Dashboard",
"main": "server/index.js", "main": "server/index.js",
"scripts": { "scripts": {
"dev": "node server/index.js", "dev": "node server/index.js",
"start": "node server/index.js", "start": "node server/index.js",
"init-db": "node server/init-db.js" "init-db": "node server/init-db.js",
"db-migrate": "node server/init-db.js"
}, },
"dependencies": { "dependencies": {
"axios": "^1.7.0", "axios": "^1.7.0",

File diff suppressed because it is too large Load Diff

View File

@@ -5,19 +5,21 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LDNET-GA"> <meta name="description" content="LDNET-GA">
<title>LDNET-GA</title> <title></title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="icon" id="siteFavicon" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <script src="/vendor/echarts.min.js"></script>
<script> <script>
// Prevent theme flicker // Prevent theme flicker
(function () { (function () {
const savedTheme = localStorage.getItem('theme'); const savedTheme = localStorage.getItem('theme');
const settings = window.SITE_SETTINGS || {}; const settings = window.SITE_SETTINGS || {};
const sanitizeAssetUrl = (url) => {
if (!url || typeof url !== 'string') return null;
const trimmed = url.trim();
if (!trimmed) return null;
return /^(https?:|data:image\/|\/)/i.test(trimmed) ? trimmed : null;
};
const defaultTheme = settings.default_theme || 'dark'; const defaultTheme = settings.default_theme || 'dark';
let theme = savedTheme || defaultTheme; let theme = savedTheme || defaultTheme;
@@ -29,12 +31,69 @@
document.documentElement.classList.add('light-theme'); document.documentElement.classList.add('light-theme');
} }
// Also apply title if available to prevent flicker // Also apply title and favicon if available to prevent flicker
if (settings.page_name) { if (settings.page_name) {
document.title = settings.page_name; document.title = settings.page_name;
} }
const safeFaviconUrl = sanitizeAssetUrl(settings.favicon_url);
if (safeFaviconUrl) {
const link = document.getElementById('siteFavicon');
if (link) link.href = safeFaviconUrl;
}
// Advanced Anti-Flicker: Wait for header elements to appear
const observer = new MutationObserver(function(mutations, me) {
const logoText = document.getElementById('logoText');
const logoIcon = document.getElementById('logoIconContainer');
const header = document.getElementById('header');
if (logoText || logoIcon) {
// If we found either, apply what we have
if (logoText) {
const displayTitle = settings.title || settings.page_name || '数据可视化展示大屏';
logoText.textContent = displayTitle;
if (settings.show_page_name === 0) logoText.style.display = 'none';
}
if (logoIcon) {
const actualTheme = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
const logoToUse = sanitizeAssetUrl((actualTheme === 'dark' && settings.logo_url_dark) ? settings.logo_url_dark : (settings.logo_url || null));
if (logoToUse) {
const img = document.createElement('img');
img.src = logoToUse;
img.alt = 'Logo';
img.className = 'logo-icon-img';
logoIcon.replaceChildren(img);
} else {
// Only if we REALLY have no logo URL, we show the default SVG fallback
// (But since it's already in HTML, we just don't touch it or we show it if we hid it)
const svg = logoIcon.querySelector('svg');
if (svg) svg.style.visibility = 'visible';
}
}
// Once found everything or we are past header, we are done
if (logoText && logoIcon) me.disconnect();
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
})(); })();
</script> </script>
<script>
// Global Error Logger for remote debugging
window.onerror = function(msg, url, line, col, error) {
var debugDiv = document.getElementById('js-debug-overlay');
if (!debugDiv) {
debugDiv = document.createElement('div');
debugDiv.id = 'js-debug-overlay';
debugDiv.style.cssText = 'position:fixed;top:0;left:0;width:100%;background:rgba(220,38,38,0.95);color:white;z-index:99999;padding:10px;font-family:monospace;font-size:12px;max-height:30vh;overflow:auto;pointer-events:none;';
document.body.appendChild(debugDiv);
}
debugDiv.innerHTML += '<div>[JS ERROR] ' + msg + ' at ' + line + ':' + col + '</div>';
return false;
};
</script>
</head> </head>
<body> <body>
@@ -51,7 +110,7 @@
<div class="header-left"> <div class="header-left">
<div class="logo"> <div class="logo">
<div id="logoIconContainer"> <div id="logoIconContainer">
<svg class="logo-icon" id="logoSvg" viewBox="0 0 32 32" fill="none"> <svg class="logo-icon" id="logoSvg" viewBox="0 0 32 32" fill="none" style="visibility: hidden;">
<rect x="2" y="2" width="28" height="28" rx="8" stroke="url(#logoGrad)" stroke-width="2.5" /> <rect x="2" y="2" width="28" height="28" rx="8" stroke="url(#logoGrad)" stroke-width="2.5" />
<path d="M8 22 L12 14 L16 18 L20 10 L24 16" stroke="url(#logoGrad)" stroke-width="2" <path d="M8 22 L12 14 L16 18 L20 10 L24 16" stroke="url(#logoGrad)" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" fill="none" /> stroke-linecap="round" stroke-linejoin="round" fill="none" />
@@ -65,7 +124,7 @@
</defs> </defs>
</svg> </svg>
</div> </div>
<h1 class="logo-text" id="logoText">数据可视化展示大屏</h1> <h1 class="logo-text" id="logoText"></h1>
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
@@ -96,6 +155,13 @@
<div id="userSection"> <div id="userSection">
<button class="btn btn-login" id="btnLogin">登录</button> <button class="btn btn-login" id="btnLogin">登录</button>
</div> </div>
<button class="btn-refresh-global" id="btnGlobalRefresh" title="全局强制刷新数据" style="display: none;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" />
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
</svg>
</button>
<button class="btn-settings" id="btnSettings" title="配置管理"> <button class="btn-settings" id="btnSettings" title="配置管理">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
@@ -203,6 +269,13 @@
</svg> </svg>
网络流量趋势 (24h) 网络流量趋势 (24h)
</h2> </h2>
<div class="chart-header-actions">
<button class="btn-icon" id="btnRefreshNetwork" title="刷新流量趋势">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px;">
<path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
</svg>
</button>
</div>
</div> </div>
<div class="chart-legend"> <div class="chart-legend">
<span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span <span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span
@@ -250,7 +323,7 @@
<path <path
d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /> d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg> </svg>
全球服务器分布 全球骨干分布
</h2> </h2>
<div class="chart-header-actions"> <div class="chart-header-actions">
<button class="btn-icon" id="btnExpandGlobe" title="放大显示"> <button class="btn-icon" id="btnExpandGlobe" title="放大显示">
@@ -326,11 +399,13 @@
<th class="sortable" data-sort="disk">磁盘 <span class="sort-icon"></span></th> <th class="sortable" data-sort="disk">磁盘 <span class="sort-icon"></span></th>
<th class="sortable" data-sort="netRx">网络 ↓ <span class="sort-icon"></span></th> <th class="sortable" data-sort="netRx">网络 ↓ <span class="sort-icon"></span></th>
<th class="sortable" data-sort="netTx">网络 ↑ <span class="sort-icon"></span></th> <th class="sortable" data-sort="netTx">网络 ↑ <span class="sort-icon"></span></th>
<th class="sortable" data-sort="conntrack">Conntrack <span class="sort-icon"></span></th>
<th class="sortable" data-sort="traffic24h">24h 流量 <span class="sort-icon"></span></th>
</tr> </tr>
</thead> </thead>
<tbody id="serverTableBody"> <tbody id="serverTableBody">
<tr class="empty-row"> <tr class="empty-row">
<td colspan="8">暂无数据 - 请先配置 Prometheus 数据源</td> <td colspan="10">暂无数据 - 请先配置 Prometheus 数据源</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -354,6 +429,20 @@
</section> </section>
</main> </main>
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
<div class="copyright">© <span id="copyrightYear"></span> LDNET-GA-Service. All rights reserved.</div>
<div class="filings">
<a href="http://www.beian.gov.cn/portal/registerSystemInfo" target="_blank" id="psFilingDisplay" style="display: none;">
<span id="psFilingText"></span>
</a>
<span class="filing-sep"></span>
<a href="https://beian.miit.gov.cn/" target="_blank" id="icpFilingDisplay" style="display: none;"></a>
</div>
</div>
</footer>
<!-- Settings Modal --> <!-- Settings Modal -->
<div class="modal-overlay" id="settingsModal"> <div class="modal-overlay" id="settingsModal">
<div class="modal"> <div class="modal">
@@ -361,6 +450,7 @@
<div class="modal-tabs"> <div class="modal-tabs">
<button class="modal-tab active" data-tab="prom">数据源管理</button> <button class="modal-tab active" data-tab="prom">数据源管理</button>
<button class="modal-tab" data-tab="site">大屏设置</button> <button class="modal-tab" data-tab="site">大屏设置</button>
<button class="modal-tab" data-tab="security">安全设置</button>
<button class="modal-tab" data-tab="latency">延迟线路管理</button> <button class="modal-tab" data-tab="latency">延迟线路管理</button>
<button class="modal-tab" data-tab="auth">账号安全</button> <button class="modal-tab" data-tab="auth">账号安全</button>
</div> </div>
@@ -393,17 +483,31 @@
<div class="form-row"> <div class="form-row">
<div class="form-group form-group-wide"> <div class="form-group form-group-wide">
<label for="sourceDesc">描述 (可选)</label> <label for="sourceDesc">描述 (可选)</label>
<input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off"> <input type="text" id="sourceDesc" placeholder="记录关于此数据源的备注信息" autocomplete="off">
</div> </div>
<div class="form-group" id="serverSourceOption" </div>
style="display: flex; align-items: flex-end; padding-bottom: 8px;"> <div class="form-row" id="serverSourceOption" style="margin-top: 4px;">
<label <div class="form-group form-group-wide">
style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;"> <div class="source-options-clean-row">
<input type="checkbox" id="isServerSource" checked <label class="source-option-item" title="将此数据源的服务器指标聚合到首页总览中">
style="width: 16px; height: 16px; accent-color: var(--accent-indigo);"> <div class="switch-wrapper">
<span>用于服务器展示</span> <input type="checkbox" id="isOverviewSource" checked class="switch-input">
</label> <div class="switch-label"></div>
</div>
<span class="source-option-label">加入总览统计</span>
</label>
<label class="source-option-item" title="在服务器详情列表中显示此数据源的服务器">
<div class="switch-wrapper">
<input type="checkbox" id="isDetailSource" checked class="switch-input">
<div class="switch-label"></div>
</div>
<span class="source-option-label">加入详情展示</span>
</label>
</div>
<input type="checkbox" id="isServerSource" checked disabled style="display: none;">
</div> </div>
</div>
<div class="form-row" style="margin-top: 8px;">
<div class="form-actions"> <div class="form-actions">
<button class="btn btn-test" id="btnTest">测试连接</button> <button class="btn btn-test" id="btnTest">测试连接</button>
<button class="btn btn-add" id="btnAdd">添加</button> <button class="btn btn-add" id="btnAdd">添加</button>
@@ -434,16 +538,37 @@
<input type="text" id="siteTitleInput" placeholder="例:数据可视化展示大屏"> <input type="text" id="siteTitleInput" placeholder="例:数据可视化展示大屏">
</div> </div>
<div class="form-group" style="margin-top: 15px;"> <div class="form-group" style="margin-top: 15px;">
<label for="logoUrlInput">Logo URL (图片链接,为空则显示默认图标)</label> <label for="showPageNameInput">是否显示左上角标题</label>
<input type="url" id="logoUrlInput" placeholder="https://example.com/logo.png"> <select id="showPageNameInput"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
<option value="1">显示 (Show)</option>
<option value="0">隐藏 (Hide)</option>
</select>
</div> </div>
<div class="form-group" style="margin-top: 15px;"> <div class="form-group" style="margin-top: 15px;">
<label for="defaultThemeInput">默认主题</label> <label for="logoUrlInput">Logo URL (白天/默认,支持图片链接)</label>
<select id="defaultThemeInput" <input type="url" id="logoUrlInput" placeholder="https://example.com/logo_light.png">
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);"> </div>
<option value="dark">默认夜间模式</option> <div class="form-group" style="margin-top: 15px;">
<option value="light">默认白天模式</option> <label for="logoUrlDarkInput">Logo URL (黑夜模式,可为空则使用默认)</label>
</select> <input type="url" id="logoUrlDarkInput" placeholder="https://example.com/logo_dark.png">
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="faviconUrlInput">Favicon URL (浏览器标签页图标)</label>
<input type="url" id="faviconUrlInput" placeholder="https://example.com/favicon.ico">
</div>
<div class="settings-section" style="margin-top: 25px; border-top: 1px solid var(--border-color); padding-top: 20px;">
<h4 style="font-size: 0.85rem; color: var(--accent-indigo); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px;">界面外观 (Appearance)</h4>
<div class="form-group">
<label for="defaultThemeInput">色彩主题模式</label>
<select id="defaultThemeInput"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
<option value="auto">跟随系统主题 (Sync with OS)</option>
<option value="dark">强制深色模式 (Always Dark)</option>
<option value="light">强制浅色模式 (Always Light)</option>
</select>
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">选择“跟随系统”后,应用将自动同步您操作系统或浏览器的黑暗/白天模式设置。</p>
</div>
</div> </div>
<div class="form-group" style="margin-top: 15px;"> <div class="form-group" style="margin-top: 15px;">
<label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label> <label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label>
@@ -460,8 +585,22 @@
<option value="tx">仅统计上行 (TX)</option> <option value="tx">仅统计上行 (TX)</option>
<option value="rx">仅统计下行 (RX)</option> <option value="rx">仅统计下行 (RX)</option>
<option value="both">统计上行+下行 (Sum)</option> <option value="both">统计上行+下行 (Sum)</option>
<option value="max">出入取大 (Max)</option>
</select> </select>
</div> </div>
<div class="form-group" style="margin-top: 15px;">
<label for="psFilingInput">公安备案号 (如:京公网安备 11010102000001号)</label>
<input type="text" id="psFilingInput" placeholder="请输入公安备案号">
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="icpFilingInput">ICP 备案号 (如京ICP备12345678号)</label>
<input type="text" id="icpFilingInput" placeholder="请输入 ICP 备案号">
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="cdnUrlInput">静态资源 CDN 地址 (例如: https://cdn.example.com)</label>
<input type="url" id="cdnUrlInput" placeholder="留空则使用本地服务器资源">
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">开启后,页面中的 JS/CSS/图片等资源将尝试从该 CDN 加载。请确保 CDN 已正确镜像相关资源。</p>
</div>
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;"> <div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
<button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button> <button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
</div> </div>
@@ -469,6 +608,65 @@
</div> </div>
</div> </div>
<!-- Security Settings Tab -->
<div class="tab-content" id="tab-security">
<div class="security-settings-form">
<h3>安全与隐私设置</h3>
<div class="form-group" style="margin-top: 15px;">
<label for="requireLoginForServerDetailsInput">服务器详情是否仅登录后可查看</label>
<select id="requireLoginForServerDetailsInput"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
<option value="1">仅登录后可查看</option>
<option value="0">允许公开查看</option>
</select>
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">开启后,未登录访客仍可看到大屏总览,但点击单台服务器时需要先登录。</p>
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="showServerIpInput">是否在服务器详情中显示公网 IP</label>
<select id="showServerIpInput"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); width: 100%;">
<option value="1">显示 (Show)</option>
<option value="0">隐藏 (Hide)</option>
</select>
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">开启后,点击服务器详情时会显示该服务器的公网 IP 地址。</p>
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="ipMetricNameInput">自定义 IP 采集指标 (可选)</label>
<input type="text" id="ipMetricNameInput" placeholder="例node_network_address_info">
<p style="font-size: 0.72rem; color: var(--text-muted); margin-top: 6px;">如果您的 Prometheus 中有专门记录 IP 的指标,请在此输入。留空则尝试自动发现。</p>
</div>
<div class="form-group" style="margin-top: 15px;">
<label for="ipLabelNameInput">IP 指标中的 Label 名称</label>
<input type="text" id="ipLabelNameInput" placeholder="默认address">
</div>
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
<button class="btn btn-add" id="btnSaveSecuritySettings">保存安全设置</button>
</div>
<div class="form-message" id="securitySettingsMessage"></div>
</div>
</div>
<!-- Custom Detail Metrics Tab -->
<div class="tab-content" id="tab-details-metrics">
<div class="metrics-settings-form">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h3 style="margin: 0;">服务器详情指标配置</h3>
<button class="btn btn-add" id="btnAddCustomMetric" style="padding: 6px 12px; font-size: 0.8rem;">
<i class="fas fa-plus"></i> 添加指标
</button>
</div>
<div id="customMetricsList" class="custom-metrics-list" style="max-height: 400px; overflow-y: auto; padding-right: 5px;">
<!-- Dynamic rows will be added here -->
</div>
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
<button class="btn btn-add" id="btnSaveCustomMetrics">保存指标配置</button>
</div>
<div class="form-message" id="customMetricsMessage"></div>
</div>
</div>
<!-- Latency Routes Tab --> <!-- Latency Routes Tab -->
<div class="tab-content" id="tab-latency"> <div class="tab-content" id="tab-latency">
<div class="latency-settings-form"> <div class="latency-settings-form">
@@ -479,11 +677,12 @@
style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);"> style="background: rgba(255,255,255,0.02); padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--border-color);">
<div class="form-row"> <div class="form-row">
<div class="form-group" style="flex: 1.5;"> <div class="form-group" style="flex: 1.5;">
<label>数据源 (Blackbox)</label> <label>探测用服务器</label>
<select id="routeSourceSelect" <select id="routeSourceSelect"
style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);"> style="padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary);">
<option value="">-- 选择数据源 --</option> <option value="">-- 选择数据源 --</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>起航点</label> <label>起航点</label>
@@ -640,4 +839,4 @@
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
</body> </body>
</html> </html>

View File

@@ -4,9 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统初始化 - 数据可视化展示大屏</title> <title>系统初始化 - 数据可视化展示大屏</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<style> <style>
body { body {
@@ -70,6 +67,33 @@
justify-content: center; justify-content: center;
padding: 10px 0; padding: 10px 0;
} }
@media (max-width: 480px) {
body {
align-items: flex-start;
padding: 16px 12px;
}
.init-container {
padding: 24px 18px;
border-radius: 10px;
max-width: 100%;
}
.init-header h2 {
font-size: 18px;
}
.init-header p {
font-size: 12px;
}
.form-row {
flex-direction: column;
}
.actions {
flex-direction: column;
}
.actions .btn {
width: 100%;
}
}
</style> </style>
</head> </head>
<body> <body>

File diff suppressed because it is too large Load Diff

View File

@@ -18,13 +18,91 @@ class AreaChart {
this.prevMaxVal = 0; this.prevMaxVal = 0;
this.currentMaxVal = 0; this.currentMaxVal = 0;
this.lastDataHash = ''; // Fingerprint for optimization
// Use debounced resize for performance and safety // Use debounced resize for performance and safety
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this); this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
window.addEventListener('resize', this._resize); window.addEventListener('resize', this._resize);
// Drag zoom support
this.isDraggingP95 = false;
this.customMaxVal = null;
this.onPointerDown = this.onPointerDown.bind(this);
this.onPointerMove = this.onPointerMove.bind(this);
this.onPointerUp = this.onPointerUp.bind(this);
this.canvas.addEventListener('pointerdown', this.onPointerDown);
window.addEventListener('pointermove', this.onPointerMove);
window.addEventListener('pointerup', this.onPointerUp);
this.resize(); this.resize();
} }
onPointerDown(e) {
if (!this.showP95 || !this.p95) return;
const rect = this.canvas.getBoundingClientRect();
const scaleY = this.height / rect.height;
const y = (e.clientY - rect.top) * scaleY;
const p = this.padding;
const chartH = this.height - p.top - p.bottom;
// Calculate current P95 Y position
const k = 1024;
const currentMaxVal = (this.customMaxVal !== null ? this.customMaxVal : (this.currentMaxVal || 1024));
let unitIdx = Math.floor(Math.log(Math.max(1, currentMaxVal)) / Math.log(k));
unitIdx = Math.max(0, Math.min(unitIdx, 4));
const unitFactor = Math.pow(k, unitIdx);
const rawValInUnit = (currentMaxVal * 1.15) / unitFactor;
let niceMaxInUnit;
if (rawValInUnit <= 1) niceMaxInUnit = 1;
else if (rawValInUnit <= 2) niceMaxInUnit = 2;
else if (rawValInUnit <= 5) niceMaxInUnit = 5;
else if (rawValInUnit <= 10) niceMaxInUnit = 10;
else if (rawValInUnit <= 20) niceMaxInUnit = 20;
else if (rawValInUnit <= 50) niceMaxInUnit = 50;
else if (rawValInUnit <= 100) niceMaxInUnit = 100;
else if (rawValInUnit <= 200) niceMaxInUnit = 200;
else if (rawValInUnit <= 500) niceMaxInUnit = 500;
else if (rawValInUnit <= 1000) niceMaxInUnit = 1000;
else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100;
const displayMaxVal = this.customMaxVal !== null ? this.customMaxVal : (niceMaxInUnit * unitFactor);
const p95Y = p.top + chartH - (this.p95 / (displayMaxVal || 1)) * chartH;
if (Math.abs(y - p95Y) < 25) {
this.isDraggingP95 = true;
this.canvas.style.cursor = 'ns-resize';
this.canvas.setPointerCapture(e.pointerId);
e.preventDefault();
e.stopPropagation();
}
}
onPointerMove(e) {
if (!this.isDraggingP95) return;
const rect = this.canvas.getBoundingClientRect();
const scaleY = this.height / rect.height;
const y = (e.clientY - rect.top) * scaleY;
const p = this.padding;
const chartH = this.height - p.top - p.bottom;
const dy = p.top + chartH - y;
if (dy > 10) {
this.customMaxVal = (this.p95 * chartH) / dy;
this.draw();
}
}
onPointerUp(e) {
if (this.isDraggingP95) {
this.isDraggingP95 = false;
this.canvas.style.cursor = '';
this.canvas.releasePointerCapture(e.pointerId);
}
}
resize() { resize() {
const rect = this.canvas.parentElement.getBoundingClientRect(); const rect = this.canvas.parentElement.getBoundingClientRect();
this.width = rect.width; this.width = rect.width;
@@ -40,6 +118,14 @@ class AreaChart {
setData(data) { setData(data) {
if (!data || !data.timestamps) return; if (!data || !data.timestamps) return;
// 1. Data Fingerprinting: Skip redundant updates to save GPU/CPU
const fingerprint = data.timestamps.length + '_' +
(data.rx.length > 0 ? data.rx[data.rx.length - 1] : 0) + '_' +
(data.tx.length > 0 ? data.tx[data.tx.length - 1] : 0);
if (fingerprint === this.lastDataHash) return;
this.lastDataHash = fingerprint;
// Store old data for smooth transition before updating this.data // Store old data for smooth transition before updating this.data
// Only clone if there is data to clone; otherwise use empty set // Only clone if there is data to clone; otherwise use empty set
if (this.data && this.data.timestamps && this.data.timestamps.length > 0) { if (this.data && this.data.timestamps && this.data.timestamps.length > 0) {
@@ -55,8 +141,8 @@ class AreaChart {
// Smoothly transition max value context too // Smoothly transition max value context too
this.prevMaxVal = this.currentMaxVal || 0; this.prevMaxVal = this.currentMaxVal || 0;
// Downsample if data is too dense (target ~1500 points for performance) // Downsample if data is too dense (target ~500 points for GPU performance)
const MAX_POINTS = 1500; const MAX_POINTS = 500;
if (data.timestamps.length > MAX_POINTS) { if (data.timestamps.length > MAX_POINTS) {
const skip = Math.ceil(data.timestamps.length / MAX_POINTS); const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
const downsampled = { timestamps: [], rx: [], tx: [] }; const downsampled = { timestamps: [], rx: [], tx: [] };
@@ -84,6 +170,8 @@ class AreaChart {
combined = data.tx.map(t => t || 0); combined = data.tx.map(t => t || 0);
} else if (this.p95Type === 'rx') { } else if (this.p95Type === 'rx') {
combined = data.rx.map(r => r || 0); combined = data.rx.map(r => r || 0);
} else if (this.p95Type === 'max') {
combined = data.tx.map((t, i) => Math.max(t || 0, data.rx[i] || 0));
} else { } else {
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0)); combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
} }
@@ -103,7 +191,7 @@ class AreaChart {
animate() { animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame); if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now(); const start = performance.now();
const duration = 800; const duration = 400; // Shorter animation = less GPU time
const step = (now) => { const step = (now) => {
const elapsed = now - start; const elapsed = now - start;
@@ -153,13 +241,10 @@ class AreaChart {
let unitIdx = Math.floor(Math.log(Math.max(1, maxDataVal)) / Math.log(k)); let unitIdx = Math.floor(Math.log(Math.max(1, maxDataVal)) / Math.log(k));
unitIdx = Math.max(0, Math.min(unitIdx, sizes.length - 1)); unitIdx = Math.max(0, Math.min(unitIdx, sizes.length - 1));
const unitFactor = Math.pow(k, unitIdx); const unitFactor = Math.pow(k, unitIdx);
const unitLabel = sizes[unitIdx];
// Get value in current units and find a "nice" round max // Get value in current units and find a "nice" round max
// Use 1.15 cushion
const rawValInUnit = (maxDataVal * 1.15) / unitFactor; const rawValInUnit = (maxDataVal * 1.15) / unitFactor;
let niceMaxInUnit; let niceMaxInUnit;
if (rawValInUnit <= 1) niceMaxInUnit = 1; if (rawValInUnit <= 1) niceMaxInUnit = 1;
else if (rawValInUnit <= 2) niceMaxInUnit = 2; else if (rawValInUnit <= 2) niceMaxInUnit = 2;
else if (rawValInUnit <= 5) niceMaxInUnit = 5; else if (rawValInUnit <= 5) niceMaxInUnit = 5;
@@ -172,7 +257,16 @@ class AreaChart {
else if (rawValInUnit <= 1000) niceMaxInUnit = 1000; else if (rawValInUnit <= 1000) niceMaxInUnit = 1000;
else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100; else niceMaxInUnit = Math.ceil(rawValInUnit / 100) * 100;
const maxVal = niceMaxInUnit * unitFactor; let maxVal = niceMaxInUnit * unitFactor;
if (this.customMaxVal !== null) {
maxVal = this.customMaxVal;
}
// Recalculate units based on final maxVal (could be zoomed)
let finalUnitIdx = Math.floor(Math.log(Math.max(1, maxVal)) / Math.log(k));
finalUnitIdx = Math.max(0, Math.min(finalUnitIdx, sizes.length - 1));
const finalFactor = Math.pow(k, finalUnitIdx);
const finalUnitLabel = sizes[finalUnitIdx];
const len = timestamps.length; const len = timestamps.length;
const xStep = chartW / (len - 1); const xStep = chartW / (len - 1);
@@ -190,21 +284,21 @@ class AreaChart {
ctx.lineWidth = 1; ctx.lineWidth = 1;
const gridLines = 4; const gridLines = 4;
for (let i = 0; i <= gridLines; i++) { for (let i = 0; i <= gridLines; i++) {
const y = p.top + (chartH / gridLines) * i; const y = p.top + (chartH / gridLines) * i;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p.left, y); ctx.moveTo(p.left, y);
ctx.lineTo(p.left + chartW, y); ctx.lineTo(p.left + chartW, y);
ctx.stroke(); ctx.stroke();
// Y-axis labels - share the same unit for readability // Y-axis labels
const valInUnit = niceMaxInUnit * (1 - i / gridLines); const v = maxVal * (1 - i / gridLines);
ctx.fillStyle = '#5a6380'; const valInUnit = v / finalFactor;
ctx.font = '10px "JetBrains Mono", monospace'; ctx.fillStyle = '#5a6380';
ctx.textAlign = 'right'; ctx.font = '10px "JetBrains Mono", monospace';
ctx.textAlign = 'right';
// Format: "X.X MB/s" or "X MB/s" const label = (valInUnit % 1 === 0 ? valInUnit : valInUnit.toFixed(1)) + ' ' + finalUnitLabel;
const label = (valInUnit % 1 === 0 ? valInUnit : valInUnit.toFixed(1)) + ' ' + unitLabel; ctx.fillText(label, p.left - 10, y + 3);
ctx.fillText(label, p.left - 10, y + 3);
} }
// X-axis labels (every ~4 hours) // X-axis labels (every ~4 hours)
@@ -216,47 +310,42 @@ class AreaChart {
const x = getX(i); const x = getX(i);
ctx.fillText(formatTime(timestamps[i]), x, h - 8); ctx.fillText(formatTime(timestamps[i]), x, h - 8);
} }
// Always show last label
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8); ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
const getPVal = (arr, i) => (arr && i < arr.length) ? arr[i] : 0; // Draw data areas with clipping
ctx.save();
ctx.beginPath();
ctx.rect(p.left, p.top, chartW, chartH);
ctx.clip();
// Draw TX area
if (this.showTx) { if (this.showTx) {
this.drawArea(ctx, tx, this.prevData ? this.prevData.tx : null, getX, getY, chartH, p, this.drawArea(ctx, tx, this.prevData ? this.prevData.tx : null, getX, getY, chartH, p,
'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)', 'rgba(99, 102, 241, 0.25)', 'rgba(99, 102, 241, 0.02)', '#6366f1', len);
'#6366f1', len);
} }
// Draw RX area (on top)
if (this.showRx) { if (this.showRx) {
this.drawArea(ctx, rx, this.prevData ? this.prevData.rx : null, getX, getY, chartH, p, this.drawArea(ctx, rx, this.prevData ? this.prevData.rx : null, getX, getY, chartH, p,
'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)', 'rgba(6, 182, 212, 0.25)', 'rgba(6, 182, 212, 0.02)', '#06b6d4', len);
'#06b6d4', len);
} }
ctx.restore();
// Draw P95 line // Draw P95 line
if (this.showP95 && this.p95 && this.animProgress === 1) { if (this.showP95 && this.p95 && (this.animProgress === 1 || this.isDraggingP95)) {
const p95Y = getY(this.p95); const p95Y = getY(this.p95);
// Only draw if within visible range
if (p95Y >= p.top && p95Y <= p.top + chartH) { if (p95Y >= p.top && p95Y <= p.top + chartH) {
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.setLineDash([6, 4]); ctx.setLineDash([6, 4]);
ctx.strokeStyle = 'rgba(244, 63, 94, 0.85)'; // --accent-rose ctx.strokeStyle = 'rgba(244, 63, 94, 0.85)';
ctx.lineWidth = 1.5; ctx.lineWidth = 1.5;
ctx.moveTo(p.left, p95Y); ctx.moveTo(p.left, p95Y);
ctx.lineTo(p.left + chartW, p95Y); ctx.lineTo(p.left + chartW, p95Y);
ctx.stroke(); ctx.stroke();
// P95 label background
const label = '95计费: ' + (window.formatBandwidth ? window.formatBandwidth(this.p95) : this.p95.toFixed(2)); const label = '95计费: ' + (window.formatBandwidth ? window.formatBandwidth(this.p95) : this.p95.toFixed(2));
ctx.font = 'bold 11px "JetBrains Mono", monospace'; ctx.font = 'bold 11px "JetBrains Mono", monospace';
const metrics = ctx.measureText(label); const metrics = ctx.measureText(label);
ctx.fillStyle = 'rgba(244, 63, 94, 0.15)'; ctx.fillStyle = 'rgba(244, 63, 94, 0.15)';
ctx.fillRect(p.left + 8, p95Y - 20, metrics.width + 12, 18); ctx.fillRect(p.left + 8, p95Y - 20, metrics.width + 12, 18);
// P95 label text
ctx.fillStyle = '#f43f5e'; ctx.fillStyle = '#f43f5e';
ctx.textAlign = 'left'; ctx.textAlign = 'left';
ctx.fillText(label, p.left + 14, p95Y - 7); ctx.fillText(label, p.left + 14, p95Y - 7);
@@ -268,7 +357,7 @@ class AreaChart {
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) { drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
if (!values || values.length === 0) return; if (!values || values.length === 0) return;
const useSimple = len > 250; const useSimple = len > 80;
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0; const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
// Fill // Fill
@@ -330,11 +419,12 @@ class MetricChart {
this.data = { timestamps: [], values: [], series: null }; this.data = { timestamps: [], values: [], series: null };
this.unit = unit; // '%', 'B/s', etc. this.unit = unit; // '%', 'B/s', etc.
this.dpr = window.devicePixelRatio || 1; this.dpr = window.devicePixelRatio || 1;
this.padding = { top: 10, right: 10, bottom: 20, left: 60 }; this.padding = { top: 10, right: 10, bottom: 35, left: 60 };
this.animProgress = 0; this.animProgress = 0;
this.prevMaxVal = 0; this.prevMaxVal = 0;
this.currentMaxVal = 0; this.currentMaxVal = 0;
this.lastDataHash = ''; // Fingerprint for optimization
// Use debounced resize for performance and safety // Use debounced resize for performance and safety
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this); this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
@@ -358,6 +448,15 @@ class MetricChart {
} }
setData(data) { setData(data) {
if (!data || !data.timestamps) return;
// 1. Simple fingerprinting to avoid constant re-animation of same data
const lastVal = data.values && data.values.length > 0 ? data.values[data.values.length - 1] : 0;
const fingerprint = data.timestamps.length + '_' + lastVal + '_' + (data.series ? 's' : 'v');
if (fingerprint === this.lastDataHash) return;
this.lastDataHash = fingerprint;
if (this.data && this.data.values && this.data.values.length > 0) { if (this.data && this.data.values && this.data.values.length > 0) {
this.prevData = JSON.parse(JSON.stringify(this.data)); this.prevData = JSON.parse(JSON.stringify(this.data));
} else { } else {
@@ -388,7 +487,7 @@ class MetricChart {
animate() { animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame); if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now(); const start = performance.now();
const duration = 500; const duration = 300; // Snappier and lighter on GPU
const step = (now) => { const step = (now) => {
const elapsed = now - start; const elapsed = now - start;
this.animProgress = Math.min(elapsed / duration, 1); this.animProgress = Math.min(elapsed / duration, 1);
@@ -456,12 +555,30 @@ class MetricChart {
} else { } else {
label = v.toFixed(0) + this.unit; label = v.toFixed(0) + this.unit;
} }
} else if (this.unit === '%' && this.totalValue) {
// 当提供了总量时,将百分比转换为实际数值显示(例如内存显示 2GB 而非 25%
const absVal = v * (this.totalValue / 100);
label = window.formatBytes ? window.formatBytes(absVal) : absVal.toFixed(0);
} else { } else {
label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit; label = (v >= 1000 ? (v / 1000).toFixed(1) + 'k' : v.toFixed(v < 10 && v > 0 ? 1 : 0)) + this.unit;
} }
ctx.fillText(label, p.left - 8, y + 3); ctx.fillText(label, p.left - 8, y + 3);
} }
// X-axis Timeline
ctx.fillStyle = '#5a6380';
ctx.font = '9px "JetBrains Mono", monospace';
ctx.textAlign = 'center';
const labelInterval = Math.max(1, Math.floor(len / 5));
for (let i = 0; i < len; i += labelInterval) {
const x = getX(i);
ctx.fillText(formatTime(timestamps[i]), x, h - 8);
}
// Always show last label if not already shown
if ((len - 1) % labelInterval !== 0) {
ctx.fillText(formatTime(timestamps[len - 1]), getX(len - 1), h - 8);
}
if (series) { if (series) {
// Draw Stacked Area // Draw Stacked Area
const modes = [ const modes = [
@@ -527,7 +644,7 @@ class MetricChart {
}); });
} else { } else {
const useSimple = len > 250; const useSimple = len > 100;
const prevVals = this.prevData ? this.prevData.values : null; const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0; const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;

45
public/vendor/echarts.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
public/vendor/world.json vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,186 +0,0 @@
/**
* Database Integrity Check
* Runs at startup to ensure all required tables exist.
* Recreates the database if any tables are missing.
*/
require('dotenv').config();
const mysql = require('mysql2/promise');
const db = require('./db');
const path = require('path');
const fs = require('fs');
const REQUIRED_TABLES = [
'users',
'prometheus_sources',
'site_settings',
'traffic_stats',
'server_locations',
'latency_routes'
];
async function checkAndFixDatabase() {
const envPath = path.join(__dirname, '..', '.env');
if (!fs.existsSync(envPath)) return;
try {
// Check tables
const [rows] = await db.query("SHOW TABLES");
const existingTables = rows.map(r => Object.values(r)[0]);
const missingTables = REQUIRED_TABLES.filter(t => !existingTables.includes(t));
if (missingTables.length > 0) {
console.log(`[Database Integrity] ⚠️ Missing tables: ${missingTables.join(', ')}. Creating them...`);
for (const table of missingTables) {
await createTable(table);
}
console.log(`[Database Integrity] ✅ Missing tables created.`);
}
// Check for is_server_source and type in prometheus_sources
const [promColumns] = await db.query("SHOW COLUMNS FROM prometheus_sources");
const promColumnNames = promColumns.map(c => c.Field);
if (!promColumnNames.includes('is_server_source')) {
console.log(`[Database Integrity] ⚠️ Missing column 'is_server_source' in 'prometheus_sources'. Adding it...`);
await db.query("ALTER TABLE prometheus_sources ADD COLUMN is_server_source TINYINT(1) DEFAULT 1 AFTER description");
console.log(`[Database Integrity] ✅ Column 'is_server_source' added.`);
}
if (!promColumnNames.includes('type')) {
console.log(`[Database Integrity] ⚠️ Missing column 'type' in 'prometheus_sources'. Adding it...`);
await db.query("ALTER TABLE prometheus_sources ADD COLUMN type VARCHAR(50) DEFAULT 'prometheus' AFTER is_server_source");
console.log(`[Database Integrity] ✅ Column 'type' added.`);
}
// Check for new columns in site_settings
const [columns] = await db.query("SHOW COLUMNS FROM site_settings");
const columnNames = columns.map(c => c.Field);
if (!columnNames.includes('show_95_bandwidth')) {
console.log(`[Database Integrity] ⚠️ Missing column 'show_95_bandwidth' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN show_95_bandwidth TINYINT(1) DEFAULT 0 AFTER default_theme");
console.log(`[Database Integrity] ✅ Column 'show_95_bandwidth' added.`);
}
if (!columnNames.includes('p95_type')) {
console.log(`[Database Integrity] ⚠️ Missing column 'p95_type' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN p95_type VARCHAR(20) DEFAULT 'tx' AFTER show_95_bandwidth");
console.log(`[Database Integrity] ✅ Column 'p95_type' added.`);
}
if (!columnNames.includes('blackbox_source_id')) {
console.log(`[Database Integrity] ⚠️ Missing column 'blackbox_source_id' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN blackbox_source_id INT AFTER p95_type");
console.log(`[Database Integrity] ✅ Column 'blackbox_source_id' added.`);
}
if (!columnNames.includes('latency_source')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_source' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_source VARCHAR(100) AFTER blackbox_source_id");
console.log(`[Database Integrity] ✅ Column 'latency_source' added.`);
}
if (!columnNames.includes('latency_dest')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_dest' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_dest VARCHAR(100) AFTER latency_source");
console.log(`[Database Integrity] ✅ Column 'latency_dest' added.`);
}
if (!columnNames.includes('latency_target')) {
console.log(`[Database Integrity] ⚠️ Missing column 'latency_target' in 'site_settings'. Adding it...`);
await db.query("ALTER TABLE site_settings ADD COLUMN latency_target VARCHAR(255) AFTER latency_dest");
console.log(`[Database Integrity] ✅ Column 'latency_target' added.`);
}
} catch (err) {
console.error('[Database Integrity] ❌ Error checking integrity:', err.message);
}
}
async function createTable(tableName) {
console.log(` - Creating table "${tableName}"...`);
switch (tableName) {
case 'users':
await db.query(`
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
salt VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
break;
case 'prometheus_sources':
await db.query(`
CREATE TABLE IF NOT EXISTS prometheus_sources (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
url VARCHAR(500) NOT NULL,
description TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
break;
case 'site_settings':
await db.query(`
CREATE TABLE IF NOT EXISTS site_settings (
id INT PRIMARY KEY DEFAULT 1,
page_name VARCHAR(255) DEFAULT '数据可视化展示大屏',
title VARCHAR(255) DEFAULT '数据可视化展示大屏',
logo_url TEXT,
default_theme VARCHAR(20) DEFAULT 'dark',
show_95_bandwidth TINYINT(1) DEFAULT 0,
p95_type VARCHAR(20) DEFAULT 'tx',
blackbox_source_id INT,
latency_source VARCHAR(100),
latency_dest VARCHAR(100),
latency_target VARCHAR(255),
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
await db.query(`
INSERT IGNORE INTO site_settings (id, page_name, title, default_theme, show_95_bandwidth)
VALUES (1, '数据可视化展示大屏', '数据可视化展示大屏', 'dark', 0)
`);
break;
case 'traffic_stats':
await db.query(`
CREATE TABLE IF NOT EXISTS traffic_stats (
id INT AUTO_INCREMENT PRIMARY KEY,
rx_bytes BIGINT UNSIGNED DEFAULT 0,
tx_bytes BIGINT UNSIGNED DEFAULT 0,
rx_bandwidth DOUBLE DEFAULT 0,
tx_bandwidth DOUBLE DEFAULT 0,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE INDEX (timestamp)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
break;
case 'latency_routes':
await db.query(`
CREATE TABLE IF NOT EXISTS latency_routes (
id INT AUTO_INCREMENT PRIMARY KEY,
source_id INT NOT NULL,
latency_source VARCHAR(100) NOT NULL,
latency_dest VARCHAR(100) NOT NULL,
latency_target VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
break;
case 'server_locations':
await db.query(`
CREATE TABLE IF NOT EXISTS server_locations (
id INT AUTO_INCREMENT PRIMARY KEY,
ip VARCHAR(255) NOT NULL UNIQUE,
country CHAR(2),
country_name VARCHAR(100),
region VARCHAR(100),
city VARCHAR(100),
latitude DOUBLE,
longitude DOUBLE,
last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
break;
}
}
module.exports = checkAndFixDatabase;

236
server/db-schema-check.js Normal file
View File

@@ -0,0 +1,236 @@
/**
* Database schema check
* Ensures required tables and columns exist at startup.
*/
const path = require('path');
require('dotenv').config({ path: path.join(__dirname, '..', '.env') });
const db = require('./db');
const fs = require('fs');
const SCHEMA = {
users: {
createSql: `
CREATE TABLE IF NOT EXISTS users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
salt VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
columns: [
{ name: 'username', sql: "ALTER TABLE users ADD COLUMN username VARCHAR(255) NOT NULL UNIQUE AFTER id" },
{ name: 'password', sql: "ALTER TABLE users ADD COLUMN password VARCHAR(255) NOT NULL AFTER username" },
{ name: 'salt', sql: "ALTER TABLE users ADD COLUMN salt VARCHAR(255) NOT NULL AFTER password" }
]
},
prometheus_sources: {
createSql: `
CREATE TABLE IF NOT EXISTS prometheus_sources (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
url VARCHAR(500) NOT NULL,
description TEXT,
is_server_source TINYINT(1) DEFAULT 1,
is_overview_source TINYINT(1) DEFAULT 1,
is_detail_source TINYINT(1) DEFAULT 1,
type VARCHAR(50) DEFAULT 'prometheus',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
columns: [
{ name: 'name', sql: "ALTER TABLE prometheus_sources ADD COLUMN name VARCHAR(255) NOT NULL AFTER id" },
{ name: 'url', sql: "ALTER TABLE prometheus_sources ADD COLUMN url VARCHAR(500) NOT NULL AFTER name" },
{ name: 'description', sql: "ALTER TABLE prometheus_sources ADD COLUMN description TEXT AFTER url" },
{ name: 'is_server_source', sql: "ALTER TABLE prometheus_sources ADD COLUMN is_server_source TINYINT(1) DEFAULT 1 AFTER description" },
{ name: 'is_overview_source', sql: "ALTER TABLE prometheus_sources ADD COLUMN is_overview_source TINYINT(1) DEFAULT 1 AFTER is_server_source" },
{ name: 'is_detail_source', sql: "ALTER TABLE prometheus_sources ADD COLUMN is_detail_source TINYINT(1) DEFAULT 1 AFTER is_overview_source" },
{ name: 'type', sql: "ALTER TABLE prometheus_sources ADD COLUMN type VARCHAR(50) DEFAULT 'prometheus' AFTER is_detail_source" }
]
},
site_settings: {
createSql: `
CREATE TABLE IF NOT EXISTS site_settings (
id INT PRIMARY KEY DEFAULT 1,
page_name VARCHAR(255) DEFAULT '数据可视化展示大屏',
show_page_name TINYINT(1) DEFAULT 1,
title VARCHAR(255) DEFAULT '数据可视化展示大屏',
logo_url TEXT,
logo_url_dark TEXT,
favicon_url TEXT,
default_theme VARCHAR(20) DEFAULT 'dark',
show_95_bandwidth TINYINT(1) DEFAULT 0,
p95_type VARCHAR(20) DEFAULT 'tx',
require_login_for_server_details TINYINT(1) DEFAULT 1,
blackbox_source_id INT,
latency_source VARCHAR(100),
latency_dest VARCHAR(100),
latency_target VARCHAR(255),
icp_filing VARCHAR(255),
ps_filing VARCHAR(255),
show_server_ip TINYINT(1) DEFAULT 0,
ip_metric_name VARCHAR(100) DEFAULT NULL,
ip_label_name VARCHAR(100) DEFAULT 'address',
custom_metrics JSON DEFAULT NULL,
cdn_url VARCHAR(500) DEFAULT NULL,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
seedSql: `
INSERT IGNORE INTO site_settings (
id, page_name, show_page_name, title, default_theme, show_95_bandwidth, p95_type, require_login_for_server_details
) VALUES (
1, '数据可视化展示大屏', 1, '数据可视化展示大屏', 'dark', 0, 'tx', 1
)
`,
columns: [
{ name: 'page_name', sql: "ALTER TABLE site_settings ADD COLUMN page_name VARCHAR(255) DEFAULT '数据可视化展示大屏' AFTER id" },
{ name: 'show_page_name', sql: "ALTER TABLE site_settings ADD COLUMN show_page_name TINYINT(1) DEFAULT 1 AFTER page_name" },
{ name: 'title', sql: "ALTER TABLE site_settings ADD COLUMN title VARCHAR(255) DEFAULT '数据可视化展示大屏' AFTER show_page_name" },
{ name: 'logo_url', sql: "ALTER TABLE site_settings ADD COLUMN logo_url TEXT AFTER title" },
{ name: 'logo_url_dark', sql: "ALTER TABLE site_settings ADD COLUMN logo_url_dark TEXT AFTER logo_url" },
{ name: 'favicon_url', sql: "ALTER TABLE site_settings ADD COLUMN favicon_url TEXT AFTER logo_url_dark" },
{ name: 'default_theme', sql: "ALTER TABLE site_settings ADD COLUMN default_theme VARCHAR(20) DEFAULT 'dark' AFTER favicon_url" },
{ name: 'show_95_bandwidth', sql: "ALTER TABLE site_settings ADD COLUMN show_95_bandwidth TINYINT(1) DEFAULT 0 AFTER default_theme" },
{ name: 'p95_type', sql: "ALTER TABLE site_settings ADD COLUMN p95_type VARCHAR(20) DEFAULT 'tx' AFTER show_95_bandwidth" },
{ name: 'require_login_for_server_details', sql: "ALTER TABLE site_settings ADD COLUMN require_login_for_server_details TINYINT(1) DEFAULT 1 AFTER p95_type" },
{ name: 'blackbox_source_id', sql: "ALTER TABLE site_settings ADD COLUMN blackbox_source_id INT AFTER require_login_for_server_details" },
{ name: 'latency_source', sql: "ALTER TABLE site_settings ADD COLUMN latency_source VARCHAR(100) AFTER blackbox_source_id" },
{ name: 'latency_dest', sql: "ALTER TABLE site_settings ADD COLUMN latency_dest VARCHAR(100) AFTER latency_source" },
{ name: 'latency_target', sql: "ALTER TABLE site_settings ADD COLUMN latency_target VARCHAR(255) AFTER latency_dest" },
{ name: 'icp_filing', sql: "ALTER TABLE site_settings ADD COLUMN icp_filing VARCHAR(255) AFTER latency_target" },
{ name: 'ps_filing', sql: "ALTER TABLE site_settings ADD COLUMN ps_filing VARCHAR(255) AFTER icp_filing" },
{ name: 'show_server_ip', sql: "ALTER TABLE site_settings ADD COLUMN show_server_ip TINYINT(1) DEFAULT 0 AFTER ps_filing" },
{ name: 'ip_metric_name', sql: "ALTER TABLE site_settings ADD COLUMN ip_metric_name VARCHAR(100) DEFAULT NULL AFTER show_server_ip" },
{ name: 'ip_label_name', sql: "ALTER TABLE site_settings ADD COLUMN ip_label_name VARCHAR(100) DEFAULT 'address' AFTER ip_metric_name" },
{ name: 'custom_metrics', sql: "ALTER TABLE site_settings ADD COLUMN custom_metrics JSON DEFAULT NULL AFTER ip_label_name" },
{ name: 'cdn_url', sql: "ALTER TABLE site_settings ADD COLUMN cdn_url VARCHAR(500) DEFAULT NULL AFTER custom_metrics" }
]
},
traffic_stats: {
createSql: `
CREATE TABLE IF NOT EXISTS traffic_stats (
id INT AUTO_INCREMENT PRIMARY KEY,
rx_bytes BIGINT UNSIGNED DEFAULT 0,
tx_bytes BIGINT UNSIGNED DEFAULT 0,
rx_bandwidth DOUBLE DEFAULT 0,
tx_bandwidth DOUBLE DEFAULT 0,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
UNIQUE INDEX (timestamp)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
columns: [
{ name: 'rx_bytes', sql: "ALTER TABLE traffic_stats ADD COLUMN rx_bytes BIGINT UNSIGNED DEFAULT 0 AFTER id" },
{ name: 'tx_bytes', sql: "ALTER TABLE traffic_stats ADD COLUMN tx_bytes BIGINT UNSIGNED DEFAULT 0 AFTER rx_bytes" },
{ name: 'rx_bandwidth', sql: "ALTER TABLE traffic_stats ADD COLUMN rx_bandwidth DOUBLE DEFAULT 0 AFTER tx_bytes" },
{ name: 'tx_bandwidth', sql: "ALTER TABLE traffic_stats ADD COLUMN tx_bandwidth DOUBLE DEFAULT 0 AFTER rx_bandwidth" }
]
},
server_locations: {
createSql: `
CREATE TABLE IF NOT EXISTS server_locations (
id INT AUTO_INCREMENT PRIMARY KEY,
ip VARCHAR(255) NOT NULL UNIQUE,
country CHAR(2),
country_name VARCHAR(100),
region VARCHAR(100),
city VARCHAR(100),
latitude DOUBLE,
longitude DOUBLE,
last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
columns: [
{ name: 'ip', sql: "ALTER TABLE server_locations ADD COLUMN ip VARCHAR(255) NOT NULL UNIQUE AFTER id" },
{ name: 'country', sql: "ALTER TABLE server_locations ADD COLUMN country CHAR(2) AFTER ip" },
{ name: 'country_name', sql: "ALTER TABLE server_locations ADD COLUMN country_name VARCHAR(100) AFTER country" },
{ name: 'region', sql: "ALTER TABLE server_locations ADD COLUMN region VARCHAR(100) AFTER country_name" },
{ name: 'city', sql: "ALTER TABLE server_locations ADD COLUMN city VARCHAR(100) AFTER region" },
{ name: 'latitude', sql: "ALTER TABLE server_locations ADD COLUMN latitude DOUBLE AFTER city" },
{ name: 'longitude', sql: "ALTER TABLE server_locations ADD COLUMN longitude DOUBLE AFTER latitude" }
]
},
latency_routes: {
createSql: `
CREATE TABLE IF NOT EXISTS latency_routes (
id INT AUTO_INCREMENT PRIMARY KEY,
source_id INT NOT NULL,
latency_source VARCHAR(100) NOT NULL,
latency_dest VARCHAR(100) NOT NULL,
latency_target VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`,
columns: [
{ name: 'source_id', sql: "ALTER TABLE latency_routes ADD COLUMN source_id INT NOT NULL AFTER id" },
{ name: 'latency_source', sql: "ALTER TABLE latency_routes ADD COLUMN latency_source VARCHAR(100) NOT NULL AFTER source_id" },
{ name: 'latency_dest', sql: "ALTER TABLE latency_routes ADD COLUMN latency_dest VARCHAR(100) NOT NULL AFTER latency_source" },
{ name: 'latency_target', sql: "ALTER TABLE latency_routes ADD COLUMN latency_target VARCHAR(255) NOT NULL AFTER latency_dest" }
]
}
};
async function ensureTable(tableName, tableSchema) {
try {
// 1. Ensure table exists
await db.query(tableSchema.createSql);
// 2. Check columns
const [columns] = await db.query(`SHOW COLUMNS FROM \`${tableName}\``);
const existingColumns = new Set(columns.map((column) => column.Field));
console.log(`[Database Integrity] Table '${tableName}' verified (${columns.length} columns)`);
for (const column of tableSchema.columns || []) {
if (!existingColumns.has(column.name)) {
console.log(`[Database Integrity] Missing column '${column.name}' in '${tableName}'. Adding it...`);
await db.query(column.sql);
console.log(`[Database Integrity] Column '${column.name}' added to '${tableName}'.`);
}
}
// 3. Seed data
if (tableSchema.seedSql) {
const [rows] = await db.query(`SELECT count(*) as count FROM \`${tableName}\``);
if (rows[0].count === 0) {
console.log(`[Database Integrity] Table '${tableName}' is empty. Seeding initial data...`);
await db.query(tableSchema.seedSql);
}
}
} catch (err) {
console.error(`[Database Integrity] Error ensuring table '${tableName}':`, err.message);
throw err;
}
}
async function db_migrate() {
console.log('[Database Integrity] Starting comprehensive database audit...');
// Try to check if we can even connect
try {
const health = await db.checkHealth();
if (health.status !== 'up') {
console.warn(`[Database Integrity] initial health check failed: ${health.error}`);
// If we can't connect, maybe the DB itself doesn't exist?
// For now, we rely on the pool to handle connection retries/errors.
}
} catch (e) {
// Ignore health check errors, let ensureTable handle the primary queries
}
try {
let tablesChecked = 0;
for (const [tableName, tableSchema] of Object.entries(SCHEMA)) {
await ensureTable(tableName, tableSchema);
tablesChecked++;
}
console.log(`[Database Integrity] Audit complete. ${tablesChecked} tables verified and healthy.`);
return true;
} catch (err) {
console.error('[Database Integrity] ❌ Audit failed:', err.message);
throw err;
}
}
module.exports = db_migrate;

View File

@@ -10,6 +10,7 @@ const db = require('./db');
*/ */
const ipInfoToken = process.env.IPINFO_TOKEN; const ipInfoToken = process.env.IPINFO_TOKEN;
const enableExternalGeoLookup = process.env.ENABLE_EXTERNAL_GEO_LOOKUP === 'true';
/** /**
* Normalizes geo data for consistent display * Normalizes geo data for consistent display
@@ -17,21 +18,48 @@ const ipInfoToken = process.env.IPINFO_TOKEN;
function normalizeGeo(geo) { function normalizeGeo(geo) {
if (!geo) return geo; if (!geo) return geo;
// Custom normalization for TW, HK, MO to "China, {CODE}" // Custom normalization for TW to "Taipei, China" and JP to "Tokyo"
const specialRegions = ['TW']; const country = (geo.country || geo.country_code || '').toUpperCase();
if (specialRegions.includes(geo.country?.toUpperCase())) { if (country === 'TW') {
return { return {
...geo, ...geo,
city: `China, ${geo.country.toUpperCase()}`, city: 'Taipei',
country_name: 'China' country: 'TW',
country_name: 'China',
// Force Taipei coordinates for consistent 2D plotting
loc: '25.0330,121.5654',
latitude: 25.0330,
longitude: 121.5654
};
} else if (country === 'JP') {
return {
...geo,
city: 'Tokyo',
country: 'JP',
country_name: 'Japan',
// Force Tokyo coordinates for consistent 2D plotting
loc: '35.6895,139.6917',
latitude: 35.6895,
longitude: 139.6917
}; };
} }
return geo; return geo;
} }
async function getLocation(target) { async function getLocation(target) {
// Normalize target (strip port if present) // Normalize target (strip port if present, handle IPv6 brackets)
const cleanTarget = target.split(':')[0]; let cleanTarget = target;
if (cleanTarget.startsWith('[')) {
const closingBracket = cleanTarget.indexOf(']');
if (closingBracket !== -1) {
cleanTarget = cleanTarget.substring(1, closingBracket);
}
} else {
const parts = cleanTarget.split(':');
if (parts.length === 2) {
cleanTarget = parts[0];
}
}
// 1. Check if we already have this IP/Domain in DB (FASTEST) // 1. Check if we already have this IP/Domain in DB (FASTEST)
try { try {
@@ -57,7 +85,18 @@ async function getLocation(target) {
// Secondary DB check with resolved IP // Secondary DB check with resolved IP
const [rows] = await db.query('SELECT * FROM server_locations WHERE ip = ?', [cleanIp]); const [rows] = await db.query('SELECT * FROM server_locations WHERE ip = ?', [cleanIp]);
if (rows.length > 0) { if (rows.length > 0) {
return normalizeGeo(rows[0]); const data = rows[0];
// Cache the domain mapping to avoid future DNS lookups
if (cleanTarget !== cleanIp) {
try {
await db.query(`
INSERT INTO server_locations (ip, country, country_name, region, city, latitude, longitude)
VALUES (?, ?, ?, ?, ?, ?, ?)
ON DUPLICATE KEY UPDATE last_updated = CURRENT_TIMESTAMP
`, [cleanTarget, data.country, data.country_name, data.region, data.city, data.latitude, data.longitude]);
} catch(e) {}
}
return normalizeGeo(data);
} }
} catch (err) { } catch (err) {
// Quiet DNS failure for tokens (legacy bug mitigation) // Quiet DNS failure for tokens (legacy bug mitigation)
@@ -74,6 +113,10 @@ async function getLocation(target) {
} }
// 4. Resolve via ipinfo.io (LAST RESORT) // 4. Resolve via ipinfo.io (LAST RESORT)
if (!enableExternalGeoLookup) {
return null;
}
try { try {
console.log(`[Geo Service] API lookup (ipinfo.io) for: ${cleanIp}`); console.log(`[Geo Service] API lookup (ipinfo.io) for: ${cleanIp}`);
const url = `https://ipinfo.io/${cleanIp}/json${ipInfoToken ? `?token=${ipInfoToken}` : ''}`; const url = `https://ipinfo.io/${cleanIp}/json${ipInfoToken ? `?token=${ipInfoToken}` : ''}`;
@@ -113,6 +156,29 @@ async function getLocation(target) {
locationData.longitude locationData.longitude
]); ]);
// Cache the domain target as well if it differs from the resolved IP
if (cleanTarget !== cleanIp) {
await db.query(`
INSERT INTO server_locations (ip, country, country_name, region, city, latitude, longitude)
VALUES (?, ?, ?, ?, ?, ?, ?)
ON DUPLICATE KEY UPDATE
country = VALUES(country),
country_name = VALUES(country_name),
region = VALUES(region),
city = VALUES(city),
latitude = VALUES(latitude),
longitude = VALUES(longitude)
`, [
cleanTarget,
locationData.country,
locationData.country_name,
locationData.region,
locationData.city,
locationData.latitude,
locationData.longitude
]);
}
return locationData; return locationData;
} }
} catch (err) { } catch (err) {

File diff suppressed because it is too large Load Diff

View File

@@ -1,90 +1,40 @@
/** const path = require('path');
* Database Initialization Script require('dotenv').config({ path: path.join(__dirname, '..', '.env') });
* Run: npm run init-db
* Creates the required MySQL database and tables.
*/
require('dotenv').config();
const mysql = require('mysql2/promise'); const mysql = require('mysql2/promise');
const db_migrate = require('./db-schema-check');
const db = require('./db');
async function initDatabase() { async function initDatabase() {
const connection = await mysql.createConnection({ const host = process.env.MYSQL_HOST || 'localhost';
host: process.env.MYSQL_HOST || 'localhost', const port = parseInt(process.env.MYSQL_PORT) || 3306;
port: parseInt(process.env.MYSQL_PORT) || 3306, const user = process.env.MYSQL_USER || 'root';
user: process.env.MYSQL_USER || 'root', const password = process.env.MYSQL_PASSWORD || '';
password: process.env.MYSQL_PASSWORD || ''
});
const dbName = process.env.MYSQL_DATABASE || 'display_wall'; const dbName = process.env.MYSQL_DATABASE || 'display_wall';
console.log('🔧 Initializing database...\n'); // 1. Create connection without database selected to create the DB itself
const connection = await mysql.createConnection({
host,
port,
user,
password
});
console.log('🔧 Initializing database environment...\n');
// Create database // Create database
await connection.query(`CREATE DATABASE IF NOT EXISTS \`${dbName}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`); await connection.query(`CREATE DATABASE IF NOT EXISTS \`${dbName}\` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci`);
console.log(` ✅ Database "${dbName}" ready`); console.log(` ✅ Database "${dbName}" ready`);
await connection.end();
await connection.query(`USE \`${dbName}\``); // 2. Re-initialize the standard pool so it can see the new DB
db.initPool();
// Create users table // 3. Use the centralized schema tool to create/fix all tables
await connection.query(` console.log(' 📦 Initializing tables using schema-check tool...');
CREATE TABLE IF NOT EXISTS users ( await db_migrate();
id INT AUTO_INCREMENT PRIMARY KEY, console.log(' ✅ Tables and columns ready');
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
salt VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
console.log(' ✅ Table "users" ready');
// Create prometheus_sources table
await connection.query(`
CREATE TABLE IF NOT EXISTS prometheus_sources (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
url VARCHAR(500) NOT NULL,
description TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
console.log(' ✅ Table "prometheus_sources" ready');
// Create site_settings table
await connection.query(`
CREATE TABLE IF NOT EXISTS site_settings (
id INT PRIMARY KEY DEFAULT 1,
page_name VARCHAR(255) DEFAULT '数据可视化展示大屏',
title VARCHAR(255) DEFAULT '数据可视化展示大屏',
logo_url TEXT,
default_theme VARCHAR(20) DEFAULT 'dark',
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
// Insert default settings if not exists
await connection.query(`
INSERT IGNORE INTO site_settings (id, page_name, title, default_theme)
VALUES (1, '数据可视化展示大屏', '数据可视化展示大屏', 'dark')
`);
console.log(' ✅ Table "site_settings" ready');
// Create server_locations table
await connection.query(`
CREATE TABLE IF NOT EXISTS server_locations (
id INT AUTO_INCREMENT PRIMARY KEY,
ip VARCHAR(255) NOT NULL UNIQUE,
country CHAR(2),
country_name VARCHAR(100),
region VARCHAR(100),
city VARCHAR(100),
latitude DOUBLE,
longitude DOUBLE,
last_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
`);
console.log(' ✅ Table "server_locations" ready');
console.log('\n🎉 Database initialization complete!\n'); console.log('\n🎉 Database initialization complete!\n');
await connection.end();
} }
initDatabase().catch(err => { initDatabase().catch(err => {

View File

@@ -1,22 +1,43 @@
const axios = require('axios'); const axios = require('axios');
const http = require('http'); const http = require('http');
const https = require('https'); const https = require('https');
const cache = require('./cache'); // <-- ADD
const QUERY_TIMEOUT = 10000; const QUERY_TIMEOUT = 10000;
// Reusable agents to handle potential redirect issues and protocol mismatches // Reusable agents to handle potential redirect issues and protocol mismatches
const crypto = require('crypto'); const crypto = require('crypto');
const httpAgent = new http.Agent({ keepAlive: true }); const httpAgent = new http.Agent({ keepAlive: true });
const httpsAgent = new https.Agent({ keepAlive: true, rejectUnauthorized: false }); const httpsAgent = new https.Agent({ keepAlive: true });
const serverIdMap = new Map(); // token -> { instance, job, source } const serverIdMap = new Map(); // token -> { instance, job, source, lastSeen }
const SECRET = process.env.APP_SECRET || 'prom-data-panel-stable-secret-key-123';
function getSecret() {
// Use the env variable populated by index.js initialization
return process.env.APP_SECRET || 'fallback-secret-for-safety';
}
// Periodic cleanup of serverIdMap to prevent infinite growth
setInterval(() => {
const now = Date.now();
const TTL = 24 * 60 * 60 * 1000; // 24 hours
for (const [token, data] of serverIdMap.entries()) {
if (now - (data.lastSeen || 0) > TTL) {
serverIdMap.delete(token);
}
}
}, 3600000); // Once per hour
function getServerToken(instance, job, source) { function getServerToken(instance, job, source) {
const hash = crypto.createHmac('sha256', SECRET) const hash = crypto.createHmac('sha256', getSecret())
.update(`${instance}:${job}:${source}`) .update(`${instance}:${job}:${source}`)
.digest('hex') .digest('hex')
.substring(0, 16); .substring(0, 16);
// Update lastSeen timestamp
const data = serverIdMap.get(hash);
if (data) data.lastSeen = Date.now();
return hash; return hash;
} }
@@ -48,12 +69,12 @@ function createClient(baseUrl) {
/** /**
* Test Prometheus connection * Test Prometheus connection
*/ */
async function testConnection(url) { async function testConnection(url, customTimeout = null) {
const normalized = normalizeUrl(url); const normalized = normalizeUrl(url);
try { try {
// Using native fetch to avoid follow-redirects/axios "protocol mismatch" issues in some Node environments // Using native fetch to avoid follow-redirects/axios "protocol mismatch" issues in some Node environments
const controller = new AbortController(); const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), QUERY_TIMEOUT); const timer = setTimeout(() => controller.abort(), customTimeout || QUERY_TIMEOUT);
// Node native fetch - handles http/https automatically // Node native fetch - handles http/https automatically
const res = await fetch(`${normalized}/api/v1/status/buildinfo`, { const res = await fetch(`${normalized}/api/v1/status/buildinfo`, {
@@ -188,7 +209,11 @@ async function getOverviewMetrics(url, sourceName) {
diskFreeResult, diskFreeResult,
netRxResult, netRxResult,
netTxResult, netTxResult,
targetsResult netRx24hResult,
netTx24hResult,
targetsResult,
conntrackEntriesResult,
conntrackLimitResult
] = await Promise.all([ ] = await Promise.all([
// CPU usage per instance: 1 - avg idle // CPU usage per instance: 1 - avg idle
query(url, '100 - (avg by (instance, job) (rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)').catch(() => []), query(url, '100 - (avg by (instance, job) (rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)').catch(() => []),
@@ -206,8 +231,16 @@ async function getOverviewMetrics(url, sourceName) {
query(url, 'sum by (instance, job) (rate(node_network_receive_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))').catch(() => []), query(url, 'sum by (instance, job) (rate(node_network_receive_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))').catch(() => []),
// Network transmit rate (bytes/sec) // Network transmit rate (bytes/sec)
query(url, 'sum by (instance, job) (rate(node_network_transmit_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))').catch(() => []), query(url, 'sum by (instance, job) (rate(node_network_transmit_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))').catch(() => []),
// 24h Network receive total (bytes)
query(url, 'sum by (instance, job) (increase(node_network_receive_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[24h]))').catch(() => []),
// 24h Network transmit total (bytes)
query(url, 'sum by (instance, job) (increase(node_network_transmit_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[24h]))').catch(() => []),
// Targets status from /api/v1/targets // Targets status from /api/v1/targets
getTargets(url).catch(() => []) getTargets(url).catch(() => []),
// Conntrack entries
query(url, 'node_nf_conntrack_entries').catch(() => []),
// Conntrack limits
query(url, 'node_nf_conntrack_entries_limit').catch(() => [])
]); ]);
// Fetch 24h detailed traffic using the A*duration logic // Fetch 24h detailed traffic using the A*duration logic
@@ -222,7 +255,10 @@ async function getOverviewMetrics(url, sourceName) {
const token = getServerToken(originalInstance, job, sourceName); const token = getServerToken(originalInstance, job, sourceName);
// Store mapping for detail queries // Store mapping for detail queries
serverIdMap.set(token, { instance: originalInstance, source: sourceName, job }); serverIdMap.set(token, { instance: originalInstance, source: sourceName, job, lastSeen: Date.now() });
// Also store in Valkey for resilience across restarts
cache.set(`server_token:${token}`, originalInstance, 86400).catch(()=>{});
if (!instances.has(token)) { if (!instances.has(token)) {
instances.set(token, { instances.set(token, {
@@ -238,9 +274,14 @@ async function getOverviewMetrics(url, sourceName) {
diskUsed: 0, diskUsed: 0,
netRx: 0, netRx: 0,
netTx: 0, netTx: 0,
traffic24hRx: 0,
traffic24hTx: 0,
conntrackEntries: 0,
conntrackLimit: 0,
up: false, up: false,
memPercent: 0, memPercent: 0,
diskPercent: 0 diskPercent: 0,
conntrackPercent: 0
}); });
} }
const inst = instances.get(token); const inst = instances.get(token);
@@ -306,6 +347,26 @@ async function getOverviewMetrics(url, sourceName) {
inst.netTx = parseFloat(r.value[1]) || 0; inst.netTx = parseFloat(r.value[1]) || 0;
} }
// Parse 24h traffic
for (const r of netRx24hResult) {
const inst = getOrCreate(r.metric);
inst.traffic24hRx = parseFloat(r.value[1]) || 0;
}
for (const r of netTx24hResult) {
const inst = getOrCreate(r.metric);
inst.traffic24hTx = parseFloat(r.value[1]) || 0;
}
// Parse conntrack
for (const r of conntrackEntriesResult) {
const inst = getOrCreate(r.metric);
inst.conntrackEntries = parseFloat(r.value[1]) || 0;
}
for (const r of conntrackLimitResult) {
const inst = getOrCreate(r.metric);
inst.conntrackLimit = parseFloat(r.value[1]) || 0;
}
for (const inst of instances.values()) { for (const inst of instances.values()) {
if (!inst.up && (inst.cpuPercent > 0 || inst.memTotal > 0)) { if (!inst.up && (inst.cpuPercent > 0 || inst.memTotal > 0)) {
inst.up = true; inst.up = true;
@@ -313,6 +374,7 @@ async function getOverviewMetrics(url, sourceName) {
// Calculate percentages on backend // Calculate percentages on backend
inst.memPercent = inst.memTotal > 0 ? (inst.memUsed / inst.memTotal * 100) : 0; inst.memPercent = inst.memTotal > 0 ? (inst.memUsed / inst.memTotal * 100) : 0;
inst.diskPercent = inst.diskTotal > 0 ? (inst.diskUsed / inst.diskTotal * 100) : 0; inst.diskPercent = inst.diskTotal > 0 ? (inst.diskUsed / inst.diskTotal * 100) : 0;
inst.conntrackPercent = inst.conntrackLimit > 0 ? (inst.conntrackEntries / inst.conntrackLimit * 100) : 0;
} }
const allInstancesList = Array.from(instances.values()); const allInstancesList = Array.from(instances.values());
@@ -391,25 +453,23 @@ function calculateTrafficFromHistory(values) {
} }
/** /**
* Get total traffic for the past 24h by fetching all points and integrating * Get total traffic for the past 24h using Prometheus increase() for stability and accuracy
*/ */
async function get24hTrafficSum(url) { async function get24hTrafficSum(url) {
const now = Math.floor(Date.now() / 1000); try {
const start = now - 86400; const [rxResult, txResult] = await Promise.all([
const step = 60; // 1-minute points for calculation query(url, 'sum(increase(node_network_receive_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[24h]))').catch(() => []),
query(url, 'sum(increase(node_network_transmit_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[24h]))').catch(() => [])
]);
const [rxResult, txResult] = await Promise.all([ const rx = rxResult.length > 0 ? parseFloat(rxResult[0].value[1]) : 0;
queryRange(url, 'sum(rate(node_network_receive_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))', start, now, step).catch(() => []), const tx = txResult.length > 0 ? parseFloat(txResult[0].value[1]) : 0;
queryRange(url, 'sum(rate(node_network_transmit_bytes_total{device!~"lo|veth.*|docker.*|br-.*"}[1m]))', start, now, step).catch(() => [])
]);
const rxValues = rxResult.length > 0 ? rxResult[0].values : []; return { rx, tx };
const txValues = txResult.length > 0 ? txResult[0].values : []; } catch (err) {
console.error(`[Prometheus] get24hTrafficSum error:`, err.message);
return { return { rx: 0, tx: 0 };
rx: calculateTrafficFromHistory(rxValues), }
tx: calculateTrafficFromHistory(txValues)
};
} }
/** /**
@@ -417,34 +477,28 @@ async function get24hTrafficSum(url) {
*/ */
async function get24hServerTrafficSum(url, instance, job) { async function get24hServerTrafficSum(url, instance, job) {
const node = resolveToken(instance); const node = resolveToken(instance);
const now = Math.floor(Date.now() / 1000);
const start = now - 86400; const rxExpr = `sum(increase(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[24h]))`;
const step = 60; const txExpr = `sum(increase(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[24h]))`;
const rxExpr = `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`;
const txExpr = `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`;
const [rxResult, txResult] = await Promise.all([ const [rxResult, txResult] = await Promise.all([
queryRange(url, rxExpr, start, now, step).catch(() => []), query(url, rxExpr).catch(() => []),
queryRange(url, txExpr, start, now, step).catch(() => []) query(url, txExpr).catch(() => [])
]); ]);
const rxValues = rxResult.length > 0 ? rxResult[0].values : []; const rx = rxResult.length > 0 ? parseFloat(rxResult[0].value[1]) : 0;
const txValues = txResult.length > 0 ? txResult[0].values : []; const tx = txResult.length > 0 ? parseFloat(txResult[0].value[1]) : 0;
return { return { rx, tx };
rx: calculateTrafficFromHistory(rxValues),
tx: calculateTrafficFromHistory(txValues)
};
} }
/** /**
* Get network traffic history (past 24h, 5-min intervals for chart) * Get network traffic history (past 24h, 5-min intervals for chart)
*/ */
async function getNetworkHistory(url) { async function getNetworkHistory(url) {
const now = Math.floor(Date.now() / 1000);
const start = now - 86400; // 24h ago
const step = 300; // 5 minutes for better resolution on chart const step = 300; // 5 minutes for better resolution on chart
const now = Math.floor(Date.now() / 1000 / step) * step; // Sync to step boundary
const start = now - 86400; // 24h ago
const [rxResult, txResult] = await Promise.all([ const [rxResult, txResult] = await Promise.all([
queryRange(url, queryRange(url,
@@ -496,9 +550,9 @@ function mergeNetworkHistories(histories) {
* Get CPU usage history (past 1h, 1-min intervals) * Get CPU usage history (past 1h, 1-min intervals)
*/ */
async function getCpuHistory(url) { async function getCpuHistory(url) {
const now = Math.floor(Date.now() / 1000);
const start = now - 3600; // 1h ago
const step = 60; // 1 minute const step = 60; // 1 minute
const now = Math.floor(Date.now() / 1000 / step) * step; // Sync to step boundary
const start = now - 3600; // 1h ago
const result = await queryRange(url, const result = await queryRange(url,
'100 - (avg(rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)', '100 - (avg(rate(node_cpu_seconds_total{mode="idle"}[1m])) * 100)',
@@ -533,30 +587,27 @@ function mergeCpuHistories(histories) {
} }
function resolveToken(token) { async function resolveToken(token) {
if (serverIdMap.has(token)) { if (serverIdMap.has(token)) {
return serverIdMap.get(token).instance; return serverIdMap.get(token).instance;
} }
const cachedInstance = await cache.get(`server_token:${token}`);
if (cachedInstance) return cachedInstance;
return token; return token;
} }
/** /**
* Get detailed metrics for a specific server (node) * Get detailed metrics for a specific server (node)
*/ */
async function getServerDetails(baseUrl, instance, job) { async function getServerDetails(baseUrl, instance, job, settings = {}) {
const url = normalizeUrl(baseUrl); const url = normalizeUrl(baseUrl);
const node = resolveToken(instance); const node = await resolveToken(instance);
// Queries based on the requested dashboard structure // Queries based on the requested dashboard structure
const queries = { const queries = {
// Split CPU
cpuSystem: `avg(rate(node_cpu_seconds_total{mode="system", instance="${node}"}[1m])) * 100`,
cpuUser: `avg(rate(node_cpu_seconds_total{mode="user", instance="${node}"}[1m])) * 100`,
cpuIowait: `avg(rate(node_cpu_seconds_total{mode="iowait", instance="${node}"}[1m])) * 100`, cpuIowait: `avg(rate(node_cpu_seconds_total{mode="iowait", instance="${node}"}[1m])) * 100`,
cpuIrq: `avg(rate(node_cpu_seconds_total{mode=~"irq|softirq", instance="${node}"}[1m])) * 100`,
cpuOther: `avg(rate(node_cpu_seconds_total{mode=~"nice|steal|guest|guest_nice", instance="${node}"}[1m])) * 100`, cpuOther: `avg(rate(node_cpu_seconds_total{mode=~"nice|steal|guest|guest_nice", instance="${node}"}[1m])) * 100`,
cpuIdle: `avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])) * 100`,
cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`, cpuBusy: `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`,
sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`, sysLoad: `node_load1{instance="${node}",job="${job}"} * 100 / count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`, memUsedPct: `(1 - (node_memory_MemAvailable_bytes{instance="${node}", job="${job}"} / node_memory_MemTotal_bytes{instance="${node}", job="${job}"})) * 100`,
@@ -564,11 +615,16 @@ async function getServerDetails(baseUrl, instance, job) {
rootFsUsedPct: `100 - ((node_filesystem_avail_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!~"rootfs|tmpfs"} * 100) / node_filesystem_size_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!~"rootfs|tmpfs"})`, rootFsUsedPct: `100 - ((node_filesystem_avail_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!~"rootfs|tmpfs"} * 100) / node_filesystem_size_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!~"rootfs|tmpfs"})`,
cpuCores: `count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`, cpuCores: `count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
memTotal: `node_memory_MemTotal_bytes{instance="${node}",job="${job}"}`, memTotal: `node_memory_MemTotal_bytes{instance="${node}",job="${job}"}`,
swapTotal: `node_memory_SwapTotal_bytes{instance="${node}",job="${job}"}`,
rootFsTotal: `node_filesystem_size_bytes{instance="${node}",job="${job}",mountpoint="/",fstype!~"rootfs|tmpfs"}`,
uptime: `node_time_seconds{instance="${node}",job="${job}"} - node_boot_time_seconds{instance="${node}",job="${job}"}`, uptime: `node_time_seconds{instance="${node}",job="${job}"} - node_boot_time_seconds{instance="${node}",job="${job}"}`,
netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`, netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`, netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
sockstatTcp: `node_sockstat_TCP_inuse{instance="${node}",job="${job}"}`, sockstatTcp: `node_sockstat_TCP_inuse{instance="${node}",job="${job}"}`,
sockstatTcpMem: `node_sockstat_TCP_mem{instance="${node}",job="${job}"} * 4096`, sockstatTcpMem: `node_sockstat_TCP_mem{instance="${node}",job="${job}"} * 4096`,
conntrackEntries: `node_nf_conntrack_entries{instance="${node}",job="${job}"}`,
conntrackLimit: `node_nf_conntrack_entries_limit{instance="${node}",job="${job}"}`,
conntrackUsedPct: `(node_nf_conntrack_entries{instance="${node}",job="${job}"} / node_nf_conntrack_entries_limit{instance="${node}",job="${job}"}) * 100`,
// Get individual partitions (excluding virtual and FUSE mounts) // Get individual partitions (excluding virtual and FUSE mounts)
partitions_size: `node_filesystem_size_bytes{instance="${node}", job="${job}", fstype!~"tmpfs|autofs|proc|sysfs|fuse.*", mountpoint!~"/tmp.*|/var/lib/docker/.*|/run/.*"}`, partitions_size: `node_filesystem_size_bytes{instance="${node}", job="${job}", fstype!~"tmpfs|autofs|proc|sysfs|fuse.*", mountpoint!~"/tmp.*|/var/lib/docker/.*|/run/.*"}`,
partitions_free: `node_filesystem_free_bytes{instance="${node}", job="${job}", fstype!~"tmpfs|autofs|proc|sysfs|fuse.*", mountpoint!~"/tmp.*|/var/lib/docker/.*|/run/.*"}` partitions_free: `node_filesystem_free_bytes{instance="${node}", job="${job}", fstype!~"tmpfs|autofs|proc|sysfs|fuse.*", mountpoint!~"/tmp.*|/var/lib/docker/.*|/run/.*"}`
@@ -594,6 +650,85 @@ async function getServerDetails(baseUrl, instance, job) {
await Promise.all(queryPromises); await Promise.all(queryPromises);
// Process custom metrics from settings
results.custom_data = [];
try {
const customMetrics = typeof settings.custom_metrics === 'string'
? JSON.parse(settings.custom_metrics)
: (settings.custom_metrics || []);
if (Array.isArray(customMetrics) && customMetrics.length > 0) {
const customPromises = customMetrics.map(async (cfg) => {
if (!cfg.metric) return null;
try {
const expr = `${cfg.metric}{instance="${node}",job="${job}"}`;
const res = await query(url, expr);
if (res && res.length > 0) {
const val = res[0].metric[cfg.label || 'address'] || res[0].value[1];
// If this metric is marked as an IP source, update the main IP fields
if (cfg.is_ip && !results.ipv4?.length && !results.ipv6?.length) {
if (val.includes(':')) {
results.ipv6 = [val];
results.ipv4 = [];
} else {
results.ipv4 = [val];
results.ipv6 = [];
}
}
return {
name: cfg.name || cfg.metric,
value: val
};
}
} catch (e) {
console.error(`[Prometheus] Custom metric error (${cfg.metric}):`, e.message);
}
return null;
});
const customResults = await Promise.all(customPromises);
results.custom_data = customResults.filter(r => r !== null);
}
} catch (err) {
console.error('[Prometheus] Error processing custom metrics:', err.message);
}
// Ensure IP discovery fallback if no custom IP metric found
if ((!results.ipv4 || results.ipv4.length === 0) && (!results.ipv6 || results.ipv6.length === 0)) {
try {
const targets = await getTargets(baseUrl);
const matchedTarget = targets.find(t => t.labels && t.labels.instance === node && t.labels.job === job);
if (matchedTarget) {
const scrapeUrl = matchedTarget.scrapeUrl || '';
try {
const urlObj = new URL(scrapeUrl);
const host = urlObj.hostname;
if (host.includes(':')) {
results.ipv6 = [host];
results.ipv4 = [];
} else {
results.ipv4 = [host];
results.ipv6 = [];
}
} catch (e) {
const host = scrapeUrl.split('//').pop().split('/')[0].split(':')[0];
if (host) {
results.ipv4 = [host];
results.ipv6 = [];
}
}
}
} catch (e) {
console.error(`[Prometheus] Target fallback error for ${node}:`, e.message);
}
}
// Final sanitization
results.ipv4 = results.ipv4 || [];
results.ipv6 = results.ipv6 || [];
// Group partitions // Group partitions
const partitionsMap = {}; const partitionsMap = {};
(results.partitions_size || []).forEach(p => { (results.partitions_size || []).forEach(p => {
@@ -632,46 +767,22 @@ async function getServerDetails(baseUrl, instance, job) {
/** /**
* Get historical metrics for a specific server (node) * Get historical metrics for a specific server (node)
*/ */
async function getServerHistory(baseUrl, instance, job, metric, range = '1h', start = null, end = null) { async function getServerHistory(baseUrl, instance, job, metric, range = '1h', start = null, end = null, p95Type = 'tx') {
const url = normalizeUrl(baseUrl); const url = normalizeUrl(baseUrl);
const node = resolveToken(instance); const node = await resolveToken(instance);
// Custom multi-metric handler for CPU Busy // CPU Busy history: 100 - idle
if (metric === 'cpuBusy') { if (metric === 'cpuBusy') {
const modes = { const expr = `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`;
system: 'system',
user: 'user',
iowait: 'iowait',
irq: 'irq|softirq',
other: 'nice|steal|guest|guest_nice',
idle: 'idle'
};
const rangeObj = parseRange(range, start, end); const rangeObj = parseRange(range, start, end);
const timestamps = []; const result = await queryRange(url, expr, rangeObj.queryStart, rangeObj.queryEnd, rangeObj.step);
const series = {};
Object.keys(modes).forEach(m => series[m] = []);
const results = await Promise.all(Object.entries(modes).map(async ([name, mode]) => {
const expr = `avg(rate(node_cpu_seconds_total{mode=~"${mode}", instance="${node}"}[1m])) * 100`;
const res = await queryRange(url, expr, rangeObj.queryStart, rangeObj.queryEnd, rangeObj.step);
return { name, values: res.length > 0 ? res[0].values : [] };
}));
if (results[0].values.length === 0) return { timestamps: [], series: {} };
// Use first result for timestamps
results[0].values.forEach(v => timestamps.push(v[0] * 1000));
results.forEach(r => { if (!result || result.length === 0) return { timestamps: [], values: [] };
r.values.forEach(v => series[r.name].push(parseFloat(v[1])));
}); return {
timestamps: result[0].values.map(v => v[0] * 1000),
// Pre-calculate busy percentage: 100 - idle values: result[0].values.map(v => parseFloat(v[1]))
const idleValues = series.idle || []; };
const busyValues = idleValues.map(idleVal => Math.max(0, 100 - idleVal));
return { timestamps, series, values: busyValues };
} }
// Map metric keys to Prometheus expressions // Map metric keys to Prometheus expressions
@@ -683,7 +794,8 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`, netRx: `sum(rate(node_network_receive_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`, netTx: `sum(rate(node_network_transmit_bytes_total{instance="${node}",job="${job}",device!~'tap.*|veth.*|br.*|docker.*|virbr*|podman.*|lo.*|vmbr.*|fwbr.|ip.*|gre.*|virbr.*|vnet.*'}[1m]))`,
sockstatTcp: `node_sockstat_TCP_inuse{instance="${node}",job="${job}"}`, sockstatTcp: `node_sockstat_TCP_inuse{instance="${node}",job="${job}"}`,
sockstatTcpMem: `node_sockstat_TCP_mem{instance="${node}",job="${job}"} * 4096` sockstatTcpMem: `node_sockstat_TCP_mem{instance="${node}",job="${job}"} * 4096`,
conntrackUsedPct: `(node_nf_conntrack_entries{instance="${node}",job="${job}"} / node_nf_conntrack_entries_limit{instance="${node}",job="${job}"}) * 100`
}; };
const rangeObj = parseRange(range, start, end); const rangeObj = parseRange(range, start, end);
@@ -711,9 +823,22 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
txTotal += (tx[i] || 0) * duration; txTotal += (tx[i] || 0) * duration;
} }
const sortedTx = [...tx].sort((a, b) => a - b); // Calculate P95 based on p95Type
const p95Idx = Math.floor(sortedTx.length * 0.95); let combined = [];
const p95 = sortedTx.length > 0 ? sortedTx[p95Idx] : 0; if (p95Type === 'rx') {
combined = [...rx];
} else if (p95Type === 'both') {
combined = tx.map((t, i) => (t || 0) + (rx[i] || 0));
} else if (p95Type === 'max') {
combined = tx.map((t, i) => Math.max(t || 0, rx[i] || 0));
} else {
// Default to tx
combined = [...tx];
}
const sorted = combined.sort((a, b) => a - b);
const p95Idx = Math.floor(sorted.length * 0.95);
const p95 = sorted.length > 0 ? sorted[p95Idx] : 0;
return { return {
timestamps, timestamps,
@@ -804,10 +929,8 @@ module.exports = {
getLatency: async (blackboxUrl, target) => { getLatency: async (blackboxUrl, target) => {
if (!blackboxUrl || !target) return null; if (!blackboxUrl || !target) return null;
try { try {
const normalized = blackboxUrl.trim().replace(/\/+$/, ''); const normalized = normalizeUrl(blackboxUrl);
// Construct a single optimized query searching for priority metrics and common labels
// Prioritize probe_icmp_duration_seconds OVER probe_duration_seconds
const queryExpr = `( const queryExpr = `(
probe_icmp_duration_seconds{phase="rtt", instance="${target}"} or probe_icmp_duration_seconds{phase="rtt", instance="${target}"} or
probe_icmp_duration_seconds{phase="rtt", target="${target}"} or probe_icmp_duration_seconds{phase="rtt", target="${target}"} or
@@ -819,14 +942,9 @@ module.exports = {
probe_duration_seconds{target="${target}"} probe_duration_seconds{target="${target}"}
)`; )`;
const params = new URLSearchParams({ query: queryExpr }); const result = await query(normalized, queryExpr);
const res = await fetch(`${normalized}/api/v1/query?${params.toString()}`); if (result && result.length > 0) {
return parseFloat(result[0].value[1]) * 1000;
if (res.ok) {
const data = await res.json();
if (data.status === 'success' && data.data.result.length > 0) {
return parseFloat(data.data.result[0].value[1]) * 1000;
}
} }
return null; return null;
} catch (err) { } catch (err) {

187
update.sh Normal file
View File

@@ -0,0 +1,187 @@
#!/bin/bash
set -euo pipefail
SERVICE_NAME="promdatapanel"
DEFAULT_APP_DIR="/opt/promdata-panel"
ZIP_URL="https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel/archive/main.zip"
GREEN='\033[0;32m'
BLUE='\033[0;34m'
RED='\033[0;31m'
YELLOW='\033[1;33m'
NC='\033[0m'
APP_DIR=""
TEMP_DIR=""
BACKUP_DIR=""
ROLLBACK_REQUIRED=false
echo -e "${BLUE}=== Starting PromdataPanel Update ===${NC}"
cleanup() {
if [ -n "${TEMP_DIR}" ] && [ -d "${TEMP_DIR}" ]; then
rm -rf "${TEMP_DIR}"
fi
}
rollback() {
if [ "$ROLLBACK_REQUIRED" != true ] || [ -z "${BACKUP_DIR}" ] || [ ! -d "${BACKUP_DIR}" ]; then
return
fi
echo -e "${YELLOW}Update failed. Restoring previous application state...${NC}"
rsync -a --delete --exclude '.env' "${BACKUP_DIR}/" "${APP_DIR}/"
}
trap 'rollback' ERR
trap cleanup EXIT
validate_app_dir() {
local dir="$1"
[ -n "$dir" ] || return 1
[ -d "$dir" ] || return 1
[ -f "$dir/package.json" ] || return 1
[ -f "$dir/server/index.js" ] || return 1
[ -f "$dir/public/index.html" ] || return 1
return 0
}
detect_app_dir() {
local service_dir=""
if command -v systemctl >/dev/null 2>&1 && systemctl list-unit-files | grep -q "^${SERVICE_NAME}\.service"; then
echo "Detecting application directory from systemd service..."
service_dir=$(systemctl show -p WorkingDirectory "$SERVICE_NAME" | cut -d= -f2-)
if validate_app_dir "$service_dir"; then
APP_DIR="$service_dir"
return
fi
fi
local current_dir
current_dir=$(pwd)
if validate_app_dir "$current_dir"; then
APP_DIR="$current_dir"
return
fi
if validate_app_dir "$DEFAULT_APP_DIR"; then
APP_DIR="$DEFAULT_APP_DIR"
return
fi
echo -e "${RED}Error: Could not locate a valid PromdataPanel application directory.${NC}"
echo -e "${YELLOW}Expected markers: package.json, server/index.js, public/index.html${NC}"
exit 1
}
ensure_tool() {
local cmd="$1"
if command -v "$cmd" >/dev/null 2>&1; then
return
fi
echo -e "${BLUE}${cmd} is not installed. Attempting to install it...${NC}"
if command -v apt-get >/dev/null 2>&1; then
sudo apt-get update
sudo apt-get install -y "$cmd"
elif command -v dnf >/dev/null 2>&1; then
sudo dnf install -y "$cmd"
elif command -v yum >/dev/null 2>&1; then
sudo yum install -y "$cmd"
elif command -v apk >/dev/null 2>&1; then
sudo apk add "$cmd"
else
echo -e "${RED}Error: '${cmd}' is not installed and could not be auto-installed.${NC}"
exit 1
fi
}
update_from_git() {
echo -e "${BLUE}Git repository detected. Pulling latest code...${NC}"
if [ -n "$(git status --porcelain)" ]; then
echo -e "${RED}Error: Working tree has local changes. Commit or stash them before updating.${NC}"
exit 1
fi
git pull --ff-only
}
update_from_zip() {
echo -e "${BLUE}No git repository found. Updating via ZIP archive with staging and rollback...${NC}"
ensure_tool curl
ensure_tool unzip
ensure_tool rsync
TEMP_DIR=$(mktemp -d "${TMPDIR:-/tmp}/promdatapanel-update-XXXXXX")
BACKUP_DIR="${TEMP_DIR}/backup"
local archive_path="${TEMP_DIR}/latest.zip"
local extracted_folder=""
local staging_dir=""
echo "Downloading latest version (main branch)..."
curl -fL "$ZIP_URL" -o "$archive_path"
echo "Extracting archive..."
unzip -q "$archive_path" -d "$TEMP_DIR"
extracted_folder=$(find "$TEMP_DIR" -mindepth 1 -maxdepth 1 -type d ! -name backup | head -n 1)
if ! validate_app_dir "$extracted_folder"; then
echo -e "${RED}Extraction failed or archive structure is invalid.${NC}"
exit 1
fi
staging_dir="${TEMP_DIR}/staging"
mkdir -p "$staging_dir"
rsync -a --exclude '.git' "$extracted_folder/" "$staging_dir/"
if [ -f "${APP_DIR}/.env" ]; then
cp "${APP_DIR}/.env" "${staging_dir}/.env"
fi
echo "Installing dependencies in staging directory..."
(
cd "$staging_dir"
npm install --production
)
echo "Creating rollback backup..."
rsync -a --delete --exclude '.env' "${APP_DIR}/" "${BACKUP_DIR}/"
echo "Applying staged update..."
ROLLBACK_REQUIRED=true
rsync -a --delete --exclude '.env' "${staging_dir}/" "${APP_DIR}/"
}
restart_service() {
if command -v systemctl >/dev/null 2>&1 && systemctl is-active --quiet "$SERVICE_NAME"; then
echo -e "${BLUE}Restarting systemd service: ${SERVICE_NAME}...${NC}"
sudo systemctl restart "$SERVICE_NAME"
return
fi
if command -v pm2 >/dev/null 2>&1 && pm2 list | grep -q "$SERVICE_NAME"; then
echo -e "${BLUE}Restarting with PM2...${NC}"
pm2 restart "$SERVICE_NAME"
return
fi
echo -e "${YELLOW}Warning: Could not detect an active systemd service or PM2 process named '${SERVICE_NAME}'.${NC}"
echo -e "${YELLOW}Please restart the application manually.${NC}"
}
detect_app_dir
echo -e "${BLUE}Application directory: ${APP_DIR}${NC}"
cd "$APP_DIR"
if [ -d ".git" ]; then
update_from_git
echo -e "${BLUE}Updating npm dependencies...${NC}"
npm install --production
else
update_from_zip
fi
restart_service
ROLLBACK_REQUIRED=false
echo -e "${GREEN}=== Update successfully finished ===${NC}"