isUpMap

在依赖众多 SaaS 平台和云服务的今天，快速掌握关键基础设施的健康状态至关重要。isUpMap 是一个开源的实时服务状态监控仪表盘，它以独特的股票地图风格矩形树图，直观展示全球 80+ 种热门互联网服务（如 GitHub, Slack, AWS, Google Workspace 等）的实时运行状态。基于 Cloudflare Worker 和 D1 数据库 构建，isUpMap 不仅轻量高效，更提供了丰富的交互功能与历史数据追踪能力。

核心亮点：可视化、实时、轻量

1. 股票地图风格热力图

• 直观布局：服务按类别（如“开发工具”、“云服务”、“社交”）分组为“板块”，矩形块大小反映服务重要性或关注度，颜色实时映射状态（绿色正常、红色故障、黄色警告）。
• 品牌标识：每个图块嵌入官方品牌 Logo，一眼即可识别目标服务。
• 动态交互：悬停或点击图块，即可查看详细状态、24小时/7天正常运行时间、组件汇总及活跃事件。

2. Serverless 实时架构

• 自动轮询：通过 Cloudflare Cron Trigger 定期轮询各服务的官方状态页面（Status Page），确保数据源头权威可靠。
• 持久化存储：将状态快照与事件日志（开启/关闭时间、持续时间）存入 Cloudflare D1 数据库，支持历史回溯与分析。
• 极速响应：前端静态渲染，后端无状态计算，全球边缘节点加速，加载速度极快。

3. 强大的交互与自定义

• 命令面板：支持模糊搜索服务名称，快速定位并执行查看详情、跳转状态页等操作。
• 本地自定义：用户可显示/隐藏特定服务或类别，启用“仅显示问题”过滤器，偏好设置保存于本地存储。
• 智能通知：状态变化时触发页面内提示，并支持开启浏览器桌面通知，确保不错过任何关键中断。
• 多主题适配：提供亮色/暗色主题切换，网站图标（Favicon）和标题动态反映整体健康状态，支持移动端深度链接与详情面板。

功能全景

技术架构

• 后端：Cloudflare Worker (JavaScript/TypeScript)
  • Cron Trigger：定时任务调度器。
  • Fetcher：并发请求各服务官方 Status Page API。
  • D1 Binding：写入状态快照与事件记录。
• 前端：静态 HTML/CSS/JS
  • Treemap Library：渲染交互式矩形树图。
  • Local Storage：管理用户偏好设置。
  • Notification API：处理桌面通知权限与推送。

适用场景

• 开发者与运维人员：快速概览依赖服务（如 GitHub, AWS, Vercel）的健康状态，辅助故障排查。
• SRE 团队：作为轻量级内部Dashboard，监控关键第三方 SLA 表现。
• 普通用户：当遇到网络问题时，快速确认是本地网络问题还是大规模服务中断。
• 前端爱好者：学习如何构建高性能、响应式的数据可视化 Dashboard。