Веб JS Мониторинг серверов

Независимая, свежая версия мониторинга.
___________________________________
Небольшой и легкий JS скрипт для мониторинга Вашего проекта.
Скрипт использует стороннее API для получения данных с сервера.

Предпросмотр функционала/дизайна из коробки.​

Особенности мониторинга:

• Легкий в настройке.
• Отсутствие нагрузки.
• Работает на любом хостинге.
• Отличные возможности кастомизации вывода данных, улучшаемый функционал.

Требования: JQuery, Moment.js (В комплекте), Font Awesome.css (Опционально)

Установка:

Спойлер

1. Скачать архив ИЛИ самостоятельно извлечь все необходимое с JSFiddle.
2. Распаковать в удобное место на веб-хостинге (желательно в корень сайта)
3. Проделать следующее:

Добавить перед тегом </head> (или </body>, если ваш сайт и так загружен)
(Или добавить только в том месте, где должен прогружаться мониторинг.)

HTML:

<link href="/css/monitoring.css" rel="stylesheet">
<script src="/js/moment.js" type="text/javascript"></script>
<script src="/js/monitoring.js" type="text/javascript"></script>

Заполнить массив в /js/monitoring.js

Код:

...
servers: [{
        address: "IP:PORT",
        name: "Наименование сервера #1"
    }, {
        address: "IP:PORT",
        name: "Наименование сервера #2"
    }, {
        address: "IP:PORT",
        name: "Наименование сервера #3"
    }, {
        address: "IP:PORT",
        name: "Наименование сервера #4"
    }],
...

Добавить в нужном месте на сайте HTML код
(Внимание: Количество #div должно соответствовать количеству серверов в массиве)

HTML:

<hr class="monitoring-hr-top">
<div id="server0"></div>
<div id="server1"></div>
<div id="server2"></div>
<div id="server3"></div>
<hr class="monitoring-hr-bottom">
<div id="globalOnline"></div>

Опционально (Кнопка для обновления показателей):
Для нормального отображения должно присутствовать CSS расширение Font Awesome.

HTML:

<a class="refresh-btn" onclick="refreshBtn()"><i class="fa fa-refresh"></i> Обновить</a>

Более подробное описание шаблонизации / JS:
см. на JSFiddle или в /js/monitoring.js

// Совет: JS/CSS после установки и изменений следует сжать.

Распространение

Распространение данного мониторинга разрешено, но, с указанием авторских прав и ссылки на данную тему (+ JSFiddle)

Спойлер: Изменения / Changelog

--- 1.0.0 ---
Публичный релиз

--- 1.0.1 ---
+ Немного изменен дизайн
+ Мониторинг обновляется сам каждую 21 секунду.
+ Добавлена небольшая задержка для обновления.
+ Фикс небольших багов.

--- 1.1.0 ---
+ Изменен дизайн
+ Фикс багов
+ Добавлена функция "Общий онлайн"

--- 1.1.2 ---
+ Добавлена функция "Ссылка на описание сервера"
+ Фикс стилей

// Любые советы/запросы на изменение базового комплекта/благодарности буду рад видеть тут.
// Авторы: @limito, @Cyber Owl.


- Более простой мониторинг без зависимостей.

+ GitHub

 

Демо?

 

Неплохо!

 

Сделайте, пожалуйста, общий онлайн серверов и рекордный онлайн для одного сервера и для всех серверов.

 

Молодец, забираю

 

это заслуживает хорошей оценки

 

Абсолютный рекордный онлайн сделать пока-что невозможно.

Если складывать рекордный онлайн всех серверов - выйдет не то, что нужно
Сервер_1 = 100 рекордного онлайна
Сервер_2 = 0 рекордного онлайна
Рекордный онлайн всех серверов покажет 100
А если с Сервера_1 все разом перейдут на Сервер_2, то рекордный онлайн всех серверов будет 200 при онлайне 100.

Общий онлайн серверов - в процессе.
Текущие рекорды серверов можно посмотреть наведя курсор на наименование сервера.
(Пока что имеются проблемы, скоро починим.)[DOUBLEPOST=1404512609,1404506628][/DOUBLEPOST]Добавил две новые функции.
Подробнее в спойлере - Изменения.

 

Это сделано аж с первой версии.

 

Опять на это поганное DLE?

 

Где видно хоть слово про DLE? Мониторинг на JS - поставить можно хоть куда.

 

Просто у меня не работает.

 

Быть может, подробнее о проблеме?
Ссылка на сайт и т.д.?

 

Из этого следует, что у тебя кривые руки, а мониторинг - божеский, забрал.

 

Убедитесь, что все необходимые компоненты загружены перед выполнением JS.
Сначала должны быть загружены: JQuery, Moment.js и только потом monitoring.js.
Иначе - monitoring.js работать не будет.

Либо - смотрите в консоль отладчика.

Спойлер

 

У вас на fiddle комментарий в html строке /*Ядро*/, так вот Javascript скорее ядро, нежели html, это просто отображение.
И еще никогда не слышал чтоб библиотеки в js, называли неуместным словом API.
P.S. Это так, на будущее;-)

 

1) В строке написано не просто "Ядро", а "HTML "Ядро"" - именно в кавычках.
// Заменил на "скелет", понятнее будет.
2) В JS используется API для получения данных о сервере. И это не библиотека.
(Прошу быть чуточку внимательнее )

 

Хорошо, прошу прощения за невнимательность, только проснулся

 

Эхх, что-то много отмазок пошло нынче..

 

Хоть и схоже с отмазкой, но это правда