把zabbix圖形整合至運維平台

今天把運維平台加上圖形功能，就是把zabbix的圖檔整合到CMDB平台；當然要是想要非常美觀的顯示圖形的話也是不要建議這樣做；參考了好幾篇部落格之後，自己也寫篇總結文檔：

主要思路是：

1、找到zabbix圖檔對應的url。

2、讀取URL的所有内容生成jpg檔案。

3、周遊圖檔目錄把圖檔檔案傳回前端js整合。

1、打開zabbix，找到圖檔的路徑：

<a href="http://192.168.63.216/zabbix/chart2.php?graphid=567&period=60&stime=20160907160153&updateProfile=1&profileIdx=web.screens&profileIdx2=567&width=1224&sid=0afbe713bbeb0519&screenid=&curtime=1473237848932" target="_blank">http://192.168.63.216/zabbix/chart2.php?graphid=567&period=60&stime=20160907160153&updateProfile=1&profileIdx=web.screens&profileIdx2=567&width=1224&sid=0afbe713bbeb0519&screenid=&curtime=1473237848932</a>

*我們所要擷取的關鍵參數是

*graphid:圖形IP。

*stime:開始時間；預設我們出目前時間。

*period:時間長度：以秒為機關。

2、我們需要擷取的就是graphid而已，是以通過zabbix_client子產品把id給擷取出來，風格跟我之前寫的api管理zabbix一緻，大家可以自行檢視：

<code>def</code> <code>get_graphid(</code><code>self</code><code>,hostid):</code>

<code> </code><code>"selectGraphs"</code><code>: [</code><code>"graphid"</code><code>,</code><code>"name"</code><code>],</code>

<code> </code><code>"filter"</code><code>: {</code><code>"hostid"</code><code>: hostid}</code>

<code> </code><code>return</code> <code>ret[</code><code>0</code><code>][</code><code>'graphs'</code><code>]</code>

3、通過傳入的graphid生成jpg圖檔檔案，腳本：

<code>#!/usr/bin/env python</code>

<code># -*- coding: utf-8 -*-</code>

<code>from</code> <code>. </code><code>import</code> <code>app , jsonrpc</code>

<code>import</code> <code>util</code>

<code>import</code> <code>json, traceback</code>

<code>import</code> <code>datetime</code>

<code>import</code> <code>cookielib, urllib2,urllib</code>

<code>class</code> <code>Zabbix_api():</code>

<code> </code><code>def</code> <code>__init__(</code><code>self</code><code>,url</code><code>=</code><code>"http://192.168.63.216/zabbix/index.php"</code><code>,name</code><code>=</code><code>"Admin"</code><code>,password</code><code>=</code><code>"zabbix"</code><code>):</code>

<code> </code><code>self</code><code>.passwd</code><code>=</code><code>password</code>

<code> </code><code>#初始化的時候生成cookies</code>

<code> </code><code>cookiejar </code><code>=</code> <code>cookielib.CookieJar()</code>

<code> </code><code>urlOpener </code><code>=</code> <code>urllib2.build_opener(urllib2.HTTPCookieProcessor(cookiejar))</code>

<code> </code><code>values </code><code>=</code> <code>{</code><code>"name"</code><code>:</code><code>self</code><code>.name,</code><code>'password'</code><code>:</code><code>self</code><code>.passwd,</code><code>'autologin'</code><code>:</code><code>1</code><code>,</code><code>"enter"</code><code>:</code><code>'Sign in'</code><code>}</code>

<code> </code><code>data </code><code>=</code> <code>urllib.urlencode(values)</code>

<code> </code><code>request </code><code>=</code> <code>urllib2.Request(url, data)</code>

<code> </code><code>urlOpener.</code><code>open</code><code>(request,timeout</code><code>=</code><code>10</code><code>)</code>

<code> </code><code>self</code><code>.urlOpener</code><code>=</code><code>urlOpener</code>

<code> </code><code>except</code> <code>urllib2.HTTPError, e:</code>

<code> </code><code>print</code> <code>e</code>

<code> </code><code>def</code> <code>GetGraph(</code><code>self</code><code>,url</code><code>=</code><code>"http://192.168.63.216/zabbix/chart2.php"</code><code>,values</code><code>=</code><code>{</code><code>'width'</code><code>: </code><code>800</code><code>, </code><code>'height'</code><code>: </code><code>200</code><code>, </code><code>'graphid'</code><code>: </code><code>'564'</code><code>, </code><code>'stime'</code><code>: </code><code>'20160907090409'</code><code>, </code><code>'period'</code><code>: </code><code>3600</code><code>},image_dir</code><code>=</code><code>"/tmp"</code><code>):</code>

<code> </code><code>data</code><code>=</code><code>urllib.urlencode(values)</code>

<code> </code><code>request </code><code>=</code> <code>urllib2.Request(url,data)</code>

<code> </code><code>url </code><code>=</code> <code>self</code><code>.urlOpener.</code><code>open</code><code>(request)</code>

<code> </code><code>image </code><code>=</code> <code>url.read()</code>

<code> </code><code>imagename</code><code>=</code><code>"%s/%s_%s.jpg"</code> <code>%</code> <code>(image_dir, values[</code><code>"graphid"</code><code>], values[</code><code>"stime"</code><code>])</code>

<code> </code><code>f</code><code>=</code><code>open</code><code>(imagename,</code><code>'wb'</code><code>)</code>

<code> </code><code>f.write(image)</code>

<code> </code><code>return</code> <code>'1'</code>

<code> </code><code>graph </code><code>=</code> <code>Zabbix_api()</code>

<code> </code><code>values </code><code>=</code> <code>{</code><code>'width'</code><code>: </code><code>800</code><code>, </code><code>'height'</code><code>: </code><code>200</code><code>, </code><code>'graphid'</code><code>: </code><code>'564'</code><code>, </code><code>'stime'</code><code>: </code><code>'20160907090409'</code><code>, </code><code>'period'</code><code>: </code><code>3600</code><code>}</code>

<code> </code><code>graph.GetGraph(</code><code>"http://192.168.63.216/zabbix/chart2.php"</code><code>,values,</code><code>"/tmp"</code><code>)</code>

4、後端程式處理，傳回結果之後和前端結合吧圖形加載到html即可：

js處理請求：

/*點選監控按鈕，擷取監控資料*/

<code>$("tbody").on('click','.monitor-btn',function(){</code>

<code> </code><code>var url = "/getapi?method="+"graph"+"&id="+id</code>

<code> </code><code>$.getJSON(url,function(data){</code>

<code> </code><code>data = JSON.parse(data['result'])</code>

<code> </code><code>console.log(data)</code>

<code> </code><code>$.each(data.result, function(n,value){</code>

<code> </code><code>str +='<</code><code>img</code> <code>src</code><code>=</code><code>' + value + " " + '</code><code>style</code><code>=</code><code>"width:100%"</code><code>/><</code><code>br</code> <code>>' </code>

<code> </code><code>console.log(str)</code>

<code> </code><code>$("#graph").html(str)</code>

<code> </code><code>$('#monitor').modal('show')</code>

<code> </code><code>swal("Error", data['errmsg'], "error")</code>

5、html頁面：

<code><</code><code>div</code> <code>id</code><code>=</code><code>"monitor"</code> <code>class</code><code>=</code><code>"modal fade text-center"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-dialog"</code> <code>style</code><code>=</code><code>"display: inline-block; width: 60%;"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-content"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-header"</code><code>></code>

<code> </code><code><</code><code>button</code> <code>type</code><code>=</code><code>"button"</code> <code>class</code><code>=</code><code>"close"</code> <code>data-dismiss</code><code>=</code><code>"modal"</code> <code>aria-label</code><code>=</code><code>"Close"</code><code>><</code><code>span</code> <code>aria-hidden</code><code>=</code><code>"true"</code><code>>&times;</</code><code>span</code><code>></</code><code>button</code><code>></code>

<code> </code><code><</code><code>h4</code> <code>class</code><code>=</code><code>"modal-title"</code><code>>監控檢視</</code><code>h4</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-body"</code><code>></code>

<code> </code><code><</code><code>p</code> <code>hidden </code><code>id</code><code>=</code><code>"errorMsg"</code> <code>class</code><code>=</code><code>"text-danger"</code> <code>style</code><code>=</code><code>"color:red"</code><code>>監控檢視</</code><code>p</code><code>> </code><code></code>

<code> </code><code><</code><code>form</code> <code>class</code><code>=</code><code>"form-horizontal"</code> <code>id</code><code>=</code><code>"ChangePasswdForm"</code><code>></code>

<code> </code><code><</code><code>input</code> <code>id</code><code>=</code><code>"passwdid"</code> <code>type</code><code>=</code><code>"hidden"</code> <code>name</code><code>=</code><code>"passwdid"</code><code>> </code><code></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"form-group"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"col-sm-10"</code> <code>id</code><code>=</code><code>"graph"</code><code>></code>

<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"modal-footer"</code><code>></code>

<code> </code><code><</code><code>button</code> <code>class</code><code>=</code><code>"btn btn-warning"</code> <code>data-dismiss</code><code>=</code><code>"modal"</code><code>>退出</</code><code>button</code><code>></code>

6、生成效果，在CMDB點選監控時候跳出相關監控圖形友善檢視：

或者也有運維工程師習慣把生成的圖檔用html的方式發送發送到郵箱也是可以數顯的，主要是圖檔已經生成後續的操作也非常簡單了。

本文轉自小羅ge11 51CTO部落格，原文連結：http://blog.51cto.com/xiaoluoge/1847406，如需轉載請自行聯系原作者

把zabbix圖形整合至運維平台

繼續閱讀

HDFS指令行工具

Linux下ssh秘鑰方式登入遠端伺服器

Linux指令集錦：scp指令一、文法二、執行個體

docker 指令集錦

LINUX常見指令集錦

windows開始→運作→輸入的指令集錦 winver---------檢查Windows版本 w

更改LYNC SIP位址

Storm編譯打包過程中遇到的一些問題及解決方法

ansible配置檔案說明及ad hoc指令

vsftpd dead but subsys locked 的解決方法

Shell程式設計——sort排序、uniq忽略重複、tr替換壓縮删除、cut指定删除字段、正規表達式元字元sort 指令uniq 指令tr 指令cut 指令正規表達式

Linxu常用指令技巧彙總

httpd服務的部署、啟動、配置和簡單優化一、部署二、啟動三、配置檔案

《Linux指令行與Shell腳本程式設計大全第2版.布盧姆》pdf

nginx 安裝錯誤資訊解決

Ambari介紹和架構原理