88 lines
10 KiB
Markdown
88 lines
10 KiB
Markdown
# Krona Control Center — UX Спецификация
|
||
|
||
## 1. Архитектура и Назначение
|
||
Krona Control Center (KCC) — изолированный закрытый инженерный пульт владельца платформы Krona и дежурной инженерно-эксплуатационной команды.
|
||
|
||
### Ключевые архитектурные принципы
|
||
- **Изоляция контура**: KCC полностью отделён от административного кабинета клиентской организации (`/app/*`) и публичных страниц (`/`, `/demo`). Доступ организован в отдельном пространстве путей `/control/*`.
|
||
- **Защита шлюзом**: Доступ закрыт через `ControlRouteGuard` и PIN-гейт (`/control/gate`), требующий подтверждения операторского доступа (сессионный токен `kcc_gate_pass` + `operator_session`).
|
||
- **Строгая модель ролей (RBAC)**: 6 специализированных инженерных ролей с гранулярными правами доступа (`control_center:read`, `control_center:write`, `control_center:billing_manage`, `control_center:node_evacuate`, `control_center:incident_manage`, `control_center:rollout_manage`, `control_center:operator_audit`).
|
||
- **Неизменяемый журнал аудита**: Любое опасное или мутирующее действие требует модального подтверждения с обязательным указанием причины (минимум 5 символов), фиксацией затронутых сущностей и записью в криптографически связанный SHA-256 хеш-блокчейн в IndexedDB (`krona_control_center_db`).
|
||
- **Устойчивость к сбоям инфраструктуры (Circuit Breaker)**: Поддержка offline-first и degraded режимов с кэшированием последнего снимка состояния в IndexedDB при недоступности внешних мониторов или сетевых сбоях.
|
||
|
||
---
|
||
|
||
## 2. Навигация и Визуальная Иерархия
|
||
|
||
### Навигационное древо
|
||
1. **Обзор платформы (`/control/overview`)**:
|
||
- Верхний статус-бар: Режим среды (Production), активная инженерная роль, индикатор синхронизации IndexedDB, кнопка аварийного режима (Maintenance), экстренный выход.
|
||
- Сводные KPI-метрики: активные организации, совокупный MRR, здоровье узлов кластера, активные инциденты и предупреждения.
|
||
- Виджеты оперативного контроля: критические алерты, статус rollout-конвейера, географическое распределение нагрузок.
|
||
2. **Организации и 360° Инспектор (`/control/organizations`)**:
|
||
- Таблица тенантов с фильтрацией по тарифным планам (`enterprise`, `business`, `starter`), статусам (`active`, `past_due`, `frozen`, `trial`) и быстрому поиску по названию/ИНН/домену.
|
||
- Вызов контекстного 360° инспектора (Drawer) без потери контекста таблицы.
|
||
3. **Биллинг и Подписки (`/control/billing`)**:
|
||
- Фильтры истекающих подписок (окно 7 дней, просроченные платежи).
|
||
- Сводка по Minor Units (копейки) с форматированием без плавающей точки.
|
||
- История платежей, выставление счетов, ручное продление trial.
|
||
4. **Инсталляции и Терминалы (`/control/installations`)**:
|
||
- Учёт парка POS/Android/Desktop терминалов и мобильных приложений.
|
||
- Мониторинг устаревших версий (flag `outdated`), времени последнего пинга и принудительный отзыв токенов сессий (`Revoke Token`).
|
||
5. **Инфраструктура и Узлы (`/control/nodes`)**:
|
||
- Мониторинг кластерных нод (CPU, RAM, Disk IO, p99 latency).
|
||
- Действие вывода ноды из ротации (`Drain / Evacuate Node`).
|
||
- Имитация сбоя сервера мониторинга для верификации Circuit Breaker.
|
||
6. **Rollout и Каталог модулей (`/control/modules`)**:
|
||
- Управление версиями модулей платформы.
|
||
- Фазы конвейера: `Canary (10%)`, `Pilot (30%)`, `Staged (50%)`, `GA (100%)`.
|
||
- Оперативные действия: `Start Rollout`, `Pause`, `Resume`, `Rollback`.
|
||
7. **Инциденты и Алерты (`/control/incidents`)**:
|
||
- Матрица тяжести: `P1 Critical`, `P2 Major`, `P3 Warning`, `P4 Info`.
|
||
- Эскалация, назначение дежурного инженера, перевод в `In Progress`, `Mitigated`, `Resolved`.
|
||
8. **Системные рассылки (`/control/broadcasts`)**:
|
||
- Таргетинг по тарифам и модулям тенантов.
|
||
- Уровни важности: `info`, `warning`, `critical_maintenance`.
|
||
9. **Журнал аудита (`/control/audit`)**:
|
||
- Хронологический реестр операций с проверкой валидности SHA-256 хеш-цепочки.
|
||
- Экспорт в CSV/JSON.
|
||
|
||
---
|
||
|
||
## 3. Контекстный 360° Инспектор (Drawer)
|
||
Шторка детального инспектирования вызывается с правой стороны экрана (600px на десктопе, 100% на мобильных экранах):
|
||
- **Вкладка «Обзор»**: Карточка организации, ИНН, домен, дата создания, активный SLA, текущий баланс и лимиты пользователей.
|
||
- **Вкладка «Модули»**: Список подключенных сервисных модулей с версиями и статусами работоспособности.
|
||
- **Вкладка «Инсталляции»**: Привязанные терминалы и кассы с версиями клиента.
|
||
- **Вкладка «Биллинг»**: График выставления счетов, статус продления и скидки.
|
||
- **Панель быстрых действий оператора**:
|
||
- `Выдать Trial +14 дней` (требует подтверждения с фиксацией причины).
|
||
- `Заморозить доступ` / `Разморозить` (критическая операция).
|
||
- `Сбросить 2FA администраторов` (операция безопасности).
|
||
- `Экспорт данных тенанта` (GDPR/152-ФЗ compliance).
|
||
|
||
---
|
||
|
||
## 4. Паттерн подтверждения опасных операций (ConfirmOperatorAction)
|
||
Любое деструктивное или влияющее на клиентов действие открывает диалоговое окно `ConfirmOperatorAction`:
|
||
1. **Предупреждение о последствиях**: Четкое перечисление затрагиваемых сущностей (например, «Будет заблокирован доступ 120 пользователей»).
|
||
2. **Обязательное обоснование (`action-reason-input`)**: Поле ввода причины выполнения с валидацией минимальной длины (не менее 5 символов).
|
||
3. **Кнопка подтверждения с семантическим цветом**: Красный (`bg-red-600`) для необратимых/блокирующих действий, янтарный (`bg-amber-600`) для сервисных операций.
|
||
4. **Хеширование записи аудита**: Запись немедленно хешируется с предыдущим хешем по схеме:
|
||
`hash = SHA-256(prevHash + timestamp + operatorRole + actionType + entityId + reason)`
|
||
и сохраняется в локальное постоянное хранилище IndexedDB.
|
||
|
||
---
|
||
|
||
## 5. Дизайн-система: Темная инженерная тема
|
||
Интерфейс спроектирован по канонам современных Mission-Control дашбордов:
|
||
- **Цветовая палитра**: Глубокий slate/zinc фон (`bg-zinc-950`, `bg-zinc-900`), контрастные границы (`border-zinc-800`), четкая типографика (`text-zinc-100`, `text-zinc-400`).
|
||
- **Семантические акценты**:
|
||
- `Зеленый (Emerald)`: Нормальная работа узла, активная подписка, GA-статус.
|
||
- `Янтарный (Amber)`: Предупреждение, истекающий trial, пауза раскатки.
|
||
- `Красный (Rose/Red)`: P1 инцидент, отказ узла, заблокированная организация.
|
||
- `Синий/Фиолетовый (Indigo/Violet)`: Канареечные релизы, системные оповещения.
|
||
- **Адаптивность (Zero Horizontal Overflow)**:
|
||
- Desktop (1440×900+): Полноразмерный сайдбар, многоколоночные таблицы, плавающий Drawer 600px.
|
||
- Tablet (768×1024): Сворачиваемый сайдбар, горизонтальная прокрутка таблиц внутри изолированных контейнеров.
|
||
- Mobile (390×844): Компактный мобильный заголовок, off-canvas навигация, карточный вид для таблиц.
|