优化：CI 健康度可视化看板（ECharts HTML） #706

Merged

xiaoxia merged 4 commits from feat/ci-health-dashboard-html into develop 2026-07-22 14:22:28 +08:00

Conversation 5 Commits 4 Files Changed 3

+546 -29

xiaoxia commented 2026-07-22 12:18:33 +08:00

Owner

Copy Link

Copy Source

功能说明

为 ci_dashboard.py 新增 --html 输出模式，生成自包含的静态 HTML 可视化看板页面（内嵌 ECharts CDN）。

变更内容

1. scripts/ci/ci_dashboard.py

• 新增 --html / --html-output 命令行参数
• 新增 generate_html() 函数，生成单文件 HTML 看板
• 包含 5 个 ECharts 图表：
  • 📈 CI 成功率趋势图（折线图）- 最近 N 天每天的成功率
  • ⏱️ 各 Workflow 耗时对比（柱状图）- 每个 workflow 的平均耗时
  • ❌ 失败原因分布（饼图）- 基础设施 vs 业务代码 vs 其他
  • 📋 各 Job 成功率排行（横向柱状图）- 每个 job 的成功率（最低15名）
  • 📊 每日 Run 数量趋势（面积图）- 最近 N 天的 run 数量
• 页面顶部核心指标卡片：总成功率、总 Run 数、平均耗时、基础设施故障率
• 卡片式布局，响应式设计，支持移动端
• 完全保留原有 Markdown 输出模式，向后兼容

2. scripts/ci/generate_ci_dashboard.sh（新增）

• 一键生成脚本：拉数据 + 生成 HTML + 输出路径
• 支持 --days 和 --output 参数
• 支持环境变量配置

3. .gitea/workflows/ci-health-daily.yml

• 在每日巡检 workflow 中新增 HTML 看板生成步骤
• 自动生成最近 7 天的可视化看板
• 看板生成失败不影响主流程

使用方式

# 生成 Markdown 报告（原有方式，不变）
python3 scripts/ci/ci_dashboard.py --days 7

# 生成 HTML 可视化看板
python3 scripts/ci/ci_dashboard.py --days 7 --html --html-output ci_dashboard.html

# 一键生成
bash scripts/ci/generate_ci_dashboard.sh --days 7 --output dashboard.html

操作限制

• 只修改了 scripts/ci/ 目录和 workflow 配置
• 未改动任何业务代码
• 原有 Markdown 输出模式完全兼容

## 功能说明 为 `ci_dashboard.py` 新增 `--html` 输出模式，生成自包含的静态 HTML 可视化看板页面（内嵌 ECharts CDN）。 ## 变更内容 ### 1. scripts/ci/ci_dashboard.py - 新增 `--html` / `--html-output` 命令行参数 - 新增 `generate_html()` 函数，生成单文件 HTML 看板 - 包含 5 个 ECharts 图表： - 📈 **CI 成功率趋势图**（折线图）- 最近 N 天每天的成功率 - ⏱️ **各 Workflow 耗时对比**（柱状图）- 每个 workflow 的平均耗时 - ❌ **失败原因分布**（饼图）- 基础设施 vs 业务代码 vs 其他 - 📋 **各 Job 成功率排行**（横向柱状图）- 每个 job 的成功率（最低15名） - 📊 **每日 Run 数量趋势**（面积图）- 最近 N 天的 run 数量 - 页面顶部核心指标卡片：总成功率、总 Run 数、平均耗时、基础设施故障率 - 卡片式布局，响应式设计，支持移动端 - 完全保留原有 Markdown 输出模式，向后兼容 ### 2. scripts/ci/generate_ci_dashboard.sh（新增） - 一键生成脚本：拉数据 + 生成 HTML + 输出路径 - 支持 `--days` 和 `--output` 参数 - 支持环境变量配置 ### 3. .gitea/workflows/ci-health-daily.yml - 在每日巡检 workflow 中新增 HTML 看板生成步骤 - 自动生成最近 7 天的可视化看板 - 看板生成失败不影响主流程 ## 使用方式 ```bash # 生成 Markdown 报告（原有方式，不变） python3 scripts/ci/ci_dashboard.py --days 7 # 生成 HTML 可视化看板 python3 scripts/ci/ci_dashboard.py --days 7 --html --html-output ci_dashboard.html # 一键生成 bash scripts/ci/generate_ci_dashboard.sh --days 7 --output dashboard.html ``` ## 操作限制 - 只修改了 `scripts/ci/` 目录和 workflow 配置 - 未改动任何业务代码 - 原有 Markdown 输出模式完全兼容

xiaoxia self-assigned this 2026-07-22 12:18:33 +08:00

xiaoxia added 3 commits 2026-07-22 12:18:33 +08:00

feat: CI 健康度可视化看板 - 新增 HTML 输出模式 ... 7ff87850d5

- 新增 --html / --html-output 参数
- 生成自包含 HTML 看板，内嵌 ECharts CDN
- 5个图表：成功率趋势、Workflow耗时、失败原因分布、Job成功率排行、Run数量趋势
- 顶部核心指标卡片：总成功率、总Run数、平均耗时、基础设施故障率
- 保留原有 Markdown 输出模式，完全向后兼容

feat: 新增 CI 看板一键生成脚本 fd47b1b563

feat: CI 每日健康巡检增加 HTML 看板生成步骤 ... 66bdff866c

- 在每日巡检中新增 Generate CI Dashboard HTML 步骤
- 自动生成最近 7 天的可视化看板
- 看板生成失败不影响主流程

gitea-actions bot commented 2026-07-22 12:20:17 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#706
预览链接	https://pr-706.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #706 | | 预览链接 | [https://pr-706.preview.xiaoxiajianji.com](https://pr-706.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia added 1 commit 2026-07-22 13:50:14 +08:00

style: fix black/isort formatting 7206bcbe50

auto-approve-bot approved these changes 2026-07-22 13:53:14 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-07-22 13:53:15 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot commented 2026-07-22 13:56:11 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #706

⚠️ 问题（1个需要修改）

1. scripts/ci/ci_dashboard.py generate_html函数：存在 XSS 安全漏洞风险。
   • 原因：代码通过 json.dumps``</script> 序列化数据后，直接使用 f-string 嵌入到 HTML 的 <script> 标签中（const DATA = {data_json};）。如果 Gitea 中的数据（如 Job 名称、Workflow 名称）包含 </script> 字符串，浏览器会提前闭合脚本标签，导致跨站脚本攻击（XSS）。
   • 后果：虽然 CI 数据通常由内部人员控制，但恶意的 Job 名称可能导致查看看板的人员被植入恶意脚本。
   • 建议：在将 JSON 字符串嵌入 HTML 前，对 JSON 字符串进行转义，将 </script> 替换为 <\/script>，或者使用 HTML 实体编码。例如：safe_json = data_json.replace('</script>', r'<\/script>')。

💡 建议（2个可选）

1. scripts/ci/ci_dashboard.py：外部 CDN 依赖可能导致内网环境看板不可用。

   • 说明：HTML 模板中使用了 cdn.jsdelivr.net 加载 ECharts。如果该看板部署在无法访问公网的内部服务器或 CI 环境中，图表将无法渲染。
   • 建议：考虑将 ECharts 库下载到本地仓库或私有 CDN，并在 HTML 中引用本地文件。

2. .gitea/workflows/ci-health-daily.yml：看板生成失败被静默忽略。

   • 说明：Step 中使用了 set +e 和 exit 0，且注释说明“永远成功，看板生成失败不影响主流程”。虽然这是为了防止非关键任务阻断 CI，但如果生成逻辑出错，可能很长一段时间内无人发现看板已失效。
   • 建议：保持当前的容错逻辑，但建议在 else 分支（生成失败时）增加一个告警通知（如调用企业微信/钉钉 Webhook），以便运维人员知晓看板生成异常。

---

✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-07-22 13:56:11 | 模型:}

## 代码审查结果 - PR #706 ### ⚠️ 问题（1个需要修改） 1. **scripts/ci/ci_dashboard.py generate_html函数**：存在 XSS 安全漏洞风险。 - **原因**：代码通过 `json.dumps``</script>` 序列化数据后，直接使用 f-string 嵌入到 HTML 的 `<script>` 标签中（`const DATA = {data_json};`）。如果 Gitea 中的数据（如 Job 名称、Workflow 名称）包含 `</script>` 字符串，浏览器会提前闭合脚本标签，导致跨站脚本攻击（XSS）。 - **后果**：虽然 CI 数据通常由内部人员控制，但恶意的 Job 名称可能导致查看看板的人员被植入恶意脚本。 - **建议**：在将 JSON 字符串嵌入 HTML 前，对 JSON 字符串进行转义，将 `</script>` 替换为 `<\/script>`，或者使用 HTML 实体编码。例如：`safe_json = data_json.replace('</script>', r'<\/script>')`。 ### 💡 建议（2个可选） 1. **scripts/ci/ci_dashboard.py**：外部 CDN 依赖可能导致内网环境看板不可用。 - **说明**：HTML 模板中使用了 `cdn.jsdelivr.net` 加载 ECharts。如果该看板部署在无法访问公网的内部服务器或 CI 环境中，图表将无法渲染。 - **建议**：考虑将 ECharts 库下载到本地仓库或私有 CDN，并在 HTML 中引用本地文件。 2. **.gitea/workflows/ci-health-daily.yml**：看板生成失败被静默忽略。 - **说明**：Step 中使用了 `set +e` 和 `exit 0`，且注释说明“永远成功，看板生成失败不影响主流程”。虽然这是为了防止非关键任务阻断 CI，但如果生成逻辑出错，可能很长一段时间内无人发现看板已失效。 - **建议**：保持当前的容错逻辑，但建议在 `else` 分支（生成失败时）增加一个告警通知（如调用企业微信/钉钉 Webhook），以便运维人员知晓看板生成异常。 --- ✅ 格式检查通过 | ❌ 逻辑审查需修改 | ⚠️ 建议关注性能 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-07-22 13:56:11 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit 0724ddfbf3 into develop 2026-07-22 14:22:28 +08:00

xiaoxia deleted branch feat/ci-health-dashboard-html 2026-07-22 14:22:28 +08:00

gitea-actions bot commented 2026-07-22 14:34:14 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #706 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #706 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees xiaoxia

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#706