Zabbix Graphtrees 插件

Zabbix-Network-Weathermap 和 Graphtree for Zabbix 是 Zabbix Share上标了 Popular 的 3.0.x 版本的插件：

Graphtree项目地址：https://github.com/OneOaaS/graphtrees
我是直接在zabbix4.4上装的，所以新的版本会有一些问题。但是都能解决。 **主要功能：**简单说就是可以集中展示一类或一组图片。装完就能用，不用设置挺方便的。

安装步骤

安装在 zabbix-web 所在的服务器：

# 安装工具包  
$ yum install patch  
# 切换到准备部署的目录  
$ cd /usr/share/zabbix  
# 下载插件  
$ wget https://raw.githubusercontent.com/OneOaaS/graphtrees/master/graphtree3.2.x.patch  
# 在当前路径解压，部署  
$ patch  -Np0 < graphtree3.2.x.patch  
# 将文件夹权限的属主和属组改为web应用的账号  
$ chown -R apache:apache oneoaas 

然后还要去修改一下apache的配置文件（实际貌似不需要）：

#vi /etc/httpd/conf.d/zabbix.conf		
Alias /oneoaas /usr/share/zabbix/oneoaas		
Alias /zabbix /user/share/zabbix	

加上上面第一行的配置，第二行是原本就有的配置。
这个实际用下来发现不用改。项目访问的url是 127.0.0.1/zabbix/oneoaas 。这个地址可以直接通过 Alias /zabbix 就访问到了。
而 Alias /oneoaas 这条配置加上之后，是可以通过 127.0.0.1/oneoaas 来访问项目。实际不是通过这个url来访问的。所以这个apache的配置不用加。

不用重启
无论是项目的部署，还是apache配置的修改，都不用重启任何服务，直接就生效了。

卸载插件
使用patch的好处是，如果需要卸载，可以使用 -R --reverse 选项，就把之前创建的文件给清理掉，并且把修改的文件恢复回来（修改文件会创建一个备份，此时就是把新文件给清理掉，把备份文件的名字改回来）：

$ patch  -Rp0 < graphtree3.2.x.patch

效果展示

安装完成后，无需重启，马上就生效了。登录zabbix主页查看，菜单上多了一个Graphtree：

进入项目后，可以自动获取到主机和主机组的信息，在左上角：

点击主机组，可以查看所有主机组的的图像。
点击主机，可以查看主机上所有图像。
勾选要展示的主机,，搜索框输入要搜索的关键字，可以筛选展示需要的图像：

页面修改

左上角的项目图标，点击会连到项目公司的主页，而不是Zabbix首页，经常点错很不方便。可以把连接改掉，要改图标也是可以的。
另外页脚的内容如果看着不喜欢也能删掉，不过这个在下面不太影响使用。
就是修个这个文件 oneoaas/templates/graphtree/graphtree.tpl ，懂点 html 就明白了，具体就略过了。

部分图片加载失败

这个是生产环境上出现的问题。一个页面上一次加载的大量图片中，总有一些显示的叉叉，这个是前端加载图片失败的结果。

客户端手动解决

在加载失败的图片上，鼠标右键 -> 显示图片。就是手动发起再次请求资源，图片就能显示出来。 不是所有的浏览器都有这个功能的，而且每次都要一张张把加载失败的图片手动请求一遍也很麻烦。所以这并不是最终解决的办法，但是至少找到了一个前端解决的途径。之后就是通过代码来让这个操作自动执行。

修改前端代码解决

为img标签加上onerror事件，然后在通过onerror的函数来重新加载图片。 修改标签 在原来的标签的基础上，加一个onerror事件，再加一个又来记录重试次数的变量retry：

//'<img src="../'+ handle +'?graphid='+ ctx.graphid +'&width=520&height=260&stime='+timeline.stime+'&period='+timeline.period+'">'
'<img src="../'+ handle +'?graphid='+ ctx.graphid +'&width=520&height=260&stime='+timeline.stime+'&period='+timeline.period+'" retry=0 onerror="graph.imgretry(this);">'

重试函数 编写进行重试的函数 graph.imgretr 。
加上重试次数的限制，如果多次重试后仍然失败，则不会无限的重试下去。 重试之前加上一个等待时间，并且时间随机。这样不会所有失败的图片再在同一时间向服务器同时发起请求。

无法修改时间

生成的图片只能是最近一小时（最近1小时是默认的时间区间选择范围），要选定时间无效。

原因分析

这个插件是为3.x的zabbix做的，果然在4.x版本就不能用了。不过也能解决。 具体原因是请求的url参数使用的是stime(开始时间的时间抽)和period(持续的秒数)。
新版本变成了from(起始时间的字符串)和to(结束时间的字符串)，另外还要加上profileIdx=web.graphs.filter

tmp_a.append(
        //'<img src="../'+ handle +'?graphid='+ ctx.graphid +'&width=520&height=260&stime='+timeline.stime+'&period='+timeline.period+'">'
        '<img src="../'+ handle +'?graphid='+ ctx.graphid +
        '&width=520&height=260&from='+ encodeURIComponent(starttime) +'&to='+ encodeURIComponent(endtime) +
        '&profileIdx=web.graphs.filter" retry=0 onerror="graph.imgretry(this);">'
);

这里主要展示参数的差别，完整的代码修改见下一节。

修改的代码部分

包括了上面2个问题完整的修改。 要修改的文件是 oneoaas/templates/graphtree/graphtree.tpl ，这个文件。
修改的部分代码：

var graph = {
    // 省略graph中的其他代码
		
    // 自定义图片加载失败的重试方法
    imgretry:function(x){
        var retry = $(x).attr('retry');
        if(retry < 3){
            retry++;
            var rand = parseInt(Math.random() * 1000 + 300)  // 随机等待[300,1300)ms
            //console.log(rand)
            $(x).attr('retry', retry);
            setTimeout(function(){
                x.src = $(x).attr('src');
            }, rand);
        }else{
            x.onerror = null;
        }
    },

    makeGraph:function(data){
        // 省略graph.makeGraph中的其他代码

        // 追加时间戳转日期时间的处理
        if(timeline.etime == ''){
            timeline.etime = parseInt(timeline.stime) + parseInt(timeline.period)
        }
        var timezone = +8
        var starttime = $.myTime.UnixToDate(timeline.stime, true, timezone)
        var endtime = $.myTime.UnixToDate(timeline.etime, true, timezone)

        graph.selector.children().remove();
        jQuery.each(data.content.graphs,function(idx,ctx){
            //var tmp_a = jQuery('<a rel="nofollow" class="graph_img" href="../charts.php?graphid='+ctx.graphid+'&stime='+timeline.stime+'&period='+timeline.period+'"></a>');
            var tmp_a = jQuery('<a rel="nofollow" class="graph_img" ' +
                'href="../charts.php?graphid='+ctx.graphid+'&from='+ encodeURIComponent(starttime) +'&to='+encodeURIComponent(endtime)+'"></a>');
            var handle = 'chart2.php';
            if(ctx.graphtype ==2 || ctx.graphtype == 3){
                handle = 'chart6.php';
            }
            tmp_a.append(
                    //'<img src="../'+ handle +'?graphid='+ ctx.graphid +'&width=520&height=260&stime='+timeline.stime+'&period='+timeline.period+'">'
                    '<img src="../'+ handle +'?graphid='+ ctx.graphid +
                    '&width=520&height=260&from='+ encodeURIComponent(starttime) +'&to='+ encodeURIComponent(endtime) +
                    '&profileIdx=web.graphs.filter" retry=0 onerror="graph.imgretry(this);">'
            );
            graph.selector.append(tmp_a);
        });
				
        // 省略graph.makeGraph中的其他代码
    };
    // 省略graph中的其他代码
};

重新加载图片之前，等待的时间还算是比较长的，能明显感觉再图片有过加载失败，然后重启后再刷出来的。正好可以验证下效果。之后可以在适当的对等待的时间进行调整。

未登录时隐藏菜单

为登录的账号也是可以浏览仪表盘的，并且也能看到Graphtree的菜单项。
但是点击后是进不去的，并且应该会弹到错误页面，或者是apache默认的首页。并且这个页面一般都是静态页面，会被缓存。

页面被缓存的问题

页面被缓存了，即使你之后登陆了，再尝试进入，也是继续给你之前缓存的页面。两个办法解决：
**方法一：**关闭浏览器，再打开，这类缓存的内容就没了。
**方法二：**使用浏览器的清除历史记录，只需要清除“Cookie和保存的网站数据”就可以了。
推荐还是方法一吧，简单点。

隐藏菜单项

彻底防止未登录而误点的办法就是把菜单项隐藏掉。具体如下:

$ grep -C2 Graphtree zabbix/include/menu.inc.php      
                                [
                                        'url' => 'oneoaas/graphtree.php',
                                        'label' => _('Graphtree'),
                                        'user_type' => USER_TYPE_ZABBIX_ADMIN
                                ],

最后一行的user_type是新增的代码，注意上一行的结尾加上逗号。账号类型可以换成别的试试。

弹出登录提醒

这个问题我暂时没能力解决。
虽然隐藏了菜单，但是还是不能防止其他办法尝试进入页面。比如直接通过url访问。
如果尝试进入没有权限的页面，zabbix也会返回一个警告，并且可以点击login跳转到登录页面。
这是通过调用zabbix/include/func.inc.php里的access_deny函数实现的。
接下来的步骤应该是在graphtree项目的php文件里调用这个函数。这步我卡住做不下去了。