Text#

Текстовые визуализации позволяют включать текст или HTML-код в ваши информационные панели. Это можно использовать для добавления контекстной информации и описаний или для встраивания сложного HTML-кода.

Например, если вы хотите отобразить важные ссылки на своей информационной панели, вы можете использовать текстовую визуализацию для добавления этих ссылок:

Используйте текстовую визуализацию, когда вам нужно:

• Добавить важные ссылки или полезные примечания.

• Предоставьте инструкции или рекомендации по интерпретации различных панелей, настройке параметров или выполнению конкретных действий на основе отображаемых данных.

• Сообщите о любом запланированном техническом обслуживании или простоях, которые могут повлиять на ваши информационные панели.

Предусловия#

• Пользователь авторизован и имеет права на редактирование дашборда.

• Визуализация «Text» доступна в списке типов панелей.

• При использовании HTML с встраиванием — параметр allow_embedding = true включен в конфигурации.

• Контент (текст, разметка, переменные) подготовлен и соответствует цели отображения.

Правила эксплуатации#

• Используйте Text для добавления описаний, инструкций и ссылок — не подходит для отображения динамических или табличных данных.

• Применяйте режим Markdown — для форматированного текста с заголовками, списками и гиперссылками.

• Используйте режим HTML — при необходимости точного позиционирования или встраивания мультимедиа (с включенным allow_embedding).

• Включайте Code с подсветкой синтаксиса — для отображения конфигураций, JSON, SQL или скриптов.

• Не отключайте disable_sanitize_html без необходимости — это может привести к XSS-уязвимостям.

• Проверяйте отображение переменных (например, $interval, $host) — они должны подставляться корректно.

• Избегайте длинных текстов без прокрутки — используйте сворачиваемые блоки или ссылки на документацию.

• Убедитесь, что iframe и внешние ресурсы загружаются безопасно и не нарушают политику CSP.

• Тестируйте отображение на разных устройствах — особенно при использовании HTML-макетов.

• Обновляйте текст при изменении контекста дашборда — чтобы избежать устаревшей информации.

Последовательность выполнения#

1. Убедитесь, что плагин визуализации «Text» установлен в продукте PVV.

2. Откройте дашборд визуализации в интерфейсе PVV.

3. Выберите тип визуализации «Text».

4. Настройте параметры конфигурации

   

5. Нажмите кнопку «Save Dashboard», чтобы отобразить визуализацию панели.

Параметры конфигурации#

В следующем разделе описываются параметры конфигурации, доступные в панели редактора панелей для этой визуализации.

Panel options#

В разделе Параметры панели на панели редактора панелей задайте основные параметры, такие как заголовок и описание панели, а также ссылки на панели. Дополнительные сведения смотри в разделе Настройка параметров панели.

Text options#

Используйте следующие параметры для улучшения визуализации текста.

Результат#

После настройки и сохранения панели с визуализацией Text выполните следующие шаги для проверки корректности ее работы:

1. Проверка отображения текста
   Убедитесь, что:

   • Введенный текст отображается в панели без искажений.

   • При использовании режима Markdown — разметка корректно интерпретируется (заголовки, списки, ссылки, выделение).

   • При использовании режима HTML — HTML-элементы отображаются как ожидается (например, <b>, <i>, <a>, <img>).

   • При использовании режима Code — текст отображается в виде блока с подсветкой синтаксиса (если выбран язык).

2. Проверка поддержки переменных

   • Если в тексте используются переменные дашборда (например, $interval, $__from, $host):

     • Убедитесь, что они корректно подставляются при изменении временного диапазона или выборе значения из переменной.

     • Проверьте, что переменные отображаются в режиме Code и Markdown, если они не экранированы.

3. Проверка отображения дополнительных элементов

   • Убедитесь, что:

     • При включенной опции Show line numbers — в режиме Code отображаются номера строк.

     • При включенной опции Show mini map — в правой части редактора отображается мини-карта текста (для длинных фрагментов).

     • Изображения (в Markdown/HTML) загружаются и отображаются корректно.

     • Ссылки кликабельны и ведут на указанные адреса.

4. Проверка встраивания iframe (при необходимости)

   • Если в HTML-режиме используется <iframe>:

     • Убедитесь, что в конфигурации Grafana установлен параметр allow_embedding = true.

     • Проверьте, что внешний контент (например, веб-страница) отображается внутри панели.

     • Убедитесь, что iframe безопасен и не блокируется политикой безопасности браузера (CSP).

5. Проверка обработки HTML-кода

   • По умолчанию Grafana санирует HTML для безопасности.

   • Если используется необработанный HTML:

     • Убедитесь, что включен флаг disable_sanitize_html (если требуется).

     • Проверьте, что сложные элементы (таблицы, формы, скрипты — при разрешении) работают корректно.

     • Внимание: отключение санитизации может быть небезопасным — используйте только с доверенным контентом.

6. Проверка адаптивности и отображения на разных устройствах

   • Убедитесь, что:

     • Текст корректно переносится при изменении размера панели.

     • На мобильных устройствах содержимое читаемо и не выходит за границы.

     • Шрифты и стили отображаются корректно.

7. Проверка взаимодействия с другими панелями

   • Если текст содержит ссылки на другие панели или дашборды:

     • Убедитесь, что переходы работают.

     • Проверьте, что передаются параметры (например, ?var-host=server1).

8. Проверка сохранения и обновления

   • Обновите страницу — текстовая панель должна сохраниться