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 程式碼

<!-- 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);
});

django bootstrap 獲取zabbix告警資訊並展示

想在自己的頁面裡面把zabbix的告警資訊展示出來，效果圖如下：下面來說說如何實現： 1、獲取zabbix告警資料介面這個在我之前的文章裡說過，參考：http://blog.csdn.net/u011085172/article/details/77374879點選

android 廣播+服務+Application結合案例：獲取所有安裝應用的資訊並展示到listview上，結合SearchView進行檢索

效果圖：思路： 1、建立自定義Application，在其onCreate()回撥方法中啟動一個Service，在Service中開啟一個Thread執行緒，在該執行緒中，使用PackageManger類（主要職責是管理應用程式包）的getInstalledAp

Web -查詢表中所有的使用者資訊並展示在頁面上。

例: 在瀏覽器中輸入地址之後 , 查詢出所有的使用者資訊 ! 1.準備工作. 1.web - > WEB-INF - > lib包下匯入jia包. 2.建立資料庫和表 , 初始化表中資料 . 3.將c3p0工具類 , 放在src下 , 修改表名. 4.編寫用於展示

百度地圖開發(六)檢索定位附近街道資訊並展示

效果: 主要程式碼就是根據經緯度獲取經緯度附近周邊的資訊 /** * 根據經緯度獲取定位周邊街道資訊 * */ private void setPopupTipsInfo(LatLng latLng) { //設定反地理編

html5實現獲取地理位置資訊並定位

這裡主要講h5實現獲取地理位置資訊並定位功能，本文講解了原生h5，百度地圖，谷歌地圖等三種獲取地理資訊並定位的方法，需要的朋友可以參考下： h5提供了地理位置功能（Geolocation API),能確定使用者位置，我們可以藉助h5的該特性開發基於地理位置資訊的應用，本文集合實力給大家分享下如何

AngularJS進階二十 HTML5實現獲取地理位置資訊並定位功能

HTML5實現獲取地理位置資訊並定位功能注：請點選此處進行充電! 前言這篇文章主要介紹了HTML5實現獲取地理位置資訊並定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置資訊並定位的方法,需要的朋友可以參考下。 H

使用攔截器獲取請求引數資訊並寫入日誌

前言使用攔截器獲取請求的引數，ip地址等等資訊，然後寫入日誌更加方便後期異常的維護。 2.程式碼例項 public class RequestParamInfoIntorceptor extends HandlerInterceptorAdapter

Android獲取手機基站資訊並進行基站定位（基站定位原理）

http://blog.csdn.net/mad1989/article/details/9970431 一，首先普及一下手機基站資訊中相關的專業詞彙：通過TelephonyManager 獲取lac:mcc:mnc:cell-id（基站資訊）的解釋： MCC，M

AngularJS進階(二十)HTML5實現獲取地理位置資訊並定位功能

HTML5實現獲取地理位置資訊並定位功能前言這篇文章主要介紹了HTML5實現獲取地理位置資訊並定位功能,本文講解了原生HTML5、百度地圖、谷歌地圖等三種獲取理位置資訊並定位的方法,需要的朋友可以參考下。HTML5提供了地理位置定位功能（Geolocation AP

一個簡單好用的zabbix告警資訊傳送工具

之前使用郵件和簡訊傳送zabbix告警資訊，但告警資訊無法實時檢視或者無法傳送，故障無法及時通知運維人員。後來使用第三方微信介面傳送資訊，愉快地用了一年多，突然收費了。 zabbix告警一直是我的痛點，近期發現一個基於個人微訊號的資訊傳送工具-lykcha

獲取物流資訊並動態展示（仿淘寶物流資訊）

最終效果如圖前端程式碼如下 <div class="track-rcol"> <divclass="track-list">

Windows下USB磁碟開發系列三：列舉系統中U盤、並獲取其裝置資訊

前面我們介紹了列舉系統中的U盤碟符（見《Windows下USB磁碟開發系列一：列舉系統中U盤的碟符》）、以及獲取USB裝置的資訊（見《Windows下USB磁碟開發系列二：列舉系統中所有USB裝置》）。有個時候我們不僅僅需要獲取U盤碟符（路徑），而且需要獲取該U盤的硬體資訊，比如廠商、friendl

PHP後臺自動獲取視訊資訊並截圖功能例項

名稱：php自動獲取視訊資訊並截圖描述：PHP後臺自動獲取視訊資訊並截圖功能例項，包含ffmpeg的安裝步驟。版本：所有版本步驟1：確保 shell_exec() 函式是否可用！，php.ini中修改下方禁用函式。 disable_functions = pa

Web - 根據條件查詢使用者資訊(篩選)並展示.

準備工作就不在介紹了, 可以參考查詢所有使用者資訊的案例: https://blog.csdn.net/qq_42986107/article/details/83117451 Servlet -> Condifition.java @WebServlet("/selec

Log4Net獲取異常資訊並寫入Mysql資料庫

本文介紹使用Log4net實現獲取程式的錯誤資訊，並將錯誤資訊寫入Mysql的資料庫。第一步：引用相關的dll外掛：log4net.dll和Mysql.Data.dll 第二步：新增log4net.config檔案。 <?xml version="1.0" e

pulltorefreash獲取網路資料，資料庫，判斷網路，快取並展示

pulltorefreashlistview依賴 compile 'com.github.userswlwork:pull-to-refresh:1.0.0' main xml <com.handmark.pulltorefresh.library.PullToRefr

利用Scanner類對檔案讀取，並獲取相應的資訊

package input; import java.io.File; import java.io.FileNotFoundException; import java.util.ArrayList; import java.util.List; import java.util.Scanner

flask讀取資料庫(mysql)並展示表格（講解獲取表頭的方法）【附上flask好看點的helloworld】

簡述為了網頁的好看，最好還是用bootstrap 文章目錄簡述好看點的helloworld 連結資料庫結合在html上和flask上 html程式碼修改好看點的h

HttpURLConnection獲取資料並展示到ListView上

** ## MainActivity ** public class DemoActivity extends AppCompatActivity { private ListView mLVContents; private DemoAdapte

微信小程式獲取使用者資訊並儲存登入狀態

前言、　　微信小程式的執行環境不是在瀏覽器下執行的。所以不能以cookie來維護登入態。下面我就來說說我根據官方給出的方法來寫出的維護登入態的方法吧。一、登入態維護官方的文件地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-l

django bootstrap 獲取zabbix告警資訊並展示

相關推薦