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
This commit is contained in:
@@ -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)
|
||||
- Совместимо с фильтрацией и настройками уровней логирования
|
||||
|
||||
Reference in New Issue
Block a user