ochenstarik/krona-front
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
krona-front/docs/handoff/control-center/UX-SPEC.md

10 KiB
Raw Blame History

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 навигация, карточный вид для таблиц.