Новый интерфейс политики защиты. Какой он будет?

Published in

AntiDDoS Life

6 min readJun 4, 2020

Мы в команде разработки 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. Изменение компоновки внутри карточки контрмеры

Обычный и расширенный режим настройки контрмеры TCP

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

Мы еще работаем над изменением содержимого карточек.

7. Часть карточек вынесена в отдельные вкладки

Автодетектирование, Захват пакетов, Журнал событий, Настройки политики вынесены в отдельные вкладки. В отдельных вкладках у этих элементов больше места, что дает нам возможность для изменения их дизайна. Сейчас карточки перенесены с минимальными изменениями.
Создан раздел “Мониторинг”.

8. Добавление графиков в мониторинг

Два варианта компоновки графиков на вкладке мониторинг

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

DNS уже в Мониторинге, а у SOUR при наведении курсора появляется пин.

Все графики синхронизированы по времени и единицам измерения.

Еще через график в Мониторинге можно попасть в настройки контрмеры.

Шестеренка переход в настройки. Крест удалить график из Мониторинга.

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/