В этой статье я хотел бы изложить собственный опыт построения наглядных и презентабельных графиков с помощью Highcharts на основе статистики ОС и дисковых массивов. Для многих современных ОС и дисковых массивов существуют механизмы, основанные на встроенном или дополнительном ПО, которые позволяют получать данные о работе подсистем ОС или массива (имеются в виду не трассировки, а статистические показатели, усредненные по заданному интервалу). Также можно собирать статистику счетчиков пакетов и ошибок на интерфейсах коммутаторов LAN и FC. Многие хотят визуализировать эти данные и использовать в отчетах или же самописной системе мониторинга.
Disclaimer: я не являюсь и не работаю программистом и имею весьмасомнительныеограниченные способности к написанию кода, так что сильно не бейте за его качество. При этом я буду рад, если вы отметите, что можно оптимизировать и переписать короче/грамотнее/кошернее.
В разное время мне приходилось и приходится обрабатывать данные Measureware*, установленного на HP-UX и Linux серверах, статистику работы массивов HP Storageworks XP, HP EVA, EMC Clariion, EMC Symmetrix, строить графики загруженности интерфейсов FC коммутаторов Brocade. Потенциально с помощью Highcharts и не только можно нарисовать графики на основе любой статистики, представленной в CSV формате и отсортированной по времени. Также можно рисовать графики в режиме реального времени, данные при этом будут собираться с помощью SNMP. Многие, конечно же, скажут, что для realtime и накопленной статистики, собранной с помощью SNMP, отлично подходит небезызвестный Cacti, и будут правы: в интернетах полно руководств по разворачиванию Cacti и настройки мониторинга различного оборудования, было съедено немало собак, и шансы быстро и без косяков развернуть подобный мониторинг весьма высоки. Я прошел путь от графиков, построенных с помощью Excel, к картинкам, сгенеренным с помощью rrdtool и gnuplot, и, наконец, к Highcharts. Вполне возможно, не всех устраивают упомянутые решения, и кого-то заинтересует описанный мной способ.
* Measureware (OpenView Performance Agent) позволяет отслеживать утилизацию ресурсов ОС (HP-UX, Linux, Windows) в текущий момент и просматривать накопленные данные, выгружать их в ASCII формат для дальнейшей обработки. С его помощью можно получить значения ключевых метрик работы разных подсистем ОС, отдельных процессов, настроенных групп приложений (например все процессы ora_dbw* в системе). Данные Measureware используются наряду с трассировкой ОС и ее процессов для выявления потенциально узких мест в производительности системы. Информация приведена не на правах рекламы, я уже не работаю в HP, просто хотел упомянуть удобный инструмент, заслуживающий отдельной статьи (Хабражителям, кстати, интересны темы ПО, используемого на проприетарных промышленных версиях UNIX?).
Это библиотека для построения графиков с помощью Javascript. Номинально использует браузер для рендеринга и отображения интерактивных графиков. Чем хорош Highcharts? Всегламурно рендерится и в твоем любимом FF и в Chrome и в Safari (на ай-технике тоже), в IE тоже; с графиками можно взаимодействовать: менять масштаб, отключать ненужные графики или подсвечивать необходимые, добавлять новые точки, использовать обработчики нажатий кнопки мыши, tooltips и т.п.; входные данные можно считывать из локального файла, использовать AJAX, обращаться к БД, получать в виде формате json (простите, если не правильно формулирую или использую неверные термины). Также путем мышиных манипуляций полученные графики можно сохранять в PNG картинки. В какой-то момент мне понадобилось генерить много разных картинок и было лень много двигать и кликать мышью, хотелось сделать batch. Мои нубские потуги в освоении node, rhino и прочих финтифлюшек, описанных на суппортном форуме Highcharts (кстати, вполне оперативно и дружелюбно откликаются и помогают), ни к чему не привели. За то я открыл для себя утилиту iecapt.exe (как я понял, аналог cutycapt, про которую есть пара статей на Хабре) – при выставлении соответствующих пауз на обработку JS кода и рендеринг получаются такие же картинки, как и при экспорте из браузера.
Надо сказать, что экспорт в PNG/JPEG/PDF основан на преобразовании SVG в PNG с помощью server-side модулей и библиотек и требует наличия php странички на сервере, либо редиректа на highcharts.com. В последних версиях Highcharts, кстати, пофиксили экспорт отмасштабированных (zoomed in) графиков и графиков, построенных динамически. Без экспорта графики можно просматривать локально путем запуска простого html файла с JS обвесом и сохраненной локально jquery.js. Также для экспорта можно использовать упомянутую утилиту iecapt/cutycapt. Для получения статистики по трафику на FC коммутаторах в режиме реального времени я использовал php страничку, которая с помощью модуля php_snmp регулярно опрашивала необходимый OID в дереве MIB на коммутаторе и парсила данные. Следует помнить, что любые запросы SNMP расходуют циклы процессора коммутатора и перегружать его чрезмерно частыми запросами не следует. У Brocade есть даже сервисная нота на эту тему: высокая утилизация процессора может приводить к ресетам FC портов, вероятность невелика, но она есть и зависит от типа используемого трансивера (производителя и ревизии прошивки). Сорри за оффтоп, но «предупрежден – значит вооружен».
Для визуализации можно использовать следующие типы графиков:
Pie – например, чтобы показать распределение групп серверов в нагрузке на frontend адаптер:
Column – для построения гистограмм:
Spline – для разнородных метрик, причем можно использовать несколько осей со своей шкалой и масштабом и привязывать и ним разные графики:
Area или Areaspline для демонстрации эффекта от наложения метрик:
Или наоборот – противопоставления разнонаправленных потоков трафика на интерфейсах коммутатора:
На странице проекта Highcharts вы найдете много других полезных и интересных типов графиков. Проект развивается, выходят обновления, на форуме можно найти много полезных рецептов.
Итак, что мы имеем на входе? Я умышленно опускаю этап сбора данных и выгрузки их в формат CSV, т.к. это тема отдельной статьи для каждой из используемых ОС или дисковых массивов. Итак, нам понадобится либо таблица значений разных метрик (по горизонтали), изменяющихся со временем (по вертикали), с соответствующим заголовком, например вот так:
Unixtime, metric1, metric2, metric3
1297666800, val1_1, val2_1, val3_1
1297666860, val1_2, val2_2, val3_2
и так далее
Данные также могут быть представлены в виде таблицы, где в каждой строчке перечислены значения конкретной метрики, измеренные на равноотстоящих временных интервалах, например вот так (в заголовке содержится Title для графика, точка отсчета и интервал):
Lan0 stats, 1297666800, 600
Rx bps, 2000, 3000, 4000
Tx bps, 1200, 1600, 2000
Моя страничка для интерактивного выбора отображаемых метрик выглядит примерно так и использует файлы с первым вариантом расположения данных (т.е. метрики по горизонтали, в каждой строчке их значения на определенном временном интервале):
Единственное – в моем входном файле есть еще доп.поля и строка с заголовком для возможности использования файлов в другой программе обработки статистики и построения графиков.
Необходимые файлы для работы этой страницы следующие:
Архив с файлами загружены на http://ge.tt/96cqBa7 и http://depositfiles.com/files/06h2ky72e + http://depositfiles.com/files/o6ycfl3kw (архив большего размера это JS обвес и библиотеки, необходимые для экспорта в PNG)
В случае построения realtime графика перед получением свежих данных о трафике с коммутатора можно сделать запрос к базе, в которую регулярно загружается статистика с коммутатора (получаемая, к примеру, по SNMP), и построить эти точки на графике. Последующие запросы новых данных будут добавлять «свежие» точки и сдвигать график.
Кстати, я так и не смог побороть перевод времени в нужную timezone для realtime графиков. Заранее спасибо тому, кто найдет решение.
Для варианта расположения данных в CSV файле в виде строк со значениями определенной метрики подойдет такойговнокод перед вызовом «var chart = new Highcharts.Chart(options);»:
при условии, что значения собраны через регулярные промежутки времени (series.pointInterval) и не имеют «пропусков».
Напоследок несколько советов и рецептов с форума:
Мне очень нравится библиотека Highcharts и графики, которые можно сделать с ее помощью. Надеюсь, понравилось и вам.
UPD: подскажите куда понадежнее переложить архивы со скриптами, а то ведь наверняка протухнет на ge.tt и depositfiles?
Disclaimer: я не являюсь и не работаю программистом и имею весьма
В разное время мне приходилось и приходится обрабатывать данные Measureware*, установленного на HP-UX и Linux серверах, статистику работы массивов HP Storageworks XP, HP EVA, EMC Clariion, EMC Symmetrix, строить графики загруженности интерфейсов FC коммутаторов Brocade. Потенциально с помощью Highcharts и не только можно нарисовать графики на основе любой статистики, представленной в CSV формате и отсортированной по времени. Также можно рисовать графики в режиме реального времени, данные при этом будут собираться с помощью SNMP. Многие, конечно же, скажут, что для realtime и накопленной статистики, собранной с помощью SNMP, отлично подходит небезызвестный Cacti, и будут правы: в интернетах полно руководств по разворачиванию Cacti и настройки мониторинга различного оборудования, было съедено немало собак, и шансы быстро и без косяков развернуть подобный мониторинг весьма высоки. Я прошел путь от графиков, построенных с помощью Excel, к картинкам, сгенеренным с помощью rrdtool и gnuplot, и, наконец, к Highcharts. Вполне возможно, не всех устраивают упомянутые решения, и кого-то заинтересует описанный мной способ.
* Measureware (OpenView Performance Agent) позволяет отслеживать утилизацию ресурсов ОС (HP-UX, Linux, Windows) в текущий момент и просматривать накопленные данные, выгружать их в ASCII формат для дальнейшей обработки. С его помощью можно получить значения ключевых метрик работы разных подсистем ОС, отдельных процессов, настроенных групп приложений (например все процессы ora_dbw* в системе). Данные Measureware используются наряду с трассировкой ОС и ее процессов для выявления потенциально узких мест в производительности системы. Информация приведена не на правах рекламы, я уже не работаю в HP, просто хотел упомянуть удобный инструмент, заслуживающий отдельной статьи (Хабражителям, кстати, интересны темы ПО, используемого на проприетарных промышленных версиях UNIX?).
Что такое Highcharts и с чем его едят?
Это библиотека для построения графиков с помощью Javascript. Номинально использует браузер для рендеринга и отображения интерактивных графиков. Чем хорош Highcharts? Все
Надо сказать, что экспорт в PNG/JPEG/PDF основан на преобразовании SVG в PNG с помощью server-side модулей и библиотек и требует наличия php странички на сервере, либо редиректа на highcharts.com. В последних версиях Highcharts, кстати, пофиксили экспорт отмасштабированных (zoomed in) графиков и графиков, построенных динамически. Без экспорта графики можно просматривать локально путем запуска простого html файла с JS обвесом и сохраненной локально jquery.js. Также для экспорта можно использовать упомянутую утилиту iecapt/cutycapt. Для получения статистики по трафику на FC коммутаторах в режиме реального времени я использовал php страничку, которая с помощью модуля php_snmp регулярно опрашивала необходимый OID в дереве MIB на коммутаторе и парсила данные. Следует помнить, что любые запросы SNMP расходуют циклы процессора коммутатора и перегружать его чрезмерно частыми запросами не следует. У Brocade есть даже сервисная нота на эту тему: высокая утилизация процессора может приводить к ресетам FC портов, вероятность невелика, но она есть и зависит от типа используемого трансивера (производителя и ревизии прошивки). Сорри за оффтоп, но «предупрежден – значит вооружен».
Что можно получить с помощью Highcharts на выходе?
Для визуализации можно использовать следующие типы графиков:
Pie – например, чтобы показать распределение групп серверов в нагрузке на frontend адаптер:
Column – для построения гистограмм:
Spline – для разнородных метрик, причем можно использовать несколько осей со своей шкалой и масштабом и привязывать и ним разные графики:
Area или Areaspline для демонстрации эффекта от наложения метрик:
Или наоборот – противопоставления разнонаправленных потоков трафика на интерфейсах коммутатора:
На странице проекта Highcharts вы найдете много других полезных и интересных типов графиков. Проект развивается, выходят обновления, на форуме можно найти много полезных рецептов.
Обработка накопленных данных из файла и поступающих в режиме реального времени
Итак, что мы имеем на входе? Я умышленно опускаю этап сбора данных и выгрузки их в формат CSV, т.к. это тема отдельной статьи для каждой из используемых ОС или дисковых массивов. Итак, нам понадобится либо таблица значений разных метрик (по горизонтали), изменяющихся со временем (по вертикали), с соответствующим заголовком, например вот так:
Unixtime, metric1, metric2, metric3
1297666800, val1_1, val2_1, val3_1
1297666860, val1_2, val2_2, val3_2
и так далее
Данные также могут быть представлены в виде таблицы, где в каждой строчке перечислены значения конкретной метрики, измеренные на равноотстоящих временных интервалах, например вот так (в заголовке содержится Title для графика, точка отсчета и интервал):
Lan0 stats, 1297666800, 600
Rx bps, 2000, 3000, 4000
Tx bps, 1200, 1600, 2000
Моя страничка для интерактивного выбора отображаемых метрик выглядит примерно так и использует файлы с первым вариантом расположения данных (т.е. метрики по горизонтали, в каждой строчке их значения на определенном временном интервале):
Единственное – в моем входном файле есть еще доп.поля и строка с заголовком для возможности использования файлов в другой программе обработки статистики и построения графиков.
Необходимые файлы для работы этой страницы следующие:
- mwa.htm – основная страничка с выбором файла, его метрик и рисованием графиков;
- jquery.js – положить рядом эту известную библиотеку, либо использовать расположенную на внешнем веб сервере (кто ищет тот найдет где);
- свежие папки js и exporting-server качаются с сайта проекта Highcharts. На странице тыц рассказано, как настроить локальный экспорт;
- getlist.php – нужен для выполнения асинхронного запроса на поиск входных CSV файлов со статистикой по шаблону, вызывается из mwa.htm;
- mwa_S-DB-1__weekG.csv с примером статистических данных о работе HP-UX хоста за неделю;
- live_snmp_only.php – дополнительная страница для построения графика загрузки порта FC коммутатора Brocade, вызывается с помощью запроса «live_snmp_only.php?host=10.20.30.40&fcPort=20». community прописана в следующем файле;
- snmp64.php – регулярно вызывается из live_snmp_only.php и получает исходящую и входящую скорости работы FC порта коммутатора Brocade (с Cisco FC или LAN пока не было опыта прикрутить, наверняка надо просто использовать соответствующие OID). На старых версиях FOS может не быть 64-битных счетчиков.
Архив с файлами загружены на http://ge.tt/96cqBa7 и http://depositfiles.com/files/06h2ky72e + http://depositfiles.com/files/o6ycfl3kw (архив большего размера это JS обвес и библиотеки, необходимые для экспорта в PNG)
В случае построения realtime графика перед получением свежих данных о трафике с коммутатора можно сделать запрос к базе, в которую регулярно загружается статистика с коммутатора (получаемая, к примеру, по SNMP), и построить эти точки на графике. Последующие запросы новых данных будут добавлять «свежие» точки и сдвигать график.
Кстати, я так и не смог побороть перевод времени в нужную timezone для realtime графиков. Заранее спасибо тому, кто найдет решение.
Для варианта расположения данных в CSV файле в виде строк со значениями определенной метрики подойдет такой
// Verticaly dispersed data:
var items = lines[metricNo].split(',');
series.name = items[0];
$.each(items, function(itemNo, item) {
if (itemNo>0 && parseInt(item)>=0) {
series.data.push(parseInt(item)); // its important to parseInt !!!!
}
});
series.pointStart = parseInt(start); // its important to parseInt !!!!
series.pointInterval = parseInt(interval);
options.series.push(series);*/
при условии, что значения собраны через регулярные промежутки времени (series.pointInterval) и не имеют «пропусков».
Напоследок несколько советов и рецептов с форума:
- Старайтесь не использовать больше 500 точек на графике, иначе начнутся приличные тормоза.
- Не забывайте, что время в формате unixtime необходимо еще умножать на 1000, чтобы оно правильно отображалось на графике.
- Про выделение точек на некоторых из графиков можно почитать здесь: http://highslide.com/forum/viewtopic.php?f=9&t=8101
- Как построить несколько графиков на одной htm странице и добавление новых точек по событию: http://highslide.com/forum/viewtopic.php?f=9&t=8030 и http://jsfiddle.net/QCefk/1/
- Смена цвета графика по hover: http://jsfiddle.net/vu8DB/
- Построение графика внутри «коридора», обозначающего, к примеру, ошибку измерений или разброс значений: http://jsfiddle.net/pHFfF/3/
- Масштабирование мышыным скролом: http://jsfiddle.net/HXUmK/4/
- Двойные оси X: http://jsfiddle.net/PPAUx/26/
- Нахождение минимумов и максимумов: http://jsfiddle.net/ebuTs/7/
Мне очень нравится библиотека Highcharts и графики, которые можно сделать с ее помощью. Надеюсь, понравилось и вам.
UPD: подскажите куда понадежнее переложить архивы со скриптами, а то ведь наверняка протухнет на ge.tt и depositfiles?