logboard/app/docs/ajax-update.md

AJAX Auto-update для LogBoard+

Описание

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

Основные возможности

• Автоматическое обновление: Логи обновляются с заданным интервалом
• Умное управление кнопкой Refresh: Кнопка refresh автоматически скрывается при включенном AJAX autoupdate и показывается при выключенном
• Поддержка Multi-view: Работает как в single-view, так и в multi-view режимах
• Настраиваемый интервал: Интервал обновления настраивается через API
• Эффективное обновление: Обновляются только новые логи с момента последнего запроса

Управление кнопками

Кнопка Refresh

Кнопка refresh в header автоматически управляется в зависимости от состояния AJAX autoupdate:

• AJAX autoupdate включен → Кнопка refresh скрыта
• AJAX autoupdate выключен → Кнопка refresh показана

Кнопка Update

Кнопка update в header показывает состояние AJAX autoupdate и позволяет переключать его:

• AJAX autoupdate включен → Кнопка update зеленая
• AJAX autoupdate выключен → Кнопка update красная
• Клик по кнопке → Переключает состояние AJAX autoupdate

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

/**
 * Обновить видимость кнопки 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:

{
  "ajax_update_interval": 2000
}

По умолчанию используется интервал 2000ms (2 секунды).

Чекбокс управления

В sidebar есть чекбокс "Auto-update logs", который позволяет пользователю:

• Включить автоматическое обновление
• Выключить автоматическое обновление
• Автоматически управляет видимостью кнопки refresh

API Endpoints

Получение настроек

GET /api/settings
Authorization: Bearer <token>

Ответ:

{
  "ajax_update_interval": 2000
}

Получение логов с поддержкой AJAX

GET /api/logs/{container_id}?tail={lines}&since={timestamp}
Authorization: Bearer <token>

Параметры:

• tail: количество строк для получения (или "all")
• since: временная метка последнего обновления (опционально)

Переменные состояния

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 логируются в консоль браузера:

console.log('AJAX обновление логов включено с интервалом 2000ms');
console.log('AJAX обновление логов отключено');
console.log('AJAX Update: Обновляем 2 контейнеров: ["container1", "container2"]');

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

При ошибках AJAX запросов:

• Обновление не останавливается автоматически
• Ошибки логируются в консоль
• Пользователь может вручную отключить обновление через чекбокс

Совместимость

• Работает с существующими WebSocket соединениями
• Поддерживает все режимы просмотра (single-view, multi-view)
• Совместимо с фильтрацией и настройками уровней логирования