PingGlass - 现代化风格 ICMP / TCP 监控面板

8 月 11 日
 samsam123

PingGlass - 现代化风格 ICMP / TCP 监控面板

相信各位有网络 ICMP 监控需求的话,或多或少都听过 SmokePing 这个项目。

SmokePing 是一个非常经典的开源网络性能监控工具,主要用于测量、记录以及可视化网络的 延迟、丢包率和连通性。从 2001 年发展至今,也算是经历了二十多年的风风雨雨。

我自己也用了 SmokePing 很长一段时间,不过随着监控的 Targets 越来越多,逐渐发现一些使用上的痛点。

其中一个最直接的问题就是它的 UI 。

SmokePing 的 Web UI 还是比较偏向传统桌面网页,在手机上查看的时候体验并不是特别友好 —— 而我本人又特别喜欢直接拿手机看网络状况。

另外,SmokePing 的图表主要是在后端生成,而不是像现在比较常见的 Web Application 一样,由后端提供数据,再交给前端进行交互和渲染。

当 Targets 数量越来越多以后,无论是管理 Targets ,还是日常查看大量监控图表,整体体验都会开始变得比较笨重。

于是就有了一个想法:

如果重新做一个现代版的 SmokePing ,会是什么样子?

然后坑就这样挖下去了 这不是好事

于是有了:

PingGlass

PingGlass 是一个现代化 ICMP / TCP 网络延迟、丢包以及可用性监控面板。

项目目前主要使用:

监控部分:

整个系统就是一个 Laravel ,不需要额外再跑一个独立的 Probe 。


目前的一些功能 / 亮点

  1. 支持 ICMP / TCP Monitoring

    每个 Target 都可以独立选择:

    • ICMP
    • TCP
    • ICMP + TCP

    TCP Target 可以自行指定端口。

  2. 使用 fping 进行 ICMP Probe

    PingGlass 会使用 fping 批量 Probe Targets ,并保存每一次 Sample 的结果,包括:

    • Median
    • Average
    • Min / Max
    • P10 / P25 / P75 / P90 / P95
    • Standard Deviation
    • Packet Loss
  3. 并发 TCP Probe

    TCP 监控使用 PHP Non-blocking Socket + stream_select。

    同一个 Probe Chunk 内的 Targets 会并发建立 TCP Connection ,而不是一个一个慢慢等 Timeout 。

  4. 现代化 Target / Category 管理

    不需要再手动修改配置文件然后重载。

    可以直接从管理员后台:

    • 新增 / 修改 / 删除 Targets
    • 新增 Category
    • 修改 ICMP / TCP
    • 修改 TCP Port
    • 修改 Probe Interval
    • 调整 Threshold
    • 调整公开 / 隐藏状态
  5. 支持不同 Probe 间隔时间

    可以设置全局 Probe 间隔时间,也可以针对单独 Target 覆写。

    目前支持:

    1 / 2 / 5 / 10 / 15 / 30 / 60 分钟

  6. 响应式 UI

    这个算是我当初开发 PingGlass 最主要的原因之一。

    Desktop / Tablet / Mobile 都做了 Responsive 。

    所以终于可以很舒服地躺在床上看 Packet Loss 了(?

  7. Latency / Packet Loss 历史数据

    可以查看:

    • 1 Hour
    • 6 Hours
    • 24 Hours
    • 7 Days
    • 30 Days
    • 6 Months
    • 1 Year

    后端同时会自动将 Raw Measurements Aggregate 成 5 Minutes 和 Hourly Rollup 。

  8. Online / Degraded / Down / Unknown 状态判断

    PingGlass 不只是单纯判断 Ping 得通还是 Ping 不通。

    会根据:

    • 丢包
    • 延迟中位数
    • ICMP 状态
    • TCP 状态
    • 连续失败次数
    • 连续恢复次数

    判断 Target 当前是:

    • 🟢 Online 在线
    • 🟡 Degraded 降级
    • 🔴 Down 下线
    • ⚪ Unknown 未知
  9. 故障跟踪

    Target 出现故障后会自动建立一个 Incident ,直到 Target 恢复为止。

    恢复以后也会自动记录:

    • 开始时间
    • 恢复时间
    • 故障原因
    • 持续时间
  10. 公共状态页面

    可以直接把 PingGlass 当成一个简单的公共网络状态页面。

    支持:

    • Global Status
    • Category Status
    • Target Status
    • 24 小时平均延迟
    • Incident History
  11. 可以隐藏 Target IP / Hostname

    有些 Probe 是想公开展示网络质量,但又不希望把实际 IP Address 公布出来。

    所以每个 Target 都可以单独决定:

    是否允许 Public Page 显示 Host / IP 。

  12. CSV 批量导入 Targets

    Targets 比较多的话,可以直接通过 CSV 批量导入。

  13. 系统健康状态

    Admin Panel 里面也做了一个系统健康页面,可以查看:

    • Database
    • Redis
    • Queue
    • Workers
    • Scheduler
    • Failed Jobs
    • fping
    • TCP Connectivity
    • Probe Cycle

    等运行状态。

  14. Dark Mode 深色模式

    这应该属于现代 Web Application 的基本人权了。


一些截图

公共状态页面

可以快速查看整体网络状态、各个 Category 、Targets 以及过去 24 小时的延迟趋势。


监控页面

每个 Target 都有独立的详细监控页面,可以查看 ICMP / TCP 延迟、Packet Loss 、Percentile 以及历史数据。


Responsive UI

这也是我开发 PingGlass 最主要的动力之一。


故障跟踪


管理员后台


Target 管理


监控设置


系统健康状态


关于部署

项目目前有完整的部署文档,包括:

如果使用 1Panel 部署的话,请务必按照项目部署文档中的 1Panel 部署方式进行配置。

因为 Laravel 的 Queue Worker 、Scheduler 、Nginx Root Directory 等地方需要特别注意,不建议直接按照普通 PHP 网站的方式一键部署。


接下来准备做什么?

PingGlass 目前还属于一个比较早期的版本,肯定还有非常多可以改善的地方。

根据目前收到的一些 Feedback ,下一版比较优先准备修改的是:

1. Latency + Packet Loss 合并到同一个 Chart

目前 Latency 和 Packet Loss 还是分开的。

之后准备改成更接近 SmokePing 的方式,把 Packet Loss 情况直接整合进 Latency Chart ,并通过不同颜色表示不同程度的丢包。

这样查看网络质量的时候会直观很多。

2. Master / Slave Architecture

这个也已经在 Roadmap 里面。

未来希望可以让一台 Master PingGlass 管理多个不同地区的 Probe Node 。

例如:

                Master
                  |
        ---------------------
        |         |         |
     Malaysia   Japan      US
      Probe     Probe     Probe

这样就可以从多个地区同时对同一个 Target 进行网络质量监控。

不过这个应该会在后几个版本才开始做。

先给未来的自己挖个坑。


最后

小弟不才,目前还在读大三,这个项目也是自己课余时间慢慢搓出来的。

这几个星期刚好又撞上考试,所以最近开发速度可能会稍微慢一点 :(

PingGlass 目前肯定还有很多做得不完善的地方,包括 UI 、Probe Architecture 、Chart Visualization 都还有继续改善的空间。

我不敢说这是一个能完全替代 SmokePing 的项目,但我希望它至少可以作为一个现代化的网络监控面板,给大家提供一个新的选择。

所以也想趁现在项目已经基本可以正常使用的时候拿出来给大家玩玩。

在此诚邀 V2EX 各位大佬体验一下 PingGlass。

不管是:

都非常欢迎提出。

如果有人有兴趣一起开发,也非常欢迎直接开 Issue / PR。

如果觉得这个项目对你有一点用,也欢迎顺手给个 ⭐,算是给我继续填坑的一点动力 😂


GitHub Repo

https://github.com/samleong123/pingglass

Demo / 已部署实例

TIME MY / AS9930

https://pingglass-time.samsam123.name.my/

感谢各位 🙏

3051 次点击
所在节点    程序员
19 条回复
nuII
8 月 12 日
支持一下,已 star ,看后面能不能用上
mm2x
8 月 12 日
看起来挺现代,但是感觉超级难用。smartping 还是一眼直观。
samsam123
8 月 12 日
@mm2x 您好,感谢您提出宝贵的意见,针对难用这个点我确实觉得有几点是比较麻烦的:
1. 部署 - 没有一键部署的套件,需要手动配置等,针对这个问题稍后会补上 Docker 镜像方便直接部署
2. UI 问题 - 如下图,目前第一版确实在查看 Packet Loss 的时候需要往下翻,没有 SmokePing / Smartping 直观,下一版会把 Latency + Packet Loss 合并到同一个 Chart 和 SmokePing 一样用颜色区分丢包
![]( )
3. 还有一个问题就是首页和 Category 页下面理论上和 SmokePing / Smartping 一样可以很直观看到每一个 Targets 的 Chart ,这一版也是没有引入,目前只放了 Average 和每一个 Target 当前状态+延迟. 过几版会寻求较好性能开销的处理方式
![]( )
非常感谢您的意见,如果还有什么问题也欢迎提出来!谢谢!
Godblessu
8 月 12 日
我觉得这种产品给个后台添加添加的很复杂,不如直接一个 yaml 文件配置来的方便,这种产品也不是服务普通人的
0xsui
8 月 12 日
依赖中间件太多了
BeautifulSoup
8 月 12 日
smokeping 一大特点是「轻」,20 块钱的 ARM 盒子一样跑,而且无需担心数据库缓存等问题。从这个角度来说,PingGlass 不一定总能作为替代品。
damichifan
8 月 12 日
很好,小白关注,希望能有小白一键部署之类的功能(当然我只有 Windows ),看看 nas 里面怎么弄了,有空研究下
samsam123
8 月 12 日
@damichifan 您好,已经有 PR for Docker 了,稍后会合并进来,用 Docker 部署就行
samsam123
8 月 12 日
@BeautifulSoup 对的,因为我开发的角度是从我目前部署环境出发的,我的想法是把他部署在常用的 Web 服务器里面,ARM 盒子这些我觉得性能开销确实有点大
samsam123
8 月 12 日
@Godblessu 主要是如果用手机管理 yaml 文件有点麻烦,所以干脆就做了后台添加 + CSV 导入了
ThirdFlame
8 月 12 日
smokeping 唯一的缺点就是不能动态增加目标,其他的够轻 显示够清晰

目前所有的折线图 都不能像 smokeping 一样同时清晰的把 延迟抖动、丢包率、平均延迟直观的显示出来
samsam123
8 月 12 日
@0xsui 主要是因为做了 CRUD 后台管理 + 想要用 Laravel 练练手 :)
ThirdFlame
8 月 12 日
对于 服务状态的检测 现在我用的 uptime kuma 分钟级别的监控 已经足够了。
对于 服务相应速度的检测 用的 smokeping ,有点就是直观
damichifan
8 月 12 日
@samsam123 好的,我有个成品 nas ,docker 功能没用过,我看看怎么弄这个玩意,挺有用的其实
ca2oh4
8 月 12 日
ai 时代了,用 Rust 重写一下吧。这样机顶盒也能用
damichifan
8 月 16 日
做为小白,折腾了俩小时,没配置成功,哎
damichifan
8 月 30 日
请教下,为何我在 Claude 指导下部署成功了,但只有一个监测点记录呢。Cloudflare DNS
1.1.1.1
damichifan
8 月 30 日
已经用 Claude 部署成功,感觉很不错,之前一直想买个 800+的优比特的路由器,现在省了
shum0412
6 天前
佬 TIME 的公网怎么弄的 现在不是默认都是 nat 的吗

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1233682

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX