Compare commits
51 Commits
v0.1.0
...
PromdataPa
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
bfb40f4947 | ||
|
|
9854f478c0 | ||
|
|
3963d137de | ||
|
|
60d8a3d550 | ||
|
|
09f20ec81d | ||
|
|
06ddd5a8e1 | ||
|
|
a14fcdf158 | ||
|
|
6aa8ba5fbc | ||
|
|
2eae34bb96 | ||
|
|
05ae5dff2a | ||
|
|
64fc023f7b | ||
|
|
307a26c0db | ||
|
|
73401309f2 | ||
|
|
f169dd4267 | ||
|
|
09887b52d0 | ||
|
|
c94b697319 | ||
|
|
1bfee2026f | ||
|
|
c47e483028 | ||
|
|
864cbc3569 | ||
|
|
47a795cd73 | ||
|
|
92f97b7e51 | ||
|
|
3bdde47c60 | ||
|
|
1583758f29 | ||
|
|
0602e37bc9 | ||
|
|
41bdb38d51 | ||
|
|
d958aa8d74 | ||
|
|
2024523b46 | ||
|
|
da722ee07e | ||
|
|
bc8414df3d | ||
|
|
15f4b610af | ||
|
|
94ed27199a | ||
|
|
131c011c5c | ||
|
|
6d5b8bbb08 | ||
|
|
b4415f25ac | ||
|
|
d469dacc08 | ||
|
|
ee4354b571 | ||
|
|
50818b54ca | ||
|
|
480cdf3f6d | ||
|
|
832fd0fde1 | ||
|
|
fd0a52368a | ||
|
|
650cc6f1b5 | ||
|
|
ff1c53ea40 | ||
|
|
b79655ccdc | ||
|
|
1f12197a91 | ||
|
|
d0455fb032 | ||
|
|
b2f6f7d2d0 | ||
|
|
ff439bb831 | ||
|
|
3980d66b49 | ||
| b16d910051 | |||
|
|
7e3a8e12d0 | ||
|
|
1d728d991e |
23
.env.example
23
.env.example
@@ -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
|
||||
PORT=3051
|
||||
PORT=3000
|
||||
|
||||
# Aggregation interval in milliseconds (default 5s)
|
||||
REFRESH_INTERVAL=5000
|
||||
|
||||
# Valkey/Redis Cache Configuration
|
||||
VALKEY_HOST=localhost
|
||||
VALKEY_PORT=6379
|
||||
VALKEY_PASSWORD=
|
||||
VALKEY_DB=dashboard
|
||||
VALKEY_TTL=30
|
||||
# Security
|
||||
# Keep remote setup disabled unless you explicitly need to initialize from another host.
|
||||
ALLOW_REMOTE_SETUP=false
|
||||
COOKIE_SECURE=false
|
||||
SESSION_TTL_SECONDS=86400
|
||||
PASSWORD_ITERATIONS=210000
|
||||
|
||||
# Runtime external data providers
|
||||
ENABLE_EXTERNAL_GEO_LOOKUP=false
|
||||
|
||||
155
README.md
155
README.md
@@ -1,100 +1,119 @@
|
||||
# 数据可视化展示大屏
|
||||
# PromdataPanel
|
||||
|
||||
多源 Prometheus 服务器监控展示大屏,支持对接多个 Prometheus 实例,实时展示所有服务器的 CPU、内存、磁盘、网络等关键指标。
|
||||
多源 Prometheus 服务器监控展示大屏。支持对接多个 Prometheus 实例,实时聚合展示所有服务器的 CPU、内存、磁盘、带宽等关键指标,并提供可视化节点分布图。
|
||||
|
||||
## 功能特性
|
||||
|
||||
- 🔌 **多数据源管理** - MySQL 存储配置,支持对接多个 Prometheus 实例
|
||||
- 📊 **NodeExporter 数据查询** - 自动聚合所有 Prometheus 中的 NodeExporter 数据
|
||||
- 🌐 **网络流量统计** - 24 小时网络流量趋势图,总流量统计
|
||||
- ⚡ **实时带宽监控** - 所有服务器网络带宽求和,实时显示
|
||||
- 💻 **资源使用概览** - CPU、内存、磁盘的总使用率和详细统计
|
||||
- 🖥️ **服务器列表** - 所有服务器的详细指标一览表
|
||||
- 🔌 **多数据源管理** - 支持对接多个 Prometheus 实例(Node_Exporter / BlackboxExporter)
|
||||
- 📊 **指标自动聚合** - 自动汇总所有数据源的 NodeExporter 指标,实时计算全网负载
|
||||
- 🌐 **网络流量统计** - 24 小时流量趋势图,实时带宽(Rx/Tx)求和显示
|
||||
- 🗺️ **节点分布可视化** - 自动识别服务器地理位置,并在全球地图上展示实时连接状态与延迟
|
||||
- ⚡ **毫秒级实时性** - 深度优化查询逻辑,支持 5s 采集频率的实时动态展示
|
||||
- 📱 **响应式与美学设计** - 现代 UI/UX 体验,支持暗色模式,极致性能优化
|
||||
|
||||
## 快速开始
|
||||
## 快速安装
|
||||
|
||||
### 1. 环境要求
|
||||
### 方式一:一键脚本安装 (推荐)
|
||||
|
||||
- Node.js >= 16
|
||||
- MySQL >= 5.7
|
||||
- Valkey >= 7.0 (或 Redis >= 6.0)
|
||||
|
||||
### 2. 配置
|
||||
|
||||
复制环境变量文件并修改:
|
||||
在 Linux 服务器上,您可以使用以下脚本一键完成下载、环境检测、依赖安装并将其注册为 Systemd 系统服务:
|
||||
|
||||
```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
|
||||
# MySQL 配置
|
||||
MYSQL_HOST=localhost
|
||||
MYSQL_PORT=3306
|
||||
MYSQL_USER=root
|
||||
MYSQL_PASSWORD=your_password
|
||||
MYSQL_DATABASE=display_wall
|
||||
#### 1. 环境要求
|
||||
- **Node.js** >= 18
|
||||
- **MySQL** >= 8.0
|
||||
- **Valkey** >= 7.0 (或 Redis >= 6.0)
|
||||
|
||||
# Valkey/Redis 缓存配置 (可选)
|
||||
VALKEY_HOST=localhost
|
||||
VALKEY_PORT=6379
|
||||
VALKEY_PASSWORD=
|
||||
VALKEY_TTL=30
|
||||
#### 2. 配置与启动
|
||||
1. 克隆代码库:`git clone https://git.littlediary.cn/CN-JS-HuiBai/PromdataPanel.git`
|
||||
2. 复制配置文件:`cp .env.example .env`
|
||||
3. 安装依赖:`npm install --production`
|
||||
4. 启动服务:`npm start`
|
||||
|
||||
PORT=3000
|
||||
```
|
||||
### 方式三:更新现有版本
|
||||
|
||||
### 3. 系统初始化
|
||||
|
||||
访问 `http://localhost:3000/init.html`,按照引导完成数据库和缓存的初始化。
|
||||
|
||||
### 4. 安装依赖并启动
|
||||
如果您已经安装了本系统,可以使用随附的 `update.sh` 脚本一键升级到最新代码:
|
||||
|
||||
```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)
|
||||
|
||||
在您的 Prometheus 配置文件 `prometheus.yml` 中,建议执行以下配置(`scrape_interval` 建议设为 `5s` 以获取最佳实时展示效果):
|
||||
### 2. Prometheus 采集配置
|
||||
建议在 `prometheus.yml` 中设置采集周期为 `5s` 以实现平滑的实时动态效果:
|
||||
|
||||
```yaml
|
||||
global:
|
||||
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
|
||||
- **数据库**: MySQL (存储配置数据)
|
||||
- **缓存**: Valkey / Redis (用于加速流量计算结果读取)
|
||||
- **数据源**: Prometheus HTTP API
|
||||
- **前端**: 原生 HTML/CSS/JavaScript
|
||||
- **图表**: 自定义 Canvas 渲染
|
||||
- **Runtime**: Node.js
|
||||
- **Framework**: Express.js
|
||||
- **Database**: MySQL 8.0+
|
||||
- **Caching**: Valkey / Redis
|
||||
- **Visualization**: ECharts / Canvas
|
||||
- **Frontend**: Vanilla JS / CSS3
|
||||
|
||||
## API 接口
|
||||
## API 接口文档
|
||||
|
||||
| 方法 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| GET | `/api/sources` | 获取所有数据源 |
|
||||
| POST | `/api/sources` | 添加数据源 |
|
||||
| PUT | `/api/sources/:id` | 更新数据源 |
|
||||
| DELETE | `/api/sources/:id` | 删除数据源 |
|
||||
| POST | `/api/sources/test` | 测试数据源连接 |
|
||||
| GET | `/api/metrics/overview` | 获取聚合指标概览 |
|
||||
| GET | `/api/metrics/network-history` | 获取24h网络流量历史 |
|
||||
| GET | `/api/metrics/cpu-history` | 获取CPU使用率历史 |
|
||||
本项提供了完整的 RESTful API,用于数据采集、系统配置和状态监控。
|
||||
|
||||
### 1. 认证接口 (`/api/auth`)
|
||||
- `POST /api/auth/login`: 用户登录
|
||||
- `POST /api/auth/logout`: 退出登录
|
||||
- `POST /api/auth/change-password`: 修改密码 (需登录)
|
||||
- `GET /api/auth/status`: 获取当前登录状态
|
||||
|
||||
### 2. 数据源管理 (`/api/sources`)
|
||||
- `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
|
||||
|
||||
416
install.sh
416
install.sh
@@ -1,238 +1,262 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Data Visualization Display Wall - Systemd Installer
|
||||
# Requirements: Node.js, NPM, Systemd (Linux)
|
||||
set -euo pipefail
|
||||
|
||||
# Colors for output
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
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)
|
||||
if [ "$EUID" -eq 0 ]; then
|
||||
# If run as sudo, get the real user that called it
|
||||
REAL_USER=${SUDO_USER:-$USER}
|
||||
else
|
||||
REAL_USER=$USER
|
||||
fi
|
||||
OS_ID=""
|
||||
OS_VER=""
|
||||
PROJECT_DIR=""
|
||||
REAL_USER=""
|
||||
|
||||
# 2. Get current directory and user
|
||||
PROJECT_DIR=$(pwd)
|
||||
USER_HOME=$(getent passwd "$REAL_USER" | cut -d: -f6)
|
||||
echo -e "${BLUE}================================================${NC}"
|
||||
echo -e "${BLUE} PromdataPanel Auto-Installer ${NC}"
|
||||
echo -e "${BLUE} Version: ${VERSION} ${NC}"
|
||||
echo -e "${BLUE}================================================${NC}"
|
||||
|
||||
echo -e "Project Directory: ${GREEN}$PROJECT_DIR${NC}"
|
||||
echo -e "Running User: ${GREEN}$REAL_USER${NC}"
|
||||
|
||||
# 3. Check for mandatory files
|
||||
if [ ! -f "server/index.js" ]; then
|
||||
echo -e "${RED}Error: server/index.js not found. Please run this script from the project root.${NC}"
|
||||
detect_os() {
|
||||
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
|
||||
fi
|
||||
|
||||
# 4. Check for dependencies
|
||||
echo -e "${BLUE}Checking dependencies...${NC}"
|
||||
check_dep() {
|
||||
if ! command -v "$1" &> /dev/null; then
|
||||
echo -e "${RED}$1 is not installed. Please install $1 first.${NC}"
|
||||
if [ -z "$OS_ID" ]; then
|
||||
echo -e "${RED}Error: Unable to determine operating system ID.${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "Detected OS: ${GREEN}${OS_ID} ${OS_VER}${NC}"
|
||||
}
|
||||
|
||||
require_cmd() {
|
||||
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
|
||||
fi
|
||||
}
|
||||
check_dep node
|
||||
check_dep npm
|
||||
|
||||
# 5. Check for .env file
|
||||
if [ ! -f ".env" ]; then
|
||||
echo -e "${YELLOW}Warning: .env file not found.${NC}"
|
||||
if [ -f ".env.example" ]; then
|
||||
echo -e "Creating .env from .env.example..."
|
||||
cp .env.example .env
|
||||
echo -e "${GREEN}Created .env file. Please ensure values are correct.${NC}"
|
||||
else
|
||||
echo -e "${RED}Error: .env.example not found. Configuration missing.${NC}"
|
||||
fi
|
||||
fi
|
||||
|
||||
# 6. Install NPM dependencies
|
||||
echo -e "${BLUE}Installing dependencies...${NC}"
|
||||
npm install
|
||||
|
||||
if [ $? -ne 0 ]; then
|
||||
echo -e "${RED}NPM install failed.${NC}"
|
||||
install_packages() {
|
||||
case "$OS_ID" in
|
||||
ubuntu|debian|raspbian)
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y "$@"
|
||||
;;
|
||||
centos|rhel|almalinux|rocky)
|
||||
sudo yum install -y "$@"
|
||||
;;
|
||||
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
|
||||
fi
|
||||
;;
|
||||
esac
|
||||
}
|
||||
|
||||
# 7. Create Systemd Service File
|
||||
SERVICE_FILE="/etc/systemd/system/promdatapanel.service"
|
||||
NODE_PATH=$(command -v node)
|
||||
ensure_tooling() {
|
||||
if ! command -v curl >/dev/null 2>&1; then
|
||||
echo -e "${BLUE}Installing curl...${NC}"
|
||||
install_packages curl
|
||||
fi
|
||||
|
||||
echo -e "${BLUE}Creating systemd service at $SERVICE_FILE... (May require password)${NC}"
|
||||
sudo bash -c "cat <<EOF > '$SERVICE_FILE'
|
||||
if ! command -v unzip >/dev/null 2>&1; then
|
||||
echo -e "${BLUE}Installing unzip...${NC}"
|
||||
install_packages unzip
|
||||
fi
|
||||
}
|
||||
|
||||
configure_nodesource_apt_repo() {
|
||||
sudo install -d -m 0755 /etc/apt/keyrings
|
||||
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
|
||||
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
|
||||
}
|
||||
|
||||
install_node() {
|
||||
echo -e "${BLUE}Verifying Node.js environment...${NC}"
|
||||
|
||||
local node_installed=false
|
||||
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]
|
||||
Description=Data Visualization Display Wall
|
||||
Description=PromdataPanel Monitoring Dashboard
|
||||
After=network.target mysql.service redis-server.service valkey-server.service
|
||||
Wants=mysql.service
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=$REAL_USER
|
||||
WorkingDirectory=$PROJECT_DIR
|
||||
ExecStart=$NODE_PATH server/index.js
|
||||
User=${REAL_USER}
|
||||
WorkingDirectory=${PROJECT_DIR}
|
||||
ExecStart=${node_path} server/index.js
|
||||
Restart=always
|
||||
RestartSec=10
|
||||
StandardOutput=syslog
|
||||
StandardError=syslog
|
||||
SyslogIdentifier=promdatapanel
|
||||
# Pass environment via .env file injection
|
||||
EnvironmentFile=-$PROJECT_DIR/.env
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
SyslogIdentifier=${SERVICE_NAME}
|
||||
EnvironmentFile=-${PROJECT_DIR}/.env
|
||||
Environment=NODE_ENV=production
|
||||
|
||||
# Security Hardening
|
||||
CapabilityBoundingSet=
|
||||
NoNewPrivileges=true
|
||||
LimitNOFILE=65535
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
EOF"
|
||||
EOF
|
||||
|
||||
# 8. Reload Systemd and Start
|
||||
echo -e "${BLUE}Reloading systemd and restarting service... (May require password)${NC}"
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable promdatapanel
|
||||
sudo systemctl restart promdatapanel
|
||||
echo -e "${BLUE}Creating systemd service at ${SERVICE_FILE}...${NC}"
|
||||
sudo install -m 0644 "$tmp_service" "$SERVICE_FILE"
|
||||
rm -f "$tmp_service"
|
||||
}
|
||||
|
||||
# 9. Check Status
|
||||
echo -e "${BLUE}Checking service status...${NC}"
|
||||
sleep 2
|
||||
if sudo systemctl is-active --quiet promdatapanel; then
|
||||
echo -e "${GREEN}SUCCESS: Service is now running.${NC}"
|
||||
PORT=$(grep "^PORT=" .env | cut -d'=' -f2)
|
||||
PORT=${PORT:-3000}
|
||||
echo -e "Dashboard URL: ${YELLOW}http://localhost:${PORT}${NC}"
|
||||
echo -e "View logs: ${BLUE}journalctl -u promdatapanel -f${NC}"
|
||||
else
|
||||
echo -e "${RED}FAILED: Service failed to start.${NC}"
|
||||
echo -e "Check logs with: ${BLUE}journalctl -u promdatapanel -xe${NC}"
|
||||
detect_os
|
||||
download_project_if_needed
|
||||
detect_runtime_user
|
||||
install_node
|
||||
|
||||
PROJECT_DIR=$(pwd)
|
||||
echo -e "Project Directory: ${GREEN}${PROJECT_DIR}${NC}"
|
||||
echo -e "Running User: ${GREEN}${REAL_USER}${NC}"
|
||||
|
||||
if [ ! -f ".env" ] && [ -f ".env.example" ]; then
|
||||
echo -e "${BLUE}Creating .env from .env.example...${NC}"
|
||||
cp .env.example .env
|
||||
fi
|
||||
|
||||
# 10. Reverse Proxy Configuration
|
||||
echo -ne "${YELLOW}Do you want to configure a reverse proxy (Nginx/Caddy)? (y/n): ${NC}"
|
||||
read -r CONF_PROXY
|
||||
if [[ "$CONF_PROXY" =~ ^[Yy]$ ]]; then
|
||||
echo -e "${BLUE}=== Reverse Proxy Configuration ===${NC}"
|
||||
echo -e "${BLUE}Installing NPM dependencies...${NC}"
|
||||
npm install --production
|
||||
|
||||
# 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)
|
||||
write_service_file
|
||||
|
||||
echo -e "${BLUE}Reloading systemd and restarting service...${NC}"
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable "$SERVICE_NAME"
|
||||
sudo systemctl restart "$SERVICE_NAME"
|
||||
|
||||
echo -e "${BLUE}Checking service status...${NC}"
|
||||
sleep 2
|
||||
if sudo systemctl is-active --quiet "$SERVICE_NAME"; then
|
||||
echo -e "${GREEN}SUCCESS: PromdataPanel is now running.${NC}"
|
||||
PORT=$(grep "^PORT=" .env 2>/dev/null | cut -d'=' -f2 || true)
|
||||
PORT=${PORT:-3000}
|
||||
|
||||
# Choose Proxy
|
||||
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 -ne "Enable HTTPS (SSL)? (y/n): "
|
||||
read -r ENABLE_HTTPS
|
||||
|
||||
if [ "$PROXY_TYPE" == "1" ]; then
|
||||
# Caddy Config
|
||||
CADDY_FILE="Caddyfile"
|
||||
echo -e "${BLUE}Generating Caddyfile...${NC}"
|
||||
|
||||
if [[ "$ENABLE_HTTPS" =~ ^[Yy]$ ]]; then
|
||||
cat <<EOF > "$CADDY_FILE"
|
||||
$DOMAIN {
|
||||
reverse_proxy localhost:$PORT
|
||||
}
|
||||
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
|
||||
IP_ADDR=$(hostname -I 2>/dev/null | awk '{print $1}')
|
||||
if [ -n "${IP_ADDR:-}" ]; then
|
||||
echo -e "Dashboard URL: ${YELLOW}http://${IP_ADDR}:${PORT}${NC}"
|
||||
fi
|
||||
else
|
||||
echo -e "${RED}FAILED: Service failed to start.${NC}"
|
||||
echo -e "Check logs with: ${BLUE}journalctl -u ${SERVICE_NAME} -xe${NC}"
|
||||
fi
|
||||
|
||||
echo -e "${BLUE}================================================${NC}"
|
||||
echo -e "${GREEN}Setup completed successfully!${NC}"
|
||||
echo -e "${GREEN}Installation completed!${NC}"
|
||||
echo -e "${BLUE}================================================${NC}"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "data-visualization-display-wall",
|
||||
"name": "promdatapanel",
|
||||
"version": "1.0.0",
|
||||
"description": "Data Visualization Display Wall - Multi-Prometheus Monitoring Dashboard",
|
||||
"main": "server/index.js",
|
||||
|
||||
@@ -51,8 +51,8 @@
|
||||
--radius-xl: 20px;
|
||||
|
||||
/* Typography */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
--font-sans: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'Cascadia Mono', 'Consolas', 'Liberation Mono', monospace;
|
||||
}
|
||||
|
||||
:root.light-theme {
|
||||
@@ -130,6 +130,7 @@ body {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
@@ -149,29 +150,29 @@ body {
|
||||
.bg-glow {
|
||||
position: fixed;
|
||||
border-radius: 50%;
|
||||
filter: blur(120px);
|
||||
opacity: 0.4;
|
||||
filter: blur(60px); /* Reduced from 120px to save GPU fill rate */
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: glowFloat 20s ease-in-out infinite;
|
||||
will-change: transform, opacity;
|
||||
animation: glowFloat 30s ease-in-out infinite; /* Slower = lighter */
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.bg-glow-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
|
||||
top: -200px;
|
||||
left: -100px;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
|
||||
top: -100px;
|
||||
left: -50px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.bg-glow-2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(6, 182, 212, 0.12), transparent 70%);
|
||||
bottom: -150px;
|
||||
right: -100px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, rgba(6, 182, 212, 0.08), transparent 70%);
|
||||
bottom: -100px;
|
||||
right: -50px;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
@@ -197,6 +198,7 @@ body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* ---- Header ---- */
|
||||
@@ -209,27 +211,29 @@ body {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 28px;
|
||||
background: rgba(10, 14, 26, 0.85);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
background: rgba(10, 14, 26, 0.95);
|
||||
backdrop-filter: blur(8px); /* Reduced from 20px */
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
@@ -441,8 +445,8 @@ input:checked+.slider:before {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -609,8 +613,8 @@ input:checked+.slider:before {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
@@ -1451,6 +1455,9 @@ input:checked+.slider:before {
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1471,6 +1478,7 @@ input:checked+.slider:before {
|
||||
width: 90%;
|
||||
max-width: 720px;
|
||||
max-height: 80vh;
|
||||
max-height: 80dvh;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
@@ -1551,16 +1559,19 @@ input:checked+.slider:before {
|
||||
#logoIconContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
justify-content: flex-start;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
max-width: 250px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo-icon-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius-sm);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@@ -1587,6 +1598,7 @@ input:checked+.slider:before {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
max-height: calc(80vh - 80px);
|
||||
max-height: calc(80dvh - 80px);
|
||||
}
|
||||
|
||||
/* ---- Add Source Form ---- */
|
||||
@@ -1861,6 +1873,11 @@ input:checked+.slider:before {
|
||||
}
|
||||
|
||||
/* ---- Animations ---- */
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -1940,47 +1957,694 @@ input:checked+.slider:before {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* -- Header -- */
|
||||
.header {
|
||||
padding: 0 16px;
|
||||
padding: 0 12px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
padding: 16px;
|
||||
.logo {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
#logoIconContainer {
|
||||
width: auto;
|
||||
height: 30px;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.theme-switch {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.btn-settings {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.btn-settings svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* -- Dashboard -- */
|
||||
.dashboard {
|
||||
padding: 14px 12px 32px;
|
||||
}
|
||||
|
||||
/* -- Stat Cards -- */
|
||||
.stat-cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 14px 16px;
|
||||
padding: 14px 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.stat-card-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.stat-card-value {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.stat-card-value-group .stat-card-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.stat-card-label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.stat-card-sub {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
/* -- Charts Section -- */
|
||||
.charts-section {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
padding: 14px 14px 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#networkChart .chart-card-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
gap: 12px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
padding: 8px 10px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.chart-footer {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
gap: 12px 20px;
|
||||
padding: 12px 14px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.traffic-label {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.traffic-value {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* -- Globe Card -- */
|
||||
.globe-body {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* -- Server Table Section -- */
|
||||
.chart-header-right {
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#serverSearchFilter {
|
||||
width: 160px;
|
||||
padding: 6px 10px 6px 32px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#serverSearchFilter:focus {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-box .search-icon {
|
||||
left: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
font-size: 0.78rem;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.server-table-wrap {
|
||||
padding: 10px 8px 4px;
|
||||
}
|
||||
|
||||
.server-table {
|
||||
min-width: 640px;
|
||||
}
|
||||
|
||||
.server-table th {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.server-table td {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.usage-bar-track {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
/* -- Pagination -- */
|
||||
.pagination-footer {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* -- Modal -- */
|
||||
.modal {
|
||||
width: 96%;
|
||||
max-width: none;
|
||||
max-height: 90vh;
|
||||
max-height: 90dvh;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 14px 16px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
gap: 4px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.modal-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-tab {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 8px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-tab.active::after {
|
||||
bottom: -15px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px 14px;
|
||||
max-height: calc(90vh - 70px);
|
||||
max-height: calc(90dvh - 70px);
|
||||
}
|
||||
|
||||
/* -- Server Detail Modal -- */
|
||||
#serverDetailModal .modal {
|
||||
width: 98%;
|
||||
max-height: 92vh;
|
||||
max-height: 92dvh;
|
||||
}
|
||||
|
||||
#serverDetailModal .modal-body {
|
||||
max-height: calc(92vh - 60px);
|
||||
max-height: calc(92dvh - 60px);
|
||||
}
|
||||
|
||||
.detail-metrics-list {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.metric-item-header {
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap; /* Force single line as requested */
|
||||
}
|
||||
|
||||
.metric-label-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.82rem;
|
||||
white-space: nowrap; /* Don't wrap */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.time-range-group {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.time-range-btn {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.custom-range-input {
|
||||
width: 70px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.absolute-range-selector {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.time-input {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.detail-chart-wrapper {
|
||||
height: 180px;
|
||||
padding: 0 6px 6px;
|
||||
}
|
||||
|
||||
.metric-item.active .metric-item-content {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* -- Partition details -- */
|
||||
.partition-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* -- Forms -- */
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-actions .btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
font-size: 0.82rem;
|
||||
padding: 9px 12px;
|
||||
}
|
||||
|
||||
.add-source-form h3,
|
||||
.source-list h3 {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 9px 14px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* -- Login Button -- */
|
||||
.btn-login {
|
||||
padding: 6px 12px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* -- Source Items -- */
|
||||
.source-item {
|
||||
padding: 10px 12px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.source-item-actions {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.source-item-name {
|
||||
font-size: 0.82rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* -- User section -- */
|
||||
#userSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#userSection .user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
#userSection .username {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#userSection .btn-logout {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
/* -- Globe expansion on mobile -- */
|
||||
.globe-card.expanded {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.globe-card.expanded .globe-body {
|
||||
height: calc(100vh - 110px) !important;
|
||||
height: calc(100dvh - 110px) !important;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Touch optimization */
|
||||
.server-table tbody tr {
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-icon,
|
||||
.btn-icon-sm,
|
||||
.btn-settings,
|
||||
.page-btn,
|
||||
.modal-tab,
|
||||
.time-range-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stat-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex-direction: row;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 0.82rem;
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
gap: 8px;
|
||||
font-size: 0.68rem;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.globe-body {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#serverSearchFilter {
|
||||
width: 120px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#serverSearchFilter:focus {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* -- Metric content on very small screens -- */
|
||||
.metric-item.active .metric-item-content {
|
||||
max-height: 380px;
|
||||
}
|
||||
|
||||
.detail-chart-wrapper {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.server-table th,
|
||||
.server-table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Server Detail Modal Full Screen for better fit on phone */
|
||||
#serverDetailModal .modal {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
max-height: 100vh !important;
|
||||
max-height: 100dvh !important;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
transform: none !important;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
#serverDetailModal .modal-body {
|
||||
max-height: calc(100vh - 60px) !important;
|
||||
max-height: calc(100dvh - 60px) !important;
|
||||
}
|
||||
|
||||
/* Metric titles no wrap (as requested) */
|
||||
.metric-item-header, .metric-label-group {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
/* -- Modal full width -- */
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
border-radius: 0;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
max-height: calc(100vh - 60px);
|
||||
max-height: calc(100dvh - 60px);
|
||||
}
|
||||
|
||||
/* -- Latency route items on small mobile -- */
|
||||
.latency-route-item {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.route-actions {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
|
||||
/* -- Chart card header vertical layout -- */
|
||||
.chart-card-header {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chart-header-right {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* -- Traffic footer compact -- */
|
||||
.chart-footer {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.traffic-stat {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.header {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
padding: 10px 8px 24px;
|
||||
}
|
||||
|
||||
.stat-card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.stat-card-icon svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.stat-card-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
max-width: 120px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.chart-card-header {
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
.chart-footer {
|
||||
padding: 10px;
|
||||
gap: 8px 14px;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#serverSearchFilter {
|
||||
width: 100%;
|
||||
min-width: 80px;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
#serverSearchFilter:focus {
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
.source-select {
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.detail-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2048,3 +2712,80 @@ input:checked+.slider:before {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border-color: var(--accent-indigo);
|
||||
}
|
||||
|
||||
/* ---- Footer ---- */
|
||||
.site-footer {
|
||||
margin-top: 40px;
|
||||
padding: 30px 28px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
background: rgba(10, 14, 26, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:root.light-theme .site-footer {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-content.only-copyright {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.filings a {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filings a:hover {
|
||||
color: var(--accent-indigo);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.site-footer {
|
||||
padding: 24px 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filings {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filings a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,19 +5,21 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="LDNET-GA">
|
||||
<title>LDNET-GA</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">
|
||||
<title></title>
|
||||
<link rel="icon" id="siteFavicon" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
||||
<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>
|
||||
// Prevent theme flicker
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
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';
|
||||
let theme = savedTheme || defaultTheme;
|
||||
|
||||
@@ -29,10 +31,53 @@
|
||||
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) {
|
||||
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>
|
||||
</head>
|
||||
@@ -51,7 +96,7 @@
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<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" />
|
||||
<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" />
|
||||
@@ -65,7 +110,7 @@
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="logo-text" id="logoText">数据可视化展示大屏</h1>
|
||||
<h1 class="logo-text" id="logoText"></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
@@ -203,6 +248,13 @@
|
||||
</svg>
|
||||
网络流量趋势 (24h)
|
||||
</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 class="chart-legend">
|
||||
<span class="legend-item" id="legendRx" style="cursor: pointer;" title="点击切换 接收 (RX) 显示/隐藏"><span
|
||||
@@ -250,7 +302,7 @@
|
||||
<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" />
|
||||
</svg>
|
||||
全球服务器分布
|
||||
全球骨干分布
|
||||
</h2>
|
||||
<div class="chart-header-actions">
|
||||
<button class="btn-icon" id="btnExpandGlobe" title="放大显示">
|
||||
@@ -354,6 +406,20 @@
|
||||
</section>
|
||||
</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;">
|
||||
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230b1220'/%3E%3Cpath d='M32 10l18 8v12c0 11.6-7.2 21.9-18 26-10.8-4.1-18-14.4-18-26V18l18-8z' fill='%2310b981'/%3E%3Cpath d='M32 18l10 4.6v7.1c0 7-4.1 13.4-10 16.1-5.9-2.7-10-9.1-10-16.1v-7.1L32 18z' fill='%23ecfdf5'/%3E%3Cpath d='M28 31.5l3 3 6-6' fill='none' stroke='%2310b981' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" alt="公安备案" style="width: 14px; height: 14px; vertical-align: middle; margin-right: 2px;">
|
||||
<span id="psFilingText"></span>
|
||||
</a>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" id="icpFilingDisplay" style="display: none;"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div class="modal-overlay" id="settingsModal">
|
||||
<div class="modal">
|
||||
@@ -434,16 +500,46 @@
|
||||
<input type="text" id="siteTitleInput" placeholder="例:数据可视化展示大屏">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 15px;">
|
||||
<label for="logoUrlInput">Logo URL (图片链接,为空则显示默认图标)</label>
|
||||
<input type="url" id="logoUrlInput" placeholder="https://example.com/logo.png">
|
||||
<label for="showPageNameInput">是否显示左上角标题</label>
|
||||
<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 class="form-group" style="margin-top: 15px;">
|
||||
<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);">
|
||||
<option value="dark">默认夜间模式</option>
|
||||
<option value="light">默认白天模式</option>
|
||||
<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="logoUrlInput">Logo URL (白天/默认,支持图片链接)</label>
|
||||
<input type="url" id="logoUrlInput" placeholder="https://example.com/logo_light.png">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 15px;">
|
||||
<label for="logoUrlDarkInput">Logo URL (黑夜模式,可为空则使用默认)</label>
|
||||
<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 class="form-group" style="margin-top: 15px;">
|
||||
<label for="show95BandwidthInput">24h趋势图默认显示 95计费线</label>
|
||||
@@ -460,8 +556,17 @@
|
||||
<option value="tx">仅统计上行 (TX)</option>
|
||||
<option value="rx">仅统计下行 (RX)</option>
|
||||
<option value="both">统计上行+下行 (Sum)</option>
|
||||
<option value="max">出入取大 (Max)</option>
|
||||
</select>
|
||||
</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-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
|
||||
<button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
|
||||
</div>
|
||||
@@ -479,7 +584,7 @@
|
||||
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-group" style="flex: 1.5;">
|
||||
<label>数据源 (Blackbox)</label>
|
||||
<label>探测用服务器</label>
|
||||
<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);">
|
||||
<option value="">-- 选择数据源 --</option>
|
||||
|
||||
@@ -4,9 +4,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<style>
|
||||
body {
|
||||
@@ -70,6 +67,33 @@
|
||||
justify-content: center;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
635
public/js/app.js
635
public/js/app.js
File diff suppressed because it is too large
Load Diff
@@ -18,6 +18,7 @@ class AreaChart {
|
||||
|
||||
this.prevMaxVal = 0;
|
||||
this.currentMaxVal = 0;
|
||||
this.lastDataHash = ''; // Fingerprint for optimization
|
||||
|
||||
// Use debounced resize for performance and safety
|
||||
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
||||
@@ -40,6 +41,14 @@ class AreaChart {
|
||||
setData(data) {
|
||||
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
|
||||
// Only clone if there is data to clone; otherwise use empty set
|
||||
if (this.data && this.data.timestamps && this.data.timestamps.length > 0) {
|
||||
@@ -55,8 +64,8 @@ class AreaChart {
|
||||
// Smoothly transition max value context too
|
||||
this.prevMaxVal = this.currentMaxVal || 0;
|
||||
|
||||
// Downsample if data is too dense (target ~1500 points for performance)
|
||||
const MAX_POINTS = 1500;
|
||||
// Downsample if data is too dense (target ~500 points for GPU performance)
|
||||
const MAX_POINTS = 500;
|
||||
if (data.timestamps.length > MAX_POINTS) {
|
||||
const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
|
||||
const downsampled = { timestamps: [], rx: [], tx: [] };
|
||||
@@ -84,6 +93,8 @@ class AreaChart {
|
||||
combined = data.tx.map(t => t || 0);
|
||||
} else if (this.p95Type === 'rx') {
|
||||
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 {
|
||||
combined = data.tx.map((t, i) => (t || 0) + (data.rx[i] || 0));
|
||||
}
|
||||
@@ -103,7 +114,7 @@ class AreaChart {
|
||||
animate() {
|
||||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||||
const start = performance.now();
|
||||
const duration = 800;
|
||||
const duration = 400; // Shorter animation = less GPU time
|
||||
|
||||
const step = (now) => {
|
||||
const elapsed = now - start;
|
||||
@@ -268,7 +279,7 @@ class AreaChart {
|
||||
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
|
||||
if (!values || values.length === 0) return;
|
||||
|
||||
const useSimple = len > 250;
|
||||
const useSimple = len > 80;
|
||||
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
|
||||
|
||||
// Fill
|
||||
@@ -330,11 +341,12 @@ class MetricChart {
|
||||
this.data = { timestamps: [], values: [], series: null };
|
||||
this.unit = unit; // '%', 'B/s', etc.
|
||||
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.prevMaxVal = 0;
|
||||
this.currentMaxVal = 0;
|
||||
this.lastDataHash = ''; // Fingerprint for optimization
|
||||
|
||||
// Use debounced resize for performance and safety
|
||||
this._resize = typeof debounce === 'function' ? debounce(this.resize.bind(this), 100) : this.resize.bind(this);
|
||||
@@ -358,6 +370,15 @@ class MetricChart {
|
||||
}
|
||||
|
||||
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) {
|
||||
this.prevData = JSON.parse(JSON.stringify(this.data));
|
||||
} else {
|
||||
@@ -388,7 +409,7 @@ class MetricChart {
|
||||
animate() {
|
||||
if (this.animFrame) cancelAnimationFrame(this.animFrame);
|
||||
const start = performance.now();
|
||||
const duration = 500;
|
||||
const duration = 300; // Snappier and lighter on GPU
|
||||
const step = (now) => {
|
||||
const elapsed = now - start;
|
||||
this.animProgress = Math.min(elapsed / duration, 1);
|
||||
@@ -456,12 +477,30 @@ class MetricChart {
|
||||
} else {
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
// Draw Stacked Area
|
||||
const modes = [
|
||||
@@ -527,7 +566,7 @@ class MetricChart {
|
||||
});
|
||||
|
||||
} else {
|
||||
const useSimple = len > 250;
|
||||
const useSimple = len > 100;
|
||||
const prevVals = this.prevData ? this.prevData.values : null;
|
||||
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;
|
||||
|
||||
|
||||
45
public/vendor/echarts.min.js
vendored
Normal file
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
1
public/vendor/world.json
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -57,38 +57,43 @@ async function checkAndFixDatabase() {
|
||||
// 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.`);
|
||||
}
|
||||
const addColumn = async (columnName, sql) => {
|
||||
if (!columnNames.includes(columnName)) {
|
||||
try {
|
||||
console.log(`[Database Integrity] ⚠️ Missing column '${columnName}' in 'site_settings'. Adding it...`);
|
||||
await db.query(sql);
|
||||
console.log(`[Database Integrity] ✅ Column '${columnName}' added.`);
|
||||
} catch (err) {
|
||||
console.error('[Database Integrity] ❌ Error checking integrity:', err.message);
|
||||
console.error(`[Database Integrity] ❌ Failed to add column '${columnName}':`, err.message);
|
||||
// Try without AFTER if it exists
|
||||
if (sql.includes('AFTER')) {
|
||||
try {
|
||||
const fallback = sql.split(' AFTER')[0];
|
||||
console.log(`[Database Integrity] 🔄 Retrying column '${columnName}' WITHOUT 'AFTER'...`);
|
||||
await db.query(fallback);
|
||||
console.log(`[Database Integrity] ✅ Column '${columnName}' added via fallback.`);
|
||||
} catch (err2) {
|
||||
console.error(`[Database Integrity] ❌ Fallback also failed:`, err2.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
await addColumn('show_page_name', "ALTER TABLE site_settings ADD COLUMN show_page_name TINYINT(1) DEFAULT 1 AFTER page_name");
|
||||
await addColumn('show_95_bandwidth', "ALTER TABLE site_settings ADD COLUMN show_95_bandwidth TINYINT(1) DEFAULT 0 AFTER default_theme");
|
||||
await addColumn('p95_type', "ALTER TABLE site_settings ADD COLUMN p95_type VARCHAR(20) DEFAULT 'tx' AFTER show_95_bandwidth");
|
||||
await addColumn('require_login_for_server_details', "ALTER TABLE site_settings ADD COLUMN require_login_for_server_details TINYINT(1) DEFAULT 1 AFTER p95_type");
|
||||
await addColumn('blackbox_source_id', "ALTER TABLE site_settings ADD COLUMN blackbox_source_id INT AFTER p95_type");
|
||||
await addColumn('latency_source', "ALTER TABLE site_settings ADD COLUMN latency_source VARCHAR(100) AFTER blackbox_source_id");
|
||||
await addColumn('latency_dest', "ALTER TABLE site_settings ADD COLUMN latency_dest VARCHAR(100) AFTER latency_source");
|
||||
await addColumn('latency_target', "ALTER TABLE site_settings ADD COLUMN latency_target VARCHAR(255) AFTER latency_dest");
|
||||
await addColumn('icp_filing', "ALTER TABLE site_settings ADD COLUMN icp_filing VARCHAR(255) AFTER latency_target");
|
||||
await addColumn('ps_filing', "ALTER TABLE site_settings ADD COLUMN ps_filing VARCHAR(255) AFTER icp_filing");
|
||||
await addColumn('logo_url_dark', "ALTER TABLE site_settings ADD COLUMN logo_url_dark TEXT AFTER logo_url");
|
||||
await addColumn('favicon_url', "ALTER TABLE site_settings ADD COLUMN favicon_url TEXT AFTER logo_url_dark");
|
||||
} catch (err) {
|
||||
console.error('[Database Integrity] ❌ Overall site_settings check error:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,15 +128,21 @@ async function createTable(tableName) {
|
||||
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),
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
|
||||
`);
|
||||
|
||||
225
server/db-schema-check.js
Normal file
225
server/db-schema-check.js
Normal file
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* Database schema check
|
||||
* Ensures required tables and columns exist at startup.
|
||||
*/
|
||||
require('dotenv').config();
|
||||
const db = require('./db');
|
||||
const path = require('path');
|
||||
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: []
|
||||
},
|
||||
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,
|
||||
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: 'is_server_source',
|
||||
sql: "ALTER TABLE prometheus_sources ADD COLUMN is_server_source TINYINT(1) DEFAULT 1 AFTER description"
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
sql: "ALTER TABLE prometheus_sources ADD COLUMN type VARCHAR(50) DEFAULT 'prometheus' AFTER is_server_source"
|
||||
}
|
||||
]
|
||||
},
|
||||
site_settings: {
|
||||
createSql: `
|
||||
CREATE TABLE IF NOT EXISTS site_settings (
|
||||
id INT PRIMARY KEY DEFAULT 1,
|
||||
page_name VARCHAR(255) DEFAULT 'Data Visualization Display Wall',
|
||||
show_page_name TINYINT(1) DEFAULT 1,
|
||||
title VARCHAR(255) DEFAULT 'Data Visualization Display Wall',
|
||||
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),
|
||||
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, 'Data Visualization Display Wall', 1, 'Data Visualization Display Wall', 'dark', 0, 'tx', 1
|
||||
)
|
||||
`,
|
||||
columns: [
|
||||
{
|
||||
name: 'show_page_name',
|
||||
sql: "ALTER TABLE site_settings ADD COLUMN show_page_name TINYINT(1) DEFAULT 1 AFTER page_name"
|
||||
},
|
||||
{
|
||||
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: '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"
|
||||
}
|
||||
]
|
||||
},
|
||||
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: []
|
||||
},
|
||||
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: []
|
||||
},
|
||||
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: []
|
||||
}
|
||||
};
|
||||
|
||||
async function addColumnIfMissing(tableName, existingColumns, column) {
|
||||
if (existingColumns.has(column.name)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
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}'.`);
|
||||
} catch (err) {
|
||||
console.error(`[Database Integrity] Failed to add '${tableName}.${column.name}':`, err.message);
|
||||
|
||||
if (column.sql.includes(' AFTER ')) {
|
||||
try {
|
||||
const fallbackSql = column.sql.split(' AFTER ')[0];
|
||||
await db.query(fallbackSql);
|
||||
console.log(`[Database Integrity] Column '${column.name}' added to '${tableName}' via fallback.`);
|
||||
} catch (fallbackErr) {
|
||||
console.error(`[Database Integrity] Fallback failed for '${tableName}.${column.name}':`, fallbackErr.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function ensureTable(tableName, tableSchema) {
|
||||
await db.query(tableSchema.createSql);
|
||||
|
||||
const [columns] = await db.query(`SHOW COLUMNS FROM \`${tableName}\``);
|
||||
const existingColumns = new Set(columns.map((column) => column.Field));
|
||||
|
||||
for (const column of tableSchema.columns || []) {
|
||||
await addColumnIfMissing(tableName, existingColumns, column);
|
||||
}
|
||||
|
||||
if (tableSchema.seedSql) {
|
||||
await db.query(tableSchema.seedSql);
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAndFixDatabase() {
|
||||
const envPath = path.join(__dirname, '..', '.env');
|
||||
if (!fs.existsSync(envPath)) return;
|
||||
|
||||
try {
|
||||
for (const [tableName, tableSchema] of Object.entries(SCHEMA)) {
|
||||
await ensureTable(tableName, tableSchema);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[Database Integrity] Startup schema check failed:', err.message);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = checkAndFixDatabase;
|
||||
@@ -10,6 +10,7 @@ const db = require('./db');
|
||||
*/
|
||||
|
||||
const ipInfoToken = process.env.IPINFO_TOKEN;
|
||||
const enableExternalGeoLookup = process.env.ENABLE_EXTERNAL_GEO_LOOKUP === 'true';
|
||||
|
||||
/**
|
||||
* Normalizes geo data for consistent display
|
||||
@@ -74,6 +75,10 @@ async function getLocation(target) {
|
||||
}
|
||||
|
||||
// 4. Resolve via ipinfo.io (LAST RESORT)
|
||||
if (!enableExternalGeoLookup) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`[Geo Service] API lookup (ipinfo.io) for: ${cleanIp}`);
|
||||
const url = `https://ipinfo.io/${cleanIp}/json${ipInfoToken ? `?token=${ipInfoToken}` : ''}`;
|
||||
|
||||
543
server/index.js
543
server/index.js
@@ -7,9 +7,10 @@ const prometheusService = require('./prometheus-service');
|
||||
const cache = require('./cache');
|
||||
const geoService = require('./geo-service');
|
||||
const latencyService = require('./latency-service');
|
||||
const checkAndFixDatabase = require('./db-integrity-check');
|
||||
const checkAndFixDatabase = require('./db-schema-check');
|
||||
const http = require('http');
|
||||
const WebSocket = require('ws');
|
||||
const net = require('net');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
@@ -21,13 +22,271 @@ const fs = require('fs');
|
||||
const crypto = require('crypto');
|
||||
|
||||
let isDbInitialized = false;
|
||||
const sessions = new Map(); // Simple session store: sessionId -> {userId, username}
|
||||
const sessions = new Map(); // Fallback session store when Valkey is unavailable
|
||||
const requestBuckets = new Map();
|
||||
const SESSION_TTL_SECONDS = parseInt(process.env.SESSION_TTL_SECONDS, 10) || 86400;
|
||||
const PASSWORD_ITERATIONS = parseInt(process.env.PASSWORD_ITERATIONS, 10) || 210000;
|
||||
const ALLOW_REMOTE_SETUP = process.env.ALLOW_REMOTE_SETUP === 'true';
|
||||
const COOKIE_SECURE = process.env.COOKIE_SECURE === 'true';
|
||||
const RATE_LIMITS = {
|
||||
login: { windowMs: 15 * 60 * 1000, max: 8 },
|
||||
setup: { windowMs: 10 * 60 * 1000, max: 20 }
|
||||
};
|
||||
|
||||
function normalizeIp(ip) {
|
||||
if (!ip) return '';
|
||||
if (ip.startsWith('::ffff:')) return ip.substring(7);
|
||||
return ip;
|
||||
}
|
||||
|
||||
function isPrivateOrLoopbackIp(ip) {
|
||||
const normalized = normalizeIp(ip);
|
||||
|
||||
if (!normalized) return false;
|
||||
if (normalized === '::1' || normalized === '127.0.0.1' || normalized === 'localhost') return true;
|
||||
|
||||
if (net.isIPv4(normalized)) {
|
||||
return (
|
||||
normalized.startsWith('10.') ||
|
||||
normalized.startsWith('127.') ||
|
||||
normalized.startsWith('192.168.') ||
|
||||
/^172\.(1[6-9]|2\d|3[0-1])\./.test(normalized) ||
|
||||
normalized.startsWith('169.254.')
|
||||
);
|
||||
}
|
||||
|
||||
if (net.isIPv6(normalized)) {
|
||||
const lower = normalized.toLowerCase();
|
||||
return lower === '::1' || lower.startsWith('fc') || lower.startsWith('fd') || lower.startsWith('fe80:');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function isLocalRequest(req) {
|
||||
const ip = normalizeIp(req.socket.remoteAddress || req.ip || '');
|
||||
return isPrivateOrLoopbackIp(ip);
|
||||
}
|
||||
|
||||
function getClientIp(req) {
|
||||
return normalizeIp(req.socket?.remoteAddress || req.ip || '');
|
||||
}
|
||||
|
||||
function makeRateLimitKey(scope, req, discriminator = '') {
|
||||
return `${scope}:${getClientIp(req)}:${discriminator}`;
|
||||
}
|
||||
|
||||
function checkRateLimit(key, { windowMs, max }) {
|
||||
const now = Date.now();
|
||||
const bucket = requestBuckets.get(key);
|
||||
|
||||
if (!bucket || bucket.resetAt <= now) {
|
||||
requestBuckets.set(key, { count: 1, resetAt: now + windowMs });
|
||||
return { allowed: true, retryAfterMs: 0 };
|
||||
}
|
||||
|
||||
if (bucket.count >= max) {
|
||||
return {
|
||||
allowed: false,
|
||||
retryAfterMs: Math.max(0, bucket.resetAt - now)
|
||||
};
|
||||
}
|
||||
|
||||
bucket.count += 1;
|
||||
return { allowed: true, retryAfterMs: 0 };
|
||||
}
|
||||
|
||||
function enforceRateLimit(req, res, scope, discriminator = '') {
|
||||
const result = checkRateLimit(makeRateLimitKey(scope, req, discriminator), RATE_LIMITS[scope]);
|
||||
if (result.allowed) {
|
||||
return true;
|
||||
}
|
||||
|
||||
res.setHeader('Retry-After', Math.max(1, Math.ceil(result.retryAfterMs / 1000)));
|
||||
res.status(429).json({
|
||||
success: false,
|
||||
error: 'Too many requests. Please try again later.'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
function escapeJsonForInlineScript(value) {
|
||||
return JSON.stringify(value).replace(/[<>&\u2028\u2029]/g, (char) => {
|
||||
switch (char) {
|
||||
case '<':
|
||||
return '\\u003c';
|
||||
case '>':
|
||||
return '\\u003e';
|
||||
case '&':
|
||||
return '\\u0026';
|
||||
case '\u2028':
|
||||
return '\\u2028';
|
||||
case '\u2029':
|
||||
return '\\u2029';
|
||||
default:
|
||||
return char;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getPublicSiteSettings(settings = {}) {
|
||||
return {
|
||||
page_name: settings.page_name || '',
|
||||
show_page_name: settings.show_page_name !== undefined ? settings.show_page_name : 1,
|
||||
title: settings.title || '',
|
||||
logo_url: settings.logo_url || null,
|
||||
logo_url_dark: settings.logo_url_dark || null,
|
||||
favicon_url: settings.favicon_url || null,
|
||||
default_theme: settings.default_theme || 'dark',
|
||||
show_95_bandwidth: settings.show_95_bandwidth ? 1 : 0,
|
||||
p95_type: settings.p95_type || 'tx',
|
||||
require_login_for_server_details: settings.require_login_for_server_details !== undefined
|
||||
? (settings.require_login_for_server_details ? 1 : 0)
|
||||
: 1,
|
||||
icp_filing: settings.icp_filing || null,
|
||||
ps_filing: settings.ps_filing || null
|
||||
};
|
||||
}
|
||||
|
||||
async function getSiteSettingsRow() {
|
||||
const [rows] = await db.query('SELECT * FROM site_settings WHERE id = 1');
|
||||
return rows.length > 0 ? rows[0] : {};
|
||||
}
|
||||
|
||||
async function requireServerDetailsAccess(req, res, next) {
|
||||
try {
|
||||
const settings = await getSiteSettingsRow();
|
||||
const requiresLogin = settings.require_login_for_server_details !== undefined
|
||||
? !!settings.require_login_for_server_details
|
||||
: true;
|
||||
|
||||
if (!requiresLogin) {
|
||||
return next();
|
||||
}
|
||||
|
||||
return requireAuth(req, res, next);
|
||||
} catch (err) {
|
||||
console.error('Server details access check failed:', err);
|
||||
return res.status(500).json({ error: 'Failed to verify detail access' });
|
||||
}
|
||||
}
|
||||
|
||||
function getCookieOptions(req, maxAgeSeconds) {
|
||||
const options = ['Path=/', 'HttpOnly', 'SameSite=Strict'];
|
||||
if (typeof maxAgeSeconds === 'number') {
|
||||
options.push(`Max-Age=${maxAgeSeconds}`);
|
||||
}
|
||||
if (COOKIE_SECURE || req.secure || req.headers['x-forwarded-proto'] === 'https') {
|
||||
options.push('Secure');
|
||||
}
|
||||
return options.join('; ');
|
||||
}
|
||||
|
||||
function setSessionCookie(req, res, sessionId, maxAgeSeconds = SESSION_TTL_SECONDS) {
|
||||
res.setHeader('Set-Cookie', `session_id=${encodeURIComponent(sessionId)}; ${getCookieOptions(req, maxAgeSeconds)}`);
|
||||
}
|
||||
|
||||
function clearSessionCookie(req, res) {
|
||||
res.setHeader('Set-Cookie', `session_id=; ${getCookieOptions(req, 0)}`);
|
||||
}
|
||||
|
||||
function createPasswordHash(password, salt, iterations = PASSWORD_ITERATIONS) {
|
||||
const hash = crypto.pbkdf2Sync(password, salt, iterations, 64, 'sha512').toString('hex');
|
||||
return `pbkdf2$sha512$${iterations}$${hash}`;
|
||||
}
|
||||
|
||||
function parsePasswordHash(storedPassword) {
|
||||
if (typeof storedPassword !== 'string') {
|
||||
return { iterations: 1000, hash: '' };
|
||||
}
|
||||
|
||||
if (storedPassword.startsWith('pbkdf2$')) {
|
||||
const parts = storedPassword.split('$');
|
||||
if (parts.length === 4 && parts[1] === 'sha512') {
|
||||
return {
|
||||
iterations: parseInt(parts[2], 10) || 1000,
|
||||
hash: parts[3]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return { iterations: 1000, hash: storedPassword };
|
||||
}
|
||||
|
||||
function verifyPassword(password, user) {
|
||||
const parsed = parsePasswordHash(user.password);
|
||||
const computed = crypto.pbkdf2Sync(password, user.salt, parsed.iterations, 64, 'sha512').toString('hex');
|
||||
|
||||
try {
|
||||
return crypto.timingSafeEqual(Buffer.from(computed, 'hex'), Buffer.from(parsed.hash, 'hex'));
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function shouldUpgradePasswordHash(user) {
|
||||
const parsed = parsePasswordHash(user.password);
|
||||
return !String(user.password || '').startsWith('pbkdf2$') || parsed.iterations < PASSWORD_ITERATIONS;
|
||||
}
|
||||
|
||||
async function persistSession(sessionId, sessionData) {
|
||||
sessions.set(sessionId, {
|
||||
...sessionData,
|
||||
expiresAt: Date.now() + SESSION_TTL_SECONDS * 1000
|
||||
});
|
||||
await cache.set(`session:${sessionId}`, sessionData, SESSION_TTL_SECONDS);
|
||||
}
|
||||
|
||||
async function getSession(sessionId) {
|
||||
if (!sessionId) return null;
|
||||
|
||||
const cachedSession = await cache.get(`session:${sessionId}`);
|
||||
if (cachedSession) {
|
||||
sessions.set(sessionId, {
|
||||
...cachedSession,
|
||||
expiresAt: Date.now() + SESSION_TTL_SECONDS * 1000
|
||||
});
|
||||
return cachedSession;
|
||||
}
|
||||
|
||||
const fallback = sessions.get(sessionId);
|
||||
if (!fallback) return null;
|
||||
if (fallback.expiresAt && fallback.expiresAt <= Date.now()) {
|
||||
sessions.delete(sessionId);
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: fallback.id,
|
||||
username: fallback.username
|
||||
};
|
||||
}
|
||||
|
||||
async function destroySession(sessionId) {
|
||||
if (!sessionId) return;
|
||||
sessions.delete(sessionId);
|
||||
await cache.del(`session:${sessionId}`);
|
||||
}
|
||||
|
||||
async function ensureSetupAccess(req, res, next) {
|
||||
if (!enforceRateLimit(req, res, 'setup')) {
|
||||
return;
|
||||
}
|
||||
if (ALLOW_REMOTE_SETUP || isLocalRequest(req)) {
|
||||
return next();
|
||||
}
|
||||
return res.status(403).json({
|
||||
success: false,
|
||||
error: 'Remote setup is disabled. Use a local request or set ALLOW_REMOTE_SETUP=true.'
|
||||
});
|
||||
}
|
||||
|
||||
// Middleware: Check Auth
|
||||
function requireAuth(req, res, next) {
|
||||
async function requireAuth(req, res, next) {
|
||||
const sessionId = getCookie(req, 'session_id');
|
||||
if (sessionId && sessions.has(sessionId)) {
|
||||
req.user = sessions.get(sessionId);
|
||||
const session = await getSession(sessionId);
|
||||
if (session) {
|
||||
req.user = session;
|
||||
return next();
|
||||
}
|
||||
res.status(401).json({ error: 'Auth required' });
|
||||
@@ -78,12 +337,12 @@ app.get('/health', async (req, res) => {
|
||||
database: {
|
||||
name: 'MySQL',
|
||||
status: dbStatus.status,
|
||||
message: dbStatus.error || 'Connected'
|
||||
message: dbStatus.status === 'up' ? 'Connected' : 'Unavailable'
|
||||
},
|
||||
valkey: {
|
||||
name: 'Valkey (Redis)',
|
||||
status: cacheStatus.status,
|
||||
message: cacheStatus.error || 'Connected'
|
||||
message: cacheStatus.status === 'up' ? 'Connected' : 'Unavailable'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -101,17 +360,24 @@ app.get('/health', async (req, res) => {
|
||||
// --- Auth API ---
|
||||
app.post('/api/auth/login', async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
const loginKey = String(username || '').trim().toLowerCase();
|
||||
if (!enforceRateLimit(req, res, 'login', loginKey)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const [rows] = await db.query('SELECT * FROM users WHERE username = ?', [username]);
|
||||
if (rows.length === 0) return res.status(401).json({ error: 'Invalid credentials' });
|
||||
|
||||
const user = rows[0];
|
||||
const hash = crypto.pbkdf2Sync(password, user.salt, 1000, 64, 'sha512').toString('hex');
|
||||
|
||||
if (hash === user.password) {
|
||||
if (verifyPassword(password, user)) {
|
||||
if (shouldUpgradePasswordHash(user)) {
|
||||
await db.query('UPDATE users SET password = ? WHERE id = ?', [createPasswordHash(password, user.salt), user.id]);
|
||||
}
|
||||
|
||||
const sessionId = crypto.randomBytes(32).toString('hex');
|
||||
sessions.set(sessionId, { id: user.id, username: user.username });
|
||||
res.setHeader('Set-Cookie', `session_id=${sessionId}; Path=/; HttpOnly; SameSite=Strict; Max-Age=86400`);
|
||||
await persistSession(sessionId, { id: user.id, username: user.username });
|
||||
setSessionCookie(req, res, sessionId);
|
||||
res.json({ success: true, username: user.username });
|
||||
} else {
|
||||
res.status(401).json({ error: 'Invalid credentials' });
|
||||
@@ -123,8 +389,8 @@ app.post('/api/auth/login', async (req, res) => {
|
||||
|
||||
app.post('/api/auth/logout', (req, res) => {
|
||||
const sessionId = getCookie(req, 'session_id');
|
||||
if (sessionId) sessions.delete(sessionId);
|
||||
res.setHeader('Set-Cookie', 'session_id=; Path=/; HttpOnly; Max-Age=0');
|
||||
destroySession(sessionId).catch(() => {});
|
||||
clearSessionCookie(req, res);
|
||||
res.json({ success: true });
|
||||
});
|
||||
|
||||
@@ -139,14 +405,14 @@ app.post('/api/auth/change-password', requireAuth, async (req, res) => {
|
||||
if (rows.length === 0) return res.status(404).json({ error: '用户不存在' });
|
||||
|
||||
const user = rows[0];
|
||||
const oldHash = crypto.pbkdf2Sync(oldPassword, user.salt, 1000, 64, 'sha512').toString('hex');
|
||||
const passwordMatches = verifyPassword(oldPassword, user);
|
||||
|
||||
if (oldHash !== user.password) {
|
||||
if (!passwordMatches) {
|
||||
return res.status(401).json({ error: '旧密码输入错误' });
|
||||
}
|
||||
|
||||
const newSalt = crypto.randomBytes(16).toString('hex');
|
||||
const newHash = crypto.pbkdf2Sync(newPassword, newSalt, 1000, 64, 'sha512').toString('hex');
|
||||
const newHash = createPasswordHash(newPassword, newSalt);
|
||||
|
||||
await db.query('UPDATE users SET password = ?, salt = ? WHERE id = ?', [newHash, newSalt, user.id]);
|
||||
res.json({ success: true, message: '密码修改成功' });
|
||||
@@ -156,17 +422,18 @@ app.post('/api/auth/change-password', requireAuth, async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/api/auth/status', (req, res) => {
|
||||
app.get('/api/auth/status', async (req, res) => {
|
||||
const sessionId = getCookie(req, 'session_id');
|
||||
if (sessionId && sessions.has(sessionId)) {
|
||||
res.json({ authenticated: true, username: sessions.get(sessionId).username });
|
||||
const session = await getSession(sessionId);
|
||||
if (session) {
|
||||
res.json({ authenticated: true, username: session.username });
|
||||
} else {
|
||||
res.json({ authenticated: false });
|
||||
}
|
||||
});
|
||||
|
||||
// Setup API Routes
|
||||
app.post('/api/setup/test', async (req, res) => {
|
||||
app.post('/api/setup/test', ensureSetupAccess, async (req, res) => {
|
||||
const { host, port, user, password } = req.body;
|
||||
try {
|
||||
const mysql = require('mysql2/promise');
|
||||
@@ -184,7 +451,7 @@ app.post('/api/setup/test', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/setup/test-valkey', async (req, res) => {
|
||||
app.post('/api/setup/test-valkey', ensureSetupAccess, async (req, res) => {
|
||||
const { host, port, password } = req.body;
|
||||
try {
|
||||
const Redis = require('ioredis');
|
||||
@@ -205,9 +472,13 @@ app.post('/api/setup/test-valkey', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
app.post('/api/setup/init', async (req, res) => {
|
||||
app.post('/api/setup/init', ensureSetupAccess, async (req, res) => {
|
||||
const { host, port, user, password, database, vHost, vPort, vPassword } = req.body;
|
||||
try {
|
||||
if (isDbInitialized) {
|
||||
return res.status(409).json({ success: false, error: 'System is already initialized' });
|
||||
}
|
||||
|
||||
const mysql = require('mysql2/promise');
|
||||
const connection = await mysql.createConnection({
|
||||
host: host || 'localhost',
|
||||
@@ -262,13 +533,18 @@ app.post('/api/setup/init', async (req, res) => {
|
||||
page_name VARCHAR(255) DEFAULT '数据可视化展示大屏',
|
||||
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),
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
|
||||
`);
|
||||
@@ -277,6 +553,35 @@ app.post('/api/setup/init', async (req, res) => {
|
||||
VALUES (1, '数据可视化展示大屏', '数据可视化展示大屏', 'dark', 0, 'tx')
|
||||
`);
|
||||
|
||||
// Ensure the first-run schema matches the runtime expectations without requiring a restart migration.
|
||||
await connection.query("ALTER TABLE prometheus_sources ADD COLUMN IF NOT EXISTS is_server_source TINYINT(1) DEFAULT 1 AFTER description");
|
||||
await connection.query("ALTER TABLE prometheus_sources ADD COLUMN IF NOT EXISTS type VARCHAR(50) DEFAULT 'prometheus' AFTER is_server_source");
|
||||
await connection.query("ALTER TABLE site_settings ADD COLUMN IF NOT EXISTS show_page_name TINYINT(1) DEFAULT 1 AFTER page_name");
|
||||
await connection.query("ALTER TABLE site_settings ADD COLUMN IF NOT EXISTS require_login_for_server_details TINYINT(1) DEFAULT 1 AFTER p95_type");
|
||||
await connection.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
|
||||
`);
|
||||
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
|
||||
`);
|
||||
|
||||
await connection.end();
|
||||
|
||||
// Save to .env
|
||||
@@ -291,6 +596,11 @@ VALKEY_PASSWORD=${vPassword || ''}
|
||||
PORT=${process.env.PORT || 3000}
|
||||
HOST=${process.env.HOST || '0.0.0.0'}
|
||||
REFRESH_INTERVAL=${process.env.REFRESH_INTERVAL || 5000}
|
||||
ALLOW_REMOTE_SETUP=${process.env.ALLOW_REMOTE_SETUP || 'false'}
|
||||
COOKIE_SECURE=${process.env.COOKIE_SECURE || 'false'}
|
||||
SESSION_TTL_SECONDS=${process.env.SESSION_TTL_SECONDS || SESSION_TTL_SECONDS}
|
||||
PASSWORD_ITERATIONS=${process.env.PASSWORD_ITERATIONS || PASSWORD_ITERATIONS}
|
||||
ENABLE_EXTERNAL_GEO_LOOKUP=${process.env.ENABLE_EXTERNAL_GEO_LOOKUP || 'false'}
|
||||
`;
|
||||
fs.writeFileSync(path.join(__dirname, '..', '.env'), envContent);
|
||||
|
||||
@@ -317,7 +627,7 @@ REFRESH_INTERVAL=${process.env.REFRESH_INTERVAL || 5000}
|
||||
});
|
||||
|
||||
// Setup Status Check
|
||||
app.get('/api/setup/status', async (req, res) => {
|
||||
app.get('/api/setup/status', ensureSetupAccess, async (req, res) => {
|
||||
try {
|
||||
if (!isDbInitialized) {
|
||||
return res.json({ initialized: false, step: 'db' });
|
||||
@@ -334,7 +644,7 @@ app.get('/api/setup/status', async (req, res) => {
|
||||
});
|
||||
|
||||
// Create First Admin
|
||||
app.post('/api/setup/admin', async (req, res) => {
|
||||
app.post('/api/setup/admin', ensureSetupAccess, async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
if (!username || !password) return res.status(400).json({ error: 'Username and password are required' });
|
||||
|
||||
@@ -343,7 +653,7 @@ app.post('/api/setup/admin', async (req, res) => {
|
||||
if (rows[0].count > 0) return res.status(403).json({ error: 'Admin already exists' });
|
||||
|
||||
const salt = crypto.randomBytes(16).toString('hex');
|
||||
const hash = crypto.pbkdf2Sync(password, salt, 1000, 64, 'sha512').toString('hex');
|
||||
const hash = createPasswordHash(password, salt);
|
||||
|
||||
await db.query('INSERT INTO users (username, password, salt) VALUES (?, ?, ?)', [username, hash, salt]);
|
||||
const [userRows] = await db.query('SELECT id, username FROM users WHERE username = ?', [username]);
|
||||
@@ -351,8 +661,8 @@ app.post('/api/setup/admin', async (req, res) => {
|
||||
|
||||
// Auto-login after creation so the next setup steps (like adding Prometheus) work without 401
|
||||
const sessionId = crypto.randomBytes(32).toString('hex');
|
||||
sessions.set(sessionId, { id: user.id, username: user.username });
|
||||
res.setHeader('Set-Cookie', `session_id=${sessionId}; Path=/; HttpOnly; SameSite=Strict; Max-Age=86400`);
|
||||
await persistSession(sessionId, { id: user.id, username: user.username });
|
||||
setSessionCookie(req, res, sessionId);
|
||||
|
||||
res.json({ success: true, message: 'Admin account created and logged in' });
|
||||
} catch (err) {
|
||||
@@ -406,13 +716,18 @@ const serveIndex = async (req, res) => {
|
||||
// Fetch settings
|
||||
let settings = {
|
||||
page_name: '数据可视化展示大屏',
|
||||
show_page_name: 1,
|
||||
title: '数据可视化展示大屏',
|
||||
logo_url: null,
|
||||
logo_url_dark: null,
|
||||
favicon_url: null,
|
||||
default_theme: 'dark',
|
||||
blackbox_source_id: null,
|
||||
latency_source: null,
|
||||
latency_dest: null,
|
||||
latency_target: null
|
||||
latency_target: null,
|
||||
icp_filing: null,
|
||||
ps_filing: null
|
||||
};
|
||||
|
||||
if (isDbInitialized) {
|
||||
@@ -425,7 +740,7 @@ const serveIndex = async (req, res) => {
|
||||
}
|
||||
|
||||
// Inject settings
|
||||
const settingsJson = JSON.stringify(settings);
|
||||
const settingsJson = escapeJsonForInlineScript(getPublicSiteSettings(settings));
|
||||
const injection = `<script>window.SITE_SETTINGS = ${settingsJson};</script>`;
|
||||
|
||||
// Replace <head> with <head> + injection
|
||||
@@ -446,7 +761,7 @@ app.use(express.static(path.join(__dirname, '..', 'public'), { index: false }));
|
||||
// ==================== Prometheus Source CRUD ====================
|
||||
|
||||
// Get all Prometheus sources
|
||||
app.get('/api/sources', async (req, res) => {
|
||||
app.get('/api/sources', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const [rows] = await db.query('SELECT * FROM prometheus_sources ORDER BY is_server_source DESC, created_at DESC');
|
||||
// Test connectivity for each source
|
||||
@@ -498,7 +813,7 @@ app.post('/api/sources', requireAuth, async (req, res) => {
|
||||
|
||||
// Update a Prometheus source
|
||||
app.put('/api/sources/:id', requireAuth, async (req, res) => {
|
||||
let { name, url, description, is_server_source } = req.body;
|
||||
let { name, url, description, is_server_source, type } = req.body;
|
||||
if (url && !/^https?:\/\//i.test(url)) url = 'http://' + url;
|
||||
try {
|
||||
await db.query(
|
||||
@@ -530,7 +845,7 @@ app.delete('/api/sources/:id', requireAuth, async (req, res) => {
|
||||
});
|
||||
|
||||
// Test connection to a Prometheus source
|
||||
app.post('/api/sources/test', async (req, res) => {
|
||||
app.post('/api/sources/test', requireAuth, async (req, res) => {
|
||||
let { url, type } = req.body;
|
||||
if (url && !/^https?:\/\//i.test(url)) url = 'http://' + url;
|
||||
try {
|
||||
@@ -554,17 +869,26 @@ app.post('/api/sources/test', async (req, res) => {
|
||||
app.get('/api/settings', async (req, res) => {
|
||||
try {
|
||||
const [rows] = await db.query('SELECT * FROM site_settings WHERE id = 1');
|
||||
if (rows.length === 0) {
|
||||
return res.json(getPublicSiteSettings());
|
||||
}
|
||||
return res.json(getPublicSiteSettings(rows[0]));
|
||||
if (rows.length === 0) {
|
||||
return res.json({
|
||||
page_name: '数据可视化展示大屏',
|
||||
show_page_name: 1,
|
||||
title: '数据可视化展示大屏',
|
||||
logo_url: null,
|
||||
logo_url_dark: null,
|
||||
favicon_url: null,
|
||||
show_95_bandwidth: 0,
|
||||
p95_type: 'tx',
|
||||
blackbox_source_id: null,
|
||||
latency_source: null,
|
||||
latency_dest: null,
|
||||
latency_target: null
|
||||
latency_target: null,
|
||||
icp_filing: null,
|
||||
ps_filing: null
|
||||
});
|
||||
}
|
||||
res.json(rows[0]);
|
||||
@@ -576,29 +900,73 @@ app.get('/api/settings', async (req, res) => {
|
||||
|
||||
// Update site settings
|
||||
app.post('/api/settings', requireAuth, async (req, res) => {
|
||||
const { page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type, blackbox_source_id, latency_source, latency_dest, latency_target } = req.body;
|
||||
try {
|
||||
// 1. Fetch current settings first to preserve fields not sent by the UI
|
||||
const [rows] = await db.query('SELECT * FROM site_settings WHERE id = 1');
|
||||
let current = rows.length > 0 ? rows[0] : {};
|
||||
|
||||
// 2. Destructure fields from body
|
||||
const {
|
||||
page_name, show_page_name, title, logo_url, logo_url_dark, favicon_url,
|
||||
default_theme, show_95_bandwidth, p95_type, require_login_for_server_details,
|
||||
icp_filing, ps_filing
|
||||
} = req.body;
|
||||
|
||||
// 3. Prepare parameters, prioritizing body but falling back to current
|
||||
const settings = {
|
||||
page_name: page_name !== undefined ? page_name : (current.page_name || '数据可视化展示大屏'),
|
||||
show_page_name: show_page_name !== undefined ? (show_page_name ? 1 : 0) : (current.show_page_name !== undefined ? current.show_page_name : 1),
|
||||
title: title !== undefined ? title : (current.title || '数据可视化展示大屏'),
|
||||
logo_url: logo_url !== undefined ? logo_url : (current.logo_url || null),
|
||||
logo_url_dark: logo_url_dark !== undefined ? logo_url_dark : (current.logo_url_dark || null),
|
||||
favicon_url: favicon_url !== undefined ? favicon_url : (current.favicon_url || null),
|
||||
default_theme: default_theme !== undefined ? default_theme : (current.default_theme || 'dark'),
|
||||
show_95_bandwidth: show_95_bandwidth !== undefined ? (show_95_bandwidth ? 1 : 0) : (current.show_95_bandwidth || 0),
|
||||
p95_type: p95_type !== undefined ? p95_type : (current.p95_type || 'tx'),
|
||||
require_login_for_server_details: require_login_for_server_details !== undefined
|
||||
? (require_login_for_server_details ? 1 : 0)
|
||||
: (current.require_login_for_server_details !== undefined ? current.require_login_for_server_details : 1),
|
||||
blackbox_source_id: current.blackbox_source_id || null, // UI doesn't send this
|
||||
latency_source: current.latency_source || null, // UI doesn't send this
|
||||
latency_dest: current.latency_dest || null, // UI doesn't send this
|
||||
latency_target: current.latency_target || null, // UI doesn't send this
|
||||
icp_filing: icp_filing !== undefined ? icp_filing : (current.icp_filing || null),
|
||||
ps_filing: ps_filing !== undefined ? ps_filing : (current.ps_filing || null)
|
||||
};
|
||||
|
||||
// 4. Update database
|
||||
await db.query(
|
||||
`INSERT INTO site_settings (id, page_name, title, logo_url, default_theme, show_95_bandwidth, p95_type, blackbox_source_id, latency_source, latency_dest, latency_target)
|
||||
VALUES (1, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
`INSERT INTO site_settings (
|
||||
id, page_name, show_page_name, title, logo_url, logo_url_dark, favicon_url,
|
||||
default_theme, show_95_bandwidth, p95_type, require_login_for_server_details,
|
||||
blackbox_source_id, latency_source, latency_dest, latency_target,
|
||||
icp_filing, ps_filing
|
||||
) VALUES (1, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
ON DUPLICATE KEY UPDATE
|
||||
page_name = VALUES(page_name),
|
||||
show_page_name = VALUES(show_page_name),
|
||||
title = VALUES(title),
|
||||
logo_url = VALUES(logo_url),
|
||||
logo_url_dark = VALUES(logo_url_dark),
|
||||
favicon_url = VALUES(favicon_url),
|
||||
default_theme = VALUES(default_theme),
|
||||
show_95_bandwidth = VALUES(show_95_bandwidth),
|
||||
p95_type = VALUES(p95_type),
|
||||
require_login_for_server_details = VALUES(require_login_for_server_details),
|
||||
blackbox_source_id = VALUES(blackbox_source_id),
|
||||
latency_source = VALUES(latency_source),
|
||||
latency_dest = VALUES(latency_dest),
|
||||
latency_target = VALUES(latency_target)`,
|
||||
latency_target = VALUES(latency_target),
|
||||
icp_filing = VALUES(icp_filing),
|
||||
ps_filing = VALUES(ps_filing)`,
|
||||
[
|
||||
page_name, title, logo_url, default_theme,
|
||||
show_95_bandwidth ? 1 : 0, p95_type || 'tx',
|
||||
blackbox_source_id || null, latency_source || null,
|
||||
latency_dest || null, latency_target || null
|
||||
settings.page_name, settings.show_page_name, settings.title, settings.logo_url, settings.logo_url_dark, settings.favicon_url,
|
||||
settings.default_theme, settings.show_95_bandwidth, settings.p95_type, settings.require_login_for_server_details,
|
||||
settings.blackbox_source_id, settings.latency_source, settings.latency_dest, settings.latency_target,
|
||||
settings.icp_filing, settings.ps_filing
|
||||
]
|
||||
);
|
||||
|
||||
res.json({ success: true });
|
||||
} catch (err) {
|
||||
console.error('Error updating settings:', err);
|
||||
@@ -609,7 +977,7 @@ app.post('/api/settings', requireAuth, async (req, res) => {
|
||||
// ==================== Metrics Aggregation ====================
|
||||
|
||||
// Reusable function to get overview metrics
|
||||
async function getOverview() {
|
||||
async function getOverview(force = false) {
|
||||
const [sources] = await db.query('SELECT * FROM prometheus_sources WHERE is_server_source = 1 AND type != "blackbox"');
|
||||
if (sources.length === 0) {
|
||||
return {
|
||||
@@ -626,8 +994,12 @@ async function getOverview() {
|
||||
|
||||
const allMetrics = await Promise.all(sources.map(async (source) => {
|
||||
const cacheKey = `source_metrics:${source.url}:${source.name}`;
|
||||
if (force) {
|
||||
await cache.del(cacheKey);
|
||||
} else {
|
||||
const cached = await cache.get(cacheKey);
|
||||
if (cached) return cached;
|
||||
}
|
||||
|
||||
try {
|
||||
const metrics = await prometheusService.getOverviewMetrics(source.url, source.name);
|
||||
@@ -736,7 +1108,8 @@ async function getOverview() {
|
||||
// Get all aggregated metrics from all Prometheus sources
|
||||
app.get('/api/metrics/overview', async (req, res) => {
|
||||
try {
|
||||
const overview = await getOverview();
|
||||
const force = req.query.force === 'true';
|
||||
const overview = await getOverview(force);
|
||||
res.json(overview);
|
||||
} catch (err) {
|
||||
console.error('Error fetching overview metrics:', err);
|
||||
@@ -747,9 +1120,15 @@ app.get('/api/metrics/overview', async (req, res) => {
|
||||
// Get network traffic history (past 24h) from Prometheus
|
||||
app.get('/api/metrics/network-history', async (req, res) => {
|
||||
try {
|
||||
const force = req.query.force === 'true';
|
||||
const cacheKey = 'network_history_all';
|
||||
|
||||
if (force) {
|
||||
await cache.del(cacheKey);
|
||||
} else {
|
||||
const cached = await cache.get(cacheKey);
|
||||
if (cached) return res.json(cached);
|
||||
}
|
||||
|
||||
const [sources] = await db.query('SELECT * FROM prometheus_sources WHERE is_server_source = 1 AND type != "blackbox"');
|
||||
if (sources.length === 0) {
|
||||
@@ -806,7 +1185,7 @@ app.get('/api/metrics/cpu-history', async (req, res) => {
|
||||
});
|
||||
|
||||
// Get detailed metrics for a specific server
|
||||
app.get('/api/metrics/server-details', async (req, res) => {
|
||||
app.get('/api/metrics/server-details', requireServerDetailsAccess, async (req, res) => {
|
||||
const { instance, job, source } = req.query;
|
||||
|
||||
if (!instance || !job || !source) {
|
||||
@@ -831,25 +1210,30 @@ app.get('/api/metrics/server-details', async (req, res) => {
|
||||
});
|
||||
|
||||
// Get historical metrics for a specific server
|
||||
app.get('/api/metrics/server-history', async (req, res) => {
|
||||
app.get('/api/metrics/server-history', requireServerDetailsAccess, async (req, res) => {
|
||||
const { instance, job, source, metric, range, start, end } = req.query;
|
||||
|
||||
if (!instance || !job || !source || !metric) {
|
||||
return res.status(400).json({ error: 'instance, job, source, and metric are required' });
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const [rows] = await db.query('SELECT url FROM prometheus_sources WHERE name = ?', [source]);
|
||||
if (rows.length === 0) return res.status(404).json({ error: 'Source not found' });
|
||||
const sourceUrl = rows[0].url;
|
||||
const data = await prometheusService.getServerHistory(sourceUrl, instance, job, metric, range, start, end);
|
||||
|
||||
// Fetch p95Type from settings for networkTrend stats
|
||||
let p95Type = 'tx';
|
||||
try {
|
||||
const [settingsRows] = await db.query('SELECT p95_type FROM site_settings WHERE id = 1');
|
||||
if (settingsRows.length > 0) p95Type = settingsRows[0].p95_type;
|
||||
} catch (e) {}
|
||||
|
||||
const data = await prometheusService.getServerHistory(sourceUrl, instance, job, metric, range, start, end, p95Type);
|
||||
res.json(data);
|
||||
} catch (err) {
|
||||
res.status(500).json({ error: err.message });
|
||||
}
|
||||
|
||||
});
|
||||
// SPA fallback
|
||||
app.get('*', (req, res, next) => {
|
||||
@@ -859,7 +1243,7 @@ app.get('*', (req, res, next) => {
|
||||
|
||||
|
||||
// ==================== Latency Routes CRUD ====================
|
||||
app.get('/api/latency-routes', async (req, res) => {
|
||||
|
||||
app.get('/api/latency-routes', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const [rows] = await db.query(`
|
||||
@@ -947,6 +1331,7 @@ app.get('/api/metrics/latency', async (req, res) => {
|
||||
// ==================== WebSocket Server ====================
|
||||
|
||||
const server = http.createServer(app);
|
||||
const wss = new WebSocket.Server({ server });
|
||||
let isBroadcastRunning = false;
|
||||
|
||||
function broadcast(data) {
|
||||
@@ -959,23 +1344,67 @@ function broadcast(data) {
|
||||
}
|
||||
|
||||
// Broadcast loop
|
||||
async function broadcastMetrics() {
|
||||
if (isBroadcastRunning) return;
|
||||
isBroadcastRunning = true;
|
||||
try {
|
||||
broadcast({ type: 'overview', data: overview });
|
||||
const overview = await getOverview();
|
||||
|
||||
// Also include latencies in the broadcast to make map lines real-time
|
||||
const [routes] = await db.query(`
|
||||
SELECT r.*, s.url, s.type as source_type
|
||||
FROM latency_routes r
|
||||
JOIN prometheus_sources s ON r.source_id = s.id
|
||||
`);
|
||||
|
||||
const latencyResults = await Promise.all(routes.map(async (route) => {
|
||||
let latency = await cache.get(`latency:route:${route.id}`);
|
||||
if (latency === null && route.source_type === 'prometheus') {
|
||||
latency = await prometheusService.getLatency(route.url, route.latency_target);
|
||||
}
|
||||
return {
|
||||
id: route.id,
|
||||
source: route.latency_source,
|
||||
dest: route.latency_dest,
|
||||
latency: latency
|
||||
};
|
||||
}));
|
||||
|
||||
broadcast({
|
||||
type: 'overview',
|
||||
data: {
|
||||
...overview,
|
||||
latencies: latencyResults
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
// console.error('WS Broadcast error:', err.message);
|
||||
} finally {
|
||||
isBroadcastRunning = false;
|
||||
}
|
||||
}
|
||||
// Start services
|
||||
checkAndFixDatabase();
|
||||
latencyService.start();
|
||||
|
||||
// Start server and services
|
||||
async function start() {
|
||||
try {
|
||||
console.log('🔧 Initializing services...');
|
||||
// Ensure DB is ready before starting anything else
|
||||
await checkAndFixDatabase();
|
||||
const REFRESH_INT = parseInt(process.env.REFRESH_INTERVAL) || 5000;
|
||||
setInterval(broadcastMetrics, REFRESH_INT);
|
||||
|
||||
// Start services
|
||||
latencyService.start();
|
||||
server.listen(PORT, HOST, () => {
|
||||
|
||||
const REFRESH_INT = parseInt(process.env.REFRESH_INTERVAL) || 5000;
|
||||
setInterval(broadcastMetrics, REFRESH_INT);
|
||||
|
||||
server.listen(PORT, HOST, () => {
|
||||
console.log(`\n 🚀 Data Visualization Display Wall (WebSocket Enabled)`);
|
||||
console.log(` 📊 Server running at http://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}`);
|
||||
});
|
||||
console.log(` ⚙️ Configure Prometheus sources at http://${HOST === '0.0.0.0' ? 'localhost' : HOST}:${PORT}/settings\n`);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('❌ Server failed to start:', err.message);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -57,6 +57,18 @@ async function initDatabase() {
|
||||
title VARCHAR(255) DEFAULT '数据可视化展示大屏',
|
||||
logo_url TEXT,
|
||||
default_theme VARCHAR(20) DEFAULT 'dark',
|
||||
show_page_name TINYINT(1) DEFAULT 1,
|
||||
logo_url_dark TEXT,
|
||||
favicon_url TEXT,
|
||||
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),
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
|
||||
`);
|
||||
|
||||
@@ -7,10 +7,10 @@ const QUERY_TIMEOUT = 10000;
|
||||
// Reusable agents to handle potential redirect issues and protocol mismatches
|
||||
const crypto = require('crypto');
|
||||
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 SECRET = process.env.APP_SECRET || 'prom-data-panel-stable-secret-key-123';
|
||||
const SECRET = process.env.APP_SECRET || crypto.randomBytes(32).toString('hex');
|
||||
|
||||
function getServerToken(instance, job, source) {
|
||||
const hash = crypto.createHmac('sha256', SECRET)
|
||||
@@ -549,14 +549,8 @@ async function getServerDetails(baseUrl, instance, job) {
|
||||
|
||||
// Queries based on the requested dashboard structure
|
||||
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`,
|
||||
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`,
|
||||
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])))`,
|
||||
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`,
|
||||
@@ -564,6 +558,8 @@ 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"})`,
|
||||
cpuCores: `count(count(node_cpu_seconds_total{instance="${node}",job="${job}"}) by (cpu))`,
|
||||
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}"}`,
|
||||
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]))`,
|
||||
@@ -632,46 +628,22 @@ async function getServerDetails(baseUrl, instance, job) {
|
||||
/**
|
||||
* 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 node = resolveToken(instance);
|
||||
|
||||
// Custom multi-metric handler for CPU Busy
|
||||
// CPU Busy history: 100 - idle
|
||||
if (metric === 'cpuBusy') {
|
||||
const modes = {
|
||||
system: 'system',
|
||||
user: 'user',
|
||||
iowait: 'iowait',
|
||||
irq: 'irq|softirq',
|
||||
other: 'nice|steal|guest|guest_nice',
|
||||
idle: 'idle'
|
||||
};
|
||||
|
||||
const expr = `100 * (1 - avg(rate(node_cpu_seconds_total{mode="idle", instance="${node}"}[1m])))`;
|
||||
const rangeObj = parseRange(range, start, end);
|
||||
const timestamps = [];
|
||||
const series = {};
|
||||
Object.keys(modes).forEach(m => series[m] = []);
|
||||
const result = await queryRange(url, expr, rangeObj.queryStart, rangeObj.queryEnd, rangeObj.step);
|
||||
|
||||
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 (!result || result.length === 0) return { timestamps: [], 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 => {
|
||||
r.values.forEach(v => series[r.name].push(parseFloat(v[1])));
|
||||
});
|
||||
|
||||
// Pre-calculate busy percentage: 100 - idle
|
||||
const idleValues = series.idle || [];
|
||||
const busyValues = idleValues.map(idleVal => Math.max(0, 100 - idleVal));
|
||||
|
||||
return { timestamps, series, values: busyValues };
|
||||
return {
|
||||
timestamps: result[0].values.map(v => v[0] * 1000),
|
||||
values: result[0].values.map(v => parseFloat(v[1]))
|
||||
};
|
||||
}
|
||||
|
||||
// Map metric keys to Prometheus expressions
|
||||
@@ -711,9 +683,22 @@ async function getServerHistory(baseUrl, instance, job, metric, range = '1h', st
|
||||
txTotal += (tx[i] || 0) * duration;
|
||||
}
|
||||
|
||||
const sortedTx = [...tx].sort((a, b) => a - b);
|
||||
const p95Idx = Math.floor(sortedTx.length * 0.95);
|
||||
const p95 = sortedTx.length > 0 ? sortedTx[p95Idx] : 0;
|
||||
// Calculate P95 based on p95Type
|
||||
let combined = [];
|
||||
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 {
|
||||
timestamps,
|
||||
|
||||
187
update.sh
Normal file
187
update.sh
Normal 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}"
|
||||
Reference in New Issue
Block a user