django bootstrap 获取zabbix告警信息并展示

最新推荐文章于 2024-08-19 21:42:52 发布
最新推荐文章于 2024-08-19 21:42:52 发布
阅读量3.6k 收藏 4
点赞数 3
分类专栏： python js django 文章标签： django zabbix 告警 展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011085172/article/details/77480245
版权
python 同时被 3 个专栏收录
48 篇文章 0 订阅
订阅专栏
js
35 篇文章 0 订阅
订阅专栏
django
20 篇文章 0 订阅
订阅专栏

想在自己的页面里面把zabbix的告警信息展示出来，效果图如下：



下面来说说如何实现：

1、获取zabbix告警数据接口

这个在我之前的文章里说过，参考：http://blog.csdn.net/u011085172/article/details/77374879点击打开链接


2、css代码

.separator {
  height: 1px;
  border-bottom: 1px solid #FFFFFF !important;
  border-top: 1px solid #E7E7E7 !important;
  color: #555555 !important;
  margin: 10px 0 30px;
}

/*-----------------------------------------------------------------------------------*/
/*	Grids and Box
/*-----------------------------------------------------------------------------------*/
.box {
  clear: both;
  margin-top: 0px;
  margin-bottom: 25px;
  padding: 0px;
}
.box .box-title {
  margin-bottom: 15px;
  border-bottom: 1px solid #c4c4c4;
  min-height: 30px;
}
.box .box-title h4 {
  font-family: 'Open Sans';
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  margin-bottom: 7px;
  color: #555555;
}
.box .box-title h4 i {
  margin-right: 10px;
  color: #666;
}
.box .box-title .tools {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  float: right;
  clear: both;
  min-height: 30px;
}
.box .box-title .tools > a {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  color: #c4c4c4;
  margin-right: 5px;
}
.box .box-title .tools > a :hover {
  color: #ababab;
}
.box .box-title .tools .label {
  margin-right: 5px;
}
.box .box-title .items {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  margin-top: 7px;
  float: right;
  width: 40%;
  clear: both;
}
.box .box-title .items .progress {
  height: 7px !important;
}
.box .toolbox {
  padding: 5px;
  background-color: #f4f4f4;
  border-bottom: 1px solid #c4c4c4;
}
.box .toolbox.bottom {
  padding: 5px;
  background-color: #f4f4f4;
  border-top: 1px solid #c4c4c4;
  border-radius: 0 0 4px 4px;
  border-bottom: none;
}
.box .box-body.bg {
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #FFFFFF;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-bottom: 1px solid #c4c4c4;
  margin-top: -15px;
}
/* Sortable */
.box-placeholder {
  border: 1px dashed #c4c4c4;
  background-color: #eaeaea;
  border-radius: 4px;
}
/* Colors */
.box.border.orange {
  border: 1px solid #eea236;
}
.box.border.orange > .box-title {
  color: #FFFFFF !important;
  background-color: #f0ad4e;
  border-bottom: 1px solid #eea236;
}
.box.border.orange > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.orange > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.orange > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.orange > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.pink {
  border: 1px solid #d6497d;
}
.box.border.pink > .box-title {
  color: #FFFFFF !important;
  background-color: #db5e8c;
  border-bottom: 1px solid #d6497d;
}
.box.border.pink > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.pink > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.pink > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.pink > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.purple {
  border: 1px solid #9785c6;
}
.box.border.purple > .box-title {
  color: #FFFFFF !important;
  background-color: #a696ce;
  border-bottom: 1px solid #9785c6;
}
.box.border.purple > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.purple > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.purple > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.purple > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.inverse {
  border: 1px solid #484848;
}
.box.border.inverse > .box-title {
  color: #FFFFFF !important;
  background-color: #555555;
  border-bottom: 1px solid #484848;
}
.box.border.inverse > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.inverse > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.inverse > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.inverse > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.blue {
  border: 1px solid #5ea5bd;
}
.box.border.blue > .box-title {
  color: #FFFFFF !important;
  background-color: #70afc4;
  border-bottom: 1px solid #5ea5bd;
}
.box.border.blue > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.blue > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.blue > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.blue > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.red {
  border: 1px solid #d43f3a;
}
.box.border.red > .box-title {
  color: #FFFFFF !important;
  background-color: #d9534f;
  border-bottom: 1px solid #d43f3a;
}
.box.border.red > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.red > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.red > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.red > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.green {
  border: 1px solid #9db36a;
}
.box.border.green > .box-title {
  color: #FFFFFF !important;
  background-color: #a8bc7b;
  border-bottom: 1px solid #9db36a;
}
.box.border.green > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.green > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.green > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.green > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.border.primary {
  border: 1px solid #507aa4;
}
.box.border.primary > .box-title {
  color: #FFFFFF !important;
  background-color: #5e87b0;
  border-bottom: 1px solid #507aa4;
}
.box.border.primary > .box-title h4 {
  color: #FFFFFF !important;
}
.box.border.primary > .box-title h4 i {
  color: #FFFFFF !important;
}
.box.border.primary > .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.border.primary > .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
/* Box border */
.box.border,
.box.solid {
  border: 1px solid #c4c4c4;
  border-radius: 4px;
}
.box.border > .box-title,
.box.solid > .box-title {
  padding: 8px 10px 2px;
  border-bottom: 1px solid #c4c4c4;
  min-height: 30px;
  background-color: #dbdbdb;
  /* border-radius: 4px 4px 0 0; */

  margin-bottom: 0;
}
.box.border > .box-title h4,
.box.solid > .box-title h4 {
  display: inline-block;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  margin-bottom: 7px;
}
.box.border > .box-title h4 i,
.box.solid > .box-title h4 i {
  margin-right: 10px;
  color: #666;
}
.box.border > .box-title .tools,
.box.solid > .box-title .tools {
  display: inline-block;
  padding: 0;
  margin-bottom: 7px;
  float: right;
  clear: both;
  min-height: 30px;
}
.box.border > .box-title .tools > a,
.box.solid > .box-title .tools > a {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  color: #ababab;
  margin-right: 5px;
}
.box.border > .box-title .tools > a :hover,
.box.solid > .box-title .tools > a :hover {
  color: #919191;
}
.box.border .box-body,
.box.solid .box-body {
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background-color: #FFFFFF;
}
.box.border .box-body.big,
.box.solid .box-body.big {
  padding: 30px;
}
.box.border .box-title.big,
.box.solid .box-title.big {
  padding: 15px 10px 7px;
}
.box.border .box-title.small,
.box.solid .box-title.small {
  padding: 5px 10px 3px;
}
.box.border .box-title.small h4,
.box.solid .box-title.small h4 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 3px;
}
.box.border .box-title.small .tools > a,
.box.solid .box-title.small .tools > a {
  font-size: 12px;
  line-height: 12px;
}
.box.border.lite .box-title {
  background-color: #f4f4f4;
}
.box.border.lite .box-title h4 {
  color: #6f6f6f;
}
.box.solid.blue {
  border: 1px solid #507aa4;
}
.box.solid.blue .box-title {
  color: #FFFFFF !important;
  background-color: #5e87b0 !important;
  border-bottom: 1px solid #507aa4;
}
.box.solid.blue .box-title h4 {
  color: #FFFFFF !important;
}
.box.solid.blue .box-title h4 i {
  color: #FFFFFF !important;
}
.box.solid.blue .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.solid.blue .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.solid.blue .box-body {
  color: #FFFFFF;
  background-color: #5e87b0 !important;
}
.box.solid.grey {
  border: 1px solid #626262;
}
.box.solid.grey .box-title {
  color: #FFFFFF !important;
  background-color: #6f6f6f !important;
  border-bottom: 1px solid #626262;
}
.box.solid.grey .box-title h4 {
  color: #FFFFFF !important;
}
.box.solid.grey .box-title h4 i {
  color: #FFFFFF !important;
}
.box.solid.grey .box-title .tools > a {
  color: #f4f4f4 !important;
}
.box.solid.grey .box-title .tools > a :hover {
  color: #f4f4f4 !important;
  opacity: 0.6 !important;
}
.box.solid.grey .box-body {
  color: #FFFFFF;
  background-color: #6f6f6f !important;
}
.box:after,
.box:before {
  display: table;
  color: "";
}
/* Misc */
.list-group-header {
  background-color: #F9F9F9;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  color: #6f6f6f;
}

3、html 代码 

<!-- ALERTS -->
                <div class="col-md-6">
                    <div id="zabbixerror" class="alert alert-danger" style="display: none;">error</div>
                    <div class="box border red">
                        <div class="box-title">
                            <h4><i class="fa fa-exclamation"></i>ZABBIX Alerts</h4>
                            <div class="tools">
                                <a href="javascript:;" class="reload">
                                    <i class="fa fa-refresh"></i>
                                </a>
                                <a href="javascript:;" class="collapse">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a href="javascript:;" class="remove">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="box-body" id='zabbixalert'>
                            
                        </div>
                    </div>
                </div>
                <!-- /ALERTS -->
id 为zabbixerror的div标签，是用于显示错误信息的

后面只需要往id为zabbixalert的div标签下加代码看就可以了
以上就形成了效果图大概的框架了

4、获取zabbix数据展示

获取从接口中拿到数据，将数据往html中添加每一行代码

function getZabbixAlert(){
    $.get('/jguser/zabbixalert/',{},function(result){
        $("#zabbixalert").html('');
	//发生错误时显示错误信息
        if (result.code) {
            $("#zabbixerror").attr('display', 'none');          
        }else{
            $("#zabbixerror").html(result.errmsg);
            $("#zabbixerror").attr('display', 'block');
        }
        if (result.alertmsg.length>0) {
	   //对不同的告警级别用不同的颜色展示
            result.alertmsg.forEach(function(val,index,arr){   
                if (val.indexOf('警告')>=0) {
                    alerthtml='<div class="alert alert-block alert-warning fade in">'+
                                '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                                '<p>'+val+'</p>'+'</div>';
                    
                }else if (val.indexOf('严重')>=0) {
                    alerthtml='<div class="alert alert-block alert-danger fade in">'+
                                '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                                '<p>'+val+'</p>'+'</div>' ;                   
                }else if (val.indexOf('灾难')>=0) {
                    alerthtml='<div class="alert alert-block alert-danger fade in">'+
                                '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                                '<p>'+val+'</p>'+'</div>';
                }else if (val.indexOf('信息')>=0) {
                    alerthtml='<div class="alert alert-block alert-info fade in">'+
                                '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                                '<p>'+val+'</p>'+'</div>';
                }else{
                    alerthtml='<div class="alert alert-block alert-success fade in">'+
                                '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                                '<p>'+val+'</p>'+'</div>';                    
                }
                $('#zabbixalert').append(alerthtml) 
                
            });
        }else{
            alerthtml='<div class="alert alert-block alert-info fade in">'+
                        '<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>'+
                        '<p>目前没有告警！</p>'+'</div>' ;  
            $('#zabbixalert').append(alerthtml)              
        }        
    });    
}



5、django views.py中获取数据代码：

因为我有两个zabbix数据来源，所以代码中会有两次获取。如果只有一个，那就简单了

###zabbix alert数据
def getZabbixAlert(request):
	data = {'code':True,'errmsg':''}
	papi = pyzabbixAPI()
	#大陸zabbix
	loginhome = papi.loginHome()
	#如果获取数据发生错误
	if type(loginhome) == dict:
		data['errmsg'] = loginhome['msg']
		data['code'] = False
	else:		
		data['alertmsg'] = papi.getCurIssue(loginhome)
	#海外zabbix
	loginabroad = papi.loginAbroad()
	if type(loginabroad) == dict:
		data['errmsg'] = loginabroad['msg'] if data['errmsg']=='' else data['errmsg']+'\n'+loginabroad['msg']
		data['code'] = False
	else:
		data['alertmsg'] += papi.getCurIssue(loginabroad)
	return JsonResponse(data)

以上，就算整个代码了。最后，如果想隔段时间不断刷新告警信息，可以在html中加上刷新触发机制，如： 

$(function () { 
    getZabbixAlert();
    setInterval(getZabbixAlert,30000);
});



云中不知人
关注
专栏目录
Jumpserver堡垒机二次开发实战
悦分享
08-20 1985
基于该项目进行 jumpserver 二次开发，实现向zabbix推送jumpserver主机。
python实现监控数据界面_python 监控界面
weixin_39576336的博客
12-18 3409
MySQL MTOP - 开源 MySQL 企业监控系统MySQLMTOP是一个由Python+PHP开发的MySQL企业级监控系统。系统由Python实现多进程数据采集和告警，PHP实现WEB展示和管理。最重要是MySQL服务器无需安装任何Agent，只需在监控WEB界面配置相关数据库信息功能非常强大：可对上百台MySQL数据库的状态、连接数、Q...文章verdalee2019-07-2243...
qiuzhiquan:本网站采用Django框架，基于LNMP架构搭建，采用Zabbix进行主机运行状态监控
05-24
Django Web —— IT求职圈 开发时间：2020.09-2020.11 开发环境：Centos7、Django、Nginx、Mysql 项目展示：
CMDB机柜平台结合zabbix告警展示
weixin_33716557的博客
09-12 505
 最近看了刘天斯老师的机柜展示平台，非常绚丽，而且有大屏显示的话也是能够体现运维价值的，这里就说下我最近在做的CMDB平台的一些数据：CMDB数据： 机房，机柜，机柜电源，机柜位置，机房合同，合同到期时间，机房联系人。 服务器，CPU,硬盘，是否虚拟化，宿主机，raid类型，内存。 资产ID，上架日期，下架记录，服务器代理商，代理商联系方式，服务器到保日期。 IP地址，MAC地址，业务线，产品线，...
Bootstrap 警告框（Alert）插件
最新发布
2402_83140078的博客
08-19 796
警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。
Python编写从ZabbixAPI获取信息
weixin_30425949的博客
03-29 142
此脚本用Python3.6执行是OK的。 # -*- coding: utf-8 -*-import jsonimport urllib.request, urllib.error, urllib.parseclass ZabbixAPI: def __init__(self): self.__url = 'http://192.168.56.102/zabbix/api_j...
从zabbix的数据库获取数据
weixin_30291791的博客
08-04 1601
如何从Zabbix数据库中获取监控数据 做过Zabbix的同学都知道，Zabbix通过专用的Agent或者SNMP收集相关的监控数据，然后存储到数据库里面实时在前台展示。Zabbix监控数据主要分为以下两类： 历史数据：history相关表,从history_uint表里面可以查询到设备监控项目的最大，最小和平均值,即存储监控数据的原始数据。 趋势数据：trends相关...
Python 操作Zabbix API 获取ERROR级别告警信息并打印
品尝人生百态
11-27 1152
1.需求：有一个语音合成播报项目，要实时获取zabbix的ERROR级别以上告警信息，将该信息合成语音播报出去。(合成语音及播报已经完成) 2.现实：整理zabbix告警级别，将不太重要的告警放到ERROR级别以下，将重点信息设置为ERROR级别，然后通过zabbbix api获取。 3.简单实现: #基础版本：包含全部信息，如果group hosts 等信息。 #!/u...
基于python 3.9.13 + django 2.2.16 实现的运维 devops 管理系统。.zip
10-10
2. **监控与告警**：集成各种监控工具，如Nagios、Zabbix，实时展示系统性能指标，当达到预设阈值时触发告警。 3. **自动化部署**：通过集成CI/CD工具（如Jenkins、GitLab CI），实现代码的自动构建、测试和部署。 ...
毕业设计：网上预约实验室系统.zip
01-01
- **后端**：可能使用Java（Spring Boot）、Python（Django或Flask）或Node.js（Express）作为主要开发语言，构建RESTful API接口，处理数据请求与响应。 - **数据库**：MySQL或PostgreSQL等关系型数据库用于存储...
一个办公OA系统应该使用到的技术架构
04-03
4. Web框架：Spring、SpringMVC、SpringBoot、Django等。 5. 中间件：Nginx、Tomcat等。 6. 缓存技术：Memcached、Redis等。 7. 消息队列：RabbitMQ、Kafka等。 8. 容器技术：Docker等。 9. 安全技术：SSL/TLS...
python调用zabbix api接口实时展示数据
weixin_34061482的博客
05-20 1989
2019独角兽企业重金招聘Python工程师标准>>> ...
Django告警功能页面升级版
linxi7的博客
03-14 1251
本页面主要是实现以下功能：获取数据库中的实时人数，根据各个项目个性化的设置参数进行告警，包括发送告警对象、告警方式、告警阀值等等。 页面样式如下： 点击提交，进行确认： 提交更高之后，会收到服务器返回的数据展示： 视图函数如下： import os from django.http import HttpResponse from django.shortcuts import rende...
zabbix api获取当前存在告警
weixin_38367535的博客
09-30 3054
十一将至，有些监控告警虽然报了也没事，但是还是得有，这就出现了当不在电脑前看页面时可能有些重要的告警没有看到，所以想到放假期间定时发送当前存在的告警，就知道有没有重要的告警信息需要去解决一下了。 环境： zabbix 5.0版本 python 3.6版本 接口模块pyzabbix-1.0.0 代码： #!/usr/bin/python3 # coding=utf-8 # -*- coding: utf-8 -*- import json from pyzabbix import Z...
zabbix API应用
dingding5205205200的博客
12-01 177
1、模拟登录 curl -i -X POST -H 'Content-Type:application/json' -d '{"jsonrpc":"2.0","method":"user.login","params":{"user":"admin","password":"zabbix"},"auth":null,"id":0}' http://10.10.2.249/zabbi...
zabbix监控邮件报警功能二次开发
jackm1688的博客
06-21 3151
效果图查看,Action模板级一些其他介绍请查看链接http://blog.csdn.net/jackm1688/article/details/50907607本次代码属于更新配置报警媒介目录:AlertScriptsPath=/wls/zabbix/alertscripts (at zabbix_server.conf confiuration file) 脚本位置:/wls/zabbix/al
DJANGO查询ZABBIX6长时间的监控队列
lsysafe的博客
06-11 974
2.拿到队列信息后比对ZABBIX后台数据库,获取监控项的信息,并根据队列的nextcheck信息进筛选和数据重组,此时将监控队列的监控项,PROXY,AGENT,nextcheck关联起来。views.py调用了imports.getqueuelists()方法,这个方法调用了前面的chkzbqueue类来获取LIST返回给views.py里面的方法。1.登陆ZABBIX,获取KEY,再用这个KEY通过远程命令使用zabbix_get的方式拿到队列。django项目views.py处理请求的方法。
zabbix api监控php,Python和Zabbix API实现监控主机的增删改功能
weixin_39609620的博客
03-13 148
Zabbix api可以很方便的管理监控项，功能强大，非常适合二次开发。本文主要实现的功能是django资产管理的更新能够同步到Zabbix监控平台，统一平台功能，保证数据一致性。Zabbix APIZabbix API中主要用到host.create，host.delete，host.update，host.get和hostinterface.update方法。下面已create为例做下简单使...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值