rmm-openwrt/UI_CHECKLIST.md

UI/UX Checklist

Обозначения:

• [x] — уже реализовано.
• [ ] — требуется сделать.
• [~] — реализовано частично, требуется переработка.

Текущее состояние

• Авторизация оператора.
• Список устройств.
• Просмотр состояния устройства.
• Метрики и предупреждения.
• DHCP- и Wi-Fi-клиенты.
• Команды и история выполнения.
• UCI-конфигурация и staged apply.
• Управление пакетами.
• Удаленный SSH-доступ и LuCI.
• Аудит действий.
• [~] Обзор устройства понятен оператору.
• [~] История метрик пригодна для быстрого анализа.
• [~] Удаленный доступ запускается простым сценарием.
• Основные и экспертные функции визуально разделены.

Этап 0. UX-аудит

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

Этап 1. Каркас и объекты

• Добавить постоянную основную навигацию.
• Добавить верхнюю панель с глобальным обновлением.
• Создать полноширинную таблицу объектов.
• Добавить статус объекта с текстом и индикатором.
• Показывать имя, модель, группу, WAN, клиентов, проблемы и последний контакт.
• Добавить поиск по имени, модели, ID, WAN-адресу, группе и тегам.
• Добавить фильтр по статусу.
• Добавить фильтр по группе.
• Добавить фильтр по наличию проблем.
• Добавить сортировку колонок.
• Открывать объект кликом по строке.
• Показывать массовые действия только после выбора объектов.
• Добавить loading, empty и error states таблицы.
• Проверить таблицу на 1366 px и 1920 px.
• Сделать мобильное представление списка объектов.

Этап 2. Карточка и обзор объекта

• Создать верхнюю панель объекта.
• Добавить хлебную крошку возврата к объектам.
• Добавить вкладки «Обзор», «Клиенты», «Сеть», «Операции», «Сведения», «Эксперт».
• Показать статус и время последнего контакта.
• Показать WAN и доступность сервера.
• Показать CPU/load, память, uptime и число клиентов.
• Убрать дублирующиеся метрики.
• Показать активные предупреждения с приоритетами.
• Добавить компактные графики метрик.
• Добавить выбор периода графиков.
• Добавить основную кнопку открытия LuCI.
• Добавить кнопку запуска диагностики.
• Перенести перезагрузку и опасные действия в отдельное меню.
• Убрать raw inventory с обзорной страницы.
• Убрать произвольные команды с обзорной страницы.
• Убрать редактирование группы и тегов с обзорной страницы.

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

• Объединить DHCP leases и Wi-Fi stations в единую модель клиента.
• Создать таблицу клиентов.
• Показывать online/offline состояние.
• Показывать имя, IP, MAC и тип подключения.
• Для Wi-Fi показывать сеть, сигнал и скорость.
• Для Ethernet показывать интерфейс или порт, если доступно.
• Добавить поиск по имени, IP и MAC.
• Добавить фильтры по состоянию и типу подключения.
• Добавить понятное состояние отсутствия клиентов.
• Проверить длинные имена и неизвестные значения.

Этап 3. Сеть

• Создать сводку WAN-подключения.
• Показывать состояние интернет-доступа и внешний IP.
• Создать список LAN/WAN/Wi-Fi/VPN интерфейсов.
• Показывать адреса, состояние и счетчики трафика.
• Показать основные маршруты.
• Показывать Wi-Fi сети и подключенных клиентов.
• Спрятать низкоуровневые детали в раскрываемые блоки.
• Добавить loading, empty и error states.

Этап 4. Операции

• Объединить отдельные диагностические кнопки в один сценарий.
• Показывать прогресс диагностики.
• Показывать итог диагностики понятным языком.
• Добавить рекомендации по найденным проблемам.
• Упростить создание удаленной сессии до выбора длительности.
• Спрятать host, порты и параметры туннеля в дополнительные настройки.
• Добавить действия «Открыть LuCI» и «Скопировать SSH».
• Показывать оставшееся время удаленной сессии.
• Добавить понятное закрытие удаленной сессии.
• Объединить Preview и Stage в сценарий «Проверить → Применить».
• Показывать изменения перед применением.
• Понятно объяснять commit confirmed и автоматический откат.
• Добавить безопасные пресеты настроек.
• Перенести низкоуровневое управление пакетами в экспертный режим.
• Добавить подтверждение опасных операций.

Этап 5. Сведения

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

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

• Перенести raw inventory.
• Перенести произвольные команды.
• Перенести raw UCI show/set/commit/revert.
• Перенести низкоуровневое управление пакетами.
• Перенести полную историю команд.
• Сократить основные фильтры истории до «Все», «Выполняются», «Ошибка».
• Перенести дополнительные фильтры в меню.
• Перенести аудит.
• Добавить предупреждение перед опасными действиями.
• Подготовить экспертный режим к разграничению прав.

Убираем и объединяем

• Убрать локальные Reload / Refresh из отдельных панелей.
• Добавить автообновление данных.
• Оставить одну глобальную кнопку обновления на экране объектов.
• Убрать постоянный выбор массовой команды.
• Показывать массовые действия только при выбранных объектах.
• Объединить дублирующие блоки состояния и метрик.
• Объединить диагностические действия.
• Объединить Preview и Stage.
• Спрятать технические поля удаленного доступа.
• Спрятать raw JSON и raw UCI от оператора.
• Убрать опасные действия из основных кнопок.

Общие состояния и качество

• Добавить skeleton loading.
• Добавить единый компонент пустого состояния.
• Добавить единый компонент ошибки.
• Добавить toast-уведомления.
• Добавить единые диалоги подтверждения.
• Показывать request ID в раскрываемых деталях ошибки.
• Добавить tooltips для непонятных иконок.
• Проверить навигацию клавиатурой.
• Проверить видимый focus state.
• Проверить контраст текста и статусов.
• Проверить отсутствие наложений элементов.
• Проверить отсутствие обрезанного текста.
• Проверить преднамеренность горизонтального скролла таблиц.
• Проверить интерфейс на desktop, tablet и mobile.
• Сделать браузерные скриншоты ключевых экранов.

Требования к API

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

Приемка редизайна

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