Развернул систему мониторинга Zabbix, вроде всё нравится, куча показаний снимается, но нет простого способа визуализировать некоторые данные. По крайней мере я не нашёл.
Решено было написать их самостоятельно с использованием Zabbix API. Я буду визуализировать коммутатор Cisco для примера, при желании это можно расширить до необходимых масштабов.
Итак, нам потребуется подготовить кое-какие данные:
- Получить hostid – идентификатор хоста;
- Получить itemids – идентификаторы нужных параметров;
- Создать пользователя для доступа к API.
Для получения hostid нужно перейти в раздел “Настройка -> Узлы сети”, навести мышь на искомый узел и посмотреть ссылку – параметр hostid. Его выпишем отдельно.
Переходим в раздел “Элементы данных”, наводим мышью на нужные параметры и переписываем себе itemid. Я буду снимать показания ifOperStatus каждого порта.
HTML-файл:
Накидаем html-файлик с внешним видом коммутатора:
<table border=”1″ cellspacing=”1″ cellpadding=”1″>
<tr>
<td><div class=”port” id=”port1″ data-tooltip=”Входящий”>Fa0/1</div></td>
<td><div class=”port” id=”port3″ data-tooltip=””>Fa0/3</div></td>
<td><div class=”port” id=”port5″ data-tooltip=””>Fa0/5</div></td>
<td><div class=”port” id=”port7″ data-tooltip=””>Fa0/7</div></td>
<td><div class=”port” id=”port9″ data-tooltip=””>Fa0/9</div></td>
<td><div class=”port” id=”port11″ data-tooltip=””>Fa0/11</div></td>
<td><div class=”port” id=”port13″ data-tooltip=””>Fa0/13</div></td>
<td><div class=”port” id=”port15″ data-tooltip=””>Fa0/15</div></td>
<td><div class=”port” id=”port17″ data-tooltip=””>Fa0/17</div></td>
<td><div class=”port” id=”port19″ data-tooltip=””>Fa0/19</div></td>
<td><div class=”port” id=”port21″ data-tooltip=””>Fa0/21</div></td>
<td><div class=”port” id=”port23″ data-tooltip=””>Fa0/23</div></td>
<td><div class=”port” id=”port25″ data-tooltip=””>Fa0/25</div></td>
<td><div class=”port” id=”port27″ data-tooltip=””>Fa0/27</div></td>
<td><div class=”port” id=”port29″ data-tooltip=””>Fa0/29</div></td>
<td><div class=”port” id=”port31″ data-tooltip=””>Fa0/31</div></td>
<td><div class=”port” id=”port33″ data-tooltip=””>Fa0/33</div></td>
<td><div class=”port” id=”port35″ data-tooltip=””>Fa0/35</div></td>
<td><div class=”port” id=”port37″ data-tooltip=””>Fa0/37</div></td>
<td><div class=”port” id=”port39″ data-tooltip=””>Fa0/39</div></td>
<td><div class=”port” id=”port41″ data-tooltip=””>Fa0/41</div></td>
<td><div class=”port” id=”port43″ data-tooltip=””>Fa0/43</div></td>
<td><div class=”port” id=”port45″ data-tooltip=””>Fa0/45</div></td>
<td><div class=”port” id=”port47″ data-tooltip=””>Fa0/47</div></td>
</tr>
<tr>
<td><div class=”port” id=”port2″ data-tooltip=””>Fa0/2</div></td>
<td><div class=”port” id=”port4″ data-tooltip=””>Fa0/4</div></td>
<td><div class=”port” id=”port6″ data-tooltip=””>Fa0/6</div></td>
<td><div class=”port” id=”port8″ data-tooltip=””>Fa0/8</div></td>
<td><div class=”port” id=”port10″ data-tooltip=””>Fa0/10</div></td>
<td><div class=”port” id=”port12″ data-tooltip=””>Fa0/12</div></td>
<td><div class=”port” id=”port14″ data-tooltip=””>Fa0/14</div></td>
<td><div class=”port” id=”port16″ data-tooltip=””>Fa0/16</div></td>
<td><div class=”port” id=”port18″ data-tooltip=””>Fa0/18</div></td>
<td><div class=”port” id=”port20″ data-tooltip=””>Fa0/20</div></td>
<td><div class=”port” id=”port22″ data-tooltip=””>Fa0/22</div></td>
<td><div class=”port” id=”port24″ data-tooltip=””>Fa0/24</div></td>
<td><div class=”port” id=”port26″ data-tooltip=””>Fa0/26</div></td>
<td><div class=”port” id=”port28″ data-tooltip=””>Fa0/28</div></td>
<td><div class=”port” id=”port30″ data-tooltip=””>Fa0/30</div></td>
<td><div class=”port” id=”port32″ data-tooltip=””>Fa0/32</div></td>
<td><div class=”port” id=”port34″ data-tooltip=””>Fa0/34</div></td>
<td><div class=”port” id=”port36″ data-tooltip=””>Fa0/36</div></td>
<td><div class=”port” id=”port38″ data-tooltip=””>Fa0/38</div></td>
<td><div class=”port” id=”port40″ data-tooltip=””>Fa0/40</div></td>
<td><div class=”port” id=”port42″ data-tooltip=””>Fa0/42</div></td>
<td><div class=”port” id=”port44″ data-tooltip=””>Fa0/44</div></td>
<td><div class=”port” id=”port46″ data-tooltip=””>Fa0/46</div></td>
<td><div class=”port” id=”port48″ data-tooltip=””>Fa0/48</div></td>
</tr>
</table>
PHP-файл
Начнём кодить скриптец. Я тот ещё программёр, поэтому если кто-то может улучшить код – буду только рад.
<?php
header(‘Access-Control-Allow-Origin: *’);
$CISCO3550OPERSTATUS=array(‘29820′,’29821′,’29822′,’29823′,’29824′,’29825′,’29826′,’29827′,’29828′,’29829′,’29830′,’29831′,’29832′,’29833′,’29834’,
‘29835’,’29836′,’29837′,’29838′,’29839′,’29840′,’29841′,’29842′,’29843′,’29844′,’29845′,’29846′,’29847′,’29848′,’29849′,’29850′,’29851′,’29852′,
‘29853’,’29854′,’29855′,’29856′,’29857′,’29858′,’29859′,’29860′,’29861′,’29862′,’29863′,’29864′,’29865′,’29866′,’29867′);
$UNIT[‘CISCO3550’] = ‘10255’;
$header=array(‘Content-Type:application/json-rpc’);
$params=array(“jsonrpc” => “2.0”,”method” => “user.login”,”params” => array(“user” => “apiuser”,”password” => “apiuser”),”id” => 0);
$params_json=json_encode($params);
$API_URL = ‘http://192.168.1.96/zabbix/api_jsonrpc.php’;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $API_URL);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params_json);
$SESSION=json_decode(curl_exec($ch))->result;
$params=array(“jsonrpc”=>”2.0″,”method”=>”item.get”,”params”=>array(“output”=>”extend”,”hostids”=>$UNIT[‘CISCO3550’],”itemids”=>$CISCO3550OPERSTATUS),”auth”=>$SESSION,”id”=>1);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($params));
$retval = curl_exec($ch);
curl_close($ch);
$result = json_decode($retval);
foreach ($result->result as $key => $item){
$portmap[$key]=$item->lastvalue;
}
echo json_encode($portmap);
?>
Итак, что мы делаем? При помощи CURL посылаем запрос с именем-паролем, получаем токен для авторизации.
Затем посылаем следующий запрос к API с методом item.get и передаём hostid и список параметров itemids. Затем результат кодируем в json и возвращаем ответ.
JavaScript файл:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script>
$(function(){
$(“[data-tooltip]”).mousemove(function (eventObject) {
$data_tooltip = $(this).attr(“data-tooltip”);
$(“#tooltip”).text($data_tooltip)
.css({ “top” : eventObject.pageY + 15, “left” : eventObject.pageX + 5 })
.show();
}).mouseout(function () {
$(“#tooltip”).hide()
.text(“”)
.css({“top” : 0,”left” : 0});
});
function updateswitch()
{
$.ajax({
url:”http://192.168.1.96/index.php”,
type: “POST”,
data: {},
success: function (response){
response.forEach(function(item,i,response){
switch (item){
case ‘1’:
$(‘#port’+(i+1)).css(‘background-color’,’#6f6′);
break;
case ‘2’:
$(‘#port’+(i+1)).css(‘background-color’,’#f66′);
break;
}
});
},
dataType: “json”});
}
setInterval(function(){
updateswitch();
},10000);
updateswitch();
});
</script>
Ну и немного добавим “красоты”:
CSS-файл
<style>
.port{width:40px;height:25px;text-align:center;font-size:0.8em;}
#tooltip {
z-index: 9999;
position: absolute;
display: none;
top:0px;
left:0px;
background-color: #000;
padding: 5px 10px 5px 10px;
color: white;
opacity: 0.6;
border-radius: 5px;
}
.switch{
font-size:2em;
text-align: center;
background-color: #4974ad;
color: #fff;
}
</style>
Таблица обновляется раз в 10 секунд. Планирую добавить ещё трафик на интерфейсе и таблицу MAC-адресов. Теперь эту шляпу можно использовать в комплексных экранах. Тип элемента – URL, динамический.
Comments: