Posted by Публикуем небольшую заметку о возможностях настройки виджетов в платформе «Центральный Пульт». В данном случае речь пойдет о специальном виджете, отображающем в виде таблицы историю изменения состояний объектов наблюдаемой цифровой инфраструктуры.
Введение
Программный комплекс «Центральный Пульт» (SAYMON) – отечественная многофункциональная высокопроизводительная программная платформа мониторинга и управления цифровыми инфраструктурами, разрабатываемый компанией «РОССИННО».
Виджеты в программном комплексе служат для визуализации в разных формах накапливаемых данных мониторинга с целью наглядного представления и использования в работе специалистами различных категорий и служб – дежурные смены, администраторы комплекса, аналитики, эксперты, менеджеры разных уровней и др.
Доступный набор виджетов богат по числу и типам и систематически пополняется. Виджеты можно настраивать в соответствии с имеющимися нуждами и индивидуальным понятием об эстетике, связывать с объектами и отображать в веб-интерфейсе.
Виджет «State history» позволяет вывести историю изменений состояний объектов в табличном виде, включая сведения о дате и времени, имени объекта, его состоянии, причине смены состояния и описание.
Далее приводится пример настройки отображения информации в этом виджете с помощью различных CSS-стилей.
Часть 1. Изменение ширины лейбаков
По умолчанию виджет «State history» выглядит примерно так:
Можно сделать вид виджета немного привлекательнее, например, скорректировав размеры столбцов:
Для достижения этого результата достаточно добавить следующее описание CSS-стилей:
.label {
display: block;
width: 60px !important;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Стиль можно поместить не только в контекст настройки объекта на соответствующей вкладке, но и в единый файл настроек стилей для всего экземпляра системы по следующему пути в файловой системе сервера – /usr/local/saymon.local/css/saymon.local.css
Однако следует быть уверенным, что этот файл реально используется и доступен на вашем экземпляре по URL типа: https://saas.saymon.info/saymon.local/css/saymon.local.css
Часть 2. Скрытие ненужных элементов таблицы
Для ситуаций, когда часть информации в виджете выводить не требуется, ее вывод можно принудительно отключить.
Скрытие колонок
К примеру, мы хотим убрать вывод трех последних колонок в этом виджете.
Добавляем следующий CSS-код:
th:nth-of-type(4), th:nth-of-type(5), th:nth-of-type(6)
{ display: none; }
td:nth-of-type(4), td:nth-of-type(5), td:nth-of-type(6)
{ display: none; }
и получаем нужный вид виджета:
Скрытие заголовка таблицы
Для того, чтобы убрать заголовок таблицы потребуется следующий стиль:
thead { display: none; }
Результатом применения стиля будет такой вид отображения:
Скрытие названия секции
Отключение вывода названия секции (в данном случае – «State history») производится применением такого стиля:
.js-toggle-section { display: none; }
Результат не заставит себя ждать:
Заключение
Многие “настоящие математики” зачастую скептически относятся к эстетике и оформлению, считая это необязательным и пустой тратой времени. Платформа SAYMON решает вопросы не только для исключительных и прекрасных внутри.
Пользовательский интерфейс программного комплекса «Центральный Пульт» в считанные минуты можно настроить в дизайнерском, приятном глазу стиле. Особенно отрадно, что это можно делать как вручную, так и автоматически.