查看博客目录
不写一行代码为 Zabbix 新增图形树功能
作为一名运维工程师，Zabbix 无论是功能还是灵活性都很强大。但在查看流量图时，你是否也曾怀念过 Cacti 那种简单直观的“图形树”浏览体验？
在原生 Zabbix 中，查看某个主机的多张图形，往往需要反复跳转，或者在一个长列表中寻找。它缺少一个可以快速切换主机的侧边栏，也没有“点击即看、拖拽即缩放”的交互体验。
为了解决这个问题，我使用 AI 开发了一个轻量级的 Zabbix 前端模块——Graph Tree（图形树）。
什么是 Graph Tree？
Zabbix 从 6.0 开始支持模块功能。Graph Tree 是一个为 Zabbix 6.x/7.x 设计的原生前端模块，不需要修改数据库，也不需要复杂配置，只需把项目文件拷贝到 Zabbix 前端的模块目录，即可在“监测”菜单下新增“图形树”功能。
它的核心目标只有一个：让查看监控图形变得更快、更直观。
核心亮点
1. 经典的左树右图布局
左侧展示主机组与主机的层级树，右侧展示图形。
- 点击左侧主机名，右侧立即加载该主机的所有图形。
- 侧边栏顶部支持搜索主机名。
- 右侧工具栏支持搜索图形名，例如输入网络设备接口名称即可快速筛选。
2. 交互体验升级
- 拖拽缩放：在任意图形上按住鼠标左键拖拽选择一个时间段，页面中的所有图形会自动缩放到该时间范围，适合排查故障波峰。
- 时间预设：内置最近 1 小时、12 小时、1 天、1 周等常用时间段，可以一键切换，无需手动选择日历。
3. 细节打磨
- 布局切换：支持 1 列和 2 列布局。大屏查看全景时使用 2 列，小屏查看细节时使用 1 列。
- 状态记忆：侧边栏展开状态和列布局会由浏览器自动记住，下次打开时可以恢复使用习惯。
4. 零侵入、易安装
这是一个纯前端模块，不修改 Zabbix 核心代码，也不改动数据库。卸载时删除对应模块目录即可。
如何安装？
1. 上传模块文件
将项目中的 graph_tree 文件夹上传到 Zabbix 前端服务器的模块目录。通常路径是：
/usr/share/zabbix/modules/
上传后的目录结构如下：
/usr/share/zabbix/modules/
└─ graph_tree/
├─ manifest.json
├─ Module.php
├─ actions/
└─ views/
2. 在 Zabbix 中启用模块
进入：
管理 → 常规 → 模块
点击“扫描目录”，看到 Graph Tree 模块后启用它。
3. 使用图形树
启用模块后，可以在“监测”菜单中看到“图形树”入口。
点击“图形树”即可开始使用。
获取项目源码
项目已发布在 Gitee：