Архитектура состояния сложной формы СХД: опыт команды Аэродиск на Vue 3 и FormKit

Интерфейсы настройки системного оборудования предъявляют к фронтенду специфические требования. В системах хранения данных (СХД) форма инициализации дисковых массивов должна жестко следовать аппаратным правилам: выбор уровня RAID определяет минимальный размер группы, каждый физический диск может иметь строго одну роль (данные, кэш чтения или ускорение записи), а изменение одного параметра мгновенно влияет на доступность всех остальных накопителей. Фронтенд-разработчик Виктория Добролежа из компании «Аэродиск» обобщила опыт создания такого экрана на стеке Vue 3, TypeScript и FormKit, показав, как декомпозиция состояния помогает обуздать сложность без спагетти-кода.

Минимальное состояние и вычисляемые проекции через Set

Типичная ошибка при проектировании интерактивных таблиц с множественным выбором — хранение избыточного состояния. Попытка завести отдельные реактивные массивы под доступные диски, выбранные диски, списки исключений и промежуточные роли неизбежно ведет к рассинхронизации интерфейса при быстром кликанье или пагинации.

В «Аэродиске» архитектуру построили вокруг единственного источника правды — минимального объекта SelectionState. Он сохраняет исключительно идентификаторы выбранных дисков, распределенные по целевым корзинам: массивы dataGroups для групп данных, cacheIds для кэша и accelerationIds для акселераторов.

Все производные представления рассчитываются реактивно «на лету» через вычисляемые свойства (computed properties) с использованием структуры данных JavaScript Set. Конструкция вида new Set(...dataIds, ...cacheIds, ...accelerationIds) формирует плоский набор всех занятых накопителей. Проверка доступности любого диска в строке таблицы через метод has() выполняется с константной вычислительной сложностью O(1). Вся визуальная логика — фильтрация списков, обновление счетчиков доступной емкости и блокировка кнопок выбора — превратилась в чистые функции, не порождающие побочных эффектов.

Изоляция бизнес-правил в чистые стратегии

В зависимости от режима работы пула диски компонуются принципиально по-разному: традиционный RAID (RDG) требует строгой нарезки на группы фиксированного размера (например, ровно по 4 или 8 накопителей), тогда как динамические пулы (DDP) объединяют все выбранные носители в единое общее пространство.

Чтобы логика группировки не смешивалась с шаблонами компонентов Vue, ее вынесли в паттерн «Стратегия» (Strategy). Чистые функции (такие как groupByFixedSize или groupAsSinglePool) принимают массив идентификаторов и возвращают структурированное описание групп. Это позволило полностью отделить доменную математику СХД от фреймворка представления: пограничные сценарии (например, распределение 10 дисков при размере группы 4 с образованием неполной группы) покрываются быстрыми модульными unit-тестами без монтирования компонентов в DOM.

Адаптер формы и двухуровневая валидация с FormKit

Для передачи данных на сервер используется промежуточный адаптер, связывающий интерактивную таблицу с инфраструктурой библиотеки FormKit. Адаптер преобразует визуальную группировку дисков в стабильный плоский массив diskIds, благодаря чему формат отправки API не зависит от порядка отображения строк на экране.

Валидация конфигурации разделена на два изолированных контура:

1. Компонентный уровень: проверяет внутреннюю целостность таблицы (полноту групп RAID, лимиты накопителей, предупреждения о неполных группах);
2. Уровень формы FormKit: проверяет сквозные системные ограничения (минимальное общее число дисков, совместимость классов носителей, корректность выбранного пула).

Локальная ошибка компонента передается в FormKit как глобальная блокирующая ошибка, предотвращая отправку некорректной формы на контроллер СХД. Такой подход демонстрирует: разделение минимального состояния, чистых стратегий и декларативной валидации позволяет сохранять управляемость сложных корпоративных интерфейсов даже при десятках взаимно зависимых аппаратных ограничений.