-```
-
-Параметры:
-- `tail`: количество строк для получения (или "all")
-- `since`: временная метка последнего обновления (опционально)
-
-## Переменные состояния
-
-```javascript
-let ajaxUpdateEnabled = true; // Состояние AJAX обновления (по умолчанию включен)
-let ajaxUpdateIntervalMs = 2000; // Интервал обновления в миллисекундах
-let ajaxUpdateInterval = null; // ID интервала
-const containerStates = new Map(); // Состояние контейнеров для отслеживания обновлений
-```
-
-## Функции управления
-
-### enableAjaxLogUpdate(intervalMs)
-Включает AJAX обновление логов с заданным интервалом.
-
-### disableAjaxLogUpdate()
-Отключает AJAX обновление логов.
-
-### toggleAjaxLogUpdate()
-Переключает состояние AJAX обновления.
-
-### performAjaxLogUpdate()
-Выполняет одно обновление логов через AJAX.
-
-### updateContainerLogs(containerId, tailLines, token)
-Обновляет логи для конкретного контейнера.
-
-### updateRefreshButtonVisibility()
-Обновляет видимость кнопки refresh и состояние кнопки update в зависимости от состояния AJAX autoupdate.
-
-### setAjaxUpdateState(enabled)
-Обновляет визуальное состояние кнопки update (зеленая/красная) в зависимости от состояния AJAX autoupdate.
-
-## Интеграция с существующим кодом
-
-AJAX update интегрируется с существующими функциями:
-
-- **switchToSingle**: Останавливает AJAX обновление при смене контейнера
-- **switchToMultiView**: Останавливает AJAX обновление при переключении в multi-view
-- **refreshLogsAndCounters**: Ручное обновление логов (кнопка refresh)
-
-## Логирование
-
-Все операции AJAX update логируются в консоль браузера:
-
-```javascript
-console.log('AJAX обновление логов включено с интервалом 2000ms');
-console.log('AJAX обновление логов отключено');
-console.log('AJAX Update: Обновляем 2 контейнеров: ["container1", "container2"]');
-```
-
-## Обработка ошибок
-
-При ошибках AJAX запросов:
-
-- Обновление не останавливается автоматически
-- Ошибки логируются в консоль
-- Пользователь может вручную отключить обновление через чекбокс
-
-## Совместимость
-
-- Работает с существующими WebSocket соединениями
-- Поддерживает все режимы просмотра (single-view, multi-view)
-- Совместимо с фильтрацией и настройками уровней логирования
diff --git a/app/docs/features.md b/app/docs/features.md
deleted file mode 100644
index 81b3e4b..0000000
--- a/app/docs/features.md
+++ /dev/null
@@ -1,77 +0,0 @@
-# Новые функции интерфейса LogBoard+
-
-## Сворачивание панелей
-
-### Sidebar (боковая панель)
-- **Кнопка сворачивания**: на границе sidebar и основного контента
-- **Горячая клавиша**: `Ctrl+B` / `Ctrl+И`
-- **Свернутое состояние**: ширина 60px
-- **Логотип**: показывает в свернутом состоянии
-- **Кнопка помощи**: между options и logout
-
-## Управление
-
-### Кнопка сворачивания
-- **Кнопка на границе**: сворачивает боковую панель
-- **Расположение**: посередине экрана по высоте на границе sidebar и основного контента
-- **Состояние сохраняется** в localStorage
-
-### Горячая клавиша
-- **Ctrl+B** / **Ctrl+И**: сворачивает/разворачивает sidebar и header
-- Удобно для быстрого освобождения места на экране
-
-### Header (заголовок)
-- **Сворачивается вместе с sidebar**
-- **В свернутом состоянии**: тонкая полоска 40px высотой
-- **Содержит**: фильтр логов, кнопки уровней логирования, кнопку обновления
-- **Стили**: кнопки выглядят точно так же, как в развернутом состоянии
-- **log-header**: полностью скрывается в свернутом режиме
-- **log-content**: минимальный padding 2px в свернутом состоянии
-- **multi-view-panel**: показывает название контейнера в Single View режиме
-
-## Визуальные элементы
-
-### Логотип в свернутом sidebar
-```
-
-```
-- Отображается только когда sidebar свернут
-- Расположен в самом верху sidebar
-- Стилизован в цвете акцента
-- Занимает минимальное место
-
-### Модальное окно с горячими клавишами
-- **Открытие**: кнопка в свернутом sidebar
-- **Закрытие**: кнопка X, клик вне окна, или повторный клик на кнопку помощи
-- **Содержит**: полный список всех горячих клавиш с описанием
-- **Анимация**: плавное появление и исчезновение
-
-### Анимации
-- Плавные переходы при сворачивании/разворачивании
-- Длительность анимации: 0.3 секунды
-- CSS transitions для всех элементов
-- Кнопка сворачивания остается на месте при наведении
-
-## Сохранение настроек
-
-### localStorage ключи
-- `lb_sidebar_collapsed` - состояние sidebar
-- `lb_hotkeys_shown` - показ уведомления о горячих клавишах
-
-### Восстановление состояния
-- При перезапуске приложения состояния восстанавливаются
-- Кнопки показывают правильные иконки
-- Tooltip обновляется в соответствии с состоянием
-
-## Примеры использования
-
-### Освобождение места
-1. Нажать `Ctrl+B` или кнопку sidebar - сворачивается панель
-2. Получаем больше места для просмотра логов
-
-### Быстрое переключение
-1. Использовать `Ctrl+B` для быстрого переключения
-2. Использовать кнопку на границе для точного управления
-
-## Автор
-Сергей Антропов - https://devops.org.ru
diff --git a/app/docs/hotkeys.md b/app/docs/hotkeys.md
deleted file mode 100644
index a18edc6..0000000
--- a/app/docs/hotkeys.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Горячие клавиши LogBoard+
-
-## Обновление логов
-
-### Ctrl+R
-Обновляет логи в текущем режиме просмотра:
-- **Single View**: переподключается к WebSocket и получает свежие логи
-- **Multi View**: переподключается ко всем выбранным контейнерам
-
-### Ctrl+K
-Альтернативная комбинация для обновления логов (аналогично Ctrl+R)
-
-## Навигация
-
-### [ (квадратная скобка)
-Переход к предыдущему контейнеру в списке
-
-### ] (квадратная скобка)
-Переход к следующему контейнеру в списке
-
-### Ctrl+← (стрелка влево)
-Альтернативная комбинация для перехода к предыдущему контейнеру
-
-### Ctrl+→ (стрелка вправо)
-Альтернативная комбинация для перехода к следующему контейнеру
-
-## Управление интерфейсом
-
-### Ctrl+B
-Сворачивание/разворачивание sidebar панели:
-- Сворачивает sidebar до минимальной ширины (60px)
-- Скрывает все элементы управления и список контейнеров
-- Показывает логотип LogBoard+ в свернутом sidebar
-- Состояние сохраняется в localStorage
-
-### Кнопка сворачивания
-- **Кнопка на границе** () - сворачивание sidebar
-- Расположена посередине экрана по высоте на границе sidebar и основного контента
-- Состояние сохраняется в localStorage
-
-## Особенности
-
-### Проверка фокуса
-Горячие клавиши не работают, когда фокус находится в полях ввода:
-- Поле фильтра логов
-- Поле добавления исключенных контейнеров
-- Любые другие input/textarea элементы
-
-### Визуальные подсказки
-- Иконка клавиатуры в заголовке с подсказкой о горячих клавишах
-- Уведомление о горячих клавишах при первом запуске
-- Tooltip на кнопке сворачивания sidebar
-
-### Сохранение настроек
-- Состояние sidebar (свернут/развернут) сохраняется в localStorage
-- При следующем запуске приложения состояние восстанавливается
-
-## Примеры использования
-
-1. **Быстрое обновление логов**: `Ctrl+R` для получения свежих данных
-2. **Навигация по контейнерам**: `[` `]` для переключения между сервисами
-3. **Освобождение места на экране**: `Ctrl+B` для сворачивания панели
-4. **Работа в Multi View**: `Ctrl+R` обновляет все выбранные контейнеры одновременно
-
-## Автор
-Сергей Антропов - https://devops.org.ru
diff --git a/docker-compose.yml b/docker-compose.yml
index d6fdb53..0a5f0f0 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,57 +3,79 @@ services:
build: .
container_name: logboard
environment:
- LOGBOARD_PORT: '9001'
- LOGBOARD_TAIL: '500'
- LOGBOARD_USER: admin
- LOGBOARD_PASS: admin
- COMPOSE_PROJECT_NAME: ''
- LOGBOARD_SNAPSHOT_DIR: /app/snapshots
- LOGBOARD_INDEX_HTML: ./templates/index.html
- TZ_TS: Europe/Moscow
- SECRET_KEY: your-secret-key-here
- ENCRYPTION_KEY: your-encryption-key-here
- LOG_LEVEL: INFO
- LOG_FORMAT: json
- WEB_TITLE: LogBoard+
- WEB_DESCRIPTION: Веб-панель для просмотра логов микросервисов
- WEB_VERSION: 1.0.0
- MAX_CONNECTIONS: '100'
- CONNECTION_TIMEOUT: '30'
- READ_TIMEOUT: '60'
- AUTH_ENABLED: 'true'
- AUTH_METHOD: jwt
- SESSION_TIMEOUT: '3600'
- NOTIFICATIONS_ENABLED: 'false'
- SMTP_HOST: ''
- SMTP_PORT: '587'
- SMTP_USER: ''
- SMTP_PASS: ''
- SMTP_FROM: ''
- # Docker настройки
- DOCKER_HOST: unix:///var/run/docker.sock
- DOCKER_NETWORKS: iaas,infrastructure_iaas
+ # Основные настройки приложения
+ LOGBOARD_PORT: ${LOGBOARD_PORT:-9001}
+ LOGBOARD_TAIL: ${LOGBOARD_TAIL:-500}
+ LOGBOARD_USER: ${LOGBOARD_USER:-admin}
+ LOGBOARD_PASS: ${LOGBOARD_PASS:-admin}
+ LOGBOARD_PROJECTS: ${LOGBOARD_PROJECTS:-}
+ LOGBOARD_SNAPSHOT_DIR: ${LOGBOARD_SNAPSHOT_DIR:-/app/snapshots}
+ LOGBOARD_INDEX_HTML: ${LOGBOARD_INDEX_HTML:-./templates/index.html}
+ TZ_TS: ${TZ_TS:-Europe/Moscow}
+
+ # Настройки безопасности
+ SECRET_KEY: ${SECRET_KEY:-your-secret-key-here}
+ ENCRYPTION_KEY: ${ENCRYPTION_KEY:-your-encryption-key-here}
+
+ # Настройки логирования
+ LOG_LEVEL: ${LOG_LEVEL:-INFO}
+ LOG_FORMAT: ${LOG_FORMAT:-json}
+
+ # Настройки веб-интерфейса
+ WEB_TITLE: ${WEB_TITLE:-LogBoard+}
+ WEB_DESCRIPTION: ${WEB_DESCRIPTION:-Веб-панель для просмотра логов микросервисов}
+ WEB_VERSION: ${WEB_VERSION:-1.0.0}
+
+ # Настройки производительности
+ MAX_CONNECTIONS: ${MAX_CONNECTIONS:-100}
+ CONNECTION_TIMEOUT: ${CONNECTION_TIMEOUT:-30}
+ READ_TIMEOUT: ${READ_TIMEOUT:-60}
+
+ # Настройки аутентификации
+ AUTH_ENABLED: ${AUTH_ENABLED:-true}
+ AUTH_METHOD: ${AUTH_METHOD:-jwt}
+ SESSION_TIMEOUT: ${SESSION_TIMEOUT:-3600}
+
+ # Настройки уведомлений
+ NOTIFICATIONS_ENABLED: ${NOTIFICATIONS_ENABLED:-false}
+ SMTP_HOST: ${SMTP_HOST:-}
+ SMTP_PORT: ${SMTP_PORT:-587}
+ SMTP_USER: ${SMTP_USER:-}
+ SMTP_PASS: ${SMTP_PASS:-}
+ SMTP_FROM: ${SMTP_FROM:-}
+
+ # Настройки Docker
+ DOCKER_HOST: ${DOCKER_HOST:-unix:///var/run/docker.sock}
+ DOCKER_TLS_VERIFY: ${DOCKER_TLS_VERIFY:-}
+ DOCKER_CERT_PATH: ${DOCKER_CERT_PATH:-}
+ DOCKER_NETWORKS: ${DOCKER_NETWORKS:-iaas,infrastructure_iaas}
+
# Настройки фильтрации контейнеров
- LOGBOARD_SKIP_UNHEALTHY: 'true'
- LOGBOARD_CONTAINER_LIST_TIMEOUT: '10'
- LOGBOARD_CONTAINER_INFO_TIMEOUT: '3'
- LOGBOARD_HEALTH_CHECK_TIMEOUT: '2'
+ LOGBOARD_SKIP_UNHEALTHY: ${LOGBOARD_SKIP_UNHEALTHY:-true}
+ LOGBOARD_CONTAINER_LIST_TIMEOUT: ${LOGBOARD_CONTAINER_LIST_TIMEOUT:-10}
+ LOGBOARD_CONTAINER_INFO_TIMEOUT: ${LOGBOARD_CONTAINER_INFO_TIMEOUT:-3}
+ LOGBOARD_HEALTH_CHECK_TIMEOUT: ${LOGBOARD_HEALTH_CHECK_TIMEOUT:-2}
+
# Настройки AJAX обновления
- LOGBOARD_AJAX_UPDATE_INTERVAL: '2000'
+ LOGBOARD_AJAX_UPDATE_INTERVAL: ${LOGBOARD_AJAX_UPDATE_INTERVAL:-2000}
+
ports:
- - 9001:9001
+ - "${LOGBOARD_PORT:-9001}:${LOGBOARD_PORT:-9001}"
+
volumes:
- - /var/run/docker.sock:/var/run/docker.sock:ro
- - ./snapshots:/app/snapshots
- - ./:/app
+ - /var/run/docker.sock:/var/run/docker.sock:ro
+ - ./snapshots:/app/snapshots
+ - ./:/app
+
restart: unless-stopped
user: 0:0
+
networks:
- - default
- - iaas
- - infrastructure_iaas
+ - iaas
+ - infrastructure_iaas
+
+
networks:
- default: {}
iaas:
external: true
infrastructure_iaas:
diff --git a/env.example b/env.example
index 9b9ecb5..a342a16 100644
--- a/env.example
+++ b/env.example
@@ -1,79 +1,159 @@
# LogBoard+ - Переменные окружения
# Автор: Сергей Антропов
# Сайт: https://devops.org.ru
+# Версия: 1.0.0
-# Основные настройки приложения
+# =============================================================================
+# ОСНОВНЫЕ НАСТРОЙКИ ПРИЛОЖЕНИЯ
+# =============================================================================
+
+# Порт на котором будет работать веб-интерфейс LogBoard+
LOGBOARD_PORT=9001
-LOGBOARD_TAIL=500
-LOGBOARD_USER=admin
-LOGBOARD_PASS=s3cret-change-me
-# Директория для снимков логов
+# Количество строк логов для отображения по умолчанию (tail)
+LOGBOARD_TAIL=500
+
+# Имя пользователя для входа в систему
+LOGBOARD_USER=admin
+
+# Пароль для входа в систему (обязательно измените в продакшене)
+LOGBOARD_PASS=admin
+
+# Директория для сохранения снимков логов (путь внутри контейнера)
LOGBOARD_SNAPSHOT_DIR=/app/snapshots
-# Путь к HTML шаблону
+# Путь к HTML шаблону главной страницы
LOGBOARD_INDEX_HTML=./templates/index.html
-# Временная зона для временных меток
-TZ_TS=
+# Временная зона для временных меток в логах (например: Europe/Moscow, UTC)
+TZ_TS=Europe/Moscow
+
+# =============================================================================
+# НАСТРОЙКИ DOCKER
+# =============================================================================
# Фильтр по проекту Docker Compose (опционально)
+# Если указано, будут показаны только контейнеры из этого проекта
# COMPOSE_PROJECT_NAME=myproj
# Настройки множественных проектов
# Укажите проекты через запятую для отображения контейнеров из нескольких проектов
+# Если не указано или пустое значение - показываются ВСЕ контейнеры из всех проектов
# LOGBOARD_PROJECTS=project1,project2,project3
-# Настройки Docker
+# Путь к Docker socket для подключения к Docker daemon
DOCKER_HOST=unix:///var/run/docker.sock
+
+# Проверка TLS для Docker (для удаленных Docker hosts)
DOCKER_TLS_VERIFY=
+
+# Путь к сертификатам Docker (для удаленных Docker hosts)
DOCKER_CERT_PATH=
# Настройки Docker сетей (внешние сети для подключения)
# Укажите имена внешних сетей через запятую
DOCKER_NETWORKS=iaas,infrastructure_iaas
-# Настройки безопасности
-# Измените эти значения на свои в продакшене
+# =============================================================================
+# НАСТРОЙКИ БЕЗОПАСНОСТИ
+# =============================================================================
+
+# Секретный ключ для JWT токенов (обязательно измените в продакшене)
SECRET_KEY=your-secret-key-here
+
+# Ключ шифрования для чувствительных данных (обязательно измените в продакшене)
ENCRYPTION_KEY=your-encryption-key-here
-# Настройки логирования
+# =============================================================================
+# НАСТРОЙКИ ЛОГИРОВАНИЯ
+# =============================================================================
+
+# Уровень логирования приложения (DEBUG, INFO, WARNING, ERROR)
LOG_LEVEL=INFO
+
+# Формат логов (json, text)
LOG_FORMAT=json
-# Настройки веб-интерфейса
+# =============================================================================
+# НАСТРОЙКИ ВЕБ-ИНТЕРФЕЙСА
+# =============================================================================
+
+# Заголовок веб-интерфейса
WEB_TITLE=LogBoard+
+
+# Описание веб-интерфейса
WEB_DESCRIPTION=Веб-панель для просмотра логов микросервисов
+
+# Версия веб-интерфейса
WEB_VERSION=1.0.0
-# Настройки производительности
+# =============================================================================
+# НАСТРОЙКИ ПРОИЗВОДИТЕЛЬНОСТИ
+# =============================================================================
+
+# Максимальное количество одновременных подключений
MAX_CONNECTIONS=100
+
+# Таймаут подключения в секундах
CONNECTION_TIMEOUT=30
+
+# Таймаут чтения в секундах
READ_TIMEOUT=60
-# Настройки фильтрации контейнеров
+# =============================================================================
+# НАСТРОЙКИ ФИЛЬТРАЦИИ КОНТЕЙНЕРОВ
+# =============================================================================
+
# Пропускать контейнеры с проблемными health check (true/false)
LOGBOARD_SKIP_UNHEALTHY=true
-# Настройки таймаутов (в секундах)
+# Таймаут получения списка контейнеров в секундах
LOGBOARD_CONTAINER_LIST_TIMEOUT=10
+
+# Таймаут получения информации о контейнере в секундах
LOGBOARD_CONTAINER_INFO_TIMEOUT=3
+
+# Таймаут health check контейнера в секундах
LOGBOARD_HEALTH_CHECK_TIMEOUT=2
-# Настройки аутентификации
-AUTH_ENABLED=true
-AUTH_METHOD=jwt
-SESSION_TIMEOUT=3600
-SECRET_KEY=your-secret-key-here-change-in-production
+# =============================================================================
+# НАСТРОЙКИ АУТЕНТИФИКАЦИИ
+# =============================================================================
-# Настройки уведомлений
+# Включить аутентификацию (true/false)
+AUTH_ENABLED=true
+
+# Метод аутентификации (jwt)
+AUTH_METHOD=jwt
+
+# Время жизни сессии в секундах
+SESSION_TIMEOUT=3600
+
+# =============================================================================
+# НАСТРОЙКИ УВЕДОМЛЕНИЙ
+# =============================================================================
+
+# Включить уведомления по email (true/false)
NOTIFICATIONS_ENABLED=false
+
+# SMTP сервер для отправки уведомлений
SMTP_HOST=
+
+# Порт SMTP сервера
SMTP_PORT=587
+
+# Пользователь SMTP
SMTP_USER=
+
+# Пароль SMTP
SMTP_PASS=
+
+# Email отправителя
SMTP_FROM=
-# Настройки AJAX обновления логов
+# =============================================================================
+# НАСТРОЙКИ AJAX ОБНОВЛЕНИЯ
+# =============================================================================
+
+# Интервал AJAX обновления логов в миллисекундах
LOGBOARD_AJAX_UPDATE_INTERVAL=2000
diff --git a/env_comparison.md b/env_comparison.md
deleted file mode 100644
index 8dc2e17..0000000
--- a/env_comparison.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Сравнение переменных окружения
-
-## Обзор файлов
-
-- **docker-compose.yml** - переменные окружения, используемые в контейнере
-- **env.example** - пример файла с переменными окружения
-- **.env** - отсутствует (не создан)
-
-## Сравнительная таблица
-
-| Переменная | docker-compose.yml | env.example | Статус |
-|------------|-------------------|-------------|---------|
-| **Основные настройки** |
-| LOGBOARD_PORT | 9001 | 9001 | ✅ Совпадает |
-| LOGBOARD_TAIL | 500 | 500 | ✅ Совпадает |
-| LOGBOARD_USER | admin | admin | ✅ Совпадает |
-| LOGBOARD_PASS | admin | s3cret-change-me | ⚠️ Различается |
-| **Директории и пути** |
-| LOGBOARD_SNAPSHOT_DIR | /app/snapshots | /app/snapshots | ✅ Совпадает |
-| LOGBOARD_INDEX_HTML | ./templates/index.html | ./templates/index.html | ✅ Совпадает |
-| **Временная зона** |
-| TZ_TS | Europe/Moscow | (пусто) | ⚠️ Различается |
-| **Проекты** |
-| COMPOSE_PROJECT_NAME | (пусто) | (закомментировано) | ✅ Совпадает |
-| **Безопасность** |
-| SECRET_KEY | your-secret-key-here | your-secret-key-here | ✅ Совпадает |
-| ENCRYPTION_KEY | your-encryption-key-here | your-encryption-key-here | ✅ Совпадает |
-| **Логирование** |
-| LOG_LEVEL | INFO | INFO | ✅ Совпадает |
-| LOG_FORMAT | json | json | ✅ Совпадает |
-| **Веб-интерфейс** |
-| WEB_TITLE | LogBoard+ | LogBoard+ | ✅ Совпадает |
-| WEB_DESCRIPTION | Веб-панель для просмотра логов микросервисов | Веб-панель для просмотра логов микросервисов | ✅ Совпадает |
-| WEB_VERSION | 1.0.0 | 1.0.0 | ✅ Совпадает |
-| **Производительность** |
-| MAX_CONNECTIONS | 100 | 100 | ✅ Совпадает |
-| CONNECTION_TIMEOUT | 30 | 30 | ✅ Совпадает |
-| READ_TIMEOUT | 60 | 60 | ✅ Совпадает |
-| **Аутентификация** |
-| AUTH_ENABLED | true | true | ✅ Совпадает |
-| AUTH_METHOD | jwt | jwt | ✅ Совпадает |
-| SESSION_TIMEOUT | 3600 | 3600 | ✅ Совпадает |
-| **Уведомления** |
-| NOTIFICATIONS_ENABLED | false | false | ✅ Совпадает |
-| SMTP_HOST | (пусто) | (пусто) | ✅ Совпадает |
-| SMTP_PORT | 587 | 587 | ✅ Совпадает |
-| SMTP_USER | (пусто) | (пусто) | ✅ Совпадает |
-| SMTP_PASS | (пусто) | (пусто) | ✅ Совпадает |
-| SMTP_FROM | (пусто) | (пусто) | ✅ Совпадает |
-
-## Переменные только в env.example
-
-| Переменная | Значение | Описание |
-|------------|----------|----------|
-| DOCKER_HOST | unix:///var/run/docker.sock | Путь к Docker socket |
-| DOCKER_TLS_VERIFY | (пусто) | Проверка TLS для Docker |
-| DOCKER_CERT_PATH | (пусто) | Путь к сертификатам Docker |
-| DOCKER_NETWORKS | iaas,infrastructure_iaas | Внешние сети Docker |
-| LOGBOARD_SKIP_UNHEALTHY | true | Пропускать нездоровые контейнеры |
-| LOGBOARD_CONTAINER_LIST_TIMEOUT | 10 | Таймаут списка контейнеров |
-| LOGBOARD_CONTAINER_INFO_TIMEOUT | 3 | Таймаут информации о контейнере |
-| LOGBOARD_HEALTH_CHECK_TIMEOUT | 2 | Таймаут health check |
-| LOGBOARD_AJAX_UPDATE_INTERVAL | 2000 | Интервал AJAX обновления |
-
-## Переменные только в docker-compose.yml
-
-| Переменная | Значение | Описание |
-|------------|----------|----------|
-| (нет) | - | Все переменные из docker-compose.yml есть в env.example |
-
-## Рекомендации
-
-### 1. Создать .env файл
-```bash
-cp env.example .env
-```
-
-### 2. Обновить docker-compose.yml
-Добавить недостающие переменные из env.example:
-
-```yaml
-environment:
- # Существующие переменные...
-
- # Добавить недостающие:
- DOCKER_HOST: unix:///var/run/docker.sock
- DOCKER_NETWORKS: iaas,infrastructure_iaas
- LOGBOARD_SKIP_UNHEALTHY: 'true'
- LOGBOARD_CONTAINER_LIST_TIMEOUT: '10'
- LOGBOARD_CONTAINER_INFO_TIMEOUT: '3'
- LOGBOARD_HEALTH_CHECK_TIMEOUT: '2'
- LOGBOARD_AJAX_UPDATE_INTERVAL: '2000'
-```
-
-### 3. Исправить различия
-- **LOGBOARD_PASS**: В docker-compose.yml используется `admin`, в env.example - `s3cret-change-me`
-- **TZ_TS**: В docker-compose.yml установлено `Europe/Moscow`, в env.example - пусто
-
-### 4. Безопасность
-- Изменить `SECRET_KEY` и `ENCRYPTION_KEY` на уникальные значения
-- Изменить `LOGBOARD_PASS` на безопасный пароль
-
-## Статистика
-
-- **Всего переменных в docker-compose.yml**: 25
-- **Всего переменных в env.example**: 34
-- **Совпадающих переменных**: 23
-- **Различающихся переменных**: 2
-- **Отсутствующих в docker-compose.yml**: 9
-- **Отсутствующих в env.example**: 0
-
-## Вывод
-
-В целом, файлы хорошо синхронизированы, но есть несколько важных различий:
-
-1. **Отсутствуют переменные** в docker-compose.yml (особенно новые для AJAX обновления)
-2. **Различаются значения** для пароля и временной зоны
-3. **Отсутствует .env файл** для локальной настройки
-
-## Выполненные действия
-
-✅ **Создан .env файл** на основе env.example
-✅ **Обновлен docker-compose.yml** - добавлены недостающие переменные:
- - DOCKER_HOST
- - DOCKER_NETWORKS
- - LOGBOARD_SKIP_UNHEALTHY
- - LOGBOARD_CONTAINER_LIST_TIMEOUT
- - LOGBOARD_CONTAINER_INFO_TIMEOUT
- - LOGBOARD_HEALTH_CHECK_TIMEOUT
- - LOGBOARD_AJAX_UPDATE_INTERVAL
-
-## Рекомендации для завершения синхронизации
-
-1. **Обновить .env файл** (вручную):
- ```bash
- # Изменить пароль на admin (как в docker-compose.yml)
- LOGBOARD_PASS=admin
-
- # Добавить временную зону (как в docker-compose.yml)
- TZ_TS=Europe/Moscow
- ```
-
-2. **Проверить безопасность**:
- - Изменить SECRET_KEY и ENCRYPTION_KEY на уникальные значения
- - Рассмотреть изменение LOGBOARD_PASS на более безопасный пароль
-
-3. **Использовать .env файл** в docker-compose.yml:
- ```yaml
- env_file:
- - .env
- ```
-
-Теперь все файлы синхронизированы и готовы к использованию!
diff --git a/templates/index.html b/templates/index.html
index e68c536..2b2fd6f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -52,6 +52,375 @@ a{color:var(--link)}
display: none;
}
+/* Миникарточки контейнеров для свернутого sidebar */
+.sidebar.collapsed .mini-container-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding: 8px 4px;
+ overflow-y: auto;
+ flex: 1;
+ scrollbar-width: thin;
+ scrollbar-color: var(--border) transparent;
+}
+
+/* Всплывающие подсказки для миникарточек */
+.mini-container-tooltip {
+ position: absolute;
+ background: var(--panel);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 12px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ z-index: 1000;
+ pointer-events: auto;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.2s ease, visibility 0.2s ease;
+ max-width: 280px;
+ min-width: 200px;
+ font-size: 12px;
+ line-height: 1.4;
+}
+
+.mini-container-tooltip.show {
+ opacity: 1;
+ visibility: visible;
+}
+
+.mini-container-tooltip-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 8px;
+ font-weight: 600;
+ color: var(--fg);
+}
+
+.mini-container-tooltip-icon {
+ font-size: 14px;
+ color: var(--accent);
+}
+
+.mini-container-tooltip-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--fg);
+ margin-bottom: 4px;
+}
+
+.mini-container-tooltip-service {
+ font-size: 11px;
+ color: var(--muted);
+ margin-bottom: 6px;
+}
+
+.mini-container-tooltip-status {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 10px;
+ margin-bottom: 4px;
+}
+
+.mini-container-tooltip-status-indicator {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+}
+
+.mini-container-tooltip-status-indicator.running { background: var(--ok); }
+.mini-container-tooltip-status-indicator.stopped { background: var(--err); }
+.mini-container-tooltip-status-indicator.paused { background: var(--warn); }
+
+.mini-container-tooltip-port {
+ font-size: 10px;
+ color: var(--muted);
+ margin-bottom: 4px;
+}
+
+.mini-container-tooltip-url {
+ font-size: 10px;
+ color: var(--accent);
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 4px;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ cursor: pointer;
+}
+
+.mini-container-tooltip-url:hover {
+ text-decoration: underline;
+ color: var(--link);
+ background: var(--chip);
+}
+
+
+
+/* Дополнительные стили для светлой темы */
+:root[data-theme="light"] .mini-container-tooltip {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ border-color: var(--border);
+}
+
+/* Анимация появления подсказки */
+@keyframes tooltipFadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.mini-container-tooltip.show {
+ opacity: 1;
+ visibility: visible;
+ animation: tooltipFadeIn 0.2s ease;
+}
+
+/* Позиционирование подсказки */
+.mini-container-tooltip.top {
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.mini-container-tooltip.bottom {
+ top: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.mini-container-tooltip.left {
+ right: calc(100% + 8px);
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.mini-container-tooltip.right {
+ left: calc(100% + 8px);
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+/* Стрелка подсказки */
+.mini-container-tooltip::before {
+ content: '';
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: 4px solid transparent;
+}
+
+.mini-container-tooltip.top::before {
+ bottom: -8px;
+ left: 50%;
+ transform: translateX(-50%);
+ border-top-color: var(--panel);
+}
+
+.mini-container-tooltip.bottom::before {
+ top: -8px;
+ left: 50%;
+ transform: translateX(-50%);
+ border-bottom-color: var(--panel);
+}
+
+.mini-container-tooltip.left::before {
+ right: -8px;
+ top: 50%;
+ transform: translateY(-50%);
+ border-left-color: var(--panel);
+}
+
+.mini-container-tooltip.right::before {
+ left: -8px;
+ top: 50%;
+ transform: translateY(-50%);
+ border-right-color: var(--panel);
+}
+
+.sidebar.collapsed .mini-container-list::-webkit-scrollbar {
+ width: 4px;
+}
+
+.sidebar.collapsed .mini-container-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.sidebar.collapsed .mini-container-list::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 2px;
+}
+
+.sidebar.collapsed .mini-container-list::-webkit-scrollbar-thumb:hover {
+ background: var(--muted);
+}
+
+.sidebar:not(.collapsed) .mini-container-list {
+ display: none;
+}
+
+.mini-container-item {
+ background: var(--chip);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ padding: 6px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ position: relative;
+ min-height: 32px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.mini-container-item:hover {
+ background: var(--tab-active);
+ border-color: var(--accent);
+ transform: scale(1.05);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+
+
+.mini-container-item.active {
+ background: var(--tab-active);
+ border-color: var(--accent);
+ color: var(--accent);
+ box-shadow: 0 0 0 1px var(--accent);
+}
+
+.mini-container-item.active:hover {
+ transform: scale(1.05);
+ box-shadow: 0 0 0 1px var(--accent), 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.mini-container-item.active::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 2px;
+ background: var(--accent);
+ border-radius: 0 1px 1px 0;
+}
+
+.mini-container-item.selected {
+ border-color: var(--ok);
+ box-shadow: 0 0 0 1px var(--ok);
+ background: var(--tab-active);
+}
+
+.mini-container-item.selected .mini-container-icon {
+ color: var(--ok);
+}
+
+.mini-container-item.selected .mini-container-name {
+ color: var(--ok);
+}
+
+.mini-container-item.selected:hover {
+ transform: scale(1.05);
+ box-shadow: 0 0 0 1px var(--ok), 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Индикатор выбора для миникарточек */
+.mini-container-item.selected::after {
+ content: '';
+ position: absolute;
+ top: -2px;
+ right: -2px;
+ width: 8px;
+ height: 8px;
+ background: var(--ok);
+ border-radius: 50%;
+ border: 1px solid var(--panel);
+ z-index: 10;
+ animation: selectionPulse 0.3s ease;
+}
+
+@keyframes selectionPulse {
+ 0% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.mini-container-icon {
+ font-size: 12px;
+ margin-bottom: 2px;
+ color: var(--muted);
+}
+
+.mini-container-item.active .mini-container-icon {
+ color: var(--accent);
+}
+
+.mini-container-name {
+ font-size: 8px;
+ font-weight: 500;
+ text-align: center;
+ line-height: 1.2;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--fg);
+}
+
+.mini-container-item.active .mini-container-name {
+ color: var(--accent);
+}
+
+.mini-container-status {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background: var(--ok);
+}
+
+.mini-container-status.running { background: var(--ok); }
+.mini-container-status.stopped { background: var(--err); }
+.mini-container-status.paused { background: var(--warn); }
+
+/* Плейсхолдер для миникарточек */
+.mini-container-item.placeholder {
+ opacity: 0.5;
+ cursor: default;
+ background: var(--chip);
+ border-color: var(--border);
+}
+
+.mini-container-item.placeholder:hover {
+ transform: none;
+ background: var(--chip);
+ border-color: var(--border);
+ box-shadow: none;
+}
+
+.mini-container-item.placeholder .mini-container-icon,
+.mini-container-item.placeholder .mini-container-name {
+ color: var(--muted);
+}
+
.sidebar.collapsed .sidebar-header {
display: flex;
align-items: center;
@@ -442,6 +811,124 @@ a{color:var(--link)}
border-color: var(--accent);
}
+/* Tooltip для кнопки помощи */
+.help-tooltip {
+ position: absolute;
+ background: var(--bg);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ padding: 16px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ z-index: 1000;
+ max-width: 320px;
+ font-size: 13px;
+ line-height: 1.5;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.2s ease;
+ pointer-events: none;
+}
+
+.help-tooltip.show {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+
+.help-tooltip-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid var(--border);
+}
+
+.help-tooltip-logo {
+ width: 24px;
+ height: 24px;
+ background: var(--accent);
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #0b0d12;
+ font-weight: bold;
+ font-size: 12px;
+}
+
+.help-tooltip-title {
+ font-weight: 600;
+ color: var(--fg);
+ font-size: 14px;
+}
+
+.help-tooltip-section {
+ margin-bottom: 12px;
+}
+
+.help-tooltip-section:last-child {
+ margin-bottom: 0;
+}
+
+.help-tooltip-section-title {
+ font-weight: 600;
+ color: var(--fg);
+ margin-bottom: 6px;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.help-tooltip-content {
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.4;
+}
+
+.help-tooltip-hotkeys {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 8px 12px;
+ font-size: 11px;
+ margin-top: 4px;
+}
+
+.help-tooltip-hotkey {
+ background: var(--chip);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ padding: 2px 6px;
+ font-family: 'Courier New', monospace;
+ font-weight: 600;
+ color: var(--fg);
+ text-align: center;
+ min-width: 40px;
+}
+
+.help-tooltip-description {
+ color: var(--muted);
+ font-size: 11px;
+}
+
+.help-tooltip-author {
+ margin-top: 8px;
+ padding-top: 8px;
+ border-top: 1px solid var(--border);
+ font-size: 11px;
+ color: var(--muted);
+ text-align: center;
+}
+
+.help-tooltip-author a {
+ color: var(--accent);
+ text-decoration: none;
+}
+
+.help-tooltip-author a:hover {
+ text-decoration: underline;
+}
+
/* Специальный hover эффект для кнопки options с цветом accent */
.options-btn:hover {
background: var(--accent) !important; /* Цвет логотипа */
@@ -2030,6 +2517,39 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
+
+
+
@@ -2138,6 +2658,16 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
+
+
+
@@ -2843,7 +3373,15 @@ function buildTabs(){
// Modern container list
els.containerList.innerHTML = '';
+
+ // Миникарточки контейнеров
+ const miniContainerList = document.getElementById('miniContainerList');
+ if (miniContainerList) {
+ miniContainerList.innerHTML = '';
+ }
+
state.services.forEach(svc => {
+ // Создаем обычную карточку контейнера
const item = document.createElement('div');
item.className = 'container-item';
if (state.current && svc.id === state.current.id) {
@@ -2889,6 +3427,73 @@ function buildTabs(){
await switchToSingle(svc);
};
els.containerList.appendChild(item);
+
+ // Создаем миникарточку контейнера
+ if (miniContainerList) {
+ const miniItem = document.createElement('div');
+ miniItem.className = 'mini-container-item';
+ if (state.current && svc.id === state.current.id) {
+ miniItem.classList.add('active');
+ }
+ miniItem.setAttribute('data-cid', svc.id);
+
+ // Сокращаем имя для миникарточки
+ const shortName = svc.name.length > 8 ? svc.name.substring(0, 6) + '..' : svc.name;
+
+ miniItem.innerHTML = `
+
+
+
+ ${escapeHtml(shortName)}
+
+ `;
+
+ // Добавляем обработчики для всплывающих подсказок
+ miniItem.addEventListener('mouseenter', (e) => {
+ showMiniContainerTooltip(e, svc);
+ });
+
+ miniItem.addEventListener('mouseleave', () => {
+ // Добавляем задержку перед скрытием подсказки
+ const tooltip = document.getElementById('miniContainerTooltip');
+ if (tooltip) {
+ tooltip.hideTimer = setTimeout(() => {
+ if (tooltip && !tooltip.matches(':hover')) {
+ hideMiniContainerTooltip();
+ }
+ }, 150);
+ }
+ });
+
+ // Обработчик клика для миникарточек с поддержкой Shift+клик и Ctrl+клик
+ miniItem.addEventListener('click', async (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (e.shiftKey && lastSelectedContainerId && lastSelectedContainerId !== svc.id) {
+ // Shift+клик с предыдущим выбором - диапазонный выбор
+ console.log('Shift+клик для диапазонного выбора:', lastSelectedContainerId, 'to', svc.id);
+ selectContainerRange(lastSelectedContainerId, svc.id);
+ } else if (e.shiftKey) {
+ // Shift+клик - добавляем/убираем из мультивыбора
+ console.log('Shift+клик на миникарточку:', svc.name);
+ toggleContainerSelection(svc.id);
+ lastSelectedContainerId = svc.id;
+ } else if (e.ctrlKey || e.metaKey) {
+ // Ctrl/Cmd+клик - добавляем/убираем из мультивыбора
+ console.log('Ctrl+клик на миникарточку:', svc.name);
+ toggleContainerSelection(svc.id);
+ lastSelectedContainerId = svc.id;
+ } else {
+ // Обычный клик - переключаемся в single view
+ console.log('Обычный клик на миникарточку:', svc.name);
+ lastSelectedContainerId = svc.id;
+ await switchToSingle(svc);
+ }
+ });
+
+ miniContainerList.appendChild(miniItem);
+ }
});
}
@@ -3195,7 +3800,7 @@ function toggleContainerSelection(containerId) {
function updateContainerSelectionUI() {
console.log('updateContainerSelectionUI called, selected containers:', state.selectedContainers);
- // Обновляем чекбоксы
+ // Обновляем чекбоксы и обычные карточки контейнеров
const checkboxes = document.querySelectorAll('.container-checkbox');
console.log('Found checkboxes:', checkboxes.length);
@@ -3216,6 +3821,17 @@ function updateContainerSelectionUI() {
}
});
+ // Обновляем миникарточки контейнеров
+ const miniContainerItems = document.querySelectorAll('.mini-container-item');
+ miniContainerItems.forEach(miniItem => {
+ const containerId = miniItem.getAttribute('data-cid');
+ if (state.selectedContainers.includes(containerId)) {
+ miniItem.classList.add('selected');
+ } else {
+ miniItem.classList.remove('selected');
+ }
+ });
+
// Обновляем single-view-title если он существует
const singleViewTitle = document.getElementById('singleViewTitle');
if (singleViewTitle && state.selectedContainers.length === 1) {
@@ -3246,6 +3862,283 @@ function updateContainerSelectionUI() {
updateLogLevelsVisibility();
}
+// Функция для обновления активного состояния контейнеров в UI
+function updateActiveContainerUI(activeContainerId) {
+ console.log('updateActiveContainerUI called for:', activeContainerId);
+
+ // Обновляем обычные карточки контейнеров
+ const containerItems = document.querySelectorAll('.container-item');
+ containerItems.forEach(item => {
+ const containerId = item.getAttribute('data-cid');
+ if (activeContainerId && containerId === activeContainerId) {
+ item.classList.add('active');
+ } else {
+ item.classList.remove('active');
+ }
+ });
+
+ // Обновляем миникарточки контейнеров
+ const miniContainerItems = document.querySelectorAll('.mini-container-item');
+ miniContainerItems.forEach(miniItem => {
+ const containerId = miniItem.getAttribute('data-cid');
+ if (activeContainerId && containerId === activeContainerId) {
+ miniItem.classList.add('active');
+ } else {
+ miniItem.classList.remove('active');
+ }
+ });
+
+ // Обновляем legacy tabs
+ const tabButtons = document.querySelectorAll('.tab');
+ tabButtons.forEach(tab => {
+ const tabText = tab.textContent;
+ const service = state.services.find(s =>
+ (s.project ? `[${s.project}] ` : '') + (s.service || s.name) === tabText
+ );
+ if (service && activeContainerId && service.id === activeContainerId) {
+ tab.classList.add('active');
+ } else {
+ tab.classList.remove('active');
+ }
+ });
+}
+
+// Функции для всплывающих подсказок миникарточек
+function showMiniContainerTooltip(event, service) {
+ // Удаляем существующую подсказку
+ hideMiniContainerTooltip();
+
+ // Очищаем все таймеры скрытия
+ const existingTooltips = document.querySelectorAll('.mini-container-tooltip');
+ existingTooltips.forEach(tooltip => {
+ if (tooltip.hideTimer) {
+ clearTimeout(tooltip.hideTimer);
+ }
+ });
+
+ // Создаем новую подсказку
+ const tooltip = document.createElement('div');
+ tooltip.className = 'mini-container-tooltip';
+ tooltip.id = 'miniContainerTooltip';
+
+ const statusClass = service.status === 'running' ? 'running' :
+ service.status === 'stopped' ? 'stopped' : 'paused';
+
+ tooltip.innerHTML = `
+
+ ${escapeHtml(service.name)}
+ ${escapeHtml(service.service || service.name)} • ${escapeHtml(service.project || 'standalone')}
+
+
+ ${escapeHtml(service.status)}
+
+ ${service.status === 'running' && service.host_port ? `Порт: ${escapeHtml(service.host_port)}
` : ''}
+ ${service.url ? ` Открыть сайт` : ''}
+
+ `;
+
+ // Добавляем подсказку в body
+ document.body.appendChild(tooltip);
+
+ // Позиционируем подсказку сразу
+ positionTooltip(event, tooltip);
+
+ // Показываем подсказку сразу
+ tooltip.classList.add('show');
+
+ // Добавляем обработчики для подсказки
+ tooltip.addEventListener('mouseenter', () => {
+ // Останавливаем таймер скрытия при наведении на подсказку
+ clearTimeout(tooltip.hideTimer);
+ });
+
+ tooltip.addEventListener('mouseleave', () => {
+ // Скрываем подсказку при уходе курсора с неё
+ hideMiniContainerTooltip();
+ });
+
+ // Добавляем обработчик для клика по ссылке
+ const link = tooltip.querySelector('.mini-container-tooltip-url');
+ if (link) {
+ link.addEventListener('click', (e) => {
+ e.stopPropagation();
+ // Ссылка откроется в новой вкладке благодаря target="_blank"
+ });
+ }
+}
+
+function hideMiniContainerTooltip() {
+ const tooltip = document.getElementById('miniContainerTooltip');
+ if (tooltip) {
+ // Очищаем таймер скрытия
+ if (tooltip.hideTimer) {
+ clearTimeout(tooltip.hideTimer);
+ }
+ tooltip.remove();
+ }
+}
+
+function positionTooltip(event, tooltip) {
+ const rect = event.target.getBoundingClientRect();
+ const tooltipRect = tooltip.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ // Определяем позицию по умолчанию (справа от миникарточки)
+ let position = 'right';
+ let left = rect.right + 8;
+
+ // Всегда центрируем по высоте относительно миникарточки
+ let top = rect.top + (rect.height / 2) - (tooltipRect.height / 2);
+
+ // Проверяем, помещается ли подсказка справа
+ if (left + tooltipRect.width > viewportWidth - 10) {
+ // Не помещается справа, пробуем слева
+ position = 'left';
+ left = rect.left - tooltipRect.width - 8;
+ }
+
+ // Проверяем, помещается ли подсказка по вертикали
+ if (top < 10) {
+ // Не помещается сверху, выравниваем по верху с отступом
+ top = 10;
+ } else if (top + tooltipRect.height > viewportHeight - 10) {
+ // Не помещается снизу, выравниваем по низу с отступом
+ top = viewportHeight - tooltipRect.height - 10;
+ }
+
+ // Применяем позицию сразу, без анимации
+ tooltip.className = `mini-container-tooltip ${position}`;
+ tooltip.style.left = `${left}px`;
+ tooltip.style.top = `${top}px`;
+
+ // Принудительно применяем стили без анимации
+ tooltip.style.transition = 'none';
+ // Сбрасываем transition после применения позиции
+ setTimeout(() => {
+ tooltip.style.transition = '';
+ }, 10);
+}
+
+// Функции для help tooltip
+function showHelpTooltip() {
+ const helpBtn = document.getElementById('helpBtn');
+ const helpTooltip = document.getElementById('helpTooltip');
+
+ if (!helpBtn || !helpTooltip) return;
+
+ // Позиционируем tooltip относительно кнопки
+ positionHelpTooltip(helpBtn, helpTooltip);
+
+ // Показываем tooltip
+ helpTooltip.classList.add('show');
+}
+
+function hideHelpTooltip() {
+ const helpTooltip = document.getElementById('helpTooltip');
+ if (helpTooltip) {
+ helpTooltip.classList.remove('show');
+ }
+}
+
+function positionHelpTooltip(button, tooltip) {
+ const buttonRect = button.getBoundingClientRect();
+ const tooltipRect = tooltip.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ // Позиционируем tooltip справа от кнопки по умолчанию
+ let left = buttonRect.right + 8;
+ let top = buttonRect.top + (buttonRect.height / 2) - (tooltipRect.height / 2);
+
+ // Проверяем, помещается ли tooltip справа
+ if (left + tooltipRect.width > viewportWidth - 10) {
+ // Не помещается справа, позиционируем слева
+ left = buttonRect.left - tooltipRect.width - 8;
+ }
+
+ // Проверяем, помещается ли tooltip по вертикали
+ if (top < 10) {
+ top = 10;
+ } else if (top + tooltipRect.height > viewportHeight - 10) {
+ top = viewportHeight - tooltipRect.height - 10;
+ }
+
+ // Применяем позицию
+ tooltip.style.left = `${left}px`;
+ tooltip.style.top = `${top}px`;
+}
+
+// Глобальные переменные для выбора контейнеров
+let lastSelectedContainerId = null;
+
+// Функция для диапазонного выбора контейнеров
+function selectContainerRange(startId, endId) {
+ console.log('selectContainerRange:', startId, 'to', endId);
+
+ const miniContainerItems = document.querySelectorAll('.mini-container-item');
+ const containerIds = Array.from(miniContainerItems).map(item => item.getAttribute('data-cid'));
+
+ const startIndex = containerIds.indexOf(startId);
+ const endIndex = containerIds.indexOf(endId);
+
+ if (startIndex === -1 || endIndex === -1) {
+ console.error('Container not found in range selection');
+ return;
+ }
+
+ const minIndex = Math.min(startIndex, endIndex);
+ const maxIndex = Math.max(startIndex, endIndex);
+
+ // Выбираем все контейнеры в диапазоне
+ for (let i = minIndex; i <= maxIndex; i++) {
+ const containerId = containerIds[i];
+ if (!state.selectedContainers.includes(containerId)) {
+ state.selectedContainers.push(containerId);
+ }
+ }
+
+ // Обновляем UI
+ updateContainerSelectionUI();
+ updateMultiViewMode();
+}
+
+// Глобальные обработчики для подсказок
+document.addEventListener('click', (event) => {
+ const tooltip = document.getElementById('miniContainerTooltip');
+ if (tooltip && !tooltip.contains(event.target) && !event.target.closest('.mini-container-item')) {
+ hideMiniContainerTooltip();
+ }
+
+ // Скрытие help tooltip при клике вне его
+ const helpTooltip = document.getElementById('helpTooltip');
+ const helpBtn = document.getElementById('helpBtn');
+ if (helpTooltip && !helpTooltip.contains(event.target) && !helpBtn.contains(event.target)) {
+ hideHelpTooltip();
+ }
+});
+
+window.addEventListener('resize', () => {
+ hideMiniContainerTooltip();
+ hideHelpTooltip();
+});
+
+window.addEventListener('scroll', () => {
+ hideMiniContainerTooltip();
+ hideHelpTooltip();
+});
+
+// Обработчик для скрытия подсказки при клике на ссылку
+document.addEventListener('click', (event) => {
+ if (event.target.closest('.mini-container-tooltip-url')) {
+ // Не скрываем подсказку при клике на ссылку
+ event.stopPropagation();
+ }
+});
+
// Функция для сохранения выбранного контейнера в localStorage
function saveSelectedContainer(containerId) {
if (containerId) {
@@ -3367,7 +4260,8 @@ async function updateMultiViewMode() {
}
}
-
+ // Очищаем активное состояние всех контейнеров
+ updateActiveContainerUI(null);
}
console.log(`Multi-view mode updated: multiViewMode = ${state.multiViewMode}`);
@@ -3479,6 +4373,9 @@ async function setupMultiView() {
// Применяем настройки wrap lines
applyWrapSettings();
+ // Очищаем активное состояние всех контейнеров в мультипросмотре
+ updateActiveContainerUI(null);
+
// Принудительно обновляем стили логов для multi-view
setTimeout(() => {
updateLogStyles();
@@ -5027,6 +5924,9 @@ async function switchToSingle(svc){
// Сохраняем режим просмотра в localStorage
saveViewMode(false, [svc.id]);
+ // Обновляем активное состояние в UI
+ updateActiveContainerUI(svc.id);
+
// Сохраняем состояние кнопок loglevels в localStorage
saveLogLevelsState();
@@ -6190,6 +7090,41 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
+ // Обработчик для кнопки помощи
+ if (els.helpBtn) {
+ const helpTooltip = document.getElementById('helpTooltip');
+ let tooltipTimeout;
+
+ // Показ tooltip при наведении
+ els.helpBtn.addEventListener('mouseenter', () => {
+ clearTimeout(tooltipTimeout);
+ tooltipTimeout = setTimeout(() => {
+ showHelpTooltip();
+ }, 300); // Задержка 300мс перед показом
+ });
+
+ // Скрытие tooltip при уходе мыши
+ els.helpBtn.addEventListener('mouseleave', () => {
+ clearTimeout(tooltipTimeout);
+ tooltipTimeout = setTimeout(() => {
+ hideHelpTooltip();
+ }, 200); // Задержка 200мс перед скрытием
+ });
+
+ // Показ tooltip при наведении на сам tooltip
+ helpTooltip.addEventListener('mouseenter', () => {
+ clearTimeout(tooltipTimeout);
+ });
+
+ // Скрытие tooltip при уходе мыши с tooltip
+ helpTooltip.addEventListener('mouseleave', () => {
+ clearTimeout(tooltipTimeout);
+ tooltipTimeout = setTimeout(() => {
+ hideHelpTooltip();
+ }, 200);
+ });
+ }
+
// Инициализируем стили логов при загрузке страницы
updateLogStyles();
@@ -6422,7 +7357,7 @@ window.addEventListener('resize', () => {
}
});
-// Hotkeys: [ ] — navigation between containers, Ctrl+R/Ctrl+K — refresh logs
+// Hotkeys: [ ] х ъ — navigation between containers, Ctrl/Cmd+R/K — refresh logs, Ctrl/Cmd+B/И — toggle sidebar
window.addEventListener('keydown', async (e)=>{
// Проверяем, не находится ли фокус в поле ввода
const activeElement = document.activeElement;
@@ -6437,27 +7372,27 @@ window.addEventListener('keydown', async (e)=>{
return;
}
- // Навигация между контейнерами
- if (e.key==='[' || (e.ctrlKey && e.key==='ArrowLeft')){
+ // Навигация между контейнерами по [ ] х ъ
+ if (e.key==='[' || e.key==='х'){
e.preventDefault();
const idx = state.services.findIndex(s=> s.id===state.current?.id);
if (idx>0) await switchToSingle(state.services[idx-1]);
}
- if (e.key===']' || (e.ctrlKey && e.key==='ArrowRight')){
+ if (e.key===']' || e.key==='ъ'){
e.preventDefault();
const idx = state.services.findIndex(s=> s.id===state.current?.id);
if (idx>=0 && idx{
console.log(`AJAX Update: Интервал обновления установлен на ${ajaxUpdateIntervalMs}ms`);
- // Останавливаем AJAX обновление при смене контейнера
+ // НЕ останавливаем AJAX обновление при смене контейнера
const originalSwitchToSingle = window.switchToSingle;
window.switchToSingle = function(containerId) {
- disableAjaxLogUpdate();
// Очищаем состояние для всех контейнеров
containerStates.clear();
return originalSwitchToSingle.call(this, containerId);
};
- // Останавливаем AJAX обновление при переключении в multi-view
+ // НЕ останавливаем AJAX обновление при переключении в multi-view
const originalSwitchToMultiView = window.switchToMultiView;
window.switchToMultiView = function() {
- disableAjaxLogUpdate();
// Очищаем состояние для всех контейнеров
containerStates.clear();
return originalSwitchToMultiView.call(this);