PingGlass - 现代化风格 ICMP / TCP 监控面板
# PingGlass - 现代化风格 ICMP / TCP 监控面板
相信各位有网络 ICMP 监控需求的话，或多或少都听过 **SmokePing** 这个项目。
SmokePing 是一个非常经典的开源网络性能监控工具，主要用于测量、记录以及可视化网络的 **延迟、丢包率和连通性**。从 2001 年发展至今，也算是经历了二十多年的风风雨雨。
我自己也用了 [SmokePing 很长一段时间](https://smokeping-time.samsam123.name.my/smokeping/?target=malaysia)，不过随着监控的 Targets 越来越多，逐渐发现一些使用上的痛点。
其中一个最直接的问题就是它的 UI 。
SmokePing 的 Web UI 还是比较偏向传统桌面网页，在手机上查看的时候体验并不是特别友好 —— 而我本人又特别喜欢直接拿手机看网络状况。
另外，SmokePing 的图表主要是在后端生成，而不是像现在比较常见的 Web Application 一样，由后端提供数据，再交给前端进行交互和渲染。
当 Targets 数量越来越多以后，无论是管理 Targets，还是日常查看大量监控图表，整体体验都会开始变得比较笨重。
于是就有了一个想法：
> **如果重新做一个现代版的 SmokePing，会是什么样子？**
然后坑就这样挖下去了 ~~这不是好事~~
于是有了：
## PingGlass
**PingGlass** 是一个现代化 **ICMP / TCP 网络延迟、丢包以及可用性监控面板**。
项目目前主要使用：
- **Laravel 11**
- **Vue 3**
- **Inertia.js**
- **Tailwind CSS**
- **Apache ECharts**
- **MySQL**
- **Redis**
监控部分：
- ICMP 使用 `fping`
- TCP 则直接通过 PHP Non-blocking Socket / `stream_select` 建立连接并计算连接延迟
整个系统就是一个 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 管理
---
## 监控设置
---
## 系统健康状态
---
# 关于部署
项目目前有完整的部署文档，包括：
- Ubuntu
- Nginx
- Supervisor
- Docker
- MySQL
- Redis
- Queue Worker
- Laravel Scheduler
- Existing Database Upgrade
- Large Installation Tuning
如果使用 **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**。
不管是：
- Bug
- UI / UX 建议
- 监控逻辑
- 性能
- 部署
- 新功能想法
都非常欢迎提出。
如果有人有兴趣一起开发，也非常欢迎直接开 **Issue / PR**。
如果觉得这个项目对你有一点用，也欢迎顺手给个 ⭐，算是给我继续填坑的一点动力 😂
---
**GitHub Repo**
[https://github.com/samleong123/pingglass](https://github.com/samleong123/pingglass)
**Demo / 已部署实例**
TIME MY / AS9930
[https://pingglass-time.samsam123.name.my/](https://pingglass-time.samsam123.name.my/)
感谢各位 🙏
---
原文链接：[点击查看](https://www.v2ex.com/t/1233682)
相信各位有网络 ICMP 监控需求的话，或多或少都听过 **SmokePing** 这个项目。
SmokePing 是一个非常经典的开源网络性能监控工具，主要用于测量、记录以及可视化网络的 **延迟、丢包率和连通性**。从 2001 年发展至今，也算是经历了二十多年的风风雨雨。
我自己也用了 [SmokePing 很长一段时间](https://smokeping-time.samsam123.name.my/smokeping/?target=malaysia)，不过随着监控的 Targets 越来越多，逐渐发现一些使用上的痛点。
其中一个最直接的问题就是它的 UI 。
SmokePing 的 Web UI 还是比较偏向传统桌面网页，在手机上查看的时候体验并不是特别友好 —— 而我本人又特别喜欢直接拿手机看网络状况。
另外，SmokePing 的图表主要是在后端生成，而不是像现在比较常见的 Web Application 一样，由后端提供数据，再交给前端进行交互和渲染。
当 Targets 数量越来越多以后，无论是管理 Targets，还是日常查看大量监控图表，整体体验都会开始变得比较笨重。
于是就有了一个想法：
> **如果重新做一个现代版的 SmokePing，会是什么样子？**
然后坑就这样挖下去了 ~~这不是好事~~
于是有了：
## PingGlass
**PingGlass** 是一个现代化 **ICMP / TCP 网络延迟、丢包以及可用性监控面板**。
项目目前主要使用：
- **Laravel 11**
- **Vue 3**
- **Inertia.js**
- **Tailwind CSS**
- **Apache ECharts**
- **MySQL**
- **Redis**
监控部分：
- ICMP 使用 `fping`
- TCP 则直接通过 PHP Non-blocking Socket / `stream_select` 建立连接并计算连接延迟
整个系统就是一个 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 管理
---
## 监控设置
---
## 系统健康状态
---
# 关于部署
项目目前有完整的部署文档，包括：
- Ubuntu
- Nginx
- Supervisor
- Docker
- MySQL
- Redis
- Queue Worker
- Laravel Scheduler
- Existing Database Upgrade
- Large Installation Tuning
如果使用 **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**。
不管是：
- Bug
- UI / UX 建议
- 监控逻辑
- 性能
- 部署
- 新功能想法
都非常欢迎提出。
如果有人有兴趣一起开发，也非常欢迎直接开 **Issue / PR**。
如果觉得这个项目对你有一点用，也欢迎顺手给个 ⭐，算是给我继续填坑的一点动力 😂
---
**GitHub Repo**
[https://github.com/samleong123/pingglass](https://github.com/samleong123/pingglass)
**Demo / 已部署实例**
TIME MY / AS9930
[https://pingglass-time.samsam123.name.my/](https://pingglass-time.samsam123.name.my/)
感谢各位 🙏
---
原文链接：[点击查看](https://www.v2ex.com/t/1233682)
评论
暂无评论。