Работа с плагином SVG Map

Описание

SVG Map — виджет дашборда Glaber, который отображает пользовательскую векторную карту в формате SVG и накладывает на неё данные мониторинга.

Возможности виджета включают:

• привязку к хостам, группам хостов, элементам данных и триггерам;
• раскраску по максимальной серьёзности проблем (заливка, контур или «текст» — в зависимости от настройки);
• действие по клику: меню пользовательских URL, просмотр объектов (только для элементов данных);
• подстановку макросов в текстовом содержимом узлов SVG (плейсхолдеры вида {ИМЯ} при наличии соответствующих данных);
• Режим отладки для пошаговой настройки правил по клику на элементы карты;
• режимы масштабирования корневого SVG (как есть, вписать в область, по ширине, растянуть).

Включение модуля и добавление на дашборд

Виджет SVG map выбирается при добавлении виджета на дашборд.

По умолчанию модуль активен. Если его нет в списке доступных виджетов, включите модуль в разделе Администрирование → Общее → Модули.

Название модуля: SVG images linked to monitored objects states.

Создание

Карта задаётся полем Карты SVG (текст SVG-разметки).

SVG должен быть корректным XML (well-formed).

В настройках виджета в поле Привязка действий можно выбрать: ID элемента (по умолчанию) или Пользовательский атрибут.

В первом случае ключи в действиях будут сопоставляться с атрибутом id у элементов в SVG. Во втором случае укажите имя атрибута (например, my-custom-id): ключи в действиях будут сопоставляться со значениями этого атрибута у соответствующих элементов.

id корневого элемента <svg> не используется как привязка;

служебные идентификаторы слоев редактора, вида layer1, layer2 у групп <g> в стиле Inkscape игнорируются при сопоставлении с правилами (проверяется значение того атрибута, по которому включена привязка).

Ручное редактирование правил привязки (в поле "Действия") разрешено, но не рекомендуется.

Возможность оставлена для отладки/тонкой настройки; в данной инструкции этот способ не рассматривается.

Для создания SVG подойдёт любой редактор, который поддерживает экспорт векторной графики в SVG. В примере ниже использовался Inkscape.

После того как вы подготовили внешний вид карты, выполните шаги ниже.

1. Выберите сущности, на которые вы планируете привязать индикацию проблем и интерактивные действия.
2. Если сущность состоит из нескольких элементов (например, иконка + подпись) и вы хотите, чтобы они были «кликабельны» и/или меняли цвет вместе, объедините их в группу.
3. Присвойте каждой выбранной сущности (или группе) уникальный ключ привязки — по умолчанию это атрибут id, либо значение выбранного в настройках виджета атрибута (например my-custom-id).
4. Проверьте, что в SVG есть id="..." (в режиме привязки по id ), или ваш_атрибут="..." (В режиме Пользовательский атрибут) у нужных элементов.
5. Если накладывающиеся элементы не объединены в группу, они могут блокировать интерактивность (например, подпись поверх элемента может «перехватывать» клик).
6. Лучше всего, когда ключи есть только у тех элементов, которые вы действительно хотите сделать интерактивными.
7. Текст и макросы Glaber. Если нужны подстановки вида {HOST}, {NAME} и т.д., введите их прямо в текст на диаграмме — они уйдут в экспорт как содержимое <text>. Формат макросов: латиница A–Z и _ внутри фигурных скобок.
8. Экспортируйте карту в SVG и вставьте её в текстовое поле Карты SVG в настройках виджета. Выберите режим масштабирования (применится после сохранения виджета/дашборда) и включите Режим отладки.

Если вы используете diagrams.net, не стоит вручную заменять data-cell-id на id, или в настройках виджета указывать data-cell-id как пользовательский атрибут. Хотя это и будет работать, но приведет к тому, что каждый отдельный элемент будет "активным" что может спровоцировать неудобства при настройке привязок. Если редактор не позволяет назначать непосредственно id для атрибутов (как в diagrams.net), следует назначить свой собственный атрибут и прописать его в настройках виджета.

Если элементы реагируют на мышь (например, подсвечиваются при наведении), значит базовая интерактивность работает.

Привязка действий

Кликните по интерактивному элементу — откроется окно настройки правила для выбранного объекта.

Здесь можно настроить отображение и поведение элемента по клику.

Привязанные объекты

Привязанные объекты — к чему в мониторинге «привязан» этот фрагмент карты:

• Хосты — учитываются проблемы по выбранным хостам (с учётом фильтра серьёзностей в настройках виджета). Для одного хоста в тексте элемента можно использовать подстановки вроде имени и описания (макросы в фигурных скобках). Если хост выключен или в обслуживании, элемент может отображаться «неактивным» (серым).
• Группы хостов — учитываются проблемы по всем хостам из выбранных групп; удобно для регионов или кластеров на схеме.
• Элементы данных — учитываются проблемы через связанные с ними триггеры; при привязке одного элемента в подписи доступны его свойства (значение, ключ, единицы и т.д.). Отключённый элемент может отображаться серым.
• Триггеры — правило строится вокруг состояния выбранных триггеров.
• Без привязки — данные мониторинга для раскраски не используются; остаётся только то, что задано в SVG и в сценарии по клику (например, только ссылки).

Пока для элемента нет записи в Actions, виджет не применяет к нему свои правила: в обычном режиме он выглядит как в исходном файле.

Цвет проблем (раскраска)

Цвет проблем (раскраска) — нужно ли подсвечивать элемент по проблемам и какую часть менять:

• Заливка — цвет заливки по наивысшей серьёзности среди учтённых проблем. Очень тёмная или чисто белая заливка в исходном рисунке может не перекрашиваться, чтобы не ломать дизайн; для важных зон лучше задать нейтральный, но не чисто чёрный/белый цвет заливки.
• Контур — меняется цвет обводки.
• Текст — окрашивается цвет подписи (имеет смысл, если подпись задана как текст в SVG).
• Без раскраски — цвет элемента не меняется по проблемам; можно оставить только привязку для макросов в тексте или только действие по клику.

Цвета соответствуют цветам серьёзностей в интерфейсе Glaber.

По нажатию

По нажатию — что происходит при клике по элементу в обычном режиме просмотра дашборда:

• Нет — виджет не открывает своё меню; элемент не интерактивен с точки зрения модуля (если только сам SVG не содержит ссылок).
• Меню пользовательских URL — открывается всплывающее меню с заданными вами пунктами (название и адрес ссылки): документация, другой дашборд, внешняя панель и т.д.
• Просмотр объектов — открывается краткое окно с данными по выбранным элементам данных (items), удобно для быстрого просмотра метрик с карты. Пока что корректно работает только с привязкой к элементам данных.

В Режиме отладки клик по элементу, для которого уже есть правило, открывает окно редактирования этого правила.

Пример настройки

Например, здесь элементу назначен мониторинг узла «Zabbix server» и действие по клику — открыть список ссылок. Здесь ссылка ведёт на «Текущие проблемы» для данного узла.

Если переключить виджет в режим просмотра (можно нажать специальную кнопку на самом виджете), будет видно, что элемент окрашивается, а при нажатии появляется список ссылок.