Zabbix-Show,一个Vue版的Zabbix客户端

前言

为了实现一些统计需求,技术团队希望把Zabbix统计展示集成到后台管理中,为的是不仅能够显示服务器的状态,更是希望通过借助Zabbix自定义统计项,统计应用时时在线人数,一天访问总数,支付情况等。

本项目也可以作为VUE新手入门, 使用了VUE全家桶,以及ElementUI。

效果图

Zabbix API部分

Zabbix API原生支持跨域,可以直接使用Ajax请求。

思路分析:
1,开始肯定是连接zabbix服务器,鉴权通过获取token
2,用token获取服务器组,获取主机,获取Item(一系列可监控项,cpu,内存。。。)
3,然后在获取历史(就是这些item的历史数据)。

接口可以参考官方文档,以下就是Zabbix最重要的几个接口:

    user.login //登陆获取token,需要传入zabbix服务的用户名密码
    hostgroup.get //获取服务器组
    host.get //获取主机,需要传入hostgroup(服务器组)的id
    application.get //获取app,这个接口是对item的分类,可以不用,直接获取所有Item
    item.get //获取可监控项,(需要传入host的id)
    history.get //获取对应监控项的历史信息(需要传入item的id,及开始结束时间,以及数据类型)

集成Echarts

Echarts的使用方法:
1,引入js
2,需要使用什么项,就按照官方文档配置即可
官方文档

老规矩

注意:Demo里边的服务器配置暂时用localstorage保存在客户端
欢迎fork,star,commit
项目地址:
Github: https://github.com/Sailiy/zabbix-show
码云:https://git.oschina.net/fuckshit/zabbix-show

发表评论