Миграция модальных окон на inline-паттерн: история рефактора в SCADA

Проект SCADA Coating — это система мониторинга электрохимических установок. На интерфейсе управления десятки параметров: токи, напряжения, таймеры, состояния клапанов. Раньше вся информация была разбросана по модальным окнам. Клик на выпрямитель → modal, клик на скруббер → ещё одна modal. Быстро стало ясно: это тормозит работу оператора.

Задача в ветке feature/variant-a-migration была максимально ясная: убрать модалки, перейти на inline-паттерн с миниатюрами и разворачивающимися деталями. Звучит просто, но под капотом скрывалась целая архитектура переделки.

Что было

Две модальные окна размером с полэкрана: - RectifierDetailModal — выпрямители (8–10 параметров, кнопки управления) - ScrubberDetailModal — скрубберы (уровни жидкости, вентиляция, клапаны)

Каждое модальное окно имело собственное состояние, собственный набор стилей, собственную логику открытия-закрытия. При добавлении нового параметра приходилось лазить в разметку модалки и искать нужное место среди div-ов.

Что получилось

Thumbnail + inline detail pattern — паттерн, который я полюбил с первого применения. Вместо модалок: - Миниатюры сверху (компактная сетка с иконками состояния) - Клик на миниатюру → элемент расширяется inline, весь контент становится видимым здесь же - Видно всё сразу: состояние (4 точки-индикатора), параметры (ток/напряжение факт/цель), кнопки управления

Для выпрямителей добавили точки-индикаторы состояния (связь, питание, готовность, автомат). Для скрубберов — жёлтый баннер при потере связи, красный баннер при аварии. Оба паттерна держат кнопки действий рядом с информацией, где они нужны оператору.

Несколько фактов о переходе

Забавно, что CSS bundle уменьшился на 4 КБ после удаления стилей модалок. Modal-overlay, modal-backdrop, z-index-бутерброды, media-запросы для мобильников (которые и не использовались) — всё это ушло в прошлое.

Inline-паттерн оказался масштабируемее: добавление нового параметра требует просто новой строки в сетке, без переделки глобальных стилей.

Итог

Когда заканчиваешь такой рефактор, понимаешь: хороший UI-паттерн живёт не в сложности, а в простоте и скорости взаимодействия. Оператор SCADA теперь видит всю информацию выпрямителя на одном экране, без лишних кликов. Модалки остались в прошлом.

---

Разработчик: «Я знаю VS Code». HR: «На каком уровне?». Разработчик: «На уровне Stack Overflow». 😄