Отображение скриншотов мониторинга в дашбордеBETA

Скриншоты, собранные агентом мониторинга, можно отобразить в дашборде двумя способами:

• Через виджет Текст
• Через настройку действия по клику

Подготовка данных для отображения скриншотов

1. Включите Исследование, чтобы запустить сбор скриншотов агентом мониторинга.
2. Выполните несколько рабочих операций на станции, где установлен агент мониторинга и для которой включено исследование.
3. Перейдите в Панель управления в рабочем пространстве, нажмите Добавить и выберите Скрипт.
4. Задайте название скрипта и подтвердите добавление, нажав Добавить.
5. Добавьте в скрипт триггер Ручной запуск.
6. Для очистки таблицы в модели данных добавьте блок SQL-запрос.
7. В параметрах блока задайте SQL-запрос для очистки таблицы.

   truncate table if exists имя_таблицы
   
   
8. Добавьте блок Выбрать строки через SQL-запрос, и укажите в параметрах блока SQL-запрос, чтобы выбрать нужные поля из таблицы активности:

   select employee_account_id, screenshot_id from !${global.activity_table}
   
   
9. Добавьте блок Добавить строки, чтобы записать данные из таблицы активности в таблицу в модели данных.
10. Кликните по полю Таблица, в раскрывающемся меню нажмите + Добавить таблицу и выберите опцию Создать из выходных данных.
11. Отметьте блок, данные которого нужно подставить в таблицу, и нажмите Добавить.
12. Введите название таблицы и нажмите Добавить.
13. Нажмите Автозаполнение полей выходными данными, чтобы подставить поля маппинга в колонки новой таблицы, и подтвердите выбор полей с помощью кнопки Применить.
14. Протестируйте блок.
15. Опубликуйте скрипт и активируйте его.
16. Перейдите в Панель управления в рабочем пространстве, нажмите Добавить и выберите Дашборд.
17. Задайте название и подтвердите создание дашборда, нажав Сохранить.

Пример настройки отображения скриншотов через виджет Текст

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

1. Перейдите во вкладку показателей дашборда и добавьте переменную Динамический список.
2. Задайте название переменной и в поле список укажите колонку screenshot_id.
3. Добавьте в образ виджет Параметр и в параметрах виджета укажите добавленную переменную.
4. Добавьте в образ виджет Текст и настройте в нем вывод изображения.

   <img src="https://{доменное имя Proceset}/graphql?query=%7Bmonitoring_screenshot%7Bscreenshot(screenshot_uuid:%22{${Переменная дашборда}}%22)%7D%7D" style="width: 100%; width: 40% object-fit: scale-down;"/>
   
   
5. Опубликуйте дашборд.
6. Выберите идентификатор скриншота в параметре. Соответствующее изображение отобразится в виджете Текст.

Пример настройки отображения скриншотов через настройку действия по клику

Скриншоты можно выводить в отдельном окне при клике по значению разреза в виджете:

1. Добавьте в дашборд виджет Таблица и укажите нужные разрезы.
2. Добавьте дополнительный образ, в котором будет отображаться скриншот.
3. В дополнительный образ добавьте переменную Входящее значение.
4. Задайте название переменной, выберите тип данных и в поле Значение по умолчанию укажите колонку screenshot_id.
5. Добавьте в образ виджет Текст и настройте отображение скриншота, используя переменную Входящее значение.

   <img src="https://{доменное имя Proceset}/graphql?query=%7Bmonitoring_screenshot%7Bscreenshot(screenshot_uuid:%22{${Переменная Входящее значение}}%22)%7D%7D" style="width: 100%; width: 40% object-fit: scale-down;"/>
   
   
6. Перейдите в домашний образ и добавьте действие по клику Открыть образ для разреза, при клике по значению которого необходимо открывать скриншот.
7. Задайте название действия, укажите нужный образ и выберите, где он должен открываться — в текущем, новом или боковом окне.
8. Задайте передачу параметра из нужной колонки таблицы в открываемый образ.
9. Опубликуйте дашборд.
10. Кликните по идентификатору скриншота, нажмите иконку контекстного меню и выберите Открыть образ.
11. В открывшемся боковом окне отображается скриншот действия пользователя.

Использование специального выражения для отображения скриншота

Специальное выражение — это формат записи для атрибута src тега <img>, который может содержать идентификатор скриншота, меру или переменную.

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

Пример получения списка идентификаторов скриншотов

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

1. В пространстве создадим новый скрипт.
2. Добавим блок Ручной запуск и протестируем его.
3. Добавим блок Выбрать строки через SQL-запрос. В запросе выберем из таблицы main.monitoring_activity скриншоты в рамках исследования. Пример запроса:

   select screenshot_id, element_name, program
   from main.monitoring_activity
   where research_id = '32' --toString(screenshot_id) like ('%03928d69d91f%')
   
   Примечание: Колонка research_id из таблицы main.monitoring_activity доступна только в расширенном мониторинге.
4. Протестируем блок. Во вкладке Тест появится текст с названиями программ, их элементов и идентификаторами скриншотов. Рекомендуем сохранить его отдельно, чтобы быстро к нему возвращаться при настройке виджета Текст.
5. Откроем дашборд, в котором будем настраивать виджет Текст для отображения скриншотов.

Ниже представлены три примера настройки — с помощью идентификатора, меры или переменной.

С помощью идентификатора скриншота

Укажем в специальном выражении идентификатор скриншота, используя синтаксис ?{id_скриншота}. Пример:

<img src="?{id_скриншота}" style="width: 100%; object-fit: scale-down;"/>

С помощью меры

1. Добавим в виджет Текст меру.
2. В формуле меры укажем идентификатор скриншота в одинарных '' кавычках.
3. В тексте виджета укажем в специальном выражении название меры, используя синтаксис ?{{Название меры в виджете}}. Пример:

   <img src="?{{Название меры в виджете}}" style="width: 100%; object-fit: scale-down;"/>
   
   

С помощью переменной

1. Создадим переменную, например Статический список.
2. В качестве списка укажем один или несколько идентификаторов скриншотов в одинарных '' кавычках.
3. В поле Значение по умолчанию выберем скриншот для отображения.
4. В тексте виджета укажем в специальном выражении название переменной, используя синтаксис ?{${Название переменной Статический список}}. Пример:

   <img src="?{${Название переменной Статический список}}" style="width: 100%; object-fit: scale-down;"/>