Control Server (FastAPI) с WEB UI (Jinja2 + HTMX) и JSON API для группового администрирования устройств RouterOS 7 через REST. - Устройства: список, статус (модель, канал, версии ROS/FW, uptime, доступные обновления), примечания, пароли шифруются (Fernet); фоновый опрос каждые 30 с и быстрое обнаружение недоступности (таймаут соединения 4 с). - Группы устройств и фильтры (устройства, резервные копии). - Резервные копии: .backup и .rsc (show-sensitive) создаются через REST, скачиваются сервером и загружаются в S3 (Yandex Object Storage). - Обновление ROS/FW и выбор канала, групповые операции задачами. - Интерфейс по утверждённому макету: светлая/тёмная темы, окна, шрифты IBM Plex локально. Docker Compose, SQLite в томе, минимальный набор тестов. - Планы и итоги каждого изменения — в docs/changes/. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
5.7 KiB
5.7 KiB
План: 006 — редизайн UI (макет на ревью)
Статус: макет принят заказчиком, внедрено (см. summary.md). Ниже — исходное предложение. Макет: https://claude.ai/artifact/QdhgQWbQEWRYtBoAWMjGq6 (7 листов: разбор текущего UI, компоненты и уровни, «Устройства» в трёх состояниях, «Бэкапы», «Группы»).
Проблемы текущего UI
- Над таблицей три-четыре панели подряд (вкладки групп, фильтры, действия над выбранными, перенос в группу) выглядят одинаково — уровни не отделены.
- Разные формы контролов: вкладки-пилюли (r16), кнопки и поля (r5), бейджи (r10), пунктирная «вкладка».
- Действия над выбранными видны всегда; «Применить канал» и «Переместить» — двухшаговые.
- 12 колонок, выпадающий список канала в каждой строке.
Предложение
- Одна форма контролов: высота 36, радиус 8; три вида кнопок (primary — одна на экран, secondary, ghost); список-фильтр выглядит как secondary с шевроном; активный фильтр — контур и тон акцента. Метки: высота 22, радиус 6. Вкладки — подчёркивание, не кнопки.
- Уровни экрана: 1 приложение (навигация) → 2 страница (заголовок, счётчики, главное действие) → 3 область (вкладки групп) → 4 инструменты таблицы → 5 данные → задачи отдельной карточкой.
- Инструменты таблицы — одна полоса двух состояний: нет выбора — фильтры; выбрано N — действия над выбранными (Создать бэкап, Обновить статус, Обновление ▾, Канал ▾, В группу ▾, Снять выбор). ROS/FW — в меню с пояснением про перезагрузку.
- Таблица: модель уходит второй строкой в ячейку устройства; канал только показывается (смена — через «Канал ▾» и меню строки); меню «⋯» сгруппировано разделителями.
- «Управление группами» — ссылка справа от вкладок и пункт верхнего меню (не вкладка). Бэкапы: та же полоса фильтров, действия в строке — «Скачать» (иконка) и «⋯».
Вопросы к ревью
- Убрать выбор канала из строк? 2. Слить «Модель» в ячейку устройства? 3. Действия заменяют фильтры при выборе — ок?
- «Управление группами» в двух местах — оставить оба? 5. Подтверждение обновлений: окно браузера или модальное со списком устройств? 6. Тёмная тема — сохраняем (палитра на тех же токенах).
Внедрение (после утверждения макета)
- Токены и компоненты в
app/ui/static/style.css(кнопки, поля, метки, вкладки, карточка, меню), убрать разнобой радиусов. base.html,dashboard.html: заголовок страницы, вкладки-подчёркивание, единая полоса инструментов (фильтры ⇄ действия при выборе — HTMX + небольшой JS для счётчика выбора)._devices.html: слияние колонки «Модель», канал — текстом, сгруппированное меню строки; меню «Обновление / Канал / В группу» вместо отдельных форм (маршрут/ui/moveсохраняется).backups.html,groups.html,device_form.html— на тех же компонентах.- Проверка: pytest, рендер шаблонов и
curl; внешний вид — на ревью у заказчика (браузера на машине разработки нет). Итоги вsummary.md, README — в «Историю изменений».
Принято к внедрению (дополнение)
- Стиль макета переносится в точности; окна добавления/изменения устройства и групп проектируются в том же стиле (листы «Окно: …» в макете).
- Два бага, найденные заказчиком: (1) перезагрузка после обновления FW должна идти по записи в журнале «Firmware upgraded successfully, please reboot for changes to take effect!»; (2) при добавлении устройства нельзя привязать его к группе.
- Причины и подробный план внедрения —
docs/changes/006-ui-redesign/summary.md(раздел «Баги») и утверждённый план в истории работ.