Grafana-Zabbix插件在11.2版本升级后的告警面板显示异常问题分析

问题现象

Grafana升级至11.2版本后，Zabbix告警面板的显示样式出现严重异常。升级前整齐排列的告警卡片布局被破坏，变为难以阅读的垂直列表形式，严重影响了运维人员的日常监控效率。

技术背景

该问题源于Grafana 11.x版本对告警系统的重大架构调整。在11.0版本中，Grafana彻底移除了旧版告警系统（Legacy Alerting），这导致依赖旧版CSS样式的插件出现兼容性问题。Zabbix告警面板原本依赖的Flex布局样式在升级后丢失，使得前端渲染引擎无法正确解析面板布局。

根本原因分析

通过代码比对发现，缺失的关键CSS样式包括：

1. 告警列表容器.alert-rule-list的Flex布局定义
2. 告警卡片.alert-rule-item的尺寸和间距控制
3. 图标区域.alert-rule-item__icon的定位样式
4. 操作按钮.alert-list__btn的排列方式

这些样式原本属于Grafana旧版告警系统的视觉规范，在11.x版本重构时被移除，但Zabbix插件仍依赖这些样式定义。

临时解决方案

对于需要立即恢复功能的用户，可采用CSS注入方案：

1. 定位Grafana前端资源文件：

   • 深色主题：grafana/public/build/grafana.dark.*.css
   • 浅色主题：grafana/public/build/grafana.light.*.css

2. 在.alert-rule-item__body规则前添加以下压缩后的CSS代码：

.alert-rule-list{display:flex;flex-direction:row;flex-wrap:wrap...}

注意事项

1. 该方案属于临时修复，每次Grafana升级后需要重新应用
2. 直接修改构建文件可能影响后续升级流程
3. 生产环境建议通过自定义面板或CSS覆盖方式实现

长期建议

建议用户关注以下发展方向：

1. 等待插件作者发布适配新版Grafana的更新
2. 考虑迁移至Grafana原生告警系统
3. 开发自定义面板替代原有告警展示方式

该问题反映了中间件升级过程中常见的样式兼容性问题，建议企业在进行类似升级时做好充分的UI兼容性测试。对于关键监控系统，建议在测试环境验证后再进行生产环境部署。