logboard/app/docs/ajax-update.md
Sergey Antropoff 6e51f00791 feat: Добавлено AJAX обновление логов и улучшения интерфейса
Основные изменения:
- Добавлено AJAX обновление логов с чекбоксом 'Auto-update logs'
- Добавлена опция 'All logs' в выпадающий список tail lines
- Исправлено отображение длинных названий контейнеров в multi-view режиме
- Восстановлена загрузка истории логов при включенном AJAX обновлении

Новые функции:
- Чекбокс 'Auto-update logs' в секции Options (включен по умолчанию)
- Настройка интервала обновления через LOGBOARD_AJAX_UPDATE_INTERVAL
- API эндпоинт /api/settings для получения настроек приложения
- Поддержка параметра tail=all для загрузки всех логов
- Автоматический запуск AJAX обновления при включении чекбокса

Исправления UI:
- Кнопки LogLevels не уезжают вправо при длинных названиях контейнеров
- Добавлено обрезание длинных названий с многоточием
- Фиксированная высота заголовков в multi-view режиме
- Защита от сжатия кнопок LogLevels

Тестирование:
- Добавлены тесты для AJAX обновления (test_ajax_update.py)
- Тест multi-view AJAX обновления (test_multi_view_ajax.py)
- Тест опции 'all logs' (test_all_logs.py)
- Тест отображения длинных названий (test_multi_view_layout.py)
- Команды make test-ajax, make test-multi-view-ajax, make test-all-logs, make test-multi-view-layout

Документация:
- Создана подробная документация AJAX обновления (app/docs/ajax-update.md)
- Обновлен CHANGELOG.md с версиями 1.3.0, 1.5.0, 1.6.0
- Обновлен README.md с описанием новых функций

Автор: Сергей Антропов
Сайт: https://devops.org.ru
2025-08-18 19:35:47 +03:00

8.1 KiB
Raw Blame History

AJAX Обновление Логов

Описание

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

Принцип работы

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

Преимущества:

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

API Эндпоинты

GET /api/logs/{container_id}

Получает логи контейнера через AJAX.

GET /api/settings

Получает настройки приложения.

Пример ответа:

{
  "ajax_update_interval": 2000,
  "default_tail": 500,
  "skip_unhealthy": true
}

Параметры:

  • container_id (path) - ID контейнера
  • tail (query) - Количество последних строк или 'all' для всех логов (по умолчанию 500)
  • since (query) - Время начала для фильтрации логов (опционально)

Пример запроса:

# Получить последние 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

Пример ответа:

{
  "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 файле:

# Обновление каждые 5 секунд
LOGBOARD_AJAX_UPDATE_INTERVAL=5000

# Обновление каждую секунду
LOGBOARD_AJAX_UPDATE_INTERVAL=1000

JavaScript API

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

// Включить AJAX обновление
enableAjaxLogUpdate(intervalMs);

// Отключить AJAX обновление
disableAjaxLogUpdate();

// Переключить состояние
toggleAjaxLogUpdate();

// Выполнить одно обновление
performAjaxLogUpdate();

Глобальные переменные

// Интервал обновления
ajaxUpdateIntervalMs

// Состояние активности
ajaxUpdateEnabled

// Состояние для каждого контейнера (для multi-view)
containerStates // Map: containerId -> {lastTimestamp, lastSecondCount}

Особенности реализации

Обработка новых логов

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

Управление состоянием

  • AJAX обновление автоматически останавливается при смене контейнера
  • При переключении в multi-view режим обновление также останавливается
  • Состояние контейнеров сбрасывается при смене режимов просмотра
  • В multi-view режиме состояние отслеживается отдельно для каждого контейнера

Обработка ошибок

  • Ошибки сети не останавливают обновление
  • Все ошибки логируются в консоль
  • При отсутствии токена авторизации обновление пропускается

Преимущества

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

Ограничения

  1. Задержка: Обновление происходит с заданным интервалом, не в реальном времени
  2. Ограничения браузера: Может быть ограничено политиками CORS
  3. Нагрузка на сервер: При большом количестве контейнеров может создавать нагрузку

Автор

Сергей Антропов
Сайт: https://devops.org.ru