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()
#大陸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);
});