Терминал в браузере: вкладки, история команд и избранное прямо в admin-панели
До этого, чтобы попасть в оболочку контейнера, нужно было открыть терминал на локальной машине и набрать docker exec. Один раз — нормально. Когда это происходит несколько раз в день, и каждый раз нужно вспоминать как называется контейнер, переключаться между окнами, набирать полный путь — начинает раздражать. Я поставил терминал прямо в admin-панель.
Получился полноценный интерактивный терминал в браузере. Не просто вывод команд, а настоящий PTY: работают vim, htop, mc, top — всё, что требует интерактивного терминального окружения. До пяти сессий одновременно в отдельных вкладках. Боковая панель с историей и избранными командами, которые хранятся в базе данных. Состояние сохраняется при переходе в другие разделы панели.
Интерфейс
Модуль разделён на две части. Слева — узкая боковая панель с историей и избранными командами. Справа — рабочая область терминала: строка вкладок сверху и сам терминал снизу, занимающий всё доступное пространство.
Терминал оформлен в тёмной теме: тёмно-синий фон, светлый текст, цветные ANSI-последовательности отображаются правильно. Шрифт моноширинный — JetBrains Mono, Cascadia Code или Consolas в зависимости от того, что установлено в системе. Скролл на 5000 строк назад с тонкой полосой прокрутки.
Вкладки
До пяти терминальных сессий одновременно — каждая в отдельной вкладке. Вкладки оформлены как в браузере: закруглённые уголки сверху, активная вкладка визуально «сливается» с фоном терминала, неактивные чуть темнее. У каждой вкладки есть маленькая цветная точка — индикатор статуса соединения. Серая мигающая точка пока сессия устанавливается. Зелёная — всё в порядке, bash запущен и готов к работе. Красная — соединение оборвалось.
Если соединение разорвалось, над терминалом появляется красный баннер «Соединение закрыто» с кнопкой «Новый терминал». Кнопка закрывает упавшую вкладку и сразу открывает свежую сессию — одним кликом вместо ручного закрытия и открытия.
Вкладку можно переименовать двойным кликом по её названию. По умолчанию они называются «Терминал 1», «Терминал 2» и так далее — это удобно только если вкладка одна. Когда открыто несколько сессий, уже не помнишь, в какой что запущено: переименовал в «psql», «logs», «build» — сразу понятно.
Новую вкладку открывает кнопка «Новый» справа от строки вкладок. Она отключается при достижении максимума в пять. Закрыть вкладку — крестик на ней, он появляется при наведении. При закрытии последней вкладки новая открывается автоматически — терминал всегда не пустой.
Если вкладок много и они не влезают в ширину строки, по краям появляются кнопки прокрутки со стрелками. Активная вкладка при переключении всегда автоматически прокручивается в зону видимости — не нужно вручную искать её среди остальных.
Боковая панель
Избранное
Верхний блок боковой панели — избранные команды. Те, которые запускаешь регулярно и хочешь иметь под рукой без поиска по истории.
Каждая команда показывается одной строкой с монолёрным шрифтом. При наведении справа появляются три кнопки действия.
Стрелка вправо — вставить команду в терминал без выполнения. Команда появляется в строке ввода: можно добавить флаги или аргументы и нажать Enter самому. Это удобно для шаблонных команд, где конкретный аргумент каждый раз разный: например grep -r "" ./src — вставил, дописал что искать, запустил.
Треугольник — запустить немедленно. Клик одной кнопкой, команда выполняется в активной вкладке терминала. Фокус при этом уходит обратно в терминал.
Крестик — убрать из избранного.
История
Нижний блок — полная история выполненных команд, сортированная от свежих к старым. Блок занимает всё оставшееся пространство боковой панели и прокручивается независимо.
У каждой команды — временная метка в адаптивном формате: «только что» для команд последней минуты, «5 мин назад» для недавних, время 14:32 если сегодня, дата «18 мая» для более старых. Без точных меток — никогда не помнишь, когда именно делал что-то три дня назад, а здесь видно сразу.
Набор действий у истории шире, чем у избранного: вставить, запустить — те же что в избранном. Плюс звёздочка — добавить команду в избранное. Если команда уже в избранном, звёздочка горит жёлтым, повторный клик убирает её оттуда. Всё через один элемент, без лишних шагов. И корзина — удалить конкретную запись из истории.
В шапке блока «История», если история не пустая, появляется кнопка корзины. Одним кликом очищает всю историю целиком.
История хранится в базе данных, не в браузере. Это значит, что она не пропадает при закрытии вкладки браузера, не теряется после пересборки Docker-контейнера и доступна при входе в панель с любого устройства. Лимит — 500 последних уникальных команд. Если одна и та же команда запускается снова, старая запись удаляется и добавляется свежая — без дублей, самое актуальное всегда наверху.
Поиск
Над обоими блоками — одно поле поиска с иконкой лупы. Фильтрует сразу и историю, и избранное по мере набора: ничего не нужно подтверждать, список сужается в реальном времени. Если ничего не нашлось — показывается «Пусто» или «Нет команд». Крестик в поле одним кликом сбрасывает запрос и возвращает полный список.
Управление терминалом
В правой части строки вкладок — три кнопки.
«Новый» — открыть новую вкладку с чистой сессией. То же самое, что кнопка плюс в строке вкладок.
«Очистить» — очистить экран активного терминала. Работает как команда clear в bash, только кнопкой — удобно когда экран замусорен предыдущим выводом и хочется начать с чистого листа.
«Команды» — открыть справочное модальное окно.
Справка по командам
Кнопка «Команды» открывает модальное окно с каталогом утилит, доступных в контейнере. Инструменты сгруппированы по назначению: файлы и навигация, мониторинг, редакторы, сеть, утилиты. Для каждой команды — короткое описание что она делает.
Это помогает в первую очередь когда не помнишь точное название нужного инструмента. Знаешь что нужно смотреть на использование диска — открываешь справку, видишь ncdu. Нужно посмотреть открытые порты — вот lsof, вот netstat. Окно закрывается кликом на крестик или по фону.
Контекстное меню
Правый клик по области терминала открывает собственное контекстное меню — не браузерное. Оно позиционируется точно под курсором, при этом не выходя за края экрана.
Верхняя часть меню — быстрый запуск распространённых программ, сгруппированных по типу: файловые инструменты (mc, ncdu), мониторинг (htop, top), редакторы (nano, vim). Название программы и однострочное описание рядом. Клик — программа сразу запускается в активной вкладке.
Ниже разделителя — последние десять команд из истории. Те же команды что в боковой панели, только ближе к месту работы: не нужно тянуться к боковой панели мышью, достаточно правого клика. Длинные команды обрезаются с многоточием.
Клик в любом месте за пределами меню закрывает его.
Таймаут простоя
Каждая вкладка терминала — это открытое сетевое соединение и процесс на сервере. Оставлять их открытыми бесконечно расточительно, особенно если просто забыл закрыть вкладку в браузере. Через два часа без активности сессия закрывается автоматически.
«Активность» — это любое взаимодействие с терминалом: ввод символа, выполнение команды, или получение вывода от работающей в фоне программы. То есть если запущен tail -f и в файл пишутся логи, таймер не тикает — вывод идёт, сессия считается активной.
За минуту до истечения вверху терминала появляется жёлтый баннер с обратным отсчётом в секундах: «Сессия неактивна — закроется через 60 сек.» Рядом — кнопка «Продолжить». Нажал — таймер сбросился, баннер исчез, работаем дальше. Не нажал, ничего не делал — сессия закрылась, вкладка перешла в состояние «Соединение закрыто».
Сохранение состояния при навигации
При переходе в другой раздел admin-панели — логи, аналитику, файловый менеджер — терминальный модуль не закрывается. Вернулся обратно — все вкладки на месте, сессии живые, скролл на том же месте, история не сбросилась.
Это принципиально для длинных операций. Запустил деплой или сборку, переключился в логи посмотреть что происходит — вернулся, процесс доделал, вывод на экране. Раньше при уходе со страницы терминал выгружался и при возврате начинался заново.