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

2024-05-30 00:18
文章标签 django 展示 获取 bootstrap zabbix 告警信息

本文主要是介绍django bootstrap 获取zabbix告警信息并展示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

想在自己的页面里面把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()#大陸zabbixloginhome = papi.loginHome()
	#如果获取数据发生错误if type(loginhome) == dict:data['errmsg'] = loginhome['msg']data['code'] = Falseelse:		data['alertmsg'] = papi.getCurIssue(loginhome)#海外zabbixloginabroad = papi.loginAbroad()if type(loginabroad) == dict:data['errmsg'] = loginabroad['msg'] if data['errmsg']=='' else data['errmsg']+'\n'+loginabroad['msg']data['code'] = Falseelse:data['alertmsg'] += papi.getCurIssue(loginabroad)return JsonResponse(data)

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

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



这篇关于django bootstrap 获取zabbix告警信息并展示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1015040。

相关文章

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时：2478ms)【2】集合方式foreach(一万条数
阅读更多...
python获取网页表格的多种方法汇总

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.
阅读更多...
SpringBoot UserAgentUtils获取用户浏览器的用法

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理（User-Agent）字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils
阅读更多...
C# foreach 循环中获取索引的实现方式

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》：本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代
阅读更多...
Linux下如何使用C++获取硬件信息

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息：读取"/proc/cpuinfo"文件获取磁盘信息：读取"/proc/diskstats"文
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
SpringMVC获取请求参数的方法

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》：本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@
阅读更多...
Python获取C++中返回的char*字段的两种思路

Python获取C++中返回的char*字段的两种思路

《Python获取C++中返回的char*字段的两种思路》有时候需要获取C++函数中返回来的不定长的char*字符串,本文小编为大家找到了两种解决问题的思路,感兴趣的小伙伴可以跟随小编一起学习一下... 有时候需要获取C++函数中返回来的不定长的char*字符串，目前我找到两种解决问题的思路，具体实现如下：
阅读更多...
golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法

golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法

《golang获取当前时间、时间戳和时间字符串及它们之间的相互转换方法》：本文主要介绍golang获取当前时间、时间戳和时间字符串及它们之间的相互转换,本文通过实例代码给大家介绍的非常详细,感兴趣... 目录1、获取当前时间2、获取当前时间戳3、获取当前时间的字符串格式4、它们之间的相互转化上篇文章给大家介
阅读更多...
Python获取中国节假日数据记录入JSON文件

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢？我尝试一种更为智能的方法：P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2