feat: улучшения UI/UX LogBoard+

- Добавлена кнопка Update для управления AJAX auto-update - AJAX auto-update включен по умолчанию - Улучшено управление видимостью кнопки Refresh - Переупорядочены кнопки в header (Update, Refresh) - Унифицированы стили кнопок (высота, шрифт, границы) - Добавлен hover эффект для кнопки options с цветом warning - Позиционирование help-btn в свернутом sidebar - Уменьшена ширина свернутого sidebar на 30% - Добавлена логика разворачивания sidebar при клике на options - Отображение внешнего порта в статусе контейнера - Показ 'standalone' для контейнеров без проекта - Обновлена документация Автор: Сергей Антропов Сайт: https://devops.org.ru
2025-08-18 20:32:46 +03:00
parent 6e51f00791
commit 749b40a494
20 changed files with 1162 additions and 1649 deletions
--- a/app/docs/ajax-update.md
+++ b/app/docs/ajax-update.md
@@ -1,184 +1,172 @@
-# AJAX Обновление Логов
+# AJAX Auto-update для LogBoard+

 ## Описание

-Функциональность AJAX обновления логов позволяет периодически получать новые логи контейнеров без необходимости обновления всей страницы. Это особенно полезно для мониторинга логов в реальном времени с минимальной нагрузкой на сервер.
+AJAX Auto-update - это система автоматического обновления логов через AJAX запросы, которая позволяет получать новые логи без перезагрузки страницы.

-## Принцип работы
+## Основные возможности

-1. **Загрузка истории**: История логов загружается через WebSocket при открытии контейнера
-2. **Периодические запросы**: Система отправляет AJAX запросы к API эндпоинту `/api/logs/{container_id}` с заданным интервалом
-3. **Умное сравнение**: Новые логи сравниваются с уже отображенными, добавляются только новые записи
-4. **Автоматическое обновление**: Счетчики логов и фильтры применяются автоматически к новым данным
-5. **Управление состоянием**: AJAX обновление автоматически останавливается при смене контейнера или переключении режимов
-6. **Multi-view поддержка**: В режиме multi-view обновляются логи всех выбранных контейнеров одновременно
+- **Автоматическое обновление**: Логи обновляются с заданным интервалом
+- **Умное управление кнопкой Refresh**: Кнопка refresh автоматически скрывается при включенном AJAX autoupdate и показывается при выключенном
+- **Поддержка Multi-view**: Работает как в single-view, так и в multi-view режимах
+- **Настраиваемый интервал**: Интервал обновления настраивается через API
+- **Эффективное обновление**: Обновляются только новые логи с момента последнего запроса

-### Преимущества:
+## Управление кнопками

- **Полнота данных**: История логов загружается при открытии контейнера
- **Реальное время**: Новые логи обновляются через AJAX
- **Гибкость**: Работает как с WebSocket для истории, так и с AJAX для обновлений
+### Кнопка Refresh

-## API Эндпоинты
+Кнопка refresh в header автоматически управляется в зависимости от состояния AJAX autoupdate:

-### GET /api/logs/{container_id}
+- **AJAX autoupdate включен** → Кнопка refresh **скрыта**
+- **AJAX autoupdate выключен** → Кнопка refresh **показана**

-Получает логи контейнера через AJAX.
+### Кнопка Update

-### GET /api/settings
+Кнопка update в header показывает состояние AJAX autoupdate и позволяет переключать его:

-Получает настройки приложения.
-
-**Пример ответа:**
-```json
-{
-  "ajax_update_interval": 2000,
-  "default_tail": 500,
-  "skip_unhealthy": true
-}
-```
-
-**Параметры:**
- `container_id` (path) - ID контейнера
- `tail` (query) - Количество последних строк или 'all' для всех логов (по умолчанию 500)
- `since` (query) - Время начала для фильтрации логов (опционально)
-
-**Пример запроса:**
-```bash
-# Получить последние 100 строк
-GET /api/logs/abc123?tail=100&since=2024-01-01T10:00:00Z
-
-# Получить все логи
-GET /api/logs/abc123?tail=all
-
-# Получить все логи с фильтрацией по времени
-GET /api/logs/abc123?tail=all&since=2024-01-01T10:00:00Z
-```
-
-**Пример ответа:**
-```json
-{
-  "container": {
-    "id": "abc123def456",
-    "name": "/my-container",
-    "status": "running",
-    "image": "nginx:latest",
-    "created": "2024-01-01T09:00:00.000000000Z",
-    "state": {
-      "Status": "running",
-      "Running": true
-    }
-  },
-  "logs": [
-    {
-      "timestamp": "2024-01-01T10:30:00.123456789Z",
-      "message": "INFO: Application started",
-      "raw": "2024-01-01T10:30:00.123456789Z INFO: Application started"
-    }
-  ],
-  "total_lines": 1,
-  "tail": 100,
-  "since": "2024-01-01T10:00:00Z",
-  "timestamp": "2024-01-01T10:30:00.123456789Z"
-}
-```
-
-## Интерфейс пользователя
-
-### Чекбокс управления
-
-В секции Options добавлен чекбокс "Auto-update logs":
- **Включен** - автоматическое обновление логов через AJAX
- **Выключен** - отключение автоматического обновления
-
-**Примечание**: 
- Чекбокс включен по умолчанию
- В multi-view режиме AJAX обновляет логи всех выбранных контейнеров одновременно
- При включении чекбокса обновление запускается автоматически
-
-### Настройки интервала
-
-Интервал обновления настраивается через переменную окружения:
- `LOGBOARD_AJAX_UPDATE_INTERVAL` - интервал обновления в миллисекундах (по умолчанию 2000ms)
-
-**Пример настройки в .env файле:**
-```bash
-# Обновление каждые 5 секунд
-LOGBOARD_AJAX_UPDATE_INTERVAL=5000
-
-# Обновление каждую секунду
-LOGBOARD_AJAX_UPDATE_INTERVAL=1000
-```
-
-## JavaScript API
+- **AJAX autoupdate включен** → Кнопка update **зеленая**
+- **AJAX autoupdate выключен** → Кнопка update **красная**
+- **Клик по кнопке** → Переключает состояние AJAX autoupdate

 ### Функции управления

 ```javascript
-// Включить AJAX обновление
-enableAjaxLogUpdate(intervalMs);
-
-// Отключить AJAX обновление
-disableAjaxLogUpdate();
-
-// Переключить состояние
-toggleAjaxLogUpdate();
-
-// Выполнить одно обновление
-performAjaxLogUpdate();
+/**
+ * Обновить видимость кнопки refresh в header
+ */
+function updateRefreshButtonVisibility() {
+  const refreshButtons = document.querySelectorAll('.log-refresh-btn');
+  refreshButtons.forEach(btn => {
+    if (ajaxUpdateEnabled) {
+      // Если ajax autoupdate включен, скрываем кнопку refresh
+      btn.style.display = 'none';
+    } else {
+      // Если ajax autoupdate выключен, показываем кнопку refresh
+      btn.style.display = 'inline-flex';
+    }
+  });
+}
 ```

-### Глобальные переменные
+### Автоматическое обновление видимости
+
+Видимость кнопки refresh автоматически обновляется в следующих случаях:
+
+1. **При инициализации AJAX update**
+2. **При изменении состояния чекбокса "Auto-update logs"**
+3. **При программном включении/выключении AJAX update**
+4. **При переключении состояния через функцию toggleAjaxLogUpdate**
+
+## Настройки
+
+### Интервал обновления
+
+Интервал обновления настраивается через API endpoint `/api/settings`:
+
+```json
+{
+  "ajax_update_interval": 2000
+}
+```
+
+По умолчанию используется интервал 2000ms (2 секунды).
+
+### Чекбокс управления
+
+В sidebar есть чекбокс "Auto-update logs", который позволяет пользователю:
+
+- Включить автоматическое обновление
+- Выключить автоматическое обновление
+- Автоматически управляет видимостью кнопки refresh
+
+## API Endpoints
+
+### Получение настроек
+
+```
+GET /api/settings
+Authorization: Bearer <token>
+```
+
+Ответ:
+```json
+{
+  "ajax_update_interval": 2000
+}
+```
+
+### Получение логов с поддержкой AJAX
+
+```
+GET /api/logs/{container_id}?tail={lines}&since={timestamp}
+Authorization: Bearer <token>
+```
+
+Параметры:
+- `tail`: количество строк для получения (или "all")
+- `since`: временная метка последнего обновления (опционально)
+
+## Переменные состояния

 ```javascript
-// Интервал обновления
-ajaxUpdateIntervalMs
-
-// Состояние активности
-ajaxUpdateEnabled
-
-// Состояние для каждого контейнера (для multi-view)
-containerStates // Map: containerId -> {lastTimestamp, lastSecondCount}
+let ajaxUpdateEnabled = true;        // Состояние AJAX обновления (по умолчанию включен)
+let ajaxUpdateIntervalMs = 2000;      // Интервал обновления в миллисекундах
+let ajaxUpdateInterval = null;        // ID интервала
+const containerStates = new Map();    // Состояние контейнеров для отслеживания обновлений
 ```

-## Особенности реализации
+## Функции управления

-### Обработка новых логов
+### enableAjaxLogUpdate(intervalMs)
+Включает AJAX обновление логов с заданным интервалом.

-1. **Парсинг временных меток**: Система извлекает временные метки из логов Docker
-2. **Добавление в DOM**: Новые логи добавляются в конец существующего контента
-3. **Применение фильтров**: Автоматически применяются активные фильтры
-4. **Обновление счетчиков**: Пересчитываются счетчики уровней логов
-5. **Очистка дубликатов**: Удаляются дублированные строки
+### disableAjaxLogUpdate()
+Отключает AJAX обновление логов.

-### Управление состоянием
+### toggleAjaxLogUpdate()
+Переключает состояние AJAX обновления.

- AJAX обновление автоматически останавливается при смене контейнера
- При переключении в multi-view режим обновление также останавливается
- Состояние контейнеров сбрасывается при смене режимов просмотра
- В multi-view режиме состояние отслеживается отдельно для каждого контейнера
+### performAjaxLogUpdate()
+Выполняет одно обновление логов через AJAX.

-### Обработка ошибок
+### updateContainerLogs(containerId, tailLines, token)
+Обновляет логи для конкретного контейнера.

- Ошибки сети не останавливают обновление
- Все ошибки логируются в консоль
- При отсутствии токена авторизации обновление пропускается
+### updateRefreshButtonVisibility()
+Обновляет видимость кнопки refresh и состояние кнопки update в зависимости от состояния AJAX autoupdate.

-## Преимущества
+### setAjaxUpdateState(enabled)
+Обновляет визуальное состояние кнопки update (зеленая/красная) в зависимости от состояния AJAX autoupdate.

-1. **Низкая нагрузка**: Только новые логи передаются по сети
-2. **Надежность**: Простая HTTP архитектура без WebSocket сложностей
-3. **Гибкость**: Настраиваемый интервал обновления
-4. **Совместимость**: Работает с существующими фильтрами и счетчиками
-5. **Производительность**: Минимальное влияние на производительность браузера
+## Интеграция с существующим кодом

-## Ограничения
+AJAX update интегрируется с существующими функциями:

-1. **Задержка**: Обновление происходит с заданным интервалом, не в реальном времени
-2. **Ограничения браузера**: Может быть ограничено политиками CORS
-3. **Нагрузка на сервер**: При большом количестве контейнеров может создавать нагрузку
+- **switchToSingle**: Останавливает AJAX обновление при смене контейнера
+- **switchToMultiView**: Останавливает AJAX обновление при переключении в multi-view
+- **refreshLogsAndCounters**: Ручное обновление логов (кнопка refresh)

-## Автор
+## Логирование

-Сергей Антропов  
-Сайт: https://devops.org.ru
+Все операции AJAX update логируются в консоль браузера:
+
+```javascript
+console.log('AJAX обновление логов включено с интервалом 2000ms');
+console.log('AJAX обновление логов отключено');
+console.log('AJAX Update: Обновляем 2 контейнеров: ["container1", "container2"]');
+```
+
+## Обработка ошибок
+
+При ошибках AJAX запросов:
+
+- Обновление не останавливается автоматически
+- Ошибки логируются в консоль
+- Пользователь может вручную отключить обновление через чекбокс
+
+## Совместимость
+
+- Работает с существующими WebSocket соединениями
+- Поддерживает все режимы просмотра (single-view, multi-view)
+- Совместимо с фильтрацией и настройками уровней логирования