Новый интерфейс политики защиты. Часть вторая

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

16. Темная тема и графики без заливки

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

Графики с заливкой и без в светлой теме

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

17. Новые пиктограммы пунктов меню

Старые и новые пиктограммы

Опрос показал, что прошлые пиктограммы не вызывают четких ассоциаций с пунктами меню и бывают сложности выбора при свернутой панели меню.

18. Быстрый переход между последними политиками

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

19. Меню выбора отображаемых контрмер

Добавились кнопки “Скрыть все” и “Показать все”. Для сохранения полноты информации о происходящем в политике, скрыть можно только неактивные контрмеры.

20. Автодополнение в ACL

В процессе набора появляются подсказки, добавлена подсветка синтаксиса. Это значительно упрощает процесс составления правил.

21. Названия и порядок вкладок

Относительно первой части обзора произошли изменения в панели вкладок.
“Мониторинг” переименовали в “Управление”, т.к. лучше отображает суть. “Захват пакетов” переместился на вторую позицию, т.к. захват пакетов более частый в использовании, чем настройки автодетектирования.

22. Добавлено больше пресетов в календарь

Для ускорения выбора добавлены часто используемые интервалы. Если интервал больше 2,5 часов, то отключается автообновление графика.

23. Раскрытие вкладок «общего графика»

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

24. Обновлена вкладка «Автодетектирование»

С прошлой части обзора содержимое вкладки Автодетектирование сильно изменилось:

• Список контрмер с включенным автодетектированием отображается как строка из кратких названий контрмер.
• Активация автодетектирования выполняется в отдельном модальном окне.
• Ввод порогов в текстовом поле с автодополнением и подсветкой.
• В автодополнении предлагаются только неиспользуемые пороги.
• Возможность указания степени кратности 10 — K, M, G, T.

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

Кулхацкер во мне доволен :-)

Оказалось, что youtube для новых каналов применяет кодек avc1 с плохим качеством после сжатия. Видео без avc1 https://yadi.sk/i/dYdyVy3lPIdtCQ

Мой текущий userstyle:

#welcome {
  background-image: url('https://images8.alphacoders.com/102/1022113.jpg');
  background-size: cover;
  background-repeat: no-repeat;
    
}
#welcome input {
background: #00000087;
} 
/*
[id^="area"] {
    fill-opacity: 1; /* прозрачность заливки графиков */
}
/*
[id^="line"] {
    filter: none; /* отключение неона для линий графика */
}
/*
:root {
    --background: #121212; /* фон */
    --primary-content: #a5b3bc; /* параграфы текста (в основном помощь) */
    --primary-regular: #8094a0; /* лейблы к полям ввода, заголовки чекбоксов и т.д. — основной цвет контента приложения */
    --primary-secondary: #546671; /* второстепенный текст, встречается редко, в основном в заголовках вкладок */
    --primary-disabled: #39454d; /* отключенные поля управления формами */
    --primary-dividing: #333333; /* границы полей ввода / карточек */
    --surface-main: #161616; /* цвет фона карточек */
    --surface-secondary: #1c1c1c; /* цвет для поверхностей, ложащихся поверх карточек (шапки таблиц, поля ввода типа <Code /> и т.д. */
    --surface-transparent: rgba(18, 18, 18, 0.75); /* используется только в графике при обновлении данных */
    --blue-light: #73c9e537; /* фон при наведении, фон нейтральных информативных блоков  */
    --blue-halflight: #73c9e537; /* в данный момент не используется */
    --blue-pale: #98c3d9; /* иконки в шапке и меню навигации */
    --blue-main: #61c2f2; /* основной синий цвет для границ */
    --blue-content: #4caad9; /* основной синий цвет для текста */
    --red-light: #ff908c26; /* фон предупреждающих информативных блоков  */
    --red-halflight: #ff908c26; /* в данный момент не используется */
    --red-pale: #ff908c; /* в данный момент не используется */
    --red-main: #ff908c; /* основной красный цвет для границ и иконок */
    --red-content: #e57773; /* основной красный цвет для текста кнопок */
    --green-light: #28a74510; /* фон для информативных блоков сообщающих об успешном действии */
    --green-halflight: #28a74510; /* в данный момент не используется */
    --green-main: #28a745; /* основной зеленый цвет для иконок */
    --green-pale: #86bfa3; /* в данный момент не используется */
    --green-content: #6bb390; /* основной зеленый цвет для текста */
    --warning-light: #fff3cd; /* фон предупреждающе-информативных информативных блоков  */
    --warning-halflight: #fff3cd; /* в данный момент не используется */
    --warning-main: #ffc107; /* несколько иконок */
    --warning-pale: #ffc107; /* в данный момент не используется */
    --warning-content: #856404; /* основной цвет текста на оранжевом фоне */
    --card-shadow: none; /* стиль тени карточек */
}
*/

и анимированный логотип подгружаемый в настройках системы: