tamakyi
d2aa0a1163
起因：核实「管理端在 Cloudflare 上是否有效」时发现一个更要紧的问题 —— Worker 完全没有 UptimeRobot 同步能力（runChecks 的探测目标只有 config.monitors）。 而实际配置是 dataFilter=uptimerobot，也就是说直接部署到 Worker 面板会是空的： 它探测 8 个本地条目，而真正在监控的 6 个 UR 目标它根本不认识。 ① Worker 支持 UptimeRobot（Step 1） - edge/cloudflare/uptimerobot.js（新增）：Workers 版 UR 只读数据源， 与 prober/node/lib/uptimerobot.js 同一套语义（状态映射/ratios 解析/故障原因） - runChecks 的探测集合扩展为「自建目标 + UR 镜像目标」；UR 目标只拉取不探测， 采用其状态并补齐本地 daily 分桶 - probeScope 与 dataFilter 解耦（与本地探针同语义）：config 范围不拉 UR， uptimerobot 范围不探测本地 - 同步失败时标记 sources.uptimerobot.ok=false 并保留上次数据， 绝不把目标判为离线或从面板消失；UR 侧删除的监控自动清理 - 快照新增 probeScope；UR 目标带 meta（面板区分自建/外部）与 uptimeRatios ② 管理端远程访问（Step 2） - settings.admin.allowRemote：探针默认只监听 127.0.0.1，显式打开才监听全网卡， 启动日志就此告警。这是 Cloudflare Tunnel 的安全前提（已实测两种行为） - edge/cloudflare/tunnel.yml（新增）：命名隧道配置，只放行 ^/(admin|api/admin/.*|assets/.*)$，其余 404 —— 不把公开面板一起挂到公网 ③ 前后端分离（Step 3） - Worker 侧 /admin 与 /api/admin/* 显式返回 403 + 指向文档的提示， 而非默默落到静态资源变成 404，确保边缘侧没有任何可写面 测试：新增 scripts/verify-worker.cjs（36 项）—— 把 Worker 以 data: URL 动态载入以 绕开 cloudflare:sockets，注入假 KV/静态资源/UptimeRobot 服务器， 不需要 wrangler 也不需要联网。全项目 8 套 310 项全部通过。 过程中抓到两个真 bug： 1. UR 同步失败的降级路径引用了不含 meta 的旧对象，导致 name/url 为 undefined、 UR 目标从面板上消失 2. stats.total 按 config.monitors.length 计数，在 probeScope=uptimerobot 时 与实际参与的目标数不符 另有一条测试夹具教训：内存版 KV 必须实现 get(key, 'json') 的类型参数 （真实 Workers KV 会自动反序列化），否则 state.monitors 恒为 undefined。
84 lines
3.7 KiB
HTML
84 lines
3.7 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="轻量级服务监控面板：HTTP 可用性与 TCP 端口探测">
|
||
<title>Shiroko Monitor</title>
|
||
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<link rel="stylesheet" href="assets/theme-shiroko.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="logo" aria-hidden="true"></span>
|
||
<div class="brand-text">
|
||
<h1 id="site-title">Shiroko Monitor</h1>
|
||
<p id="site-desc">轻量级服务监控面板</p>
|
||
</div>
|
||
</div>
|
||
<div class="summary">
|
||
<span id="overall-pill" class="pill pending">检测中…</span>
|
||
<div class="stats">
|
||
<div class="stat"><b id="stat-total">–</b><label>监控数</label></div>
|
||
<div class="stat stat-up"><b id="stat-up">–</b><label>在线</label></div>
|
||
<div class="stat stat-down"><b id="stat-down">–</b><label>离线</label></div>
|
||
<div class="stat"><b id="stat-latency">–</b><label>平均延迟</label></div>
|
||
<div class="stat"><b id="stat-uptime">–</b><label>90天可用率</label></div>
|
||
</div>
|
||
<div class="controls">
|
||
<div class="view-switch" id="view-switch" role="group" aria-label="视图切换"></div>
|
||
<button id="theme-btn" type="button" class="icon-btn" title="切换主题">
|
||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||
<circle cx="50" cy="50" r="31" fill="none" stroke="currentColor" stroke-width="8"/>
|
||
<circle cx="50" cy="50" r="15" fill="none" stroke="currentColor" stroke-width="4" opacity="0.7"/>
|
||
<polygon points="46.4,4 53.6,4 51.2,15 48.8,15" fill="currentColor"/>
|
||
<polygon points="46.4,96 53.6,96 51.2,85 48.8,85" fill="currentColor"/>
|
||
<polygon points="4,46.4 4,53.6 15,51.2 15,48.8" fill="currentColor"/>
|
||
<polygon points="96,46.4 96,53.6 85,51.2 85,48.8" fill="currentColor"/>
|
||
</svg>
|
||
</button>
|
||
<button id="refresh-btn" type="button">刷新</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="group-tabs" id="group-tabs" aria-label="分组筛选"></nav>
|
||
|
||
<main class="grid" id="monitor-grid">
|
||
<div class="empty">正在加载监控配置…</div>
|
||
</main>
|
||
|
||
<!-- 最近事件：故障 / 恢复 / 证书提醒（含维护窗口内的事件） -->
|
||
<section class="events" id="events" hidden>
|
||
<div class="events-head">
|
||
<h2>最近事件</h2>
|
||
<span class="events-count" id="events-count"></span>
|
||
<button type="button" class="events-more" id="events-more" hidden>展开全部</button>
|
||
</div>
|
||
<div class="table-wrap events-wrap">
|
||
<table class="events-table">
|
||
<thead>
|
||
<tr><th>时间</th><th>类型</th><th>目标</th><th>详情</th></tr>
|
||
</thead>
|
||
<tbody id="events-list"></tbody>
|
||
</table>
|
||
</div>
|
||
<p class="events-empty" id="events-empty" hidden>暂无事件记录（故障、恢复与证书提醒会出现在这里）</p>
|
||
</section>
|
||
|
||
<footer class="footer">
|
||
<span id="source-badge" class="footer-item">数据源：–</span>
|
||
<span id="demo-chip" class="footer-item demo-chip" hidden>演示数据</span>
|
||
<span id="ur-chip" class="footer-item warn-chip" hidden>UptimeRobot 同步异常</span>
|
||
<span id="notify-badge" class="footer-item" hidden>通知 –</span>
|
||
<span id="updated-at" class="footer-item">–</span>
|
||
<span id="countdown" class="footer-item">–</span>
|
||
<span class="footer-item version">shiroko-monitor v0.12.1</span>
|
||
</footer>
|
||
|
||
<script type="module" src="assets/app.js"></script>
|
||
</body>
|
||
</html>
|