Skip to content

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

Описание

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

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

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

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

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

Добавление виджета 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}, {VALUE} и т.д., введите их прямо в текст на диаграмме — они уйдут в экспорт как содержимое <text>. Формат макросов: латиница A–Z и _ внутри фигурных скобок. Подробнее — в разделе Макросы.
  8. Экспортируйте карту в SVG и вставьте её в текстовое поле Карты SVG в настройках виджета. Выберите режим масштабирования (применится после сохранения виджета/дашборда) и включите Режим отладки.
  9. Если включён строгий CSP (см. Content Security Policy) — нажмите Convert to CSP-safe SVG в настройках виджета и сохраните виджет. Без этой копии браузер может заблокировать стили из исходного SVG (<style> / атрибуты style).

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

Импорт SVG в виджет

Пример карты в Setup mode

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

CSP-safe копия SVG

Встроенные в SVG блоки <style> и атрибуты style="…" несовместимы со строгим CSP интерфейса Glaber (политика без style-src 'unsafe-inline').

В настройках виджета доступна кнопка Convert to CSP-safe SVG:

  • исходный текст в поле Карты SVG не меняется;
  • рядом сохраняется CSP-совместимая копия (CSS переносится в presentation-атрибуты SVG: fill, stroke, opacity и т.п.; <style>, style и <script> удаляются);
  • привязки по id / пользовательскому атрибуту, макросы {HOST} и правила Actions продолжают работать — идентификаторы элементов не переименовываются;
  • при $UI['use_strict_csp'] = 1 на дашборде рисуется CSP-копия (если она есть); без строгого CSP всегда рисуется оригинал.

Если вы изменили оригинал после конвертации:

  • виджет не пересчитывает копию автоматически;
  • при строгом CSP по-прежнему показывается прежняя CSP-копия, пока снова не нажмёте Convert;
  • в форме редактирования и на виджете показывается предупреждение, что правки оригинала не появятся под CSP, пока не выполнить конвертацию заново.

Ограничения конвертера: псевдоклассы (:hover), @media / @keyframes и сложные селекторы пропускаются (с предупреждением в форме). Экспорт diagrams.net / draw.io использует HTML-подписи внутри foreignObject (это встроенный HTML с CSS — его блокирует CSP). Конвертер разбирает эти HTML-подписи и переносит текст, цвет, шрифт и позицию в обычные SVG-элементы <text> (если в файле уже есть SVG-fallback, он сохраняется). Цвета light-dark(...) и var(..., fallback) упрощаются. Интерактивное наведение Glaber (svgmap_highlight) задаётся темой интерфейса и не зависит от CSS внутри SVG.

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

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

Окно редактирования правила

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

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

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

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

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

Макросы

Макросы подставляются в текстовое содержимое узлов SVG (обычно <text>). Имя — только A–Z и _ в фигурных скобках, например {HOST}, {VALUE}.

Набор доступных макросов зависит от типа привязки и того, что вернул API. Типичные случаи:

Привязка Примеры макросов
Хост (один) {HOST}, {NAME}, {DESCRIPTION} и другие поля хоста в верхнем регистре
Группа (одна) {NAME} и др.
Элемент данных (один) {NAME}, {KEY_}, {UNITS}, {VALUE}, {VAL}, {LASTVALUE}, {RVAL}
Триггер (один) {DESCRIPTION}, {PRIORITY} и др.

Для элемента данных:

  • {VALUE}, {VAL}, {LASTVALUE} — последнее значение с учётом карты значений элемента (valuemap), если она задана (например 0/1 → Down/Up).
  • {RVAL} — сырое последнее значение без карты значений.
  • Поля вроде {NAME}, {KEY_} — свойства элемента из API (имя ключа в макросе совпадает с именем поля в верхнем регистре).

Если макроса нет в контексте привязки, плейсхолдер в SVG остаётся как есть (не подставляется).

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

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

  • Заливка — цвет заливки по наивысшей серьёзности среди учтённых проблем. Чисто чёрная (#000000) или чисто белая (#ffffff) заливка в исходном рисунке не перекрашивается (чтобы не ломать подписи и фон); для зон статуса лучше задать другой цвет (например нейтральный серо-синий или зелёный «OK» в самом SVG).
  • Контур — меняется цвет обводки.
  • Текст — окрашивается цвет подписи (имеет смысл, если подпись задана как текст в SVG).
  • Без раскраски — цвет элемента не меняется по проблемам; можно оставить только привязку для макросов в тексте или только действие по клику.

Цвета проблем соответствуют цветам серьёзностей в интерфейсе Glaber. Раскраска по сырому значению элемента (0/1 и т.п.) не выполняется автоматически — цвет «всё хорошо» задаётся в SVG (или остаётся исходным), а виджет меняет его только при проблемах (или при отключённом объекте — серым).

По нажатию

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

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

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

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

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

Пример настроенного элемента

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

Пример меню ссылок