django bootstrap 獲取zabbix告警資訊並展示
阿新 • • 發佈:2019-02-08
想在自己的頁面裡面把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 程式碼
id 為zabbixerror的div標籤,是用於顯示錯誤資訊的<!-- 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為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);
});