From b6da5bc8b8c391557a95b320195a8d7aa337bad7 Mon Sep 17 00:00:00 2001 From: xuxt Date: Fri, 31 Oct 2025 14:18:19 +0800 Subject: [PATCH] =?UTF-8?q?dev=5F1.0.0=5Fxuxt=5F3=20=E5=AE=8C=E6=88=90web?= =?UTF-8?q?=E5=92=8Calert=E7=9A=84=E9=9B=86=E6=88=90=E6=B5=8B=E8=AF=95=20(?= =?UTF-8?q?#38)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xiuting.xu Reviewed-on: http://git.nasp.fit/NASP/argus/pulls/38 Reviewed-by: huhy Reviewed-by: yuyr Reviewed-by: sundapeng --- src/alert/tests/.env.example | 6 +- .../tests/data/alertmanager/alertmanager.yml | 19 --- src/alert/tests/data/alertmanager/nflog | 0 src/alert/tests/data/alertmanager/silences | 0 .../data/etc/alertmanager.alert.argus.com | 1 - src/alert/tests/scripts/01_bootstrap.sh | 19 --- src/alert/tests/scripts/02_up.sh | 10 -- .../scripts/03_alertmanager_add_alert.sh | 106 ---------------- src/alert/tests/scripts/04_query_alerts.sh | 71 ----------- src/alert/tests/scripts/05_down.sh | 21 ---- src/alert/tests/scripts/e2e_test.sh | 105 ---------------- .../tests/scripts/verify_alertmanager.sh | 113 +++++++++++++++++ src/sys/tests/README.md | 9 ++ src/sys/tests/scripts/00_e2e_test.sh | 2 + src/sys/tests/scripts/15_alert_verify.sh | 103 ++++++++++++++++ src/sys/tests/scripts/16_web_verify.sh | 115 ++++++++++++++++++ src/web/.gitignore | 3 + src/web/package-lock.json | 64 ++++++++++ src/web/package.json | 5 +- src/web/playwright.config.ts | 28 +++++ src/web/src/config/entries.js | 1 - src/web/tests/data/etc/web.argus.com | 1 - src/web/tests/playwright/alerts.spec.ts | 87 +++++++++++++ src/web/tests/playwright/dashboard.spec.ts | 52 ++++++++ .../playwright/helpers/entrycards-helpers.ts | 28 +++++ src/web/tests/playwright/helpers/testUtils.ts | 25 ++++ src/web/tests/playwright/helpers/utils.ts | 1 + src/web/tests/playwright/logs.spec.ts | 17 +++ src/web/tests/playwright/metric.spec.ts | 15 +++ src/web/tests/playwright/node-info.spec.ts | 64 ++++++++++ src/web/tests/playwright/test-entries.ts | 14 +++ src/web/tests/playwright/web-pages.spec.ts | 21 ++++ src/web/tests/scripts/01_bootstrap.sh | 19 --- src/web/tests/scripts/02_up.sh | 10 -- src/web/tests/scripts/03_web_health_check.sh | 93 -------------- src/web/tests/scripts/04_down.sh | 21 ---- src/web/tests/scripts/e2e_test.sh | 85 ------------- src/web/tests/scripts/verify-web-frontend.sh | 77 ++++++++++++ 38 files changed, 845 insertions(+), 586 deletions(-) delete mode 100644 src/alert/tests/data/alertmanager/alertmanager.yml delete mode 100644 src/alert/tests/data/alertmanager/nflog delete mode 100644 src/alert/tests/data/alertmanager/silences delete mode 100644 src/alert/tests/data/etc/alertmanager.alert.argus.com delete mode 100644 src/alert/tests/scripts/01_bootstrap.sh delete mode 100644 src/alert/tests/scripts/02_up.sh delete mode 100644 src/alert/tests/scripts/03_alertmanager_add_alert.sh delete mode 100644 src/alert/tests/scripts/04_query_alerts.sh delete mode 100644 src/alert/tests/scripts/05_down.sh delete mode 100644 src/alert/tests/scripts/e2e_test.sh create mode 100644 src/alert/tests/scripts/verify_alertmanager.sh create mode 100644 src/sys/tests/scripts/15_alert_verify.sh create mode 100644 src/sys/tests/scripts/16_web_verify.sh create mode 100644 src/web/playwright.config.ts delete mode 100644 src/web/tests/data/etc/web.argus.com create mode 100644 src/web/tests/playwright/alerts.spec.ts create mode 100644 src/web/tests/playwright/dashboard.spec.ts create mode 100644 src/web/tests/playwright/helpers/entrycards-helpers.ts create mode 100644 src/web/tests/playwright/helpers/testUtils.ts create mode 100644 src/web/tests/playwright/helpers/utils.ts create mode 100644 src/web/tests/playwright/logs.spec.ts create mode 100644 src/web/tests/playwright/metric.spec.ts create mode 100644 src/web/tests/playwright/node-info.spec.ts create mode 100644 src/web/tests/playwright/test-entries.ts create mode 100644 src/web/tests/playwright/web-pages.spec.ts delete mode 100644 src/web/tests/scripts/01_bootstrap.sh delete mode 100644 src/web/tests/scripts/02_up.sh delete mode 100644 src/web/tests/scripts/03_web_health_check.sh delete mode 100644 src/web/tests/scripts/04_down.sh delete mode 100644 src/web/tests/scripts/e2e_test.sh create mode 100644 src/web/tests/scripts/verify-web-frontend.sh diff --git a/src/alert/tests/.env.example b/src/alert/tests/.env.example index 00f4b76..e30d37e 100644 --- a/src/alert/tests/.env.example +++ b/src/alert/tests/.env.example @@ -1,5 +1,5 @@ DATA_ROOT=/home/argus/tmp/private/argus -ARGUS_UID=1048 -ARGUS_GID=1048 +ARGUS_BUILD_UID=1048 +ARGUS_BUILD_GID=1048 -USE_INTRANET=false +USE_INTRANET=false \ No newline at end of file diff --git a/src/alert/tests/data/alertmanager/alertmanager.yml b/src/alert/tests/data/alertmanager/alertmanager.yml deleted file mode 100644 index 26060aa..0000000 --- a/src/alert/tests/data/alertmanager/alertmanager.yml +++ /dev/null @@ -1,19 +0,0 @@ -global: - resolve_timeout: 5m - -route: - group_by: ['alertname', 'instance'] # 分组：相同 alertname + instance 的告警合并 - group_wait: 30s # 第一个告警后，等 30s 看是否有同组告警一起发 - group_interval: 5m # 同组告警变化后，至少 5 分钟再发一次 - repeat_interval: 3h # 相同告警，3 小时重复提醒一次 - receiver: 'null' - -receivers: - - name: 'null' - -inhibit_rules: - - source_match: - severity: 'critical' # critical 告警存在时 - target_match: - severity: 'warning' # 抑制相同 instance 的 warning 告警 - equal: ['instance'] diff --git a/src/alert/tests/data/alertmanager/nflog b/src/alert/tests/data/alertmanager/nflog deleted file mode 100644 index e69de29..0000000 diff --git a/src/alert/tests/data/alertmanager/silences b/src/alert/tests/data/alertmanager/silences deleted file mode 100644 index e69de29..0000000 diff --git a/src/alert/tests/data/etc/alertmanager.alert.argus.com b/src/alert/tests/data/etc/alertmanager.alert.argus.com deleted file mode 100644 index cd339f9..0000000 --- a/src/alert/tests/data/etc/alertmanager.alert.argus.com +++ /dev/null @@ -1 +0,0 @@ -172.18.0.2 diff --git a/src/alert/tests/scripts/01_bootstrap.sh b/src/alert/tests/scripts/01_bootstrap.sh deleted file mode 100644 index 3862c7e..0000000 --- a/src/alert/tests/scripts/01_bootstrap.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -root="$(cd "$(dirname "${BASH_SOURCE[0]}")/../" && pwd)" -project_root="$(cd "$root/../../.." && pwd)" - -source "$project_root/scripts/common/build_user.sh" -load_build_user - -# 创建新的private目录结构 (基于argus目录结构) -echo "[INFO] Creating private directory structure for supervisor-based containers..." -mkdir -p "$root/private/argus/alert/alertmanager" -mkdir -p "$root/private/argus/etc/" - -# 设置数据目录权限 -echo "[INFO] Setting permissions for data directories..." -chown -R "${ARGUS_BUILD_UID}:${ARGUS_BUILD_GID}" "$root/private/argus/alert/alertmanager" 2>/dev/null || true -chown -R "${ARGUS_BUILD_UID}:${ARGUS_BUILD_GID}" "$root/private/argus/etc" 2>/dev/null || true - -echo "[INFO] Supervisor-based containers will manage their own scripts and configurations" diff --git a/src/alert/tests/scripts/02_up.sh b/src/alert/tests/scripts/02_up.sh deleted file mode 100644 index 27e9020..0000000 --- a/src/alert/tests/scripts/02_up.sh +++ /dev/null @@ -1,10 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -cd "$(dirname "$0")/.." -compose_cmd="docker compose" -if ! $compose_cmd version >/dev/null 2>&1; then - if command -v docker-compose >/dev/null 2>&1; then compose_cmd="docker-compose"; else - echo "需要 Docker Compose，请安装后重试" >&2; exit 1; fi -fi -$compose_cmd -p alert-mvp up -d --remove-orphans -echo "[OK] 服务已启动：Alertmanager http://localhost:9093" diff --git a/src/alert/tests/scripts/03_alertmanager_add_alert.sh b/src/alert/tests/scripts/03_alertmanager_add_alert.sh deleted file mode 100644 index d65da79..0000000 --- a/src/alert/tests/scripts/03_alertmanager_add_alert.sh +++ /dev/null @@ -1,106 +0,0 @@ -#!/bin/bash -set -euo pipefail - -# ========================================================== -# Alertmanager 测试脚本 -# ========================================================== - -ALERTMANAGER_URL="http://localhost:9093" -TEST_ALERT_NAME_CRITICAL="NodeDown" -TEST_ALERT_NAME_WARNING="HighCPU" -TMP_LOG="/tmp/test-alertmanager.log" - -# 等待参数 -am_wait_attempts=30 -am_wait_interval=2 - -GREEN="\033[1;32m" -RED="\033[1;31m" -YELLOW="\033[1;33m" -RESET="\033[0m" - -# ========================================================== -# 函数定义 -# ========================================================== - -wait_for_alertmanager() { - local attempt=1 - echo "[INFO] 等待 Alertmanager 启动中..." - while (( attempt <= am_wait_attempts )); do - if curl -fsS "${ALERTMANAGER_URL}/api/v2/status" >/dev/null 2>&1; then - echo -e "${GREEN}[OK] Alertmanager 已就绪 (attempt=${attempt}/${am_wait_attempts})${RESET}" - return 0 - fi - echo "[..] Alertmanager 尚未就绪 (${attempt}/${am_wait_attempts})" - sleep "${am_wait_interval}" - (( attempt++ )) - done - echo -e "${RED}[ERROR] Alertmanager 在 ${am_wait_attempts} 次尝试后仍未就绪${RESET}" - return 1 -} - -log_step() { - echo -e "${YELLOW}==== $1 ====${RESET}" -} - -# ========================================================== -# 主流程 -# ========================================================== - -log_step "测试 Alertmanager 开始" -echo "[INFO] Alertmanager 地址: $ALERTMANAGER_URL" - -# Step 1: 等待 Alertmanager 启动 -wait_for_alertmanager - -# Step 2: 触发一个critical测试告警 -echo "[INFO] 发送critical测试告警..." -curl -fsS -X POST "${ALERTMANAGER_URL}/api/v2/alerts" \ - -H "Content-Type: application/json" \ - -d '[ - { - "labels": { - "alertname": "'"${TEST_ALERT_NAME_CRITICAL}"'", - "instance": "node-1", - "severity": "critical" - }, - "annotations": { - "summary": "节点 node-1 宕机" - } - } - ]' \ - -o "$TMP_LOG" - -if [ $? -eq 0 ]; then - echo -e "${GREEN}[OK] 已成功发送critical测试告警${RESET}" -else - echo -e "${RED}[ERROR] critical告警发送失败！${RESET}" - cat "$TMP_LOG" - exit 1 -fi - -# Step 3: 触发一个warning测试告警 -echo "[INFO] 发送warning测试告警..." -curl -fsS -X POST "${ALERTMANAGER_URL}/api/v2/alerts" \ - -H "Content-Type: application/json" \ - -d '[ - { - "labels": { - "alertname": "'"${TEST_ALERT_NAME_WARNING}"'", - "instance": "node-1", - "severity": "warning" - }, - "annotations": { - "summary": "节点 node-1 CPU 使用率过高" - } - } - ]' \ - -o "$TMP_LOG" - -if [ $? -eq 0 ]; then - echo -e "${GREEN}[OK] 已成功发送warning测试告警${RESET}" -else - echo -e "${RED}[ERROR] warning告警发送失败！${RESET}" - cat "$TMP_LOG" - exit 1 -fi \ No newline at end of file diff --git a/src/alert/tests/scripts/04_query_alerts.sh b/src/alert/tests/scripts/04_query_alerts.sh deleted file mode 100644 index 05c616e..0000000 --- a/src/alert/tests/scripts/04_query_alerts.sh +++ /dev/null @@ -1,71 +0,0 @@ -#!/bin/bash -set -euo pipefail - -# ========================================================== -# Alertmanager 测试脚本（含启动等待） -# ========================================================== - -ALERTMANAGER_URL="http://localhost:9093" -TEST_ALERT_NAME_CRITICAL="NodeDown" -TEST_ALERT_NAME_WARNING="HighCPU" -TMP_LOG="/tmp/test-alertmanager.log" - -# 等待参数 -am_wait_attempts=30 -am_wait_interval=2 - -GREEN="\033[1;32m" -RED="\033[1;31m" -YELLOW="\033[1;33m" -RESET="\033[0m" - -# ========================================================== -# 函数定义 -# ========================================================== - -wait_for_alertmanager() { - local attempt=1 - echo "[INFO] 等待 Alertmanager 启动中..." - while (( attempt <= am_wait_attempts )); do - if curl -fsS "${ALERTMANAGER_URL}/api/v2/status" >/dev/null 2>&1; then - echo -e "${GREEN}[OK] Alertmanager 已就绪 (attempt=${attempt}/${am_wait_attempts})${RESET}" - return 0 - fi - echo "[..] Alertmanager 尚未就绪 (${attempt}/${am_wait_attempts})" - sleep "${am_wait_interval}" - (( attempt++ )) - done - echo -e "${RED}[ERROR] Alertmanager 在 ${am_wait_attempts} 次尝试后仍未就绪${RESET}" - return 1 -} - -log_step() { - echo -e "${YELLOW}==== $1 ====${RESET}" -} - -# ========================================================== -# 主流程 -# ========================================================== - -log_step "查询 Alertmanager 当前告警列表开始" -echo "[INFO] Alertmanager 地址: $ALERTMANAGER_URL" - -# Step 1: 等待 Alertmanager 启动 -wait_for_alertmanager - -# Step 2: 查询当前告警列表 -echo "[INFO] 查询当前告警..." -sleep 1 -curl -fsS "${ALERTMANAGER_URL}/api/v2/alerts" | jq '.' || { - echo -e "${RED}[WARN] 无法解析返回 JSON，请检查 jq 是否安装${RESET}" - curl -s "${ALERTMANAGER_URL}/api/v2/alerts" -} - -# Step 3: 检查告警是否包含 NodeDown -if curl -fsS "${ALERTMANAGER_URL}/api/v2/alerts" | grep -q "${TEST_ALERT_NAME_CRITICAL}"; then - echo -e "${GREEN}✅ 测试通过：Alertmanager 已成功接收告警 ${TEST_ALERT_NAME_CRITICAL}${RESET}" -else - echo -e "${RED}❌ 测试失败：未检测到告警 ${TEST_ALERT_NAME_CRITICAL}${RESET}" -fi - -log_step "测试结束" diff --git a/src/alert/tests/scripts/05_down.sh b/src/alert/tests/scripts/05_down.sh deleted file mode 100644 index a1aab8e..0000000 --- a/src/alert/tests/scripts/05_down.sh +++ /dev/null @@ -1,21 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -cd "$(dirname "$0")/.." -compose_cmd="docker compose" -if ! $compose_cmd version >/dev/null 2>&1; then - if command -v docker-compose >/dev/null 2>&1; then compose_cmd="docker-compose"; else - echo "需要 Docker Compose，请安装后重试" >&2; exit 1; fi -fi -$compose_cmd -p alert-mvp down -echo "[OK] 已停止所有容器" - -# 清理private目录内容 -echo "[INFO] 清理private目录内容..." -cd "$(dirname "$0")/.." -if [ -d "private" ]; then - # 删除private目录及其所有内容 - rm -rf private - echo "[OK] 已清理private目录" -else - echo "[INFO] private目录不存在，无需清理" -fi diff --git a/src/alert/tests/scripts/e2e_test.sh b/src/alert/tests/scripts/e2e_test.sh deleted file mode 100644 index 3798b57..0000000 --- a/src/alert/tests/scripts/e2e_test.sh +++ /dev/null @@ -1,105 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail - -echo "=======================================" -echo "ARGUS Alert System End-to-End Test" -echo "=======================================" -echo "" - -# 记录测试开始时间 -test_start_time=$(date +%s) - -# 函数：等待服务就绪 -wait_for_services() { - echo "[INFO] Waiting for all services to be ready..." - local max_attempts=${SERVICE_WAIT_ATTEMPTS:-120} - local attempt=1 - - while [ $attempt -le $max_attempts ]; do - if curl -fs http://localhost:9093/api/v2/status >/dev/null 2>&1; then - echo "[OK] All services are ready!" - return 0 - fi - echo " Waiting for services... ($attempt/$max_attempts)" - sleep 5 - ((attempt++)) - done - - echo "[ERROR] Services not ready after $max_attempts attempts" - return 1 -} - -# 函数：显示测试步骤 -show_step() { - echo "" - echo "🔄 Step $1: $2" - echo "----------------------------------------" -} - -# 函数：验证步骤结果 -verify_step() { - if [ $? -eq 0 ]; then - echo "✅ $1 - SUCCESS" - else - echo "❌ $1 - FAILED" - exit 1 - fi -} - -# 开始端到端测试 -show_step "1" "Bootstrap - Initialize environment" -./scripts/01_bootstrap.sh -verify_step "Bootstrap" - -show_step "2" "Startup - Start all services" -./scripts/02_up.sh -verify_step "Service startup" - -# 等待服务完全就绪 -wait_for_services || exit 1 - -# 发送告警数据 -show_step "3" "Add alerts - Send test alerts to Alertmanager" -./scripts/03_alertmanager_add_alert.sh -verify_step "Send test alerts" - -# 查询告警数据 -show_step "4" "Verify data - Query Alertmanager" -./scripts/04_query_alerts.sh -verify_step "Data verification" - - -# 检查服务健康状态 -show_step "Health" "Check service health" -echo "[INFO] Checking service health..." - -# 检查 Alertmanager 状态 -if curl -fs "http://localhost:9093/api/v2/status" >/dev/null 2>&1; then - am_status="available" - echo "✅ Alertmanager status: $am_status" -else - am_status="unavailable" - echo "⚠️ Alertmanager status: $am_status" -fi -verify_step "Service health check" - -# 清理环境 -show_step "5" "Cleanup - Stop all services" -./scripts/05_down.sh -verify_step "Service cleanup" - -# 计算总测试时间 -test_end_time=$(date +%s) -total_time=$((test_end_time - test_start_time)) - -echo "" -echo "=======================================" -echo "🎉 END-TO-END TEST COMPLETED SUCCESSFULLY!" -echo "=======================================" -echo "📊 Test Summary:" -echo " • Total time: ${total_time}s" -echo " • Alertmanager status: $am_status" -echo " • All services started and stopped successfully" -echo "" -echo "✅ The ARGUS Alert system is working correctly!" -echo "" diff --git a/src/alert/tests/scripts/verify_alertmanager.sh b/src/alert/tests/scripts/verify_alertmanager.sh new file mode 100644 index 0000000..db8d3be --- /dev/null +++ b/src/alert/tests/scripts/verify_alertmanager.sh @@ -0,0 +1,113 @@ +#!/bin/bash +# verify_alertmanager.sh +# 用于部署后验证 Prometheus 与 Alertmanager 通信链路是否正常 + +set -euo pipefail + +#============================= +# 基础配置 +#============================= +PROM_URL="${PROM_URL:-http://prom.metric.argus.com:9090}" +ALERT_URL="${ALERT_URL:-http://alertmanager.alert.argus.com:9093}" +# TODO: 根据实际部署环境调整规则目录 +DATA_ROOT="${DATA_ROOT:-/private/argus}" +RULE_DIR = "$DATA_ROOT/metric/prometheus/rules" +TMP_RULE="/tmp/test_rule.yml" + +#============================= +# 辅助函数 +#============================= +GREEN="\033[32m"; RED="\033[31m"; YELLOW="\033[33m"; RESET="\033[0m" + +log_info() { echo -e "${YELLOW}[INFO]${RESET} $1"; } +log_success() { echo -e "${GREEN}[OK]${RESET} $1"; } +log_error() { echo -e "${RED}[ERROR]${RESET} $1"; } + +fail_exit() { log_error "$1"; exit 1; } + +#============================= +# Step 1: 检查 Alertmanager 是否可访问 +#============================= +log_info "检查 Alertmanager 状态..." +if curl -sSf "${ALERT_URL}/api/v2/status" >/dev/null 2>&1; then + log_success "Alertmanager 服务正常 (${ALERT_URL})" +else + fail_exit "无法访问 Alertmanager，请检查端口映射与容器状态。" +fi + +#============================= +# Step 2: 手动发送测试告警 +#============================= +log_info "发送手动测试告警..." +curl -s -XPOST "${ALERT_URL}/api/v2/alerts" -H "Content-Type: application/json" -d '[ + { + "labels": { + "alertname": "ManualTestAlert", + "severity": "info" + }, + "annotations": { + "summary": "This is a test alert from deploy verification" + }, + "startsAt": "'$(date -Iseconds)'" + } +]' >/dev/null && log_success "测试告警已成功发送到 Alertmanager" + +#============================= +# Step 3: 检查 Prometheus 配置中是否包含 Alertmanager +#============================= +log_info "检查 Prometheus 是否配置了 Alertmanager..." +if curl -s "${PROM_URL}/api/v1/status/config" | grep -q "alertmanagers"; then + log_success "Prometheus 已配置 Alertmanager 目标" +else + fail_exit "Prometheus 未配置 Alertmanager，请检查 prometheus.yml" +fi + +#============================= +# Step 4: 创建并加载测试告警规则 +#============================= +log_info "创建临时测试规则 ${TMP_RULE} ..." +cat < "${TMP_RULE}" +groups: +- name: deploy-verify-group + rules: + - alert: DeployVerifyAlert + expr: vector(1) + labels: + severity: warning + annotations: + summary: "Deployment verification alert" +EOF + +mkdir -p "${RULE_DIR}" +cp "${TMP_RULE}" "${RULE_DIR}/test_rule.yml" + +log_info "重载 Prometheus 以加载新规则..." +if curl -s -X POST "${PROM_URL}/-/reload" >/dev/null; then + log_success "Prometheus 已重载规则" +else + fail_exit "Prometheus reload 失败，请检查 API 可访问性。" +fi + +#============================= +# Step 5: 等待并验证 Alertmanager 是否收到告警 +#============================= +log_info "等待告警触发 (约5秒)..." +sleep 5 + +if curl -s "${ALERT_URL}/api/v2/alerts" | grep -q "DeployVerifyAlert"; then + log_success "Prometheus → Alertmanager 告警链路验证成功" +else + fail_exit "未在 Alertmanager 中检测到 DeployVerifyAlert，请检查网络或配置。" +fi + +#============================= +# Step 6: 清理测试规则 +#============================= +log_info "清理临时测试规则..." +rm -f "${RULE_DIR}/test_rule.yml" "${TMP_RULE}" + +curl -s -X POST "${PROM_URL}/-/reload" >/dev/null \ + && log_success "Prometheus 已清理验证规则" \ + || log_error "Prometheus reload 清理失败，请手动确认。" + +log_success "部署验证全部通过！Prometheus ↔ Alertmanager 通信正常。" diff --git a/src/sys/tests/README.md b/src/sys/tests/README.md index c166625..964663f 100644 --- a/src/sys/tests/README.md +++ b/src/sys/tests/README.md @@ -47,6 +47,8 @@ - `./scripts/11_metric_node_install.sh` 在 CPU 节点安装并验证端点 - `./scripts/12_metric_gpu_install.sh` 在 GPU 节点安装并等待 9100/9400 就绪（仅启用 GPU 时） - `./scripts/13_metric_verify.sh` 对 master/Prometheus/数据面/Grafana 做综合校验（含 GPU 时校验 dcgm 指标） + - `./scripts/15_alert_verify.sh` 对alertmanager进行校验 + - `./scripts/16_web_verify.sh` 对web页面进行校验综合校验。 - `./scripts/14_metric_cleanup.sh` 清理 FTP 产物 - `./scripts/09_down.sh` 回收容器、网络并清理 `private*/`、`tmp/` @@ -133,6 +135,13 @@ - `09_down.sh` - 目的：栈销毁与环境清理；必要时使用临时容器修正属主再删除 `private*` 目录 +- `15_alert_verify.sh` + - 目的：验证alertmanager的可用性、Prometheus到alertmanager的连通性。 + - 操作：在Prometheus中增加一个恒为真的告警规则，查看alertmanager是否收到该告警 +- `16_web_verify.sh` + - 目的：验证web页面是否可用。 + - 使用playwright分别验证各个模块的页面是否可用，以及符合预期。 + --- ### 常见问题与排查 diff --git a/src/sys/tests/scripts/00_e2e_test.sh b/src/sys/tests/scripts/00_e2e_test.sh index bbc9507..65104ef 100755 --- a/src/sys/tests/scripts/00_e2e_test.sh +++ b/src/sys/tests/scripts/00_e2e_test.sh @@ -55,6 +55,8 @@ SCRIPTS=( "11_metric_node_install.sh" "12_metric_gpu_install.sh" "13_metric_verify.sh" + "15_alert_verify.sh" + "16_web_verify.sh" ) # 如未禁用清理，则追加清理与下线步骤（保持原有顺序） diff --git a/src/sys/tests/scripts/15_alert_verify.sh b/src/sys/tests/scripts/15_alert_verify.sh new file mode 100644 index 0000000..808990d --- /dev/null +++ b/src/sys/tests/scripts/15_alert_verify.sh @@ -0,0 +1,103 @@ +#!/bin/bash +# verify_alertmanager.sh +# Verify the communication between Prometheus and Alertmanager after deployment + +set -euo pipefail + +echo "[INFO] Verifying Prometheus ↔ Alertmanager communication..." + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +TEST_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" +TMP_DIR="$TEST_ROOT/tmp" +mkdir -p "$TMP_DIR" + +PRIVATE_CORE="$TEST_ROOT/private" + +#============================= +# Load environment variables +#============================= +if [[ -f "$TEST_ROOT/.env" ]]; then + set -a; source "$TEST_ROOT/.env"; set +a +fi + +#============================= +# Basic configuration +#============================= +PROM_URL="http://localhost:${PROMETHEUS_PORT:-9090}" +ALERT_URL="http://localhost:${ALERTMANAGER_PORT:-9093}" +RULE_DIR="$PRIVATE_CORE/argus/metric/prometheus/rules" +TMP_RULE="$TMP_DIR/test_rule.yml" + +#============================= +# Helper functions +#============================= +GREEN="\033[32m"; RED="\033[31m"; YELLOW="\033[33m"; RESET="\033[0m" + +log_info() { echo -e "${YELLOW}[INFO]${RESET} $1"; } +log_success() { echo -e "${GREEN}[OK]${RESET} $1"; } +log_warn() { echo -e "${YELLOW}[WARN]${RESET} $1"; } +log_error() { echo -e "${RED}[ERROR]${RESET} $1"; } + +fail_exit() { log_error "$1"; exit 1; } + +#============================= +# Step 1: Check Alertmanager accessibility +#============================= +log_info "Checking Alertmanager status..." +if curl -sSf "${ALERT_URL}/api/v2/status" >/dev/null 2>&1; then + log_success "Alertmanager is reachable at ${ALERT_URL}" +else + fail_exit "Alertmanager is not reachable. Please check container or port mapping." +fi + +#============================= +# Step 2: Create and load a temporary test alert rule +#============================= +log_info "Creating temporary alert rule at ${TMP_RULE}..." +cat < "${TMP_RULE}" +groups: +- name: deploy-verify-group + rules: + - alert: DeployVerifyAlert + expr: vector(1) + labels: + severity: warning + annotations: + summary: "Deployment verification alert" +EOF + +mkdir -p "${RULE_DIR}" +cp "${TMP_RULE}" "${RULE_DIR}/test_rule.yml" + +log_info "Reloading Prometheus to apply the test rule..." +if curl -s -X POST "${PROM_URL}/-/reload" >/dev/null; then + log_success "Prometheus successfully reloaded rules" +else + fail_exit "Failed to reload Prometheus. Check API accessibility." +fi + +#============================= +# Step 3: Verify alert received by Alertmanager +#============================= +log_info "Waiting for alert propagation (~30 seconds)..." +sleep 30 + +if curl -s "${ALERT_URL}/api/v2/alerts" | grep -q "DeployVerifyAlert"; then + log_success "Prometheus → Alertmanager alert path verified successfully" +else + fail_exit "DeployVerifyAlert not found in Alertmanager. Check configuration or network." +fi + +#============================= +# Step 4: Cleanup test rule +#============================= +log_info "Cleaning up temporary alert rule..." +rm -f "${RULE_DIR}/test_rule.yml" "${TMP_RULE}" + +if curl -s -X POST "${PROM_URL}/-/reload" >/dev/null; then + log_success "Prometheus successfully reloaded after cleanup" +else + log_warn "Prometheus reload after cleanup failed. Please check manually." +fi + +log_success "Alertmanager verification completed successfully. Communication with Prometheus is healthy." diff --git a/src/sys/tests/scripts/16_web_verify.sh b/src/sys/tests/scripts/16_web_verify.sh new file mode 100644 index 0000000..dc64b05 --- /dev/null +++ b/src/sys/tests/scripts/16_web_verify.sh @@ -0,0 +1,115 @@ +#!/usr/bin/env bash +# verify-web-test.sh +# Verify frontend service availability and run Playwright end-to-end tests + +set -euo pipefail + +echo '[INFO] Verifying Web frontend...' + +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +TEST_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)" +REPO_ROOT="$(cd "$TEST_ROOT/../../.." && pwd)" +WEB_DIR="$REPO_ROOT/src/web" + +#============================= +# Load environment variables +#============================= +if [[ -f "$TEST_ROOT/.env" ]]; then + set -a; source "$TEST_ROOT/.env"; set +a +fi + +REPORT_DIR="$WEB_DIR/playwright-report" +FRONTEND_URL="http://localhost:${WEB_PROXY_PORT_8080:-8080}" +TIMEOUT=120 # max wait time (seconds) for frontend to be ready + +#============================= +# Helper functions +#============================= +GREEN="\033[32m"; RED="\033[31m"; YELLOW="\033[33m"; RESET="\033[0m" + +log_info() { echo -e "${YELLOW}[INFO]${RESET} $1"; } +log_success() { echo -e "${GREEN}[OK]${RESET} $1"; } +log_warn() { echo -e "${YELLOW}[WARN]${RESET} $1"; } +log_error() { echo -e "${RED}[ERROR]${RESET} $1"; } + +fail_exit() { log_error "$1"; exit 1; } + +#============================= +# Step 1: Wait for frontend service +#============================= +log_info "[1/4] Checking if frontend service is up (${FRONTEND_URL})..." + +for ((i=1; i<=TIMEOUT; i++)); do + STATUS_CODE=$(curl -s -o /dev/null -w "%{http_code}" "$FRONTEND_URL" || true) + if [[ "$STATUS_CODE" == "200" ]]; then + log_success "Frontend service is accessible at ${FRONTEND_URL}" + break + fi + sleep 2 + if [[ $i -eq $TIMEOUT ]]; then + fail_exit "Timeout waiting for frontend service to become ready (${TIMEOUT}s)." + fi +done + +#============================= +# Step 2: Run Playwright tests +#============================= +log_info "[2/4] Running Playwright automated tests in headless mode..." + +cd "$WEB_DIR" + +# Ensure dependencies installed +if [ ! -d "node_modules" ]; then + log_warn "Dependencies not found. Installing via npm ci..." + npm ci +fi + +log_info "Checking Playwright browsers..." +if [ -d "node_modules/playwright" ]; then + log_info "Found node_modules/playwright, checking if browsers are complete..." + # 使用 dry-run 确认浏览器是否完整 + if npx playwright install --dry-run | grep -q "All required browsers are installed"; then + log_info "All Playwright browsers are already installed, skipping installation." + exit 0 + else + log_info "Playwright browsers incomplete, installing..." + fi +else + log_info "Playwright browsers not found, installing..." + npx playwright install --with-deps > /dev/null +fi + +# Clean previous reports +rm -rf "$REPORT_DIR" + +# Run Playwright tests wrapped with xvfb-run to avoid GUI +set +e # temporarily disable exit-on-error +env BASE_URL="$FRONTEND_URL" xvfb-run --auto-servernum npx playwright test tests/playwright --reporter=list +TEST_RESULT=$? +set -e # re-enable strict mode + +#============================= +# Step 3: Check test results +#============================= +log_info "[3/4] Checking test results..." + +if [[ $TEST_RESULT -eq 0 ]]; then + log_success "All Playwright tests passed successfully." +else + log_error "Some Playwright tests failed. Please review the test report." +fi + +#============================= +# Step 4: Report generation +#============================= +log_info "[4/4] Checking Playwright report..." + +if [[ -d "$REPORT_DIR" ]]; then + log_success "Test report generated at: $REPORT_DIR" + echo "You can view it using:" + echo " npx playwright show-report" +else + log_warn "Report directory not found. Check Playwright execution logs." +fi + +log_success "Web frontend verify finished." diff --git a/src/web/.gitignore b/src/web/.gitignore index fbc6e04..c3702b0 100644 --- a/src/web/.gitignore +++ b/src/web/.gitignore @@ -1,6 +1,9 @@ # Node modules node_modules/ +# playwright report +playwright-report/ + # Build output /dist /build diff --git a/src/web/package-lock.json b/src/web/package-lock.json index eb76c2e..aab7fb4 100644 --- a/src/web/package-lock.json +++ b/src/web/package-lock.json @@ -20,6 +20,7 @@ }, "devDependencies": { "@eslint/js": "^9.33.0", + "@playwright/test": "^1.56.1", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", @@ -1231,6 +1232,22 @@ "react": "^18.x || ^19.x" } }, + "node_modules/@playwright/test": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz", + "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.56.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.34", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.34.tgz", @@ -2860,6 +2877,53 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz", + "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.56.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.6", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", diff --git a/src/web/package.json b/src/web/package.json index 0f50bf3..47d5bed 100644 --- a/src/web/package.json +++ b/src/web/package.json @@ -7,7 +7,9 @@ "dev": "vite", "build": "vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "test:web": "playwright test", + "test:web:report": "playwright show-report" }, "dependencies": { "@emotion/react": "^11.14.0", @@ -22,6 +24,7 @@ }, "devDependencies": { "@eslint/js": "^9.33.0", + "@playwright/test": "^1.56.1", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", diff --git a/src/web/playwright.config.ts b/src/web/playwright.config.ts new file mode 100644 index 0000000..135a519 --- /dev/null +++ b/src/web/playwright.config.ts @@ -0,0 +1,28 @@ +import { defineConfig } from '@playwright/test'; + +export default defineConfig({ + testDir: './tests', + testIgnore: ['**/src/assets/**', '**/*.png', '**/*.jpg', '**/*.svg'], + timeout: 60 * 1000, + retries: 1, + use: { + headless: true, + viewport: { width: 1280, height: 720 }, + ignoreHTTPSErrors: true, + screenshot: 'only-on-failure', + video: 'retain-on-failure', + launchOptions: { + args: [ + '--no-sandbox', + '--disable-gpu', + '--disable-dev-shm-usage', + '--disable-software-rasterizer', + '--headless=new' + ], + }, + }, + reporter: [ + ['list'], + ['html', { open: 'never', outputFolder: 'playwright-report' }] + ] +}); diff --git a/src/web/src/config/entries.js b/src/web/src/config/entries.js index 022f123..15af32e 100644 --- a/src/web/src/config/entries.js +++ b/src/web/src/config/entries.js @@ -1,6 +1,5 @@ import grafanaLogo from "../assets/grafana.png"; import prometheusLogo from "../assets/prometheus.png"; -import esLogo from "../assets/es.png"; import kibanaLogo from "../assets/kibana.png"; import { EXTERNAL_HOST } from "./api"; diff --git a/src/web/tests/data/etc/web.argus.com b/src/web/tests/data/etc/web.argus.com deleted file mode 100644 index f7395bb..0000000 --- a/src/web/tests/data/etc/web.argus.com +++ /dev/null @@ -1 +0,0 @@ -172.18.0.3 diff --git a/src/web/tests/playwright/alerts.spec.ts b/src/web/tests/playwright/alerts.spec.ts new file mode 100644 index 0000000..c42aa76 --- /dev/null +++ b/src/web/tests/playwright/alerts.spec.ts @@ -0,0 +1,87 @@ +import {test, expect} from "@playwright/test"; +import {BASE_URL} from './helpers/utils' + +test.describe("Alerts 页面功能测试", () => { + test.beforeEach(async ({page}) => { + await page.goto(`${BASE_URL}/alerts`); // 根据你实际路由调整 + }); + + test("页面加载并显示告警统计", async ({page}) => { + await expect(page.locator("text=告警详情").first()).toBeVisible(); + await expect(page.locator("text=总数").first()).toBeVisible(); + await expect(page.locator("text=严重").first()).toBeVisible(); + await expect(page.locator("text=警告").first()).toBeVisible(); + await expect(page.locator("text=信息").first()).toBeVisible(); + }); + + test("筛选功能验证", async ({ page }) => { + // 等待页面加载完成 + await page.waitForSelector("table"); + + // ========================== + // 1️⃣ 选择“严重性”= critical + // ========================== + const severitySelect = page.locator('label:has-text("严重性")').locator('..').locator('input'); + await severitySelect.click(); // 打开下拉菜单 + + const criticalOption = page.locator('[role="option"]:has-text("critical")'); + await criticalOption.waitFor({ state: 'visible', timeout: 5000 }); + await criticalOption.click(); + + // 验证选择已生效 + await expect(severitySelect).toHaveValue("critical"); + + // ========================== + // 2️⃣ 选择“状态”= active + // ========================== + const stateSelect = page.locator('label:has-text("状态")').locator('..').locator('input'); + await stateSelect.click(); + + const activeOption = page.locator('[role="option"]:has-text("Active")'); + await activeOption.waitFor({ state: 'visible', timeout: 5000 }); + await activeOption.click(); + + await expect(stateSelect).toHaveValue("Active"); + + // ========================== + // 4️⃣ 验证筛选结果（可选） + // ========================== + await page.waitForTimeout(1000); + const rows = page.locator('table tbody tr'); + const count = await rows.count(); + expect(count).toBeGreaterThanOrEqual(0); + }); + + + test("排序功能", async ({page}) => { + const severityHeader = page.locator("th:has-text('严重性') button").first(); + await severityHeader.click(); // 切换升序 + await severityHeader.click(); // 切换降序 + + const instanceHeader = page.locator("th:has-text('节点') button").first(); + await instanceHeader.click(); + await instanceHeader.click(); + }); + + test("分页功能", async ({page}) => { + const nextButton = page.locator("button:has-text('下一页')").first(); + const prevButton = page.locator("button:has-text('上一页')").first(); + + if (await nextButton.isEnabled()) { + await nextButton.click(); + await expect(prevButton).toBeEnabled(); + } + }); + + test("展开更多信息行", async ({page}) => { + const infoIcons = page.locator("table tbody tr td [title='显示/隐藏更多信息']"); + if (await infoIcons.count() > 0) { + await infoIcons.first().click(); + // 展开的详情行应出现 + const details = page.locator("table tbody tr >> text=alertname"); + const detailCount = await details.count(); + expect(detailCount).toBeGreaterThan(0); + } + }); + +}); diff --git a/src/web/tests/playwright/dashboard.spec.ts b/src/web/tests/playwright/dashboard.spec.ts new file mode 100644 index 0000000..72f6ae6 --- /dev/null +++ b/src/web/tests/playwright/dashboard.spec.ts @@ -0,0 +1,52 @@ +import {test, expect} from '@playwright/test'; +import {BASE_URL} from './helpers/utils' + +test.describe('Dashboard 页面测试', () => { + + test.beforeEach(async ({page}) => { + // 打开仪表盘页面 + await page.goto(`${BASE_URL}/dashboard`, {waitUntil: 'networkidle'}); + }); + + test('应能成功加载页面并显示标题', async ({page}) => { + await expect(page.locator('text=仪表盘').first()).toBeVisible(); + }); + + test('应显示节点健康状态卡片', async ({page}) => { + const healthCard = page.locator('text=节点健康状态'); + await expect(healthCard).toBeVisible(); + + // 检查环形图是否渲染 + const ring = page.locator('svg'); // RingProgress 是 SVG 渲染的 + const ringCount = await ring.count(); + expect(ringCount).toBeGreaterThan(0); + }); + + test('应显示告警统计信息', async ({page}) => { + const alertCard = page.locator('text=告警统计'); + await expect(alertCard).toBeVisible(); + + // 检查告警类别 + const labels = ['总数', '严重', '警告', '信息']; + for (const label of labels) { + await expect(page.locator(`text=${label}`).first()).toBeVisible(); + } + }); + + test('应正确渲染集群节点表格', async ({page}) => { + const tableHeaders = ['ID', '名称', '状态', '类型', '版本']; + for (const header of tableHeaders) { + await expect(page.locator(`th:has-text("${header}")`).first()).toBeVisible(); + } + + // 至少有一行节点数据 + const rows = await page.locator('tbody tr').count(); + expect(rows).toBeGreaterThan(0); + }); + + test('页面应无加载错误提示', async ({page}) => { + await expect(page.locator('text=加载中...')).toHaveCount(0); + await expect(page.locator('text=数据加载失败')).toHaveCount(0); + }); + +}); diff --git a/src/web/tests/playwright/helpers/entrycards-helpers.ts b/src/web/tests/playwright/helpers/entrycards-helpers.ts new file mode 100644 index 0000000..892d7cc --- /dev/null +++ b/src/web/tests/playwright/helpers/entrycards-helpers.ts @@ -0,0 +1,28 @@ +import { Page, expect } from '@playwright/test'; +import type { metricsEntries } from '../../../src/config/entries'; + +export async function testEntryCards( + page: Page, + entries: typeof metricsEntries, + checkLinkNavigation = false +) { + for (const entry of entries) { + // 先根据 label 找到包含该文本的卡片 + const card = page.locator(`.mantine-Card-root:has-text("${entry.label}")`); + await expect(card).toBeVisible({ timeout: 10000 }); + + // 检查卡片内部的链接，忽略端口号 + const link = card.locator('a'); + const href = await link.getAttribute('href'); + + // 正则：保留协议和 host，忽略端口号 + const expectedHrefPattern = entry.href.replace(/:(\d+)/, '(:\\d+)?'); + expect(href).toMatch(new RegExp(`^${expectedHrefPattern}$`)); + + // 检查图标 + const img = card.locator('img'); + await expect(img).toBeVisible(); + await expect(img).toHaveAttribute('src', /(\/assets\/.+|data:image\/png;base64,)/); + + } +} diff --git a/src/web/tests/playwright/helpers/testUtils.ts b/src/web/tests/playwright/helpers/testUtils.ts new file mode 100644 index 0000000..ba86afb --- /dev/null +++ b/src/web/tests/playwright/helpers/testUtils.ts @@ -0,0 +1,25 @@ +import { Page, expect } from '@playwright/test'; +import { BASE_URL } from './utils' +/** + * 通用函数：验证页面导航是否正确 + */ +export async function checkPage(page: Page, path: string, title: string) { + await page.goto(`${BASE_URL}`); + const menu = page.getByRole('link', { name: title }); + await expect(menu).toBeVisible(); + await menu.click(); + await expect(page).toHaveURL(new RegExp(`${path}`)); + await expect(page.locator('body')).toContainText(title); +} + +/** + * 检查页面是否存在 JS 错误 + */ +export async function noConsoleError(page: Page) { + const errors: string[] = []; + page.on('console', msg => { + if (msg.type() === 'error') errors.push(msg.text()); + }); + await page.waitForLoadState('networkidle'); + expect(errors, `发现 JS 错误: ${errors.join(', ')}`).toHaveLength(0); +} diff --git a/src/web/tests/playwright/helpers/utils.ts b/src/web/tests/playwright/helpers/utils.ts new file mode 100644 index 0000000..7e125c6 --- /dev/null +++ b/src/web/tests/playwright/helpers/utils.ts @@ -0,0 +1 @@ +export const BASE_URL = process.env.BASE_URL || "http://localhost:8080"; \ No newline at end of file diff --git a/src/web/tests/playwright/logs.spec.ts b/src/web/tests/playwright/logs.spec.ts new file mode 100644 index 0000000..35f0f00 --- /dev/null +++ b/src/web/tests/playwright/logs.spec.ts @@ -0,0 +1,17 @@ +import { test, expect } from '@playwright/test'; +import { logsEntries } from './test-entries'; +import { testEntryCards } from './helpers/entrycards-helpers'; +import { BASE_URL } from './helpers/utils'; + +test.describe('Logs Page', () => { + test('should render all log cards', async ({ page }) => { + await page.goto(`${BASE_URL}/logs`); + + // 等待标题可见 + const title = page.locator('h2', { hasText: '日志详情' }); + await expect(title).toBeVisible({ timeout: 10000 }); + + // 测试所有 log card + await testEntryCards(page, logsEntries); + }); +}); diff --git a/src/web/tests/playwright/metric.spec.ts b/src/web/tests/playwright/metric.spec.ts new file mode 100644 index 0000000..41bf955 --- /dev/null +++ b/src/web/tests/playwright/metric.spec.ts @@ -0,0 +1,15 @@ +import { test, expect } from '@playwright/test'; +import { metricsEntries } from './test-entries'; +import { testEntryCards } from './helpers/entrycards-helpers'; +import { BASE_URL } from './helpers/utils'; + +test.describe('Metrics Page', () => { + test('should render all metric cards', async ({ page }) => { + await page.goto(`${BASE_URL}/metrics`); + + const title = page.locator('h2', { hasText: '指标详情' }); + await expect(title).toBeVisible({ timeout: 10000 }); + + await testEntryCards(page, metricsEntries); + }); +}); diff --git a/src/web/tests/playwright/node-info.spec.ts b/src/web/tests/playwright/node-info.spec.ts new file mode 100644 index 0000000..c3b5983 --- /dev/null +++ b/src/web/tests/playwright/node-info.spec.ts @@ -0,0 +1,64 @@ +import {test, expect} from "@playwright/test"; +import {BASE_URL} from './helpers/utils' + +test.describe("节点信息页面 NodeInfo", () => { + test.beforeEach(async ({page}) => { + await page.goto(`${BASE_URL}/nodeInfo`); + }); + + test("页面标题应该正确显示", async ({page}) => { + const title = page.locator('h1,h2,h3:has-text("节点信息")').first(); + await title.waitFor({timeout: 10000}); + await expect(title).toBeVisible(); + }); + + test("节点表格应该加载数据", async ({page}) => { + const rows = page.locator("table tbody tr"); + await rows.first().waitFor({timeout: 10000}); + const count = await rows.count(); + expect(count).toBeGreaterThan(0); + }); + + test('节点详情测试', async ({page}) => { + const firstDetailBtn = page.locator('text=查看详情').first(); + await firstDetailBtn.waitFor({timeout: 10000}); + await firstDetailBtn.scrollIntoViewIfNeeded(); + await firstDetailBtn.click({force: true}); + + const drawer = page.locator('role=dialog[name="节点详情"]'); + await drawer.waitFor({timeout: 10000}); + await expect(drawer).toBeVisible(); + + for (const label of ['注册时间', '最近上报时间', '最后更新时间', '元数据信息', '健康信息', '配置信息', '标签信息']) { + const el = drawer.locator(`text=${label}`).first(); + await el.waitFor({timeout: 5000}); + await expect(el).toBeVisible(); + } + + }); + test("每个节点的 Grafana 按钮链接正确", async ({ page }) => { + await page.waitForSelector("table tbody tr", { timeout: 10000 }); + + // 查找 Grafana 链接（根据快照，它是 link 而非 button） + const grafanaLinks = page.getByRole("link", { name: "Grafana" }); + const count = await grafanaLinks.count(); + + // 如果没找到，保存上下文方便排查 + if (count === 0) { + const html = await page.content(); + console.error("❌ 未找到 Grafana 链接，页面 HTML 片段如下：\n", html.slice(0, 2000)); + } + + // 至少应该有一行节点 + expect(count).toBeGreaterThan(0); + + // 校验链接 href + for (let i = 0; i < count; i++) { + const link = grafanaLinks.nth(i); + await expect(link).toHaveAttribute( + "href", + /\/d\/node_gpu_metrics_by_hostname\/node-and-gpu-metrics-by-hostname\?var-hostname=/ + ); + } + }); +}); diff --git a/src/web/tests/playwright/test-entries.ts b/src/web/tests/playwright/test-entries.ts new file mode 100644 index 0000000..7332eb8 --- /dev/null +++ b/src/web/tests/playwright/test-entries.ts @@ -0,0 +1,14 @@ +import { EXTERNAL_HOST } from "../../src/config/api"; + +export const metricsEntries = [ + { label: "Grafana", href: EXTERNAL_HOST.GRAFANA_DASHBOARD, icon: '' }, + { label: "Prometheus", href: EXTERNAL_HOST.PROMETHEUS, icon: '' }, +]; + +export const logsEntries = [ + { label: "Kibana", href: EXTERNAL_HOST.KIBANA, icon: '' }, +]; + +export const alertsEntries = [ + { label: "Alertmanager", href: EXTERNAL_HOST.ALERTS, icon: '' }, +]; diff --git a/src/web/tests/playwright/web-pages.spec.ts b/src/web/tests/playwright/web-pages.spec.ts new file mode 100644 index 0000000..3b4e586 --- /dev/null +++ b/src/web/tests/playwright/web-pages.spec.ts @@ -0,0 +1,21 @@ +import { test } from '@playwright/test'; +import { checkPage, noConsoleError } from './helpers/testUtils'; +import { BASE_URL } from './helpers/utils' + +const pages = [ + { path: '/dashboard', title: '仪表盘' }, + { path: '/nodeInfo', title: '节点信息' }, + { path: '/metrics', title: '指标详情' }, + { path: '/logs', title: '日志详情' }, + { path: '/alerts', title: '告警详情' } +]; + +test.describe('Argus Web 页面可用性巡检', () => { + for (const { path, title } of pages) { + test(`${title} 页面加载验证`, async ({ page }) => { + await page.goto(`${BASE_URL}${path}`); + await checkPage(page, path, title); + await noConsoleError(page); + }); + } +}); diff --git a/src/web/tests/scripts/01_bootstrap.sh b/src/web/tests/scripts/01_bootstrap.sh deleted file mode 100644 index 2815fbb..0000000 --- a/src/web/tests/scripts/01_bootstrap.sh +++ /dev/null @@ -1,19 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -root="$(cd "$(dirname "${BASH_SOURCE[0]}")/../" && pwd)" -project_root="$(cd "$root/../../.." && pwd)" - -source "$project_root/scripts/common/build_user.sh" -load_build_user - -# 创建新的private目录结构 (基于argus目录结构) -echo "[INFO] Creating private directory structure for supervisor-based containers..." -mkdir -p "$root/private/argus/web" -mkdir -p "$root/private/argus/etc/" - -# 设置数据目录权限 -echo "[INFO] Setting permissions for data directories..." -chown -R "${ARGUS_BUILD_UID}:${ARGUS_BUILD_GID}" "$root/private/argus/web" 2>/dev/null || true -chown -R "${ARGUS_BUILD_UID}:${ARGUS_BUILD_GID}" "$root/private/argus/etc" 2>/dev/null || true - -echo "[INFO] Supervisor-based containers will manage their own scripts and configurations" diff --git a/src/web/tests/scripts/02_up.sh b/src/web/tests/scripts/02_up.sh deleted file mode 100644 index 51b7387..0000000 --- a/src/web/tests/scripts/02_up.sh +++ /dev/null @@ -1,10 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -cd "$(dirname "$0")/.." -compose_cmd="docker compose" -if ! $compose_cmd version >/dev/null 2>&1; then - if command -v docker-compose >/dev/null 2>&1; then compose_cmd="docker-compose"; else - echo "需要 Docker Compose，请安装后重试" >&2; exit 1; fi -fi -$compose_cmd -p alert-mvp up -d --remove-orphans -echo "[OK] 服务已启动：Web Frontend http://localhost:8080" diff --git a/src/web/tests/scripts/03_web_health_check.sh b/src/web/tests/scripts/03_web_health_check.sh deleted file mode 100644 index 17dfb07..0000000 --- a/src/web/tests/scripts/03_web_health_check.sh +++ /dev/null @@ -1,93 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail - -WEB_URL=${WEB_URL:-"http://localhost:8080"} -API_URL=${API_URL:-"http://master.argus.com/api/v1/master/nodes"} -TIMEOUT=10 - -GREEN="\033[1;32m" -RED="\033[1;31m" -YELLOW="\033[1;33m" -RESET="\033[0m" - -echo "[info] 测试 Argus Web 前端启动状态..." -echo "--------------------------------------------------" - -# 等待 web 前端可用 -attempt=1 -while (( attempt <= 10 )); do - if curl -fsS -m "$TIMEOUT" -o /dev/null "$WEB_URL"; then - echo "[ok] Web 前端已启动 (${attempt}/10)" - break - fi - echo "[..] 等待 Web 前端启动中 (${attempt}/10)" - sleep 3 - (( attempt++ )) -done - -if (( attempt > 10 )); then - echo "[err] Web 前端在 30 秒内未启动" - exit 1 -fi - -# 1. 检查首页可访问性 -echo "[test] 检查首页访问..." -if curl -fsS "$WEB_URL" -m "$TIMEOUT" | grep -q ""; then - echo -e "[${GREEN}ok${RESET}] 首页可访问" -else - echo -e "[${RED}err${RESET}] 首页访问失败" - exit 1 -fi - -# 2. 检查静态资源加载 -echo "[test] 检查静态资源..." -if curl -fsS "$WEB_URL/static/js" -m "$TIMEOUT" | grep -q "Cannot GET"; then - echo -e "[${YELLOW}warn${RESET}] 静态资源路径可能未正确配置" -else - echo -e "[${GREEN}ok${RESET}] 静态资源服务正常" -fi - -# 3. 检查前端路由兼容 -echo "[test] 检查 React Router 路由兼容..." -if curl -fsS "$WEB_URL/dashboard" -m "$TIMEOUT" | grep -q "<title>"; then - echo -e "[${GREEN}ok${RESET}] React Router 路由兼容正常" -else - echo -e "[${YELLOW}warn${RESET}] /dashboard 路由未正确返回 index.html" -fi - -# 4. 测试 API 代理访问 -echo "[test] 检查 API 代理..." -if curl -fsS "$API_URL" -m "$TIMEOUT" | grep -q "nodes"; then - echo -e "[${GREEN}ok${RESET}] API 代理成功" -else - echo -e "[${YELLOW}warn${RESET}] API 代理请求失败，请检查 Nginx proxy_pass" -fi - -# 5. 页面关键字验证 -echo "[test] 检查关键内容..." -if curl -fsS "$WEB_URL" | grep -q "Argus"; then - echo -e "[${GREEN}ok${RESET}] 页面包含关键字 'Argus'" -else - echo -e "[${YELLOW}warn${RESET}] 页面内容中未找到 'Argus'" -fi - -# 6. DNS 检查 -echo "[test] 检查 DNS 解析..." -if dig +short web.argus.com >/dev/null; then - echo -e "[${GREEN}ok${RESET}] 域名 web.argus.com 解析正常" -else - echo -e "[${YELLOW}warn${RESET}] 域名 web.argus.com 解析失败" -fi - -# 7. 响应时间测试 -echo "[test] 检查响应时间..." -response_time=$(curl -o /dev/null -s -w "%{time_total}\n" "$WEB_URL") -echo "[info] 响应时间: ${response_time}s" -if (( $(echo "$response_time > 2.0" | bc -l) )); then - echo -e "[${YELLOW}warn${RESET}] 响应时间较慢（>2s）" -else - echo -e "[${GREEN}ok${RESET}] 响应时间正常" -fi - -echo "--------------------------------------------------" -echo "[done] Web 前端测试完成 ✅" diff --git a/src/web/tests/scripts/04_down.sh b/src/web/tests/scripts/04_down.sh deleted file mode 100644 index a1aab8e..0000000 --- a/src/web/tests/scripts/04_down.sh +++ /dev/null @@ -1,21 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail -cd "$(dirname "$0")/.." -compose_cmd="docker compose" -if ! $compose_cmd version >/dev/null 2>&1; then - if command -v docker-compose >/dev/null 2>&1; then compose_cmd="docker-compose"; else - echo "需要 Docker Compose，请安装后重试" >&2; exit 1; fi -fi -$compose_cmd -p alert-mvp down -echo "[OK] 已停止所有容器" - -# 清理private目录内容 -echo "[INFO] 清理private目录内容..." -cd "$(dirname "$0")/.." -if [ -d "private" ]; then - # 删除private目录及其所有内容 - rm -rf private - echo "[OK] 已清理private目录" -else - echo "[INFO] private目录不存在，无需清理" -fi diff --git a/src/web/tests/scripts/e2e_test.sh b/src/web/tests/scripts/e2e_test.sh deleted file mode 100644 index b7f6cdf..0000000 --- a/src/web/tests/scripts/e2e_test.sh +++ /dev/null @@ -1,85 +0,0 @@ -#!/usr/bin/env bash -set -euo pipefail - -echo "=======================================" -echo "ARGUS Web System End-to-End Test" -echo "=======================================" -echo "" - -# 记录测试开始时间 -test_start_time=$(date +%s) - -# 函数：等待服务就绪 -wait_for_services() { - echo "[INFO] Waiting for all services to be ready..." - local max_attempts=${SERVICE_WAIT_ATTEMPTS:-120} - local attempt=1 - - while [ $attempt -le $max_attempts ]; do - if curl -fs http://localhost:8080 >/dev/null 2>&1; then - echo "[OK] All services are ready!" - return 0 - fi - echo " Waiting for services... ($attempt/$max_attempts)" - sleep 5 - ((attempt++)) - done - - echo "[ERROR] Services not ready after $max_attempts attempts" - return 1 -} - -# 函数：显示测试步骤 -show_step() { - echo "" - echo "🔄 Step $1: $2" - echo "----------------------------------------" -} - -# 函数：验证步骤结果 -verify_step() { - if [ $? -eq 0 ]; then - echo "✅ $1 - SUCCESS" - else - echo "❌ $1 - FAILED" - exit 1 - fi -} - -# 开始端到端测试 -show_step "1" "Bootstrap - Initialize environment" -./scripts/01_bootstrap.sh -verify_step "Bootstrap" - -show_step "2" "Startup - Start all services" -./scripts/02_up.sh -verify_step "Service startup" - -# 等待服务完全就绪 -wait_for_services || exit 1 - -# 测试前端页面 -show_step "3" "Web - Check frontend availability" -./scripts/03_web_health_check.sh -verify_step "Web frontend availability" - -# 清理环境 -show_step "4" "Cleanup - Stop all services" -./scripts/04_down.sh -verify_step "Service cleanup" - -# 计算总测试时间 -test_end_time=$(date +%s) -total_time=$((test_end_time - test_start_time)) - -echo "" -echo "=======================================" -echo "🎉 END-TO-END TEST COMPLETED SUCCESSFULLY!" -echo "=======================================" -echo "📊 Test Summary:" -echo " • Total time: ${total_time}s" -echo " • Alertmanager status: $am_status" -echo " • All services started and stopped successfully" -echo "" -echo "✅ The ARGUS Web system is working correctly!" -echo "" diff --git a/src/web/tests/scripts/verify-web-frontend.sh b/src/web/tests/scripts/verify-web-frontend.sh new file mode 100644 index 0000000..f9f64c0 --- /dev/null +++ b/src/web/tests/scripts/verify-web-frontend.sh @@ -0,0 +1,77 @@ +#!/usr/bin/env bash +set -euo pipefail + +# ----------------------------------------- +# Web 前端自动化验证脚本（部署后执行） +# ----------------------------------------- + +PROJECT_ROOT="$(dirname "$0")" +WEB_DIR="$PROJECT_ROOT" +REPORT_DIR="$WEB_DIR/playwright-report" +FRONTEND_URL="http://web.argus.com:8080" +TIMEOUT=120 # 最长等待前端启动时间（秒） + +echo "🔍 [1/4] 检查前端服务是否已启动 (${FRONTEND_URL}) ..." + +# 等待前端服务可访问 +for ((i=1; i<=$TIMEOUT; i++)); do + STATUS_CODE=$(curl -s -o /dev/null -w "%{http_code}" "$FRONTEND_URL" || true) + if [[ "$STATUS_CODE" == "200" ]]; then + echo "✅ 前端服务已启动并可访问" + break + fi + sleep 2 + if [ $i -eq $TIMEOUT ]; then + echo "❌ 等待前端启动超时 (${TIMEOUT}s)" + exit 1 + fi +done + +# ----------------------------------------- +# 2. 执行 Playwright 测试 +# ----------------------------------------- +echo "[2/4] 执行 Playwright 自动化测试..." + +cd "$WEB_DIR" + +# 确保依赖已安装 +if [ ! -d "node_modules" ]; then + echo "未检测到依赖，开始安装..." + npm ci +fi + +# 清理旧报告 +rm -rf "$REPORT_DIR" + +# 运行测试（带失败检测） +set +e # 暂时关闭自动退出，便于捕获测试结果 +npx playwright test tests/playwright --reporter=list,html +TEST_RESULT=$? +set -e # 恢复严格模式 + +# ----------------------------------------- +# 3. 检查测试结果 +# ----------------------------------------- +echo "[3/4] 检查测试结果..." + +if [ $TEST_RESULT -eq 0 ]; then + echo "[✓] 所有测试通过！" +else + echo "[X] 存在测试未通过，请查看报告。" +fi + +# ----------------------------------------- +# 4. 输出报告信息 +# ----------------------------------------- +echo "[4/4] 生成测试报告..." + +if [ -d "$REPORT_DIR" ]; then + echo "测试报告已生成：$REPORT_DIR" + echo "可执行以下命令查看详细报告：" + echo " npx playwright show-report" +else + echo "未生成报告目录，请检查执行日志。" +fi + +# 将测试结果作为退出码返回 +exit $TEST_RESULT