Новый интерфейс политики защиты. Какой он будет?
Мы в команде разработки MITIGATOR стараемся улучшать UX от использования продукта в разных аспектах, в том числе интерфейсных. В прошлых релизах была обновлена страница со списком политик. Сейчас активно работаем над изменением интерфейса политики защиты. В этом посте расскажу об основных моментах, и как можно попробовать новый интерфейс в v20.06.
В момент атаки пользователь MITIGATOR больше всего времени проводит на странице политики защиты. Поэтому интерфейс политики защиты должен быть удобным и информативным. В условиях быстрого изменения ситуации интерфейс должен помогать оперативно оценивать ситуацию и принимать тактические решения.
В текущем дизайне страницы работать можно. По сравнению с некоторыми конкуретными продуктами даже не все так плохо. Но при постоянной работе со страницей каждый мелкий огрех и недоработка начинают раздражать, а иногда и мешать. Обозначу некоторые из них:
- Список контрмер уже не помещается в один экран. А если в процессе защиты настраивается несколько контрмер, то для перехода между ними нужно скроллить по несколько раз.
- Настройки контрмеры не помещаются в один экран. Если раскрыть дополнительные настройки у некоторых контрмер , то опять приходится скроллить. Вкупе с количеством контрмер, навигация превращается в долгий скролл.
- В “общем графике” часть графиков доступна через выпадающее меню. Многие пользователи даже не замечают треугольник около “IP-адреса” и не находят график по протоколам и TCP-флагам.
- Настройка автодетектирования очень неудобна из-за ограничения размеров поля карточки.
- Журнал событий далеко от графика, и трудно сопоставлять изменения на графике с событиями в политике. В журнале не хватает места для показа всей информации о событии.
- Из политики сложно определить, какой трафик в нее попадает.
- У каждого графика свой интервал. Вначале такое решение показалась удобным, но на практике приходится каждый раз устанавливать одинаковые интервалы для удобства корреляции изменений.
- Количество контрмер будет еще расти. При этом в конкретной политике нужны только несколько контрмер.
Ну, и лично мне очень не хватает места на экране. Поэтому у меня в браузере всегда масштаб 80% для админки.
Представленная страница в новом дизайне еще далека от макета. Но уже позволяет полноценно работать с MITIGATOR и собирать обратную связь по реализованным идеям. Далее я попробую описать изменения.
0. Изменение расположения элементов.
В проектировании интерфейсов есть понятие F-pattern. Это как пользователь сканирует страницу.
В новом дизайне мы расположили в горячих зонах полезную информацию так, чтобы с одного взгляда можно было понять, что происходит в политике.
1. Название, статусы и статистика политики вынесены в самую горячую зону
Желтые индикаторы обозначают, что превышены соответствующие пороги Policy.Status.*
Текущие показания скорости pps | bps обновляются каждые 15 секунд.
2. Только необходимые контрмеры
Для каждой политики защиты пользователь может определить какие контрмеры показывать в списке.
3. Статусы контрмер в горячей зоне
Пробежавшись взглядом можно сразу определить, какая контрмера активна, и для какой включено автодетектирование.
4. Текущая скорость сброса контрмерой
В заголовке карточки контрмеры отображается текущая скорость сброса в формате pps | bps. Обновляется каждые 15 секунд.
Таким образом можно быстро определить какие контрмеры сейчас сбрасывают и сколько.
5. Только одна карточка может быть раскрыта
Раскрытие только одной карточки позволяет делать более быстрые переходы путем избавления от длинных скроллов.
6. Изменение компоновки внутри карточки контрмеры
Оптимизировано использование пространства внутри карточки. Расширенные настройки не удлиняют карточку, а используют второй столбец.
Мы еще работаем над изменением содержимого карточек.
7. Часть карточек вынесена в отдельные вкладки
Автодетектирование, Захват пакетов, Журнал событий, Настройки политики вынесены в отдельные вкладки. В отдельных вкладках у этих элементов больше места, что дает нам возможность для изменения их дизайна. Сейчас карточки перенесены с минимальными изменениями.
Создан раздел “Мониторинг”.
8. Добавление графиков в мониторинг
По умолчанию в мониторинге находится “Общий график”. Пользователь может добавить графики нужных контрмер, запинивая их.
Все графики синхронизированы по времени и единицам измерения.
Еще через график в Мониторинге можно попасть в настройки контрмеры.
9. В “общем графике” сразу доступны все вкладки
В будущем для удобной корреляции изменений будет доступно вынесение всех графиков из вкладок в отдельные графики друг под другом.
10. Для справки по контрмере не нужно уходить со страницы
11. Хоткей Alt+G для быстрого перехода в контрмеру
12. Автодетектирование
Наличие “Общего графика” позволяет посмотреть значения необходимых метрик для установки порогов.
Интерфейс указания порогов в этой версии еще не изменен.
13. Захват пакетов
Если в текущий момент активен захват пакетов, то это указывается в названии вкладки.
Общий график позволяет следить за обстановкой, пока захватываешь пакеты.
14. Журнал событий
Журнал событий стал более информативен. Появилась синхронизация журнала с графиком. Теперь удобнее расследовать, какие события происходили в нужный интервал времени.
15. Настройки политики
Теперь можно быстро и удобно посмотреть, какие правила указывают на политику.
Как попробовать новую политику у себя?
Дизайн новой политики совместим c MITIGATOR, начиная с v20.06. Далее инструкция, как развернуть две версии фронтенда на одном инстансе MITIGATOR.
В /srv/mitigator разместить файл m-2036.conf
map $http_x_forwarded_proto $proxy_x_forwarded_proto {
default $http_x_forwarded_proto;
'' $scheme;
}map $http_x_forwarded_port $proxy_x_forwarded_port {
default $http_x_forwarded_port;
'' $server_port;
}map $http_upgrade $proxy_connection {
default upgrade;
'' close;
}map $scheme $proxy_x_forwarded_ssl {
default off;
https on;
}server {
listen 8080 default_server;
return 301 https://$host:8443$request_uri;
}server {
listen 8443 ssl;
ssl_certificate /etc/nginx/cert.crt;
ssl_certificate_key /etc/nginx/cert.key; proxy_http_version 1.1;
proxy_buffering off;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $proxy_connection;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $proxy_x_forwarded_proto;
proxy_set_header X-Forwarded-Ssl $proxy_x_forwarded_ssl;
proxy_set_header X-Forwarded-Port $proxy_x_forwarded_port;
proxy_set_header Proxy "";root /var/www/m-2036;
gzip_static on; location / {
# gzip_proxied any;
try_files $uri $uri/ $uri/index.html /index.html =404;
} location ~ ^/(api|mitigator-api.html|autodetect.html) {
proxy_pass http://backend.mitigator:8080;
}
}
В /srv/mitigator создать файл m-2036.yml
version: "2.1"
services:
frontend2:
image: docker.mitigator.ru/product/frontend:m-2036-policy-reforged-v3
hostname: frontend2
volumes:
- frontend2:/frontend-copynginx:
ports:
- "8080:8080"
- "8443:8443"
volumes:
- frontend2:/var/www/m-2036:ro
- ./m-2036.conf:/etc/nginx/conf.d/m-2036.conf:rovolumes:
frontend2:
Отредактировать .env, добавив m-2036.yml
COMPOSE_FILE=docker-compose.yml:m-2036.yml
Затем
docker-compose pull
docker-compose up -d
И можно пробовать новую политику по адресу http://MITIGATOR_IP:8443/