Количество свободно-распространяемого ПО растёт с каждым годом. Собрать собственную функциональную систему мониторинга из подручных средств становится всё проще. Сегодня расскажу о способах реализации функционала коммерческих систем мониторинга средствами бесплатных инструментов. Будем делать тепловую карту бизнес-сервисов, географическую карту для распределенных объектов, интеграцию с Zabbix и интерфейс управления этой конструкцией. При желании вы сможете повторить все эти шаги самостоятельно и внедрить у себя подобное решение. Под катом описание концепта.
Знакомьтесь — это «Мантра» (на месте надписи Mantra может быть всё что угодно). Буду рассказывать отдельно о каждом ингредиенте. Начнём с интерфейса.
Что должен иметь интерфейс для эффективного управления всей конструкцией? Как минимум базу данных для хранения настроек и удобный хорошо документированный движок для разработки. Не знаю о чём вы подумали, но наш выбор пал на Laravel. Так выглядит главный интерфейс, который сделали.
Первый пункт — «Бизнес-сервисы». Сюда добавляем объекты, за которыми нужно наблюдать на тепловой карте. Если приписать объекту координаты — он появится также и на географической карте. При добавлении нужно указывать сервис-родитель, к которому прикрепится потомок. В комментариях можно задать текст, который потом будет отображаться во всплывающем меню тепловой или географической карты.
Второй пункт — «Источники данных». Выбираем систему, из которой будут тянуться события. У нас настроена интеграция через Zabbix API, но сюда можно добавлять неограниченное количество источников данных: Nagios, Zenoss, SCOM и другие — зависит от ваших потребностей.
Третий пункт — «Источники событий». К каждому квадрату тепловой карты нужно привязать что-то из системы мониторинга, нечто влияющее на статус объекта. В случае с Zabbix — это триггеры. Для другой системы мониторинга будет что-то другое. В настройках «Источников событий» бизнес-сервис привязывается к триггеру.
Теперь при срабатывании триггера, квадрат на тепловой карте будет подкрашиваться в соответствующий событию цвет. При наведении на объект появляется всплывающее меню с текстом события и ссылкой на алармящий триггер в Zabbix.
Интерфейс основан на бесплатном фреймворке Google Charts (можете посмотреть демо на jsfiddle). Ничего более подходящего под это найти не удалось. Есть похожее решение у D3js, но там нет возможности настраивать влияние разноуровневых объектов друг на друга. Сразу предупреждаю, что Google Charts тянет за собой гугловые библиотеки, которые лежат на просторах googleapis.com. Так что сделать полностью оффлайновое решение не получится. На Github видел эти библиотеки в скачанном виде, но очень трудно поручиться за их актуальность.
Отображение дерева объектов настраивается в плоском файле или базе данных.
Ещё одно дополнительное преимущество Google Charts — адаптивный дизайн по умолчанию. Одинаково хорошо выглядит на десктопе и мобилке.
Эта карта визуализирует связи внутри вашего сервиса или бизнес-процесса. Если использовать подход с отвязыванием бизнес-процессов от бизнес-сервисов — потребуется две параллельные структуры, которые можно визуализировать на двух отдельных тепловых картах, чтобы не тревожить руководство по пустякам.
На размер квадратов влияет вес объектов, который можно задать в свойствах. По умолчанию вес у всех квадратов одинаковый.
Для создания географической карты со статусами объектов лучше всего использовать самый банальный OpenStreetMap. Google и Яндекс просят слишком многое для использования их карт (я про деньги и токены).
Можно просто нанести объекты на карту. А можно их объединять в кластеры при смене масштаба и присваивать результирующему кластеру цвет по наивысшей критичности события на вложенных объектах. На Github вы найдёте подходящее решение (или можно посмотреть в действии на jsfiddle). Как и в случае с тепловой картой, на географической тоже можно перейти на триггер в Zabbix по ссылке с объекта. Под мобилку тоже адаптируется.
На весь интерфейс сделана авторизация и даже простая ролевая модель: администраторы и пользователи. В планах добавить в этот же интерфейс какую-нибудь консоль событий и нечто типа Selenium или Casper.js для транзакционного мониторинга. Если есть вопросы — задавайте в комментариях или личным сообщением. Могу вам персонально прислать ссылку на то, что получилось у нас. Тут публиковать не буду, боюсь хабраэффекта.
Знакомьтесь — это «Мантра» (на месте надписи Mantra может быть всё что угодно). Буду рассказывать отдельно о каждом ингредиенте. Начнём с интерфейса.
Интерфейс управления
Что должен иметь интерфейс для эффективного управления всей конструкцией? Как минимум базу данных для хранения настроек и удобный хорошо документированный движок для разработки. Не знаю о чём вы подумали, но наш выбор пал на Laravel. Так выглядит главный интерфейс, который сделали.
Первый пункт — «Бизнес-сервисы». Сюда добавляем объекты, за которыми нужно наблюдать на тепловой карте. Если приписать объекту координаты — он появится также и на географической карте. При добавлении нужно указывать сервис-родитель, к которому прикрепится потомок. В комментариях можно задать текст, который потом будет отображаться во всплывающем меню тепловой или географической карты.
Второй пункт — «Источники данных». Выбираем систему, из которой будут тянуться события. У нас настроена интеграция через Zabbix API, но сюда можно добавлять неограниченное количество источников данных: Nagios, Zenoss, SCOM и другие — зависит от ваших потребностей.
Третий пункт — «Источники событий». К каждому квадрату тепловой карты нужно привязать что-то из системы мониторинга, нечто влияющее на статус объекта. В случае с Zabbix — это триггеры. Для другой системы мониторинга будет что-то другое. В настройках «Источников событий» бизнес-сервис привязывается к триггеру.
Теперь при срабатывании триггера, квадрат на тепловой карте будет подкрашиваться в соответствующий событию цвет. При наведении на объект появляется всплывающее меню с текстом события и ссылкой на алармящий триггер в Zabbix.
Тепловая карта
Интерфейс основан на бесплатном фреймворке Google Charts (можете посмотреть демо на jsfiddle). Ничего более подходящего под это найти не удалось. Есть похожее решение у D3js, но там нет возможности настраивать влияние разноуровневых объектов друг на друга. Сразу предупреждаю, что Google Charts тянет за собой гугловые библиотеки, которые лежат на просторах googleapis.com. Так что сделать полностью оффлайновое решение не получится. На Github видел эти библиотеки в скачанном виде, но очень трудно поручиться за их актуальность.
Отображение дерева объектов настраивается в плоском файле или базе данных.
Пример HTML-кода
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location','Parent','Markettradevolume(size)','Marketincrease/decrease(color)'],
['Global',null,0,0],
['America','Global',0,0],
['Europe','Global',0,0],
['Asia','Global',0,0],
['Australia','Global',0,0],
['Africa','Global',0,0],
['Brazil','America',11,10],
['USA','America',52,31],
['Mexico','America',24,12],
['Canada','America',16,-23],
['France','Europe',42,-11],
['Germany','Europe',31,-2],
['Sweden','Europe',22,-13],
['Italy','Europe',17,4],
['UK','Europe',21,-5],
['China','Asia',36,4],
['Japan','Asia',20,-12],
['India','Asia',40,63],
['Laos','Asia',4,34],
['Mongolia','Asia',1,-5],
['Israel','Asia',12,24],
['Iran','Asia',18,13],
['Pakistan','Asia',11,-52],
['Egypt','Africa',21,0],
['S.Africa','Africa',30,43],
['Sudan','Africa',12,2],
['Congo','Africa',10,12],
['Zaire','Africa',8,10]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Ещё одно дополнительное преимущество Google Charts — адаптивный дизайн по умолчанию. Одинаково хорошо выглядит на десктопе и мобилке.
Эта карта визуализирует связи внутри вашего сервиса или бизнес-процесса. Если использовать подход с отвязыванием бизнес-процессов от бизнес-сервисов — потребуется две параллельные структуры, которые можно визуализировать на двух отдельных тепловых картах, чтобы не тревожить руководство по пустякам.
На размер квадратов влияет вес объектов, который можно задать в свойствах. По умолчанию вес у всех квадратов одинаковый.
Географическая карта
Для создания географической карты со статусами объектов лучше всего использовать самый банальный OpenStreetMap. Google и Яндекс просят слишком многое для использования их карт (я про деньги и токены).
Можно просто нанести объекты на карту. А можно их объединять в кластеры при смене масштаба и присваивать результирующему кластеру цвет по наивысшей критичности события на вложенных объектах. На Github вы найдёте подходящее решение (или можно посмотреть в действии на jsfiddle). Как и в случае с тепловой картой, на географической тоже можно перейти на триггер в Zabbix по ссылке с объекта. Под мобилку тоже адаптируется.
На весь интерфейс сделана авторизация и даже простая ролевая модель: администраторы и пользователи. В планах добавить в этот же интерфейс какую-нибудь консоль событий и нечто типа Selenium или Casper.js для транзакционного мониторинга. Если есть вопросы — задавайте в комментариях или личным сообщением. Могу вам персонально прислать ссылку на то, что получилось у нас. Тут публиковать не буду, боюсь хабраэффекта.
