Работа с элементами представления

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

И начнем с графика – Timeline.

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

1. Вводим название и (при необходимости) описание;
2. Выбираем тип графика (мы рассмотрим их немного позже);
3. Далее определяем данные, по которым будем строить график (например, логи или количество переданных байт);
4. И, наконец, указываем детализацию по времени в поле Samples.

Во вкладке Advanced можем поменять названия осей и расположение описания.

Что касается доступных видов графиков, их всего 4:

• Столбчатый (Columns)
• Круговой (Doughnuts)
• С областями (Area)
• Линейный (Line)

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

Для того, чтобы показать, как выглядит тот или иной вид графика и их различия, воспользуемся примером из системного дашборда Remote Access, а именно графиком Login Activity.

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

Окно основных настроек для него выглядит так:

Вполне очевидно, что если мы изменим тип графика на Areas, то все изменения, которые мы получим – это дополнение в виде зеленой области под линией графика.

Не очень полезно? Может быть.

Но что, если эту зеленую гору можно за пару нажатий сделать более информативной?

Допустим, что мы хотим не просто посмотреть количество попыток войти в систему, а еще отследить их severity. Тогда изменим опцию Stacked By (она как раз и отвечает, по какому параметру будет происходить деление) на соответствующее значение. То есть вместо Action выбираем Severity.

И получаем более интересную картинку с дополнительными данными для изучения:

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

Оставшиеся два типа для наглядности рассмотрим уже на новой конфигурации с разделением по Severity.

Doughnuts (или кольцевой график) по сути является тюнингованной круговой диаграммой:

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

И последний тип – столбцы (Columns). Та же столбчатая диаграмма, но по оси X отслеживаем время:

На этом закончим с графиками и перейдем к не менее полезному инструменту – Контейнер (Container).
Это именно инструмент, так как его назначение – группировать виджеты. Очень полезно, например, когда нам нужно настроить отдельную фильтрацию для определенной группы элементов или просто упорядочить расположение виджетов на дашборде.

Настройки минимальные:

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

Затем добавляем (выпадающее меню Add) в созданный контейнер нужные виджеты (есть возможность добавить любой, кроме контейнера и таблицы). Можно использовать и заранее настроенные: для этого скопируйте нужный, нажав на него правой кнопкой мыши –> copy, а затем также правой кнопкой мыши нажмите на область возле названия контейнера –> paste.

И наконец, когда основное наполнение дашборда готово, переходим к дополнениям и расстановке акцентов. Для этого можем использовать оставшиеся виджеты: Infographics и RichTextBox.

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

Для текстовых пояснений соответственно будем использовать RichTextBox:

И если с настройкой RichTextBox все интуитивно понятно: вводим текст и задаем стандартные настройки (выравнивание, шрифт, цвет и так далее), то вот настройку инфографики разберем поподробнее.

1. Вводим название;
2. Выбираем данные, которые хотим подсчитать;
3. Указываем параметр, по которому будем вычислять количество;
4. Настраиваем фильтр;
5. Выбираем картинку;
6. Далее вводим заголовок и основной текст;
7. Определяем, как будут располагаться относительно друг друга иконка, число и текст (один из 10 шаблонов – поле Template);
8. Указываем выравнивание по горизонтали и вертикали;
9. И последнее – стиль. (Примечание: данное поле недоступно для редактирования в режиме низкого разрешения.)

Можно нажимать OK и инфографика готова.

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

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

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

1. Выбираем параметр, по которому будем производить фильтрацию, например, блейд:

2. Далее определяем значение, то есть, хотим ли мы видеть данные, которые укажем далее или нет (Equals или Not Equals):

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

3. Указываем, какие результаты хотим (или не хотим) видеть. Например, для данного параметра можем выбрать нужные пункты из выпадающего списка:

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

4. Нажимаем на плюс справа от строки и фильтр добавлен:

Ниже можно добавлять другие фильтры.

К слову, конфликтующие фильтры будут взаимоисключать друг друга.
То есть настройка, показанная ниже не выдаст нам никаких результатов. На виджете увидим сообщение "No data found", что вполне логично.

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

Всего доступно несколько вариантов применения фильтров:

· Ко всему отчету. Настраивается через выпадающее меню Options –> View Filter:

· К отдельному виджету. Выбрать режим редактирования через Options, а затем соответствующий значок фильтрации:

• К нескольким виджетам, поместив их в контейнер (аналогично одиночному виджету).

Чтобы скрыть данные о пользователях, нужно выбрать пункт Hide Identities в меню Options.

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

Автор статьи: Полина Тростьянская, инженер TS Solution