Canvas#

Canvas сочетают в себе мощь Grafana и гибкость пользовательских элементов. Это расширяемые визуализации, которые позволяют добавлять и размещать элементы там, где вы хотите, в неструктурированных статических и динамических макетах. Это позволяет создавать пользовательские визуализации и накладывать данные таким образом, который невозможен при использовании стандартных визуализаций Grafana, и все это в пользовательском интерфейсе Grafana. Если вы использовали популярные инструменты пользовательского интерфейса и веб-дизайна, то создание холстов покажется вам очень знакомым. Благодаря всем этим динамичным элементам возможности отображения на холсте практически безграничны.

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

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

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

• Для динамических элементов — источник данных настроен и предоставляет необходимые метрики.

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

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

• Ограничьте количество элементов на одном холсте — чрезмерная сложность снижает производительность и читаемость.

• Не размещайте критически важные метрики без резервного отображения на других панелях — Canvas сложнее поддерживать и автоматизировать.

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

• Используйте Zoom to content и Pan and zoom для удобства навигации по крупным схемам.

• Регулярно проверяйте работоспособность ссылок и API-действий, особенно после изменений в инфраструктуре.

• Храните резервные копии сложных Canvas — восстановление вручную затруднительно.

• Не используйте пользовательские изображения с внешних ненадежных URL — это угроза стабильности и безопасности.

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

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

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

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

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

   

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

Поддерживаемые форматы данных#

Визуализация canvas уникальна тем, что к ней не предъявляются какие-либо особые требования к данным. Можно начать добавлять и настраивать визуальные элементы, не предоставляя никаких данных. Однако любые данные, которые вы планируете использовать, должны быть доступны через поддерживаемые источники данных Grafana и структурированы таким образом, чтобы обеспечить плавную интеграцию с пользовательскими элементами.

Если ваш canvas будет обновляться в режиме реального времени, ваши данные должны обновляться с требуемыми интервалами без ухудшения взаимодействия с пользователем.

Можно привязать Elements и Connections к данным с помощью таких параметров, как текст, цвета, изображения фоновых узоров и т.д., доступных в визуализации canvas.

Elements#

Элементы являются основными строительными блоками Canvas и помогают визуализировать данные с различными формами и параметрами. Элементы можно поворачивать и перемещать по холсту. При перемещении элементов направляющие привязки и выравнивания помогают создавать более точные макеты. Добавьте элементы в разделе «Layer» в настройках canvas.

Element types#

Когда выбираете элемент, можете получить доступ к параметрам конфигурации для него, которые зависят от типа элемента.

В следующих разделах описаны различные доступные элементы.

• Metric value

• Text

• Ellipse

• Rectangle

• Icon

• Server

• Triangle

• Cloud

• Parallelogram

• Button

Basic shapes#

Элемент базовой фигуры может отображать текст (как фиксированные, так и полевые данные), а цвет его фона можно изменять в зависимости от пороговых значений данных. Можно добавить на холст следующие базовые фигуры:

• Cloud

• Ellipse

• Parallelogram

• Rectangle

• Triangle

Metric value#

Элемент metric value (значение метрики) позволяет выбрать данные, которые вы хотите отобразить на холсте. Этот элемент имеет уникальный режим редактирования, который можно активировать либо с помощью опции контекстного меню Редактировать, либо двойным щелчком мыши. В режиме редактирования вы можете выбрать, какие данные поля вы хотите отобразить.

Text#

Элемент text позволяет добавлять текст на холст. Элемент также поддерживает режим редактирования, который запускается либо двойным щелчком мыши, либо с помощью пункта меню edit в контекстном меню.

Icon#

Элемент icon позволяет добавить на холст поддерживаемый значок. Цвет значков может быть задан в зависимости от пороговых значений или сопоставлений значений.\

Можно добавить пользовательский значок, указав ссылку на файл SVG. Чтобы добавить пользовательский значок, выполните следующие действия:

1. В разделе Icon > SVG Path, если он еще не выбран, выберите Fixed в качестве источника файла.

2. Нажмите Select a value в поле ниже.

3. В открывшемся диалоговом окне перейдите на вкладку URL.

4. Введите URL в поле под вкладкой URL.

   

5. Нажмите кнопку Выбрать.

6. (опционально) Добавьте фоновое изображение к своему значку с помощью опции Фон (значок), выполнив действия, необходимые для добавления пользовательского изображения.

Если у вас нет файла SVG, вы можете использовать прямоугольный элемент вместо значка и задать для его фонового изображения тип файла image. Чтобы добавить пользовательское изображение для другого типа элемента, выполните действия, описанные в инструкции по добавлению пользовательского изображения.

Server#

Элемент server позволяет легко представить отдельный сервер, группу серверов, базу данных или терминал. Элементы Server поддерживают цвет состояния, цвет лампочки и частоту мигания лампочки, которые настраиваются с помощью фиксированных или полевых значений.

Button#

Элемент button позволяет добавить базовую кнопку на холст. Элементы Button поддерживают запуск базовых, не прошедших проверку подлинности вызовов API. Настройки API находятся в редакторе элементов button. Можно передавать переменные шаблона в редакторе API.

Button API options#

Следующие параметры позволяют настроить базовые, не аутентифицированные вызовы API:

Добавление пользовательских изображений к элементам#

Можете добавить пользовательские фоновые изображения ко всем элементам, кроме кнопки, указав URL-адрес изображения. Изображение должно быть размещено по URL-адресу, который разрешает запросы из вашего экземпляра Grafana.

Чтобы загрузить пользовательское изображение, выполните следующие действия:

1. В разделе Background (<ELEMENT TYPE>), если он еще не выбран, выберите Фиксированный в качестве источника изображения.

   

2. Нажмите «Выбрать значение» в поле ниже.

3. В открывшемся диалоговом окне перейдите на вкладку «URL».

4. Введите URL-адрес в поле под вкладкой «URL».

   

5. Нажмите кнопку Выбрать.

Connections#

При создании холста вы можете соединять элементы друг с другом для создания более сложных визуализаций. Можно создавать соединения с фоном холста.

Чтобы создать соединение, выполните следующие действия:

1. На панели редактирования разверните раздел Параметры Canvas.

2. Включите переключатель встроенного редактирования.

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

   

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

Connection adjustments#

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

Чтобы настроить соединение, нажмите по нему, чтобы отобразить элементы управления средней точкой, и переместите их по мере необходимости. Чтобы снова превратить соединение в прямую линию, переместите среднюю точку назад, пока элементы управления средней точкой не исчезнут. Если вы переместите соединение так, что оно станет почти прямым углом или прямой линией, соединение превратится в этот угол или прямую линию.

Connection styles#

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

Редактирование Canvas#

Можно вносить изменения в визуализацию canvas, находясь в контексте панели мониторинга или в режиме панели мониторинга. В следующих разделах описаны параметры редактирования, доступные в режиме панели мониторинга.

Inline editor#

Можно редактировать свой холст в режиме встроенной панели мониторинга. В меню встроенного редактора отображаются параметры, относящиеся к выбранной вами части холста. Можно перемещать окно редактора по кругу.

Context menu#

Контекстное меню позволяет быстро и эффективно выполнять обычные задачи. Поддерживаемые функции включают в себя открытие и закрытие встроенного редактора, дублирование элемента, удаление элемента и многое другое. Контекстное меню вызывается щелчком правой кнопкой мыши по панели или по заданному элементу canvas нажав правой кнопкой мыши на панели, можно установить фоновое изображение и легко добавить элементы на холст.

Щелкая правой кнопкой мыши по элементу, вы можете редактировать, удалять, дублировать и изменять расположение слоя элемента.

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

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

Panel options#

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

Canvas options#

Inline editing#

Переключатель встроенного редактирования позволяет заблокировать или разблокировать холст. При выключении холст становится заблокированным, фиксируя элементы на месте и предотвращая непреднамеренные изменения.

Experimental Element types#

Переключите переключатель, чтобы включить экспериментальные типы элементов в доступные варианты выбора.

Pan and zoom#

Можно включить панорамирование и масштабирование холста. Это позволяет создавать более сложные рисунки и перемещаться по ним.

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

• Zoom in - прокрутка вверх

• Zoom out - прокрутка вниз

• Pan - Средняя часть мыши / колесико + перетаскивание ИЛИ управление + щелчок правой кнопкой мыши + перетаскивание

• Reset - Двойной щелчок

Zoom to content#

Когда вы включаете переключатель масштабирования содержимого, Grafana автоматически настраивает вид, чтобы все видимые элементы вашей визуализации canvas поместились на экране просмотра, добавляя небольшое поле по краям. Это позволяет легко изменять вид, отображать содержимое или переключаться между устройствами без потери кадрирования. Содержимое будет изменено по размеру, даже если вы измените размер панели.

Tooltip options#

Параметр «Режим всплывающих подсказок» управляет отображением всплывающих подсказок при наведении курсора на элементы canvas, которые связаны с данными, ссылками на данные или действиями. Параметры:

• Enabled - отображение всплывающей подсказки при наведении курсора на элемент.

• Disabled - всплывающие подсказки не отображаются при наведении курсора мыши. Параметр Disable for one-click elements позволяет скрывать всплывающие подсказки для элементов, для которых включена функция «одним щелчком мыши». Это предотвращает вмешательство всплывающих подсказок во взаимодействие с одним щелчком мыши, но при этом позволяет отображать всплывающие подсказки для других элементов.

Layer options#

Параметры слоя позволяют добавлять элементы на холст и управлять его внешним видом:

• Elements

• Background

• Border

Elements (layer)#

Используйте кнопку «Добавить элемент», чтобы открыть раскрывающийся список «Тип элемента». Элементы перечислены в порядке, обратном тому, в котором вы добавляли их на холст:

По умолчанию элементы имеют нумерованные названия, например Элемент 1, и эти номера соответствуют порядку, в котором элементы были добавлены, но вы можете изменить имена по умолчанию.

Можно выполнить следующие действия с элементами:

• Измените порядок расположения элементов, нажать и удерживать строку элемента, перемещая ее вверх и вниз по списку элементов.

• Дублируйте или удаляйте элементы, щелкая значки в строке элементов.

• Для доступа к параметрам редактирования элемента нажмите строку элемента. Здесь отображается раздел параметров выбранного элемента. Нажмите Очистить выделение, чтобы удалить элемент из фокуса и прекратить отображение этого раздела параметров.

Переименовать элемент

Чтобы изменить название элемента, выполните следующие действия:

1. Наведите курсор на название элемента, чтобы отобразился значок редактирования названия слоя (карандаш).

2. Нажмите значок редактирования названия слоя.

3. Введите новое название.

4. Нажмите за пределами поля название.

Background (canvas)#

Используйте следующие параметры для управления фоном canvas:

Border (canvas)#

Используйте следующие параметры для управления границей холста:

Selected element options#

Следующие опции позволяют вам управлять внешним видом выбранного вами элемента. Чтобы получить доступ к элементу и отредактировать его, разверните раздел «Слой» и выберите нужный элемент.

Element type#

Можно изменить тип элемента, сделав новый выбор в выпадающем списке:

Element#

Этот раздел назван в зависимости от типа элемента. Управляйте отображением текста на элементе с помощью следующих параметров:

Layout#

Управляйте размещением элементов на холсте с помощью следующих опций:

Background (element)#

Используйте следующие опции для настройки фона элемента:

• Color - Установите цвет фона.

• Image - Используйте одно из предоставленных фоновых изображений или добавьте свое собственное изображение.

Эта опция не применяется к элементу button.

Border (element)#

Используйте следующие опции, чтобы задать границу элемента:

• Width - Задайте ширину границы в пикселях.

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

• Radius - Добавляйте закругленные углы к границе элемента и контролируйте степень изгиба.

Data links and actions#

Canvases поддерживают ссылки на данные и действия для всех элементов.

Если вы добавляете к элементу несколько ссылок на данные или действий, вы можете управлять порядком их отображения во всплывающей подсказке элемента. Для этого щелкните и перетащите ссылку или действие в нужное положение. В следующих задачах описывается, как настроить каналы передачи данных и действия.

Чтобы добавить ссылку на данные, выполните следующие действия:

1. Включите встроенное редактирование.

2. Щелкните элемент, к которому вы хотите добавить ссылку на данные.

3. Во встроенном редакторе или в редакторе панелей раскройте редактор выбранных элементов.

4. Прокрутите вниз до раздела Data links and actions и разверните его.

5. Нажмите + Добавить ссылку.

6. В открывшемся диалоговом окне введите заголовок. Это понятная для пользователя метка для ссылки, отображаемой в пользовательском интерфейсе. Это обязательное поле.

7. Введите URL-адрес или переменную, на которые вы хотите установить ссылку. Чтобы добавить переменную ссылки на данные, щелкните в поле URL и введите $ или нажмите Ctrl+пробел или Cmd+пробел, чтобы просмотреть список доступных переменных. Это обязательное для заполнения поле.

8. Если вы хотите, чтобы ссылка открывалась на новой вкладке, установите переключатель Open in a new tab.

9. Если вы хотите, чтобы ссылка с данными открывалась одним щелчком мыши на элементе, установите переключатель One click. Только для одной ссылки с данными или действия может быть активирован один щелчок одновременно.

10. Нажмите Save, чтобы сохранить изменения и закрыть диалоговое окно.

11. Отключите встроенное редактирование.

Чтобы добавить действие, выполните следующие действия:

1. Включите встроенное редактирование.

2. Щелкните элемент, к которому вы хотите добавить ссылку на данные.

3. Во встроенном редакторе или в редакторе панелей раскройте редактор выбранных элементов.

4. Прокрутите вниз до раздела Data links and actions и разверните его.

5. Нажмите + Add action. В открывшемся диалоговом окне задайте параметры действия

6. Нажмите кнопку Сохранить, чтобы сохранить изменения и закрыть диалоговое окно.

7. Отключите встроенное редактирование.

Selected connection options#

Можно придать выбранному соединению стиль, используя следующие опции:

• Color - Задать цвет соединения.

• Size - Управлять размером соединения, введя число в поле Значение.

• Radius - Добавить кривую к соединению, введя значение для представления степени.

• Direction - управляет отображением начертания стрелки. Выберите источник из списка Fixed или Field. Значение по умолчанию - Forward, независимо от типа источника.

  Если направление источника Fixed, выберите из списка:

  • Forward - Начертание стрелки указывает направление, в котором было проведено соединение.

  • Reverse - начало стрелки указывает в направлении, противоположном тому, в котором было проведено соединение.

  • Both - добавляет концы стрелок к обоим концам соединения.

  • None - Удаляет начало стрелки.

  Если источником направления является поле, выберите поле, содержащее числовые значения:

  • Positive values - отображает стрелки вперед.

  • Negative values - Отображаются обратные стрелки.

  • Zero - Не отображаются начальные точки стрелок.

• Line style - Выберите один из следующих стилей линий: Solid, Dashed, и Dotted.

Standard options#

Стандартные параметры в панели редактора панелей позволяют изменять способ отображения данных полей в визуализациях. При установке стандартного параметра изменение применяется ко всем полям или рядам. Для более детального управления отображением полей обратитесь к разделу Настройка переопределений.

Value mappings#

Сопоставление значений - это метод, который можно использовать для изменения отображения данных в визуализации.

Для каждого сопоставления значений задайте следующие параметры:

• Condition - выберите, что будет отображаться в отображаемом тексте и (необязательно) цвете:

  • Value - Конкретные значения

  • Range - Числовые диапазоны

  • Regex - Регулярные выражения

  • Special - специальные значения, такие как Null, NaN (не число), или логические значения, такие как true и false

• Display text

• Color (Optional)

• Icon (только Canvas)

Field overrides#

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

Выберите один из следующих вариантов переопределения:

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

Thresholds#

Пороговое значение - это значение или предел, который отображается визуально при его достижении или превышении. Пороговые значения - это один из способов, с помощью которого вы можете условно стилизовать и раскрашивать свои визуализации на основе результатов запроса.

Для каждого порогового значения задайте следующие параметры:

Результат#

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

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

   • Все добавленные элементы (текст, фигуры, значки, серверы и т.д.) отображаются на холсте.

   • Элементы расположены в соответствии с заданными координатами и выравниванием.

   • При использовании пользовательских изображений (SVG, фон) — они загружены и отображаются без искажений.

2. Проверка привязки данных

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

     • Элементы, привязанные к данным (например, Metric value, Text, Icon), отображают актуальные значения.

     • Цвета, размеры или текст, изменяются в соответствии с порогами (Thresholds) или сопоставлениями (Value mappings).

     • При обновлении временного диапазона — данные на холсте пересчитываются.

3. Проверка соединений (Connections)

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

     • Все соединения между элементами отображаются корректно.

     • Стиль линии (сплошная, пунктирная), цвет, направление стрелок соответствуют настройкам.

     • При изменении положения элементов — соединения корректно перемещаются и сохраняют привязку.

     • Добавленные углы и изгибы в соединениях сохраняются при редактировании.

4. Проверка интерактивности элементов

   • Если настроены ссылки на данные (Data links):

     • Клик по элементу должен переходить по-указанному URL.

     • При включенной опции One click — переход происходит без дополнительных действий.

     • При нескольких ссылках — открывается меню выбора.

   • Если настроены действия (API):

     • Клик по кнопке должен инициировать вызов API.

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

     • Убедитесь, что переменные (например, $__value, $__field) подставляются правильно.

5. Проверка режимов редактирования

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

     • При включенном Inline editing — можно перемещать, редактировать и удалять элементы.

     • При выключении — холст «заблокирован», элементы не перемещаются.

     • Контекстное меню (правый клик) работает:

       • По панели — позволяет добавить элементы, настроить фон.

       • По элементу — позволяет редактировать, дублировать, удалять.

6. Проверка масштабирования и панорамирования

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

     • При включенной опции Pan and zoom:

       • Прокрутка колесиком — изменяет масштаб.

       • Средняя кнопка мыши + перетаскивание — панорамирует холст.