Интерфейс¶

SPA использует единый макет панели: верхняя панель для глобальных действий, единый боковой SubNav и вкладки в основной области. Скриншоты ниже показывают живой веб-интерфейс на русском (LTR). Другие локали используют тот же макет с переведёнными подписями — см. соответствующую главу 03-user-interface для языка.

Смена языка в верхней панели обновляет подписи меню, заголовки вкладок, внутренние имена источников данных и направление текста CVE при включённом переводе.

Области макета¶

Верхняя панель показывает число инструментов стека, выбор языка, переключатель темы (светлая / тёмная / системная), живой мониторинг, оповещения, автообновление и полное сканирование. Меню Экспорт (CSV, JSON, печать) доступно с клавиатуры, закрывается по Escape и клику вне меню; CSV включает EPSS, risk score, тип, версии, усечённое описание и aliases с комментарием в заголовке о дате скана и стеке; JSON оборачивает находки в конверт с exported_at, стеком, источниками и итогами. Печать скрывает навигацию отдельной таблицей стилей. На узких экранах кнопка меню открывает SubNav как выдвижную панель.

SubNav включает название продукта, бейдж живого мониторинга, основную навигацию, инструменты стека со счётчиками CVE, быстрые фильтры severity (на вкладке «Уязвимости»), источники данных с метками последнего обновления и сводку сканирования по severity. Сворачивание сужает боковую панель до иконок.

Вкладка	Назначение
Дашборд	Метрики, графики, критический список, кликабельные карточки инструментов
Уязвимости	Поиск, фильтры, раскрывающиеся карточки CVE
Live Watch	Интервал watch, обратный отсчёт, новые CVE с последнего scan, история poll
История scan	График трендов и недавние scan (PostgreSQL, по tenant)
Инфраструктура	Редактор стека, поднавигация (источники, уведомления, Ops, tenants, внешний вид)

Вкладка оповещений удалена

Отдельная вкладка истории оповещений удалена; новые находки по-прежнему показываются через баннер и toast.

Дашборд¶

После полного сканирования дашборд показывает сводку по severity, диаграммы распределения, затронутые инструменты и критические CVE. Метрики KEV / эксплуатация и патч доступен суммируют сигналы эксплуатации и исправления. Панель состояния источников перечисляет каждый фид из последнего сканирования (sources_checked / sources_failed). Карточки инструментов показывают счётчики KEV и патч по сервису. Клик по карточке инструмента переходит на вкладку «Уязвимости» с фильтром по этому инструменту.

Дашборд — русский Рис. 1 — Дашборд после сканирования (русский, светлая тема)

Вкладка «Уязвимости»¶

Текстовый поиск, фильтры severity / тип / инструмент / источник, флажок только KEV, сортировка (включая EPSS и оценку риска) и раскрывающиеся карточки. Карточки CVE показывают отдельные бейджи EPSS и оценки риска при наличии обогащённых данных. Клик по тегам severity, типа, источника или KEV на карточке применяет соответствующий фильтр на этой вкладке. Когда merge объединяет один CVE из нескольких источников (например NVD + GitHub), альтернативные ID (GHSA, PYSEC и т. д.) отображаются моноширинными chips в раскрытом теле карточки с принудительным LTR.

Список CVE — русский Рис. 2 — Вкладка уязвимостей с фильтрами и карточками

Вкладка «Инфраструктура»¶

Вкладка Инфраструктура объединяет долгоживущие настройки: стек, поведение scan, источники, видимость уведомлений и отображение. Горизонтальная поднавигация настроек переключает разделы без выхода из вкладки. Значения хранятся в localStorage с префиксом cve-radar:*. При PostgreSQL разделы Ops и Tenants показывают метаданные сессии и стеки по tenant.

Инфраструктура — русский Рис. 3 — Поднавигация: стек и быстрый watch (русский)

Раздел	Содержание
Инфраструктура	Инструменты стека, пресеты, интервал watch, периодический полный scan
Источники	Встроенные CVE-фиды и пользовательский RSS
Уведомления	Статус каналов сервера (только чтение), toast/баннер браузера
Ops	API-ключ, сессия (RBAC, tenant, multi-tenant), health, metrics, audit
Tenants	Активный slug, создание tenant, сохранённые стеки (load/edit/delete), prefs
Внешний вид	Язык UI, масштаб шрифта, тема, авто-перевод CVE

Источники¶

Раздел Источники перечисляет все встроенные фиды: NVD, OSV, GitHub Advisories, GitLab Advisory Database, CISA KEV, The Hacker News, TuxCare, Alpine secdb, Ubuntu USN, Red Hat Security, Debian Security Tracker и Amazon Linux ALAS. У каждой строки — иконка и флажок; отключённые фиды пропускаются при следующем полном scan или цикле watch.

Пользовательский RSS — ниже встроенного списка. Добавить фид создаёт карточку с включено, именем и URL (LTR). Удаление — кнопкой корзины. Внутренний id — custom:{uuid}; в scan участвуют только непустые URL.

Выбор сохраняется в cve-radar:source-config и повторяется на шаге 3 мастера. SubNav показывает каждый включённый источник с последним обновлением из meta последнего scan.

Источники — русский Рис. 3a — Источники: встроенные переключатели и RSS

Уведомления¶

Раздел Уведомления делится на каналы сервера (с пошаговым гидом) и оповещения браузера.

Отправка (Slack, Discord, Teams, Telegram, SMTP, webhook) настраивается на хосте API — секреты не попадают в браузер. Разверните строку канала для гида: шаги, переменные, Копировать пример для .env. Перезапустите API и нажмите Обновить.

Канал	Обязательные env
Slack	`NOTIFICATION_SLACK_WEBHOOK_URL`
Discord	`NOTIFICATION_DISCORD_WEBHOOK_URL`
Teams	`NOTIFICATION_TEAMS_WEBHOOK_URL`
Telegram	`NOTIFICATION_TELEGRAM_BOT_TOKEN`, `NOTIFICATION_TELEGRAM_CHAT_ID`
Email	`NOTIFICATION_SMTP_HOST`, `_FROM`, `_TO`
Webhook	`NOTIFICATION_WEBHOOK_URL`

См. NOTIFICATIONS.md.

Уведомления — русский Рис. 3b — Список каналов (не настроены без env)

Гид Slack — русский Рис. 3b2 — Развёрнутый гид Slack с примером env

Внешний вид¶

Внешний вид — настройки отображения без влияния на логику scan:

Язык — en, fa, ar, ru, zh, fr; подписи, имена источников SubNav и направление CVE (RTL для fa/ar).
Масштаб шрифта — 85–140 % через +/− (cve-radar:font-scale).
Тема — светлая, тёмная или системная (cve-radar:theme); тёмная — teal на navy.
Авто-перевод CVE — сервер обогащает заголовки и описания под locale UI при scan.

Верхняя панель тоже меняет язык и тему; изменения синхронизируются.

Внешний вид — русский Рис. 3c — Внешний вид: язык, шрифт, тема, перевод

Ops¶

Раздел Ops хранит опциональный API-ключ в браузере (X-Api-Key на /api/v1/*). GET /api/v1/session показывает multi-tenant, роль RBAC, активный tenant (X-Tenant-Id) и включён ли API auth. Runtime features — из /api/capabilities; System health — detailed health с флагом multi-tenant БД. Prometheus metrics — /metrics. Audit — tenant-scoped строки с IP, stack и sources_failed.

Tenants¶

При DATABASE_URL раздел Tenants переключает slug (X-Tenant-Id), создаёт tenants и управляет сохранёнными стеками: save, load, edit name/tools, delete. Test notification отправляет X-Tenant-Id.

Вкладка «История scan»¶

Вкладка История scan (SubNav) требует PostgreSQL. Показывает тренды и недавние scan для активного tenant. Каждая строка — mode, severity counts, stack, sources failed. Без БД — сообщение про DATABASE_URL.

Вкладка Live Watch¶

Вкладка Live Watch (SubNav, между «Уязвимости» и «Инфраструктура») показывает быстрый polling OSV/GitHub без полного scan. Poll вызывает POST /api/v1/watch с X-Tenant-Id. При активном watch отображается обратный отсчёт до следующего poll; выбор интервала (2 / 5 / 15 мин) записывается в settings.watchIntervalMs. Блок новые с последнего полного scan перечисляет компактные строки CVE, найденные через watch; бейдж на вкладке показывает счётчик. История poll хранит последние 20 результатов с меткой времени и числом новых CVE. Переключение watch здесь или в верхней панели синхронизировано; успешный полный scan (POST /api/v1/scan/stream) очищает список «новые с scan».

Live Watch — русский Рис. 3d — Live Watch: обратный отсчёт, интервал, новые CVE, история

Заставка сканирования¶

При полном scan открывается полноэкранный overlay. По мере SSE-событий каждый источник показывается строкой: пульсирующая точка (активен), зелёная (готово), текущий инструмент стека при наличии; общий процент — из ScanProgressEvent.percent. До первого события — статические подписи шагов (NVD → OSV → …). По завершении приложение возвращается на дашборд.

Сканирование — русский Рис. 4 — Заставка во время полного сканирования

Мастер первоначальной настройки¶

После disclaimer новые пользователи видят полноэкранный мастер из четырёх шагов:

Стек — добавление инструментов или применение пресетов инфраструктуры.
Настройки — оповещения, live watch, интервал, опциональный перевод.
Источники — включение/отключение встроенных фидов и пользовательского RSS.
Завершение — опциональный первый полный scan; устанавливает cve-radar:setup-complete.

Мастер настройки — русский Рис. 5 — Мастер первоначальной настройки, шаг стека (русский, светлая тема)

Возвращающиеся пользователи пропускают мастер, если setupComplete уже установлен.

Кэшированные результаты scan¶

Когда приложение загружает предыдущий scan из localStorage (тот же ключ стека), дашборд показывает баннер кэшированных результатов с сохранённой датой scan. Запустите Полное сканирование с верхней панели, чтобы обновить live-данные с API.

Навигация по инструментам¶

Клик по карточке инструмента на дашборде (или по имени инструмента в SubNav) переключает на «Уязвимости», задаёт фильтр инструмента, сбрасывает остальные фильтры и показывает полный совпадающий список без пагинации.

Масштаб шрифта и темы¶

См. «Внешний вид» на вкладке «Инфраструктура»: масштаб 85–140 %, темы (светлая / тёмная / системная) и авто-перевод CVE. Тёмный режим — teal-акценты (#20c5ba) на navy-фоне.

Мобильные устройства¶

Ниже breakpoint md боковая панель скрыта; используйте меню в шапке, чтобы открыть полный оверлей SubNav.

Далее: Скан и мониторинг

Расширенные фильтры (#263): липкая панель, мультивыбор severity/source, EPSS и диапазон дат, URL sync, сохранённые виды.