rmm-openwrt/UI_ROADMAP.md

UI/UX Roadmap

Цель

Сделать RMM-интерфейс удобным для оператора, который обслуживает роутеры, но не обязан знать OpenWrt, UCI и внутренние команды агента.

Главный экран должен за несколько секунд отвечать на три вопроса:

1. Какие роутеры требуют внимания?
2. Что именно не работает?
3. Какое безопасное действие можно выполнить?

Скриншоты Netcraze используются как ориентир по плотности, навигации и представлению данных, без копирования бренда и интерфейса один в один.

Роли

Оператор

• Видит состояние объектов, клиентов, сети и предупреждений.
• Запускает готовые диагностики и безопасные операции.
• Открывает удаленный доступ и LuCI.
• Не работает с raw JSON, UCI-командами и техническими параметрами туннеля.

Эксперт

• Имеет доступ ко всем существующим низкоуровневым функциям.
• Просматривает raw inventory, историю команд и аудит.
• Выполняет произвольные команды, UCI-операции и управление пакетами.

На первом этапе экспертный режим будет отдельным разделом интерфейса. Разграничение прав можно добавить позже.

Принципы интерфейса

• Плотный рабочий интерфейс без маркетинговых блоков и декоративных карточек.
• Единая навигация и предсказуемые вкладки.
• Статусы читаются по тексту и цвету: норма, внимание, ошибка, недоступен.
• Основные действия доступны сразу, редкие и опасные спрятаны в меню.
• Одна глобальная кнопка обновления вместо кнопок обновления в каждом блоке.
• Автообновление данных с понятным временем последнего контакта.
• Русские операторские названия; технические термины остаются в экспертном режиме.
• Любая опасная операция требует подтверждения и объясняет последствия.
• Ошибки показывают понятное описание; request ID доступен в раскрываемых деталях.

Целевая структура

1. Объекты

Первый экран после входа: полноширинная таблица всех роутеров.

Основные колонки:

• Статус.
• Имя объекта.
• Модель и группа.
• WAN / интернет.
• Клиенты.
• Проблемы.
• Последний контакт.

Доступные действия:

• Поиск.
• Фильтры по статусу, группе и проблемам.
• Открытие объекта кликом по строке.
• Массовые действия появляются только после выбора объектов.

2. Карточка объекта

Верхняя часть содержит имя, статус, последний контакт и основные действия.

Вкладки:

• Обзор — здоровье роутера, предупреждения, основные метрики и графики.
• Клиенты — единый список DHCP- и Wi-Fi-клиентов.
• Сеть — WAN, интерфейсы, Wi-Fi, маршруты и счетчики.
• Операции — диагностика, удаленный доступ, обновления и безопасные настройки.
• Сведения — модель, прошивка, группа, теги и идентификаторы.
• Эксперт — raw inventory, команды, UCI, пакеты, история и аудит.

Что меняем в текущем UI

Сейчас	После редизайна
Список устройств в узкой боковой панели	Полноширинная таблица объектов
Длинная страница со всеми функциями	Карточка объекта с вкладками
Много кнопок Reload / Refresh	Автообновление и одна глобальная кнопка
Raw Inventory на обзорной странице	Раздел «Эксперт»
Выбор произвольной команды на обзорной странице	Раздел «Эксперт»
Пять отдельных кнопок диагностики	Единый сценарий «Запустить диагностику»
Raw UCI и множество кнопок	Пошаговое применение безопасных настроек; raw UCI в «Эксперт»
Preview и Stage как отдельные действия	Сценарий «Проверить изменения → Применить»
Технические поля SSH-туннеля	Выбор длительности и кнопки «Открыть LuCI» / «Скопировать SSH»
Редактирование группы и тегов в обзоре	Вкладка «Сведения»
Все статусы истории команд отдельными кнопками	Основные фильтры и меню дополнительных фильтров
Опасные действия рядом с обычными	Отдельное меню с подтверждением

Этапы реализации

Этап 0. UX-аудит и фундамент

• Сопоставить каждый текущий элемент с действием: оставить, перенести, объединить или скрыть.
• Зафиксировать операторские названия и статусы.
• Подготовить общий layout, компоненты статусов, кнопок, таблиц и уведомлений.
• Определить адаптивное поведение для desktop и mobile.

Этап 1. Навигация и список объектов

• Добавить постоянную навигацию по основным разделам.
• Перенести список роутеров в плотную таблицу.
• Добавить поиск, фильтры и сортировку.
• Показывать проблемы и последний контакт непосредственно в строке объекта.
• Показывать массовые действия только после выбора строк.

Этап 2. Обзор объекта

• Добавить верхнюю панель объекта и вкладки.
• Собрать компактную строку состояния.
• Показать WAN, загрузку, память, uptime, клиентов и предупреждения.
• Добавить основные графики за выбранный период.
• Оставить только главные действия: LuCI, диагностика и меню операций.

Этап 3. Клиенты и сеть

• Объединить DHCP leases и Wi-Fi stations в таблицу клиентов.
• Добавить поиск и фильтры клиентов.
• Создать отдельный экран интерфейсов и подключений.
• Показать понятные состояния WAN, LAN и Wi-Fi.

Этап 4. Операторские операции

• Сделать пошаговую диагностику с прогрессом и итогом.
• Упростить создание удаленной сессии.
• Добавить безопасные формы настроек вместо raw UCI.
• Представить обновления и пакеты как понятные операции.
• Показывать ход, результат и рекомендации после операции.

Этап 5. Экспертный режим

• Перенести существующие технические возможности без потери функциональности.
• Разместить raw inventory, команды, UCI, пакеты, историю и аудит.
• Отделить опасные операции и добавить явные подтверждения.
• Подготовить интерфейс к будущему разграничению прав.

Этап 6. Состояния и полировка

• Добавить skeleton, empty, loading, offline и error states.
• Добавить toast-уведомления и единый стиль подтверждений.
• Проверить навигацию клавиатурой и фокус.
• Проверить таблицы, переносы текста и отсутствие наложений.
• Проверить desktop, tablet и mobile.

Этап 7. Недостающие данные API

• Нормализовать запись клиента из DHCP и Wi-Fi.
• Нормализовать состояние интерфейсов и подключений.
• Подготовить временные ряды для графиков.
• Добавить операторские операции поверх сырых команд.
• При необходимости добавить серверную пагинацию, поиск и сортировку.

Приоритет первой итерации

1. Новый layout и полноширинный список объектов.
2. Карточка объекта с вкладками.
3. Новый обзор объекта.
4. Упрощенный удаленный доступ и LuCI.
5. Перенос технических функций в «Эксперт».

Критерии готовности

• Оператор за 10 секунд понимает, какие объекты требуют внимания.
• Состояние объекта понятно без просмотра JSON и истории команд.
• LuCI открывается не более чем за два клика.
• Диагностика запускается не более чем за три клика.
• В обычном режиме нет raw UCI, произвольных команд и параметров туннеля.
• Опасные операции всегда требуют явного подтверждения.
• Интерфейс корректно работает на ширине 1366, 1920 и на мобильном экране.
• Нет случайного горизонтального скролла, наложений и обрезанного текста.
• Ошибки API отображаются понятно и позволяют раскрыть технические детали.