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。

相关文章

使用Python实现获取屏幕像素颜色值

使用Python实现获取屏幕像素颜色值

《使用Python实现获取屏幕像素颜色值》这篇文章主要为大家详细介绍了如何使用Python实现获取屏幕像素颜色值,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、一个小工具，按住F10键，颜色值会跟着显示。完整代码import tkinter as tkimport pyau
阅读更多...
python获取cmd环境变量值的实现代码

python获取cmd环境变量值的实现代码

《python获取cmd环境变量值的实现代码》：本文主要介绍在Python中获取命令行（cmd）环境变量的值,可以使用标准库中的os模块,需要的朋友可以参考下... 前言全局说明在执行py过程中，总要使用到系统环境变量一、说明1.1 环境:Windows 11 家庭版 24H2 26100.4061
阅读更多...
使用Python获取JS加载的数据的多种实现方法

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript（JS）动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法（一）分析网络请求1
阅读更多...
通过cmd获取网卡速率的代码

通过cmd获取网卡速率的代码

《通过cmd获取网卡速率的代码》今天从群里看到通过bat获取网卡速率两段代码,感觉还不错,学习bat的朋友可以参考一下... 1、本机有线网卡支持的最高速度：%v%@echo off & setlocal enabledelayedexpansionecho 代码开始echo 65001编码获取： >
阅读更多...
使用Python实现调用API获取图片存储到本地的方法

使用Python实现调用API获取图片存储到本地的方法

《使用Python实现调用API获取图片存储到本地的方法》开发一个自动化工具,用于从JSON数据源中提取图像ID,通过调用指定API获取未经压缩的原始图像文件,并确保下载结果与Postman等工具直接... 目录使用python实现调用API获取图片存储到本地1、项目概述2、核心功能3、环境准备4、代码实现
阅读更多...
Python实现获取带合并单元格的表格数据

Python实现获取带合并单元格的表格数据

《Python实现获取带合并单元格的表格数据》由于在日常运维中经常出现一些合并单元格的表格,如果要获取数据比较麻烦,所以本文我们就来聊聊如何使用Python实现获取带合并单元格的表格数据吧... 由于在日常运维中经常出现一些合并单元格的表格，如果要获取数据比较麻烦，现将将封装成类，并通过调用list_exc
阅读更多...
对Django中时区的解读

对Django中时区的解读

《对Django中时区的解读》：本文主要介绍对Django中时区的解读方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景前端数据库中存储接口返回AI的解释问题：这样设置的作用答案获取当前时间（自动带时区）转换为北京时间显示总结背景设置时区为北京时间 TIM
阅读更多...
通过C#获取Excel单元格的数据类型的方法详解

通过C#获取Excel单元格的数据类型的方法详解

《通过C#获取Excel单元格的数据类型的方法详解》在处理Excel文件时,了解单元格的数据类型有助于我们正确地解析和处理数据,本文将详细介绍如何使用FreeSpire.XLS来获取Excel单元格的... 目录引言环境配置6种常见数据类型C# 读取单元格数据类型引言在处理 Excel 文件时，了解单元格
阅读更多...
Django之定时任务django-crontab的实现

Django之定时任务django-crontab的实现

《Django之定时任务django-crontab的实现》Django可以使用第三方库如django-crontab来实现定时任务的调度,本文主要介绍了Django之定时任务django-cront... 目录crontab安装django-crontab注册应用定时时间格式定时时间示例设置定时任务@符号
阅读更多...
Java根据IP地址实现归属地获取

Java根据IP地址实现归属地获取

《Java根据IP地址实现归属地获取》Ip2region是一个离线IP地址定位库和IP定位数据管理框架,这篇文章主要为大家详细介绍了Java如何使用Ip2region实现根据IP地址获取归属地,感兴趣... 目录一、使用Ip2region离线获取1、Ip2region简介2、导包3、下编程载xdb文件4、J
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2