В этой статье показано, как создать электронные часы и описано, как создавать виджеты для Zabbix младших версий, ниже версии 7.0, где этого функционала не предусмотрено инструкцией Zabbix. Данная статья актуальна, так как до сих пор на большинстве проектов используется Zabbix младших версий. Особенно часто используется Zabbix младших версий из репозитория Astra Linux для проектов на этой системе. В репозитории для Astra Linux ниже 1.8, а также в других репозиториях Linux часто используется Zabbix версии ниже 7.0. В результате чего, на объектах, от системных инженеров поступают замечания на стандартные аналоговые часы Zabbix, которые совершенно не информативны. Эта статья решает проблему отсутствия электронных часов в Zabbix путём изменения стандартного виджета Zabbix clock, добавляя ему возможность выбора типа часов, сохраняя остальные настройки. Результат работы кода показан на рисунке 1 и 4.


В базовой инструкции Zabbix для старших версий написано, как создать новый виджет. Даже более того, есть возможность выбора представления времени в виджете Zabbix. Но, к сожалению, старые версии сильно отличаются от новой версии Zabbix, и поэтому невозможно просто взять и заменить код виджета на новый. В новой версии для виджетов есть специальная папка /zabbix/ui/widgets/, куда просто добавляется виджет, и затем он отображается при выборе на карте сетей. В старых версиях Zabbix виджеты прописаны в 8 файлах клиента PHP в директории /usr/share/zabbix/.
Файлы которые необходимо создать или поменять в случаи изменения виджета:
/usr/share/zabbix/include/classes/html/Cclock.php;
/usr/share/zabbix/app/controllers/CControllerWidgetClockView.php;
/usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php;
/usr/share/zabbix/js/widgets/class.widget.clock.js;
/usr/share/zabbix/app/views/monitoring.widget.clock.view.php;
/usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php;
/usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php;
/usr/share/zabbix/include/defines.inc.php;
Как видно по их названия можно понять за что они отвечают.
/usr/share/zabbix/include/classes/html/CClock.php
— Этот класс отвечает за создание и управление компонентом часов (клиентской части интерфейса), отображающим текущее время или часы в интерфейсе Zabbix. Он содержит методы для генерации HTML и стилей, связанных с отображением часов./usr/share/zabbix/app/controllers/CControllerWidgetClockView.php
— Контроллер, управляющий логикой отображения виджета с часами на панели мониторинга или в других частях интерфейса. Обрабатывает запросы, связанные с отображением и обновлением часов./usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php
— Класс формы для настройки или конфигурации виджета часов. Позволяет пользователю задавать параметры отображения, например, формат времени, часовой пояс и другие настройки./usr/share/zabbix/js/widgets/class.widget.clock.js
— JavaScript-класс, реализующий клиентскую логику работы виджета часов на веб-странице. Обеспечивает динамическое обновление времени, анимацию и взаимодействие с пользователем./usr/share/zabbix/app/views/monitoring.widget.clock.view.php
— Представление (view), отвечающее за отображение виджета часов в интерфейсе мониторинга. Генерирует HTML-разметку для отображения часов на странице./usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php
— PHP-скрипт, генерирующий JavaScript-код для формы настройки виджета часов в административной части интерфейса Zabbix./usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php
— PHP-шаблон или класс представления для формы конфигурации виджета часов, предоставляющий интерфейс для настройки параметров отображения./usr/share/zabbix/include/defines.inc.php
— Общий файл с определениями констант, настроек и глобальных переменных, используемых по всему проекту Zabbix.
Для внедрения цифровых часов я написал набор изменённых файлов, который выложил на GitHub. Эти файлы необходимо загрузить в ваш Zabbix через создание патча или предварительно вручную создав резервную копию изменяемых файлов для отката, используя bash-команды ниже. Также я в GitHub проект загрузил уже готовый патч. Стоит уточнить, что я пробовал установку этих изменений только на версиях 6.0.X, и вам стоит убедиться, как всё будет работать на ваших версиях.
Директория /opt/old_clock/ это пример директории куда сохранять резервную копию изменяемых файлов для отката.
sudo cp /usr/share/zabbix/include/classes/html/CClock.php /opt/old_clock/;
sudo cp /usr/share/zabbix/app/controllers/CControllerWidgetClockView.php /opt/old_clock/;
sudo cp /usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php /opt/old_clock/;
sudo cp /usr/share/zabbix/js/widgets/class.widget.clock.js /opt/old_clock/;
sudo cp /usr/share/zabbix/app/views/monitoring.widget.clock.view.php /opt/old_clock/;
sudo cp /usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php /opt/old_clock/;
sudo cp /usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php /opt/old_clock/ ;
Рекомендую перед установкой создать свой патч и проверить изменения которые будет применены к Zabbix. Директория /opt/clock это пример директории куда разархивирован GitHub проект.
Как создать патч. Патч — это очень удобный инструмент, который позволяет увидеть изменения в файле спустя продолжительное время. И самое главное, этот инструмент даёт возможность отката назад в любой момент времени одной командой после установки патча.
Установите sudo apt install patch; если не установлен.
Для создания патча необходимо применить команду
diff -u «исходный файл» «изменённый файл» | sed 's|+++ «изменённый файл»|+++ «исходный файл»|' >> /opt/clock/Clock.patch;
Пример команд для создания патча на любой версии Zabbix.
diff -u /dev/null /opt/clock/CClockDigital.php | sed 's|+++ /opt/clock/CClockDigital.php|+++ /usr/share/zabbix/include/classes/html/CClockDigital.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/include/classes/html/CClock.php /opt/clock/CClock.php | sed 's|+++ /opt/clock/CClock.php|+++ /usr/share/zabbix/include/classes/html/CClock.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/app/controllers/CControllerWidgetClockView.php /opt/clock/CControllerWidgetClockView.php | sed 's|+++ /opt/clock/CControllerWidgetClockView.php|+++ /usr/share/zabbix/app/controllers/CControllerWidgetClockView.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php /opt/clock/CWidgetFormClock.php | sed 's|+++ /opt/clock/CWidgetFormClock.php|+++ /usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/js/widgets/class.widget.clock.js /opt/clock/class.widget.clock.js | sed 's|+++ /opt/clock/class.widget.clock.js|+++ /usr/share/zabbix/js/widgets/class.widget.clock.js|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/app/views/monitoring.widget.clock.view.php /opt/clock/monitoring.widget.clock.view.php | sed 's|+++ /opt/clock/monitoring.widget.clock.view.php|+++ /usr/share/zabbix/app/views/monitoring.widget.clock.view.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php /opt/clock/widget.clock.form.view.js.php | sed 's|+++ /opt/clock/widget.clock.form.view.js.php|+++ /usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php|' >> /opt/clock/Clock.patch;
diff -u /usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php /opt/clock/widget.clock.form.view.php | sed 's|+++ /opt/clock/widget.clock.form.view.php|+++ /usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php|' >> /opt/clock/Clock.patch;
Для установки патча примените команду
sudo patch -d / -p0 < /opt/clock/Clock.patch
Для отката патча примените команду
sudo patch -R -d / -p0 < /opt/clock/Clock.patch
-d /
: Этот параметр указывает, что текущая директория для применения патча будет корневая директория (/
). Это необходимо, если патч содержит относительные пути к файлам, начинающимся с корня файловой системы.
-p0
: Этот параметр определяет, сколько уровней директорий будет удалено из путей в патче. -p0
означает, что не будет удалено ни одного уровня, и пути в патче будут использоваться в их исходном виде.
Пример применения патча показан на рисунке 3

Другой способ установки часов — это просто замена изменяемых файлов на файлы из проекта с GitHub. Скачав проект с GitHub, файлы с кодом PHP отправьте в папку /opt/clock или любую другую, из которой вы будете копировать файлы с заменой, как показано в bash-командах:
sudo cp /opt/clock/CClockDigital.php /usr/share/zabbix/include/classes/html/;
sudo cp /opt/clock/CClock.php /usr/share/zabbix/include/classes/html/CClock.php;
sudo cp /opt/clock/CControllerWidgetClockView.php /usr/share/zabbix/app/controllers/CControllerWidgetClockView.php;
sudo cp /opt/clock/CWidgetFormClock.php /usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php;
sudo cp /opt/clock/class.widget.clock.js /usr/share/zabbix/js/widgets/class.widget.clock.js;
sudo cp /opt/clock/monitoring.widget.clock.view.php /usr/share/zabbix/app/views/monitoring.widget.clock.view.php;
sudo cp /opt/clock/widget.clock.form.view.js.php /usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php;
sudo cp /opt/clock/widget.clock.form.view.php /usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php;
Для отката назад воспользуйтесь командами bash (если не забыли создать резервную копию изменяемых файлов для отката, как показано выше):
sudo cp /opt/old_clock/CClock.php /usr/share/zabbix/include/classes/html/CClock.php;
sudo cp /opt/old_clock/CControllerWidgetClockView.php /usr/share/zabbix/app/controllers/CControllerWidgetClockView.php;
sudo cp /opt/old_clock/CWidgetFormClock.php /usr/share/zabbix/include/classes/widgets/forms/CWidgetFormClock.php;
sudo cp /opt/old_clock/class.widget.clock.js /usr/share/zabbix/js/widgets/class.widget.clock.js;
sudo cp /opt/old_clock/monitoring.widget.clock.view.php /usr/share/zabbix/app/views/monitoring.widget.clock.view.php;
sudo cp /opt/old_clock/widget.clock.form.view.js.php /usr/share/zabbix/include/classes/widgets/views/js/widget.clock.form.view.js.php;
sudo cp /opt/old_clock/widget.clock.form.view.php /usr/share/zabbix/include/classes/widgets/views/widget.clock.form.view.php;
Код часов имеет несколько настроек параметров формата времени в разных файлах CclockDigital.php и основной class.widget.clock.js. Тут CclockDigital.php отвечает за формирование размера часов и формата времени в момент обновления виджета, а class.widget.clock.js отвечает за обновление времени посекундно и соответственно тут нужно вводить основной формат времени. Основные строки настройки времени:
$time = date('H:i:s'); // Получаем текущее время с секундами, задаём формат времени 'H:i:s'.
// Устанавливаем размеры часов
$digitalClock->setAttribute('style', 'width: '.$this->width.'px; height:'.$this->height.'px; font-size: 10em; margin-top: 60px;'); // Увеличиваем шрифт
// Обновляем содержимое элемента с цифровыми часами, задаём формат времени 'H:i:s'
document.querySelector('.digital-clock').innerText = `${hours}:${minutes}:${seconds}`;
Выбор типа часов, как на рисунке 4, записывается в таблицу widget_field базы данных zabbix. Запись в этой таблице появляется только когда выбран тип не по умолчанию (Аналоговый), строка clock_type значение 0; создание этой запись находится в файле CwidgetFormClock.php:
// Select source type field.
$field_source_type = (new CWidgetFieldRadioButtonList('clock_type', _('Тип часов'), [
0 => _('Аналоговые'),
1 => _('Цифровые')
]))
->setDefault(1)
->setAction('ZABBIX.Dashboard.reloadWidgetProperties()')
->setModern(true);
if (array_key_exists('clock_type', $this->data)) {
$field_source_type->setValue($this->data['clock_type']);
}
и файле CcontrollerWidgetClockView.php обработка типа:
$clock_type1 = true;
switch ($fields['clock_type']) {
case 0:
$clock_type1 = false;
break;
case 1:
$clock_type1 = true;
break;
}
