Конструктор виджетов

Платформа Радар позволяет визуализировать данные с помощью виджетов. Виджеты применяются при работе с данными в разделах Рабочие столы и Отчеты.

Перейти в конструктор виджетов можно несколькими способами:

Способ 1. Из раздела Рабочие столы начать процесс добавления или редактирования виджета;
Способ 2. Из раздела Отчеты начать процесс редактирования виджета.

Внешний вид конструктора виджетов приведен на рисунке 1.

Рисунок 1 -- Страница "Конструктор виджетов"

Конструктор состоит из следующих блоков:

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

Панель действий

Блок располагается вверху страницы конструктора виджетов (см. рисунок 2).

Рисунок 2 -- Конструктор виджетов. Блок "Панель действий"

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

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

Режим визуализации/Режим отладки

Блок располагается по центру конструктора. Переключение между режимами выполняется с помощью переключателя Режим отладки. В режиме визуализации можно посмотреть то, как виджет будет выглядеть на рабочем столе или странице отчета (см. рисунок 3).

Рисунок 3 -- Конструктор виджетов. Блок "Режим визуализации"

В режиме отладки можно посмотреть корректность работы написанных запросов (см. рисунок 4).

Рисунок 4 -- Конструктор виджетов. Блок "Режим отладки"

Конструктор запросов

Блок располагается под режимом визуализации/отладки (см. рисунок 5).

Рисунок 5 -- Конструктор виджетов. Блок "Конструктор запросов"

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

Кнопка	Действие
	добавление запроса
	изменение расположения запроса
	изменение наименования запроса
	доступ к следующим действиям над запросом: - скопировать настройки; - вставить настройки; - дублировать; - удалить.
	добавление параметра
	удаление параметра из запроса
	добавление агрегацию в запрос
	синий индикатор обозначает что к запросу добавлена агрегация. При повторном клике можно ее изменить

Настройка внешнего вида виджета

Блок располагается в правой части страницы конструктора и формируется в зависимости от выбранного виджета (см. рисунок 6).

Рисунок 6 -- Конструктор виджетов. Блок "Настройка внешнего вида виджета"

Особенности работы в конструкторе

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

По типу запросов виджеты делятся на виджеты с серией запросов и на виджеты без серии запросов (простые):

Для следующих типов виджетов можно задать серию запросов:
- временной ряд;
- гистограмма;
- круговая диаграмма;
- метрика;
- таблица.
Для следующих типов виджетов нельзя задать серию запросов:
- текст;
- изображение.

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

Выберите тип виджета из выпадающего списка.
Укажите "Основные настройки виджета".
Если для виджета доступна настройка серии запросов, то включите Режим отладки.
Настройте запрос или серию запросов.
Обновите отображаемую информацию и проверьте работу запросов в Режиме отладки.
Удостоверьтесь что все настроенные запросы работают корректно.
Для настройки параметров визуализации отключите Режим отладки.
Укажите настройки визуализации серии запросов.
Удостоверьтесь что визуализация данных в виджете работает корректно.
Сохраните изменения нажав соответствующую кнопку.

Конструктор запросов

Управление запросами включает в себя следующие процессы:

Добавление запроса.
Дублирование запроса.
Копирование параметров запроса.
Удаление запроса.

Добавление запроса

Примечание: перед началом процесса добавления запроса рекомендуется включить Режим отладки. После изменения запроса рекомендуется обновлять данные с помощью кнопки для проверки корректности запроса.

Для начала процесса добавления запроса нажмите кнопку .

При необходимости вы можете изменить наименование запроса нажав кнопку

Добавление запроса можно условно разделить на несколько шагов:

Шаг 1. Выбор источника данных и датасета.
Шаг 2. Настройка периода формирования запроса.
Шаг 3. Добавление набора полей, информация по которым будет обрабатываться запросом.
Шаг 4. Настройка условий фильтрации выбранных полей.
Шаг 5. Настройка группировки и сортировки выбранных полей.

Шаг 1. Выбор источника данных и датасета

На данном шаге необходимо выбрать источник данных, информация из которого будет обрабатываться запросом, и соответствующий набор данных - датасет (см. рисунок 7).

Рисунок 7 -- Конструктор запросов. Выбор источника данных, датасета и периода

Соответствие источников данных и датасетов приведено в таблице:

Источник данных	Датасет
Основное	Инциденты
События	- Все - Нормализованные - Обработанные - Ошибки
Метрики системы	- Менеджер кластера - Elasticsearch-exporter - Кафка - Лог- коллектор - Коррелятор - Mongodb-exporter - Node-exporter - Общие метрики - Хранилище событий - Коллектор метрик - Rabbitmq-plugin - Redis - Rsyslog
Табличные списки	Датасет формируется на основе данных созданных пользователем при работе с табличными списками

Шаг 2. Выбор периода формирования запроса

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

Для изменения периода формирования запроса (см. рисунок 7) выполните следующие действия:

Нажмите на соответствующее поле. Откроется окно выбора временного диапазона.
Выберите период. Доступные значения:
- за все время;
- текущие: минута, час, день, месяц, год;
- последние: минуты, часы, месяца, года;
- период можно указать вручную в соответствующих полях. Поддерживается формат дат из Grafana.
Нажмите кнопку Применить.

Шаг 3. Настройка набора полей

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

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

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

count - по любым значениям;
min - по минимальным значениям;
max - по максимальным значениям;
sum - по сумме всех значений;
avg - по среднему значению;
interval - по интервалу (минуты, часы и.д.).

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

Если вы хотите чтобы в запросе отображались только уникальные значения полей, то включите переключатель Только уникальные значения.
Нажмите кнопку .
Появятся параметры для настройки поля (см. рисунок 8).

Рисунок 8 -- Конструктор запросов. Набор полей

Выберите необходимое поле датасета из выпадающего списка.
При необходимости укажите алиас.
При необходимости задайте агрегацию. Для этого нажмите на кнопку добавления агрегации. Откроется окно "Настройки поля" (см. рисунок 9).

Рисунок 9 -- Окно "Настройки поля"

Укажите в окне следующие данные:
- в поле "Агрегация" из выпадающего списка выберите функцию группировки результатов запроса;
- в поле "Параметры" из выпадающего списка выберите параметры функции;
- если необходимо выполнять агрегацию только по уникальным значениям то установите соответствующий флаг;
- если необходимо чтобы агрегация применялась только в рамках заданного периода, то установите флаг Использовать для периода (только для полей с типом date).
Добавьте необходимое количество полей.

Шаг 4. Условия фильтрации

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

Нажмите кнопку . Появятся параметры для настройки условия фильтрации (см. рисунок 10).

Рисунок 10 -- Конструктор запросов. Условия фильтрации

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

Шаг 5. Группировка и Сортировка

Примечание: данный шаг недоступен для полей из источника данных Метрики системы.

Группировка используется для объединения результатов по настроенным функциям агрегаций. Например, если вы хотите получить результаты по уровню риска инцидента и дате создания инцидента и при этом выставили агрегацию для поля "Уровень риска" в count, то вам необходимо будет выполнить группировку по полю "Дата создания". В результате вы получите группировку всех инцидентов с одинаковым уровнем риска по датам.

Для настройки нажмите кнопку и выберите поле по которому вы хотите выполнить группировку (см. рисунок 11).

Рисунок 11 - Конструктор виджетов. Группировка и сортировка

Сортировка настраивает порядок отображения результатов запроса: asc/desc. Для сортировки можно настроить следующие параметры:

Лимит - сколько элементов возвращать в запросе;
Оффсет - сколько элементов пропустить.

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

Нажмите кнопку . Появятся параметры для настройки сортировки (см. рисунок 11).
Выберите поле из выпадающего списка, по которому вы хотите настроить сортировку.
Выберите направление сортировки: asc/desc.
В поле "Лимит" укажите значение лимита.
В поле "Оффсет" укажите значение оффсета.

Копирование запроса

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

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

Дублирование запроса

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

Удаление запроса

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

Настройка внешнего вида виджета

Примечание: настройку внешнего вида виджета рекомендуется выполнять после настройки серии запросов и в режиме визуализации (переведите переключатель Режим отладки в состояние "выключен").

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

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

Основные настройки виджета

Блок "Основные настройки" является общим для всех типов виджетов (см. рисунок 12).

Рисунок 12 -- Основные настройки виджетов

В блоке доступны следующие настройки:

Флаг "Показывать заголовок" - включение/выключение отображения наименования виджета на рабочем столе/отчете;
Заголовок - наименование виджета;
Описание - дополнительная информация о виджете.

Пример отображения основных настроек приведен на рисунке 13. Рисунок 13 -- Отображение основных настроек на виджете

Временной ряд

Виджет отображает график с группировкой по количеству значений параметра от выбранного источника за определенный период времени. Пример внешнего вида приведен на рисунке 14.

Рисунок 14 -- Виджет "Временной ряд"

Настройка внешнего вида виджета виджета включает в себя следующие шаги:

Шаг 1. Настройка осей для отображения графика.
Шаг 2. Настройка визуализации результатов запроса.
Шаг 3. Настройка легенды.

Пример настроек приведен на рисунке 15.

Рисунок 15 -- Виджет "Временной ряд". Настройки

Шаг 1. Настройка осей

Примечание: значения полей, которые доступны для выбора при настройке данного шага, формируются на основе данных указанных в запросе (подробнее см. раздел "Добавление запроса.").

Настройка позволяет выбрать значения полей для оси X и для оси Y, по которым будет строиться график.

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

Из выпадающего списка выберите поле для оси Х.
Из выпадающего списка выберите поле для оси Y.
Проверьте отображение осей на виджете.

Шаг 2. Настройка визуализации

Настройка позволяет выбрать один из двух стилей графика:

линия;
колонка.

При выборе стиля "Линия" доступна возможность настроить дополнительные параметры:

Внешний вид линий на графике:
- линейный;
- скругленный;
- шаг с начала;
- шаг с конца.
Включение/выключение отображения точек.

Примеры визуализации графика приведены на рисунке 16.

Рисунок 16 -- Примеры визуализации настроек виджета "Временной ряд"

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

Если в параметрах различных серий запросов используются разный набор полей, то чтобы объединить их необходимо ввести одинаковое название для каждого Алиас (подробнее см. раздел "Добавление запроса"). Для объединения полей при визуализации необходимо в параметрах блока "Настройка осей" указать Алиас.

Пример отображения с включенным и выключенным стеком приведен на рисунке 17.

Рисунок 17 -- Пример визуализации виджета со стеком

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

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

Шаг 3. Легенда

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

Круговая диаграмма

Виджет отображает группировку по выбранным параметрам с процентным распределением. Пример визуализации приведен на рисунке 18.

Рисунок 18 -- Виджет "Круговая диаграмма"

Пример настроек приведен на рисунке 19.

Рисунок 19 -- Виджет "Круговая диаграмма". Настройки

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

В блоке "Настройка осей" укажите следующие данные:
- выберите стратегию обработки некорректных значений: игнорировать или использовать по умолчанию;
- из выпадающего списка выберите поле для оси Х;
- из выпадающего списка выберите поле для оси Y.
В блоке "Настройка визуализации" при необходимости включите отображение следующих данных:
- проценты по выбранным полям;
- значения по выбранным полям.
В блоке "Легенда" выберите место расположения легенды.

Примечание: значения полей, которые доступны для выбора при настройке в блоке "Настройка осей", формируются на основе данных указанных в запросе (подробнее см. раздел "Добавление запроса").

Варианты настроек визуализации приведены на рисунке 20.

Рисунок 20 -- Примеры визуализации настроек виджета "Круговая диаграмма"

Таблица

Виджет отображает выбранные показатели в табличном варианте. Пример визуализации приведен на рисунке 21.

Рисунок 21 -- Виджет "Таблица"

Пример блока "Настройки" приведен на рисунке 22.

Рисунок 22 -- Виджет "Таблица". Настройки

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

Для добавления колонок в таблицу нажмите кнопку . Добавьте необходимое количество колонок.
В поле "key" из выпадающего списка выберите поле или алиас из набора полей запроса, значения которого будут отображаться в колонке.
В поле "label" укажите наименование колонки, которое будет отображаться в виджете.
При необходимости установите флаг "Сгруппировать значения" для объединения результатов запроса по выбранному полю в одну ячейку таблицы.
Выберите стратегию обработки некорректных значений: игнорировать или использовать по умолчанию.

Примечание: значения полей, которые доступны для выбора при настройке колонок таблицы, формируются на основе данных указанных в запросе (подробнее см. раздел "Добавление запроса").

Примеры визуализации настроек приведены на рисунке 23.

Рисунок 23 -- Примеры визуализации настроек виджета "Таблица"

Текст

Примечание: данный тип виджета не поддерживает серию запросов.

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

Пример визуализации приведен на рисунке 24.

Рисунок 24 -- Виджет "Текст"

Пример настроек приведен на рисунке 25.

Рисунок 25 -- Виджет "Текст". Настройки

Для настройки виджета в блоке "Текст" укажите необходимую информацию.

Гистограмма

Виджет отображает столбчатую диаграмму с группировкой по количеству значений параметра от выбранного источника за определенный период времени. Пример внешнего вида приведен на рисунке 26.

Рисунок 26 -- Виджет "Гистограмма"

Настройка внешнего вида виджета виджета включает в себя следующие шаги:

Шаг 1. Настройка осей для отображения графика.
Шаг 2. Настройка визуализации результатов запроса.
Шаг 3. Настройка легенды.

Пример настроек приведен на рисунке 27.

Рисунок 27 -- Виджет "Гистограмма". Настройки

Шаг 1. Настройка осей

Примечание: значения полей, которые доступны для выбора при настройке шага, формируются на основе данных указанных в запросе (подробнее см. раздел "Добавление запроса").

Настройка позволяет выбрать значения полей для оси X и для оси Y, по которым будет строиться график.

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

Из выпадающего списка выберите поле для оси Х.
Если вы хотите задать конкретный диапазон по оси Х, по которому будут визуализироваться результаты запроса, то установите флаг "Кастомный диапазон". Появятся поля для настройки диапазона:
- нажмите кнопку ;
- укажите диапазон в соответствующем поле;
- если вы хотите использовать значения не входящие в диапазон то установите соответствующий флаг.
Из выпадающего списка выберите поле для оси Y.
Проверьте отображение осей на виджете.

Шаг 2. Настройка визуализации

Настройка позволяет выбрать следующие параметры:

стиль диаграммы: линия или колонка;
включить или выключить стек;
выбрать цветовую схему диаграммы.

При выборе стиля "Линия" доступна возможность настроить дополнительные параметры:

Внешний вид линий на диаграмме:
- линейный;
- скругленный;
- шаг с начала;
- шаг с конца.
Включение/выключение отображения точек.

Примеры визуализации графика приведены на: рисунке 28.

Рисунок 28 -- Примеры визуализации настроек виджета "Гистаграмма".

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

Если в параметрах различных серий запросов используются разный набор полей, то чтобы объединить их необходимо ввести одинаковое название для каждого Алиас (подробнее см. раздел "Добавление запроса"). Для объединения полей при визуализации необходимо в параметрах блока "Настройка осей" указать Алиас.

Пример отображения с включенным и выключенным стеком приведен на рисунке 29.

Рисунок 29 -- Примеры визуализации виджета со стеком

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

Выберите стиль: линия или колонка.
При необходимости включите стек, установив соответствующий флаг.
Если выбран стиль линия, то выберите ее тип: линейный, скругленный, шаг - с начала, шаг - с конца.
Выберите цветовую схему.

Шаг 3. Легенда

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

Метрика

Виджет отображает тренд изменения выбранного показателя за период времени. Пример внешнего вида приведен на рисунке 30.

Рисунок 30 -- Виджет "Метрика"

Пример настроек приведен на рисунке 31.

Рисунок 31 -- Виджет "Метрика". Настройки

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

В блоке "Настройки метрики" укажите следующие данные:
- в поле "Использовать значение из поля" выберите поле, значение из которого будет использоваться при подсчете метрики;
- в поле "Серия с данными" из выпадающего списка выберите запрос.
В блоке "Настройки тренда" укажите следующие данные:
- для отображения тренда на виджете установите соответствующий флаг;
- для изменения направления отображения тренда установите флаг "Инвертировать тренд";
- в полях "Поле со значениями" и "Серия с данными" выберите запрос и поле, значение из которого будет использоваться для отображения численной части метрики;
- в поле "Серия для прогнозирования" выберите запрос, по которому будет отображаться изменение тренда.

Примечание: значения полей, которые доступны для выбора при настройке в блоках "Настройки метрики" и "Настройки тренда", формируются на основе данных указанных в запросе (подробнее см. раздел "Добавление запроса").

Примеры визуализации виджета приведены на рисунке 32

Рисунок 32 -- Примеры визуализации настроек виджета "Метрика"

Изображение

Виджет отображает изображение, загруженное пользователем.

Пример внешнего вида представлен на рисунке 33.

Рисунок 33 -- Виджет "Изображение"

Пример настроек приведен на рисунке 34.

Рисунок 34 -- Виджет "Изображение". Настройки

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

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

Копирование виджета

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

Есть несколько способов для копирования параметров:

Способ 1. В конструкторе виджетов нажмите кнопку . Настройки виджета будут скопированы в буфер обмена.
Способ 2. Перейдите в раздел Администрирование → Рабочие столы, выберите виджет, нажмите кнопку и из выпадающего списка выберите пункт Копировать настройки.
Способ 3. Перейдите в раздел Администрирование → Отчеты, выберите виджет, нажмите кнопку и из выпадающего списка выберите пункт Копировать настройки.

Для того чтобы применить скопированные настройки откройте конструктор виджетов и нажмите кнопку .

Предустановки

Предустановки используются для быстрой настройки виджетов на основе шаблона.

Вы можете добавить собственные шаблоны настроек виджетов в список предустановок.

Для создания виджета с помощью предустановки откройте конструктор виджетов и нажмите кнопку .

В открывшемся окне "Предустановки" (см. рисунок 35) выберите предустановку и нажмите кнопку .

Рисунок 35 - Окно "Предустановки"

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

Настройте запросы и визуализацию виджета.
Нажмите кнопку и в открывшемся окне "Предустановки" (см. рисунок 35) нажмите кнопку Создать новую.
В открывшемся окне укажите название предустановки.
Нажмите кнопку Создать.