feat: major improvements and fixes
- Fixed Docker permissions issue by running as root user - Added DEBUG_MODE support with conditional Swagger docs and auto-reload - Created start.sh script for conditional Uvicorn execution - Removed verbose debug logs from WebSocket status endpoint - Added comprehensive screenshots to documentation - Enhanced help tooltip with full-screen modal design - Added theme switcher to error page - Updated documentation with local development and Docker benefits - Fixed WebSocket status display issues - Improved hotkey functionality and documentation - Added detailed project descriptions for local dev and Docker users Technical improvements: - Dockerfile: removed appuser switch, simplified permissions - docker-compose.yml: kept user: 0:0 for Docker socket access - app.py: removed debug prints, added DEBUG_MODE support - templates: enhanced UI/UX with better tooltips and themes - docs: comprehensive updates with new screenshots and descriptions
This commit is contained in:
Сергей Антропов
parent
5c8efe2644
commit
e80f665470
@ -17,7 +17,10 @@ RUN useradd -m appuser && \
|
||||
# Создаем директорию для снимков
|
||||
RUN mkdir -p /app/snapshots && chown -R appuser:appuser /app
|
||||
|
||||
USER appuser
|
||||
# Скрипт для запуска с поддержкой DEBUG_MODE
|
||||
COPY start.sh /app/start.sh
|
||||
RUN chmod 755 /app/start.sh
|
||||
|
||||
EXPOSE 9001
|
||||
CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "9001"]
|
||||
|
||||
CMD ["/app/start.sh"]
|
||||
|
||||
40
Makefile
40
Makefile
@ -121,9 +121,47 @@ env-check: ## Проверить переменные окружения
|
||||
@if [ -f .env ]; then \
|
||||
echo "$(GREEN)Файл .env найден$(NC)"; \
|
||||
echo "$(YELLOW)Основные переменные:$(NC)"; \
|
||||
grep -E "^(LOGBOARD_PORT|LOGBOARD_USER|LOGBOARD_PASS|SECRET_KEY|ENCRYPTION_KEY)=" .env || echo "$(RED)Переменные не найдены$(NC)"; \
|
||||
grep -E "^(LOGBOARD_PORT|LOGBOARD_USER|LOGBOARD_PASS|SECRET_KEY|ENCRYPTION_KEY|DEBUG_MODE)=" .env || echo "$(RED)Переменные не найдены$(NC)"; \
|
||||
else \
|
||||
echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
|
||||
fi
|
||||
|
||||
debug-on: ## Включить режим отладки
|
||||
@echo "$(GREEN)Включение режима отладки...$(NC)"
|
||||
@if [ -f .env ]; then \
|
||||
sed -i 's/^DEBUG_MODE=.*/DEBUG_MODE=true/' .env; \
|
||||
echo "$(GREEN)Режим отладки включен!$(NC)"; \
|
||||
echo "$(YELLOW)Перезапустите сервисы: make restart$(NC)"; \
|
||||
else \
|
||||
echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
|
||||
fi
|
||||
|
||||
debug-off: ## Выключить режим отладки
|
||||
@echo "$(GREEN)Выключение режима отладки...$(NC)"
|
||||
@if [ -f .env ]; then \
|
||||
sed -i 's/^DEBUG_MODE=.*/DEBUG_MODE=false/' .env; \
|
||||
echo "$(GREEN)Режим отладки выключен!$(NC)"; \
|
||||
echo "$(YELLOW)Перезапустите сервисы: make restart$(NC)"; \
|
||||
else \
|
||||
echo "$(RED)Файл .env не найден. Запустите make setup$(NC)"; \
|
||||
fi
|
||||
|
||||
debug-status: ## Показать статус режима отладки
|
||||
@echo "$(GREEN)Статус режима отладки:$(NC)"
|
||||
@if [ -f .env ]; then \
|
||||
DEBUG_MODE=$$(grep "^DEBUG_MODE=" .env | cut -d'=' -f2 || echo "false"); \
|
||||
if [ "$$DEBUG_MODE" = "true" ]; then \
|
||||
echo "$(GREEN)DEBUG_MODE: ВКЛЮЧЕН$(NC)"; \
|
||||
echo "$(YELLOW)Доступны:$(NC)"; \
|
||||
echo "$(YELLOW) - Auto-reload при изменении кода$(NC)"; \
|
||||
echo "$(YELLOW) - Swagger UI: /docs$(NC)"; \
|
||||
echo "$(YELLOW) - ReDoc: /redoc$(NC)"; \
|
||||
else \
|
||||
echo "$(RED)DEBUG_MODE: ВЫКЛЮЧЕН$(NC)"; \
|
||||
echo "$(YELLOW)Продакшен режим$(NC)"; \
|
||||
fi; \
|
||||
else \
|
||||
echo "$(RED)Файл .env не найден$(NC)"; \
|
||||
fi
|
||||
|
||||
|
||||
|
||||
81
README.md
81
README.md
@ -13,7 +13,30 @@
|
||||
|
||||
## Описание
|
||||
|
||||
LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
|
||||
LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение идеально подходит для локальной разработки, позволяя разработчикам всегда держать логи микросервисов перед глазами на втором мониторе.
|
||||
|
||||
### 🎯 **Идеально для локальной разработки**
|
||||
|
||||
LogBoard+ особенно полезен для разработчиков, работающих с микросервисной архитектурой:
|
||||
|
||||
- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
|
||||
- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
|
||||
- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
|
||||
- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
|
||||
|
||||
### 🐳 **Оптимизирован для Docker и Docker Compose**
|
||||
|
||||
Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ станет незаменимым инструментом:
|
||||
|
||||
- **Автоматическое обнаружение** всех проектов Docker Compose
|
||||
- **Быстрый просмотр логов** всех контейнеров в проекте
|
||||
- **Фильтрация по проектам** - легко переключаться между разными проектами
|
||||
- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
|
||||
- **Интеграция с Docker API** - прямая работа с контейнерами
|
||||
|
||||
### 🚀 **Производительность и удобство**
|
||||
|
||||
Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
|
||||
|
||||
### Основные возможности
|
||||
|
||||
@ -28,11 +51,36 @@ LogBoard+ - это современная веб-панель для монит
|
||||
|
||||
## Скриншоты
|
||||
|
||||
### Светлая тема
|
||||
|
||||
### 🔐 Страница входа
|
||||
| Светлая тема | Темная тема |
|
||||
|--------------|-------------|
|
||||
|  |  |
|
||||
|
||||
### Темная тема
|
||||
|
||||
### 📊 Основной интерфейс
|
||||
| Светлая тема | Темная тема |
|
||||
|--------------|-------------|
|
||||
|  |  |
|
||||
|
||||
### 🖥️ Multi-view режим
|
||||
|
||||
|
||||
### 📋 Карточки контейнеров
|
||||
|
||||
|
||||
### 📁 Проекты
|
||||
|
||||
|
||||
### ⚙️ Настройки
|
||||
|
||||
|
||||
### 🔧 Сворачиваемая боковая панель
|
||||
|
||||
|
||||
### ❓ Справка
|
||||
|
||||
|
||||
### 🚨 Страницы ошибок
|
||||
|
||||
|
||||
## Быстрый старт
|
||||
|
||||
@ -74,6 +122,29 @@ LogBoard+ - это современная веб-панель для монит
|
||||
|
||||
**Важно:** Обязательно измените пароль в продакшене!
|
||||
|
||||
### Режим отладки
|
||||
|
||||
Для разработки и тестирования доступен режим отладки:
|
||||
|
||||
```bash
|
||||
# Включить режим отладки
|
||||
make debug-on
|
||||
|
||||
# Выключить режим отладки
|
||||
make debug-off
|
||||
|
||||
# Проверить статус
|
||||
make debug-status
|
||||
```
|
||||
|
||||
**В режиме отладки доступно:**
|
||||
- **Auto-reload** - автоматическая перезагрузка при изменении кода
|
||||
- **Swagger UI** - документация API по адресу `/docs`
|
||||
- **ReDoc** - альтернативная документация по адресу `/redoc`
|
||||
- **Подробное логирование** - детальные логи для отладки
|
||||
|
||||
**В продакшене обязательно отключите режим отладки!**
|
||||
|
||||
## Архитектура
|
||||
|
||||
### Технологический стек
|
||||
|
||||
53
app.py
53
app.py
@ -50,11 +50,16 @@ ADMIN_PASSWORD = os.getenv("LOGBOARD_PASS", "admin")
|
||||
# Настройки AJAX обновления
|
||||
AJAX_UPDATE_INTERVAL = int(os.getenv("LOGBOARD_AJAX_UPDATE_INTERVAL", "2000"))
|
||||
|
||||
# Настройки режима отладки
|
||||
DEBUG_MODE = os.getenv("DEBUG_MODE", "false").lower() == "true"
|
||||
|
||||
# Инициализация FastAPI
|
||||
app = FastAPI(
|
||||
title="LogBoard+",
|
||||
description="Веб-панель для просмотра логов микросервисов",
|
||||
version="1.0.0"
|
||||
version="1.0.0",
|
||||
docs_url="/docs" if DEBUG_MODE else None,
|
||||
redoc_url="/redoc" if DEBUG_MODE else None
|
||||
)
|
||||
|
||||
|
||||
@ -917,6 +922,40 @@ def api_snapshot(
|
||||
url = f"/snapshots/{fname}"
|
||||
return {"file": fname, "url": url}
|
||||
|
||||
@app.get("/api/websocket/status")
|
||||
def api_websocket_status(current_user: str = Depends(get_current_user)):
|
||||
"""Получить статус WebSocket соединений"""
|
||||
try:
|
||||
# Проверяем доступность Docker
|
||||
docker_client.ping()
|
||||
|
||||
# Получаем список активных контейнеров
|
||||
containers = docker_client.containers.list()
|
||||
|
||||
# Проверяем, есть ли контейнеры для подключения
|
||||
if containers:
|
||||
return {
|
||||
"status": "available",
|
||||
"message": "WebSocket соединения доступны",
|
||||
"containers_count": len(containers),
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
else:
|
||||
return {
|
||||
"status": "no_containers",
|
||||
"message": "Нет доступных контейнеров для подключения",
|
||||
"containers_count": 0,
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
return {
|
||||
"status": "error",
|
||||
"message": f"Ошибка проверки WebSocket статуса: {str(e)}",
|
||||
"containers_count": 0,
|
||||
"timestamp": datetime.now().isoformat()
|
||||
}
|
||||
|
||||
# WebSocket: verify token (?token=base64(user:pass))
|
||||
@app.websocket("/ws/logs/{container_id}")
|
||||
async def ws_logs(ws: WebSocket, container_id: str, tail: int = DEFAULT_TAIL, token: Optional[str] = None,
|
||||
@ -1176,4 +1215,14 @@ async def ws_fan_group(ws: WebSocket, services: str, tail: int = DEFAULT_TAIL, t
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
print(f"LogBoard+ http://0.0.0.0:{APP_PORT}")
|
||||
uvicorn.run(app, host="0.0.0.0", port=APP_PORT)
|
||||
print(f"Debug mode: {'ON' if DEBUG_MODE else 'OFF'}")
|
||||
if DEBUG_MODE:
|
||||
print("Swagger UI: http://0.0.0.0:{}/docs".format(APP_PORT))
|
||||
print("ReDoc: http://0.0.0.0:{}/redoc".format(APP_PORT))
|
||||
uvicorn.run(
|
||||
app,
|
||||
host="0.0.0.0",
|
||||
port=APP_PORT,
|
||||
reload=DEBUG_MODE,
|
||||
log_level="debug" if DEBUG_MODE else "info"
|
||||
)
|
||||
|
||||
@ -59,6 +59,9 @@ services:
|
||||
# Настройки AJAX обновления
|
||||
LOGBOARD_AJAX_UPDATE_INTERVAL: ${LOGBOARD_AJAX_UPDATE_INTERVAL:-2000}
|
||||
|
||||
# Настройки режима отладки
|
||||
DEBUG_MODE: ${DEBUG_MODE:-false}
|
||||
|
||||
ports:
|
||||
- "${LOGBOARD_PORT:-9001}:${LOGBOARD_PORT:-9001}"
|
||||
|
||||
|
||||
36
docs/api.md
36
docs/api.md
@ -14,7 +14,14 @@
|
||||
|
||||
## Обзор API
|
||||
|
||||
LogBoard+ предоставляет REST API и WebSocket API для работы с логами Docker контейнеров.
|
||||
LogBoard+ предоставляет REST API и WebSocket API для работы с логами Docker контейнеров. API разработан для интеграции с системами мониторинга и автоматизации, а также для создания собственных клиентов.
|
||||
|
||||
### 🎯 **Применение API**
|
||||
|
||||
- **Интеграция с CI/CD** - автоматический мониторинг логов в пайплайнах
|
||||
- **Собственные дашборды** - создание кастомных интерфейсов мониторинга
|
||||
- **Автоматизация** - скрипты для анализа логов и алертинга
|
||||
- **Локальная разработка** - интеграция с IDE и инструментами разработки
|
||||
|
||||
### Базовый URL
|
||||
|
||||
@ -322,6 +329,33 @@ curl -X GET "http://localhost:9001/api/logs/abc123def456?tail=100&since=2024-01-
|
||||
}
|
||||
```
|
||||
|
||||
#### GET /api/websocket/status
|
||||
|
||||
Получение статуса WebSocket соединений.
|
||||
|
||||
**Заголовки:**
|
||||
```
|
||||
Authorization: Bearer <token>
|
||||
```
|
||||
|
||||
**Ответ:**
|
||||
|
||||
```json
|
||||
{
|
||||
"status": "available",
|
||||
"message": "WebSocket соединения доступны",
|
||||
"containers_count": 5,
|
||||
"timestamp": "2024-01-15T10:30:15.123456"
|
||||
}
|
||||
```
|
||||
|
||||
**Возможные статусы:**
|
||||
- `available` - WebSocket соединения доступны, есть активные контейнеры
|
||||
- `no_containers` - Нет доступных контейнеров для подключения
|
||||
- `error` - Ошибка проверки статуса
|
||||
|
||||
**Примечание:** Когда сервер возвращает статус `available`, клиент всегда показывает `ws: on`, независимо от наличия активных клиентских соединений.
|
||||
|
||||
### Системные
|
||||
|
||||
#### GET /healthz
|
||||
|
||||
@ -97,6 +97,20 @@ LogBoard+ использует переменные окружения для н
|
||||
| `WEB_DESCRIPTION` | Описание веб-интерфейса | `Веб-панель для просмотра логов микросервисов` | Нет |
|
||||
| `WEB_VERSION` | Версия веб-интерфейса | `1.0.0` | Нет |
|
||||
|
||||
### Настройки режима отладки
|
||||
|
||||
| Переменная | Описание | По умолчанию | Обязательная |
|
||||
|------------|----------|--------------|--------------|
|
||||
| `DEBUG_MODE` | Режим отладки | `false` | Нет |
|
||||
|
||||
**Режим отладки включает:**
|
||||
- **Auto-reload** - автоматическая перезагрузка при изменении кода
|
||||
- **Swagger UI** - документация API по адресу `/docs`
|
||||
- **ReDoc** - альтернативная документация по адресу `/redoc`
|
||||
- **Подробное логирование** - детальные логи для отладки
|
||||
|
||||
**⚠️ Важно:** В продакшене обязательно установите `DEBUG_MODE=false`!
|
||||
|
||||
### Настройки уведомлений
|
||||
|
||||
| Переменная | Описание | По умолчанию | Обязательная |
|
||||
@ -331,6 +345,40 @@ LOG_LEVEL=DEBUG
|
||||
# Безопасность
|
||||
AUTH_ENABLED=true
|
||||
SESSION_TIMEOUT=7200
|
||||
|
||||
# Режим отладки
|
||||
DEBUG_MODE=true
|
||||
```
|
||||
|
||||
### Режим отладки
|
||||
|
||||
```bash
|
||||
# .env для режима отладки
|
||||
LOGBOARD_PORT=9001
|
||||
LOGBOARD_USER=admin
|
||||
LOGBOARD_PASS=dev-password
|
||||
SECRET_KEY=dev-secret-key
|
||||
ENCRYPTION_KEY=dev-encryption-key
|
||||
|
||||
# Docker настройки
|
||||
DOCKER_HOST=unix:///var/run/docker.sock
|
||||
|
||||
# Производительность
|
||||
LOGBOARD_TAIL=50
|
||||
LOGBOARD_AJAX_UPDATE_INTERVAL=500
|
||||
LOG_LEVEL=DEBUG
|
||||
|
||||
# Безопасность
|
||||
AUTH_ENABLED=true
|
||||
SESSION_TIMEOUT=7200
|
||||
|
||||
# Режим отладки (ВКЛЮЧЕН)
|
||||
DEBUG_MODE=true
|
||||
|
||||
# Команды для управления режимом отладки:
|
||||
# make debug-on # Включить режим отладки
|
||||
# make debug-off # Выключить режим отладки
|
||||
# make debug-status # Проверить статус
|
||||
```
|
||||
|
||||
### Тестирование
|
||||
@ -386,6 +434,9 @@ SESSION_TIMEOUT=3600
|
||||
LOG_LEVEL=WARNING
|
||||
LOG_FORMAT=json
|
||||
|
||||
# Режим отладки (ОБЯЗАТЕЛЬНО ВЫКЛЮЧЕН в продакшене)
|
||||
DEBUG_MODE=false
|
||||
|
||||
# Уведомления
|
||||
NOTIFICATIONS_ENABLED=true
|
||||
SMTP_HOST=smtp.company.com
|
||||
|
||||
@ -5,7 +5,30 @@
|
||||
|
||||
## Обзор
|
||||
|
||||
LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
|
||||
LogBoard+ - это современная веб-панель для мониторинга и просмотра логов Docker контейнеров в реальном времени. Приложение идеально подходит для локальной разработки, позволяя разработчикам всегда держать логи микросервисов перед глазами на втором мониторе.
|
||||
|
||||
### 🎯 **Идеально для локальной разработки**
|
||||
|
||||
LogBoard+ особенно полезен для разработчиков, работающих с микросервисной архитектурой:
|
||||
|
||||
- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
|
||||
- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
|
||||
- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
|
||||
- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
|
||||
|
||||
### 🐳 **Оптимизирован для Docker и Docker Compose**
|
||||
|
||||
Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ станет незаменимым инструментом:
|
||||
|
||||
- **Автоматическое обнаружение** всех проектов Docker Compose
|
||||
- **Быстрый просмотр логов** всех контейнеров в проекте
|
||||
- **Фильтрация по проектам** - легко переключаться между разными проектами
|
||||
- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
|
||||
- **Интеграция с Docker API** - прямая работа с контейнерами
|
||||
|
||||
### 🚀 **Производительность и удобство**
|
||||
|
||||
Приложение предоставляет удобный веб-интерфейс для работы с логами микросервисов, поддерживает множественные проекты Docker Compose и включает в себя функции безопасности.
|
||||
|
||||
## Быстрый старт
|
||||
|
||||
@ -75,6 +98,39 @@ make up
|
||||
- **[env.example](../env.example)** - Пример конфигурации
|
||||
- **[Makefile](../Makefile)** - Команды управления
|
||||
|
||||
## Скриншоты
|
||||
|
||||
### 🔐 Страница входа
|
||||
| Светлая тема | Темная тема |
|
||||
|--------------|-------------|
|
||||
|  |  |
|
||||
|
||||
### 📊 Основной интерфейс
|
||||
| Светлая тема | Темная тема |
|
||||
|--------------|-------------|
|
||||
|  |  |
|
||||
|
||||
### 🖥️ Multi-view режим
|
||||
|
||||
|
||||
### 📋 Карточки контейнеров
|
||||
|
||||
|
||||
### 📁 Проекты
|
||||
|
||||
|
||||
### ⚙️ Настройки
|
||||
|
||||
|
||||
### 🔧 Сворачиваемая боковая панель
|
||||
|
||||
|
||||
### ❓ Справка
|
||||
|
||||
|
||||
### 🚨 Страницы ошибок
|
||||
|
||||
|
||||
## Архитектура
|
||||
|
||||
### Технологический стек
|
||||
|
||||
@ -5,12 +5,41 @@
|
||||
|
||||
## Содержание
|
||||
|
||||
1. [Предварительные требования](#предварительные-требования)
|
||||
2. [Установка](#установка)
|
||||
3. [Настройка](#настройка)
|
||||
4. [Первый запуск](#первый-запуск)
|
||||
5. [Проверка установки](#проверка-установки)
|
||||
6. [Настройка для продакшена](#настройка-для-продакшена)
|
||||
1. [Обзор и применение](#обзор-и-применение)
|
||||
2. [Предварительные требования](#предварительные-требования)
|
||||
3. [Установка](#установка)
|
||||
4. [Настройка](#настройка)
|
||||
5. [Первый запуск](#первый-запуск)
|
||||
6. [Проверка установки](#проверка-установки)
|
||||
7. [Настройка для продакшена](#настройка-для-продакшена)
|
||||
|
||||
## Обзор и применение
|
||||
|
||||
### 🎯 **Идеально для локальной разработки**
|
||||
|
||||
LogBoard+ создан специально для разработчиков, работающих с микросервисной архитектурой. Если вы используете Docker и Docker Compose для локальной разработки, этот инструмент станет незаменимым помощником:
|
||||
|
||||
- **Второй монитор** - Держите логи всех микросервисов постоянно видимыми
|
||||
- **Быстрая отладка** - Мгновенный доступ к логам без переключения между терминалами
|
||||
- **Мониторинг в реальном времени** - Видите проблемы сразу, как они возникают
|
||||
- **Централизованный просмотр** - Все логи в одном месте, а не в десятках терминалов
|
||||
|
||||
### 🐳 **Оптимизирован для Docker и Docker Compose**
|
||||
|
||||
Если ваша инфраструктура основана на Docker и Docker Compose, LogBoard+ предоставляет:
|
||||
|
||||
- **Автоматическое обнаружение** всех проектов Docker Compose
|
||||
- **Быстрый просмотр логов** всех контейнеров в проекте
|
||||
- **Фильтрация по проектам** - легко переключаться между разными проектами
|
||||
- **Multi-view режим** - одновременный просмотр логов нескольких контейнеров
|
||||
- **Интеграция с Docker API** - прямая работа с контейнерами
|
||||
|
||||
### 💡 **Сценарии использования**
|
||||
|
||||
- **Локальная разработка** - мониторинг логов микросервисов на втором мониторе
|
||||
- **Отладка проблем** - быстрый поиск ошибок в логах
|
||||
- **Тестирование** - наблюдение за поведением системы в реальном времени
|
||||
- **Демонстрации** - показ работы системы клиентам или команде
|
||||
|
||||
## Предварительные требования
|
||||
|
||||
|
||||
12
env.example
12
env.example
@ -87,6 +87,18 @@ WEB_DESCRIPTION=Веб-панель для просмотра логов мик
|
||||
# Версия веб-интерфейса
|
||||
WEB_VERSION=1.0.0
|
||||
|
||||
# =============================================================================
|
||||
# НАСТРОЙКИ РЕЖИМА РАЗРАБОТКИ
|
||||
# =============================================================================
|
||||
|
||||
# Режим отладки (true/false)
|
||||
# В режиме отладки:
|
||||
# - Включен auto-reload страниц при изменении кода
|
||||
# - Доступна документация Swagger (/docs и /redoc)
|
||||
# - Подробное логирование
|
||||
# В продакшене обязательно установите в false
|
||||
DEBUG_MODE=false
|
||||
|
||||
# =============================================================================
|
||||
# НАСТРОЙКИ ПРОИЗВОДИТЕЛЬНОСТИ
|
||||
# =============================================================================
|
||||
|
||||
BIN
screenshots/collapse-sidebar.png
Normal file
BIN
screenshots/collapse-sidebar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
BIN
screenshots/container-cards.png
Normal file
BIN
screenshots/container-cards.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB |
BIN
screenshots/error pages.png
Normal file
BIN
screenshots/error pages.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
screenshots/help.png
Normal file
BIN
screenshots/help.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
BIN
screenshots/login-dark.png
Normal file
BIN
screenshots/login-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
screenshots/login-white.png
Normal file
BIN
screenshots/login-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
screenshots/multi-view.png
Normal file
BIN
screenshots/multi-view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 KiB |
BIN
screenshots/options.png
Normal file
BIN
screenshots/options.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
screenshots/projects.png
Normal file
BIN
screenshots/projects.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
screenshots/single-view-dark.png
Normal file
BIN
screenshots/single-view-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
screenshots/single-view-white.png
Normal file
BIN
screenshots/single-view-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 458 KiB |
35
start.sh
Executable file
35
start.sh
Executable file
@ -0,0 +1,35 @@
|
||||
#!/bin/bash
|
||||
|
||||
# LogBoard+ - Скрипт запуска
|
||||
# Автор: Сергей Антропов
|
||||
# Сайт: https://devops.org.ru
|
||||
|
||||
set -e
|
||||
|
||||
# Получаем настройки из переменных окружения
|
||||
DEBUG_MODE=${DEBUG_MODE:-false}
|
||||
LOGBOARD_PORT=${LOGBOARD_PORT:-9001}
|
||||
|
||||
echo "LogBoard+ Starting..."
|
||||
echo "Port: $LOGBOARD_PORT"
|
||||
echo "Debug mode: $DEBUG_MODE"
|
||||
|
||||
# Определяем параметры запуска в зависимости от режима отладки
|
||||
if [ "$DEBUG_MODE" = "true" ]; then
|
||||
echo "Starting in DEBUG mode with auto-reload and Swagger docs..."
|
||||
echo "Swagger UI: http://0.0.0.0:$LOGBOARD_PORT/docs"
|
||||
echo "ReDoc: http://0.0.0.0:$LOGBOARD_PORT/redoc"
|
||||
|
||||
exec uvicorn app:app \
|
||||
--host 0.0.0.0 \
|
||||
--port $LOGBOARD_PORT \
|
||||
--reload \
|
||||
--log-level debug
|
||||
else
|
||||
echo "Starting in PRODUCTION mode..."
|
||||
|
||||
exec uvicorn app:app \
|
||||
--host 0.0.0.0 \
|
||||
--port $LOGBOARD_PORT \
|
||||
--log-level info
|
||||
fi
|
||||
@ -46,12 +46,14 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
max-width: 600px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
@ -130,6 +132,34 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 1.2rem;
|
||||
color: var(--fg);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--border);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.auth-notice {
|
||||
background: var(--warn);
|
||||
color: var(--bg);
|
||||
@ -178,10 +208,23 @@
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Кнопка переключателя темы -->
|
||||
<button class="theme-toggle" onclick="toggleTheme()" title="Переключить тему (Ctrl+T)">
|
||||
🌙
|
||||
</button>
|
||||
|
||||
<div class="error-container">
|
||||
<div class="error-icon">
|
||||
{% if error_code == 401 %}
|
||||
@ -239,12 +282,31 @@
|
||||
const savedTheme = localStorage.getItem('lb_theme') || 'dark';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
|
||||
// Функция для обновления иконки темы
|
||||
function updateThemeIcon() {
|
||||
const themeToggle = document.querySelector('.theme-toggle');
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
|
||||
if (themeToggle) {
|
||||
if (currentTheme === 'light') {
|
||||
themeToggle.innerHTML = '🌙';
|
||||
themeToggle.title = 'Переключить на темную тему (Ctrl+T)';
|
||||
} else {
|
||||
themeToggle.innerHTML = '☀️';
|
||||
themeToggle.title = 'Переключить на светлую тему (Ctrl+T)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Переключатель темы
|
||||
function toggleTheme() {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('lb_theme', newTheme);
|
||||
|
||||
// Обновляем иконку
|
||||
updateThemeIcon();
|
||||
}
|
||||
|
||||
// Добавляем обработчик клавиш для переключения темы (Ctrl+T)
|
||||
@ -254,6 +316,11 @@
|
||||
toggleTheme();
|
||||
}
|
||||
});
|
||||
|
||||
// Инициализируем иконку при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
updateThemeIcon();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -786,22 +786,22 @@ a{color:var(--link)}
|
||||
/* Компактные контролы в header: по умолчанию скрыты */
|
||||
.header-compact-controls { display: none; align-items: center; gap: 6px; }
|
||||
|
||||
/* Tooltip для кнопки помощи */
|
||||
/* Модальное окно для кнопки помощи */
|
||||
.help-tooltip {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
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;
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.help-tooltip.show {
|
||||
@ -813,10 +813,34 @@ a{color:var(--link)}
|
||||
.help-tooltip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
justify-content: space-between;
|
||||
padding: 20px 30px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-tooltip-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.help-tooltip-close {
|
||||
background: var(--chip);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.help-tooltip-close:hover {
|
||||
background: var(--tab-active);
|
||||
color: var(--fg);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.help-tooltip-logo {
|
||||
@ -835,11 +859,15 @@ a{color:var(--link)}
|
||||
.help-tooltip-title {
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.help-tooltip-section {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.help-tooltip-section:last-child {
|
||||
@ -848,9 +876,9 @@ a{color:var(--link)}
|
||||
|
||||
.help-tooltip-section-title {
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
margin-bottom: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@ -861,38 +889,71 @@ a{color:var(--link)}
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.help-tooltip-body {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.help-tooltip-content-wrapper {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.help-tooltip-left-column,
|
||||
.help-tooltip-right-column {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.help-tooltip-hotkeys {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px 12px;
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
gap: 12px 20px;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.help-tooltip-hotkey {
|
||||
background: var(--chip);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 600;
|
||||
color: var(--fg);
|
||||
text-align: center;
|
||||
min-width: 40px;
|
||||
min-width: 60px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.help-tooltip-description {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.help-tooltip-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 30px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-tooltip-author {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-tooltip-version {
|
||||
font-size: 12px;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.help-tooltip-author a {
|
||||
@ -992,6 +1053,12 @@ a{color:var(--link)}
|
||||
border-color: #e0af68;
|
||||
}
|
||||
|
||||
.ws-status-btn.ws-available {
|
||||
background: #7aa2f7;
|
||||
color: white;
|
||||
border-color: #7aa2f7;
|
||||
}
|
||||
|
||||
/* Кнопка состояния AJAX Update */
|
||||
.ajax-update-btn {
|
||||
background: var(--chip);
|
||||
@ -1958,14 +2025,14 @@ a{color:var(--link)}
|
||||
}
|
||||
|
||||
.multi-view-header {
|
||||
padding: 12px 16px;
|
||||
padding: 5px 16px;
|
||||
background: var(--chip);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 40px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.multi-view-title {
|
||||
@ -2000,14 +2067,14 @@ a{color:var(--link)}
|
||||
}
|
||||
|
||||
.single-view-header {
|
||||
padding: 12px 16px;
|
||||
padding: 5px 16px;
|
||||
background: var(--chip);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 40px;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.single-view-title {
|
||||
@ -2730,40 +2797,102 @@ footer{position:fixed;right:10px;bottom:10px;opacity:.6;font-size:11px}
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</button>
|
||||
|
||||
<!-- Tooltip для кнопки помощи -->
|
||||
<!-- Модальное окно для кнопки помощи -->
|
||||
<div class="help-tooltip" id="helpTooltip">
|
||||
<div class="help-tooltip-header">
|
||||
<div class="help-tooltip-logo">LB</div>
|
||||
<div class="help-tooltip-title">LogBoard+</div>
|
||||
<div class="help-tooltip-header-content">
|
||||
<div class="help-tooltip-logo">LB</div>
|
||||
<div class="help-tooltip-title">LogBoard+ - Справка</div>
|
||||
</div>
|
||||
<button class="help-tooltip-close" id="helpTooltipClose">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">О проекте</div>
|
||||
<div class="help-tooltip-content">
|
||||
Веб-интерфейс для мониторинга логов Docker контейнеров в реальном времени с поддержкой мультивыбора и автоматического обновления.
|
||||
<div class="help-tooltip-body">
|
||||
<div class="help-tooltip-content-wrapper">
|
||||
<div class="help-tooltip-left-column">
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">О проекте</div>
|
||||
<div class="help-tooltip-content">
|
||||
<strong>LogBoard+</strong> - веб-интерфейс для мониторинга логов Docker контейнеров в реальном времени с поддержкой мультивыбора и автоматического обновления.
|
||||
|
||||
<br><br><strong>🎯 Идеально для локальной разработки:</strong><br>
|
||||
• Второй монитор - логи всегда перед глазами<br>
|
||||
• Быстрая отладка - без переключения терминалов<br>
|
||||
• Мониторинг в реальном времени<br>
|
||||
• Централизованный просмотр всех логов
|
||||
|
||||
<br><br><strong>🐳 Оптимизирован для Docker:</strong><br>
|
||||
• Автоматическое обнаружение проектов<br>
|
||||
• Multi-view режим для нескольких контейнеров<br>
|
||||
• Интеграция с Docker API<br>
|
||||
• Поддержка Docker Compose
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">Горячие клавиши</div>
|
||||
<div class="help-tooltip-hotkeys">
|
||||
<div class="help-tooltip-hotkey">[</div>
|
||||
<div class="help-tooltip-description">Предыдущий контейнер</div>
|
||||
<div class="help-tooltip-hotkey">]</div>
|
||||
<div class="help-tooltip-description">Следующий контейнер</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+R</div>
|
||||
<div class="help-tooltip-description">Обновить логи</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+K</div>
|
||||
<div class="help-tooltip-description">Обновить логи (альтернатива)</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+B</div>
|
||||
<div class="help-tooltip-description">Свернуть/развернуть sidebar</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+F</div>
|
||||
<div class="help-tooltip-description">Фокус на фильтр</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-right-column">
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">Мышь и выделение</div>
|
||||
<div class="help-tooltip-hotkeys">
|
||||
<div class="help-tooltip-hotkey">Shift+клик</div>
|
||||
<div class="help-tooltip-description">Добавить в мультивыбор</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+клик</div>
|
||||
<div class="help-tooltip-description">Добавить в мультивыбор</div>
|
||||
<div class="help-tooltip-hotkey">Выделение текста</div>
|
||||
<div class="help-tooltip-description">Показать кнопку копирования</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">Функции</div>
|
||||
<div class="help-tooltip-hotkeys">
|
||||
<div class="help-tooltip-hotkey">Кнопки уровней</div>
|
||||
<div class="help-tooltip-description">Фильтрация по типу логов</div>
|
||||
<div class="help-tooltip-hotkey">Auto-scroll</div>
|
||||
<div class="help-tooltip-description">Автопрокрутка к новым логам</div>
|
||||
<div class="help-tooltip-hotkey">Wrap text</div>
|
||||
<div class="help-tooltip-description">Перенос длинных строк</div>
|
||||
<div class="help-tooltip-hotkey">Auto-update</div>
|
||||
<div class="help-tooltip-description">Автообновление логов</div>
|
||||
<div class="help-tooltip-hotkey">Refresh</div>
|
||||
<div class="help-tooltip-description">Принудительное обновление</div>
|
||||
<div class="help-tooltip-hotkey">Clear</div>
|
||||
<div class="help-tooltip-description">Очистить логи</div>
|
||||
<div class="help-tooltip-hotkey">Download</div>
|
||||
<div class="help-tooltip-description">Скачать логи</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-section">
|
||||
<div class="help-tooltip-section-title">Горячие клавиши</div>
|
||||
<div class="help-tooltip-hotkeys">
|
||||
<div class="help-tooltip-hotkey">[</div>
|
||||
<div class="help-tooltip-description">Предыдущий контейнер</div>
|
||||
<div class="help-tooltip-hotkey">]</div>
|
||||
<div class="help-tooltip-description">Следующий контейнер</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+R</div>
|
||||
<div class="help-tooltip-description">Обновить логи</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+B</div>
|
||||
<div class="help-tooltip-description">Свернуть sidebar</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+F</div>
|
||||
<div class="help-tooltip-description">Фокус на фильтр</div>
|
||||
<div class="help-tooltip-hotkey">Ctrl+Shift+M</div>
|
||||
<div class="help-tooltip-description">Мультивыбор контейнеров</div>
|
||||
<div class="help-tooltip-footer">
|
||||
<div class="help-tooltip-author">
|
||||
Автор: <a href="https://devops.org.ru" target="_blank">Сергей Антропов</a>
|
||||
</div>
|
||||
<div class="help-tooltip-version">
|
||||
Версия 2.0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="help-tooltip-author">
|
||||
Автор: <a href="https://devops.org.ru" target="_blank">Сергей Антропов</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -2892,10 +3021,13 @@ const els = {
|
||||
})();
|
||||
|
||||
function setWsState(s){
|
||||
console.log('setWsState: Устанавливаем состояние', s);
|
||||
console.log('setWsState: Текущие соединения:', Object.keys(state.open));
|
||||
|
||||
els.wsstate.textContent = 'ws: ' + s;
|
||||
|
||||
// Удаляем все классы состояний
|
||||
els.wsstate.classList.remove('ws-on', 'ws-off', 'ws-err');
|
||||
els.wsstate.classList.remove('ws-on', 'ws-off', 'ws-err', 'ws-available');
|
||||
|
||||
// Добавляем соответствующий класс
|
||||
if (s === 'on') {
|
||||
@ -2904,6 +3036,157 @@ function setWsState(s){
|
||||
els.wsstate.classList.add('ws-off');
|
||||
} else if (s === 'err') {
|
||||
els.wsstate.classList.add('ws-err');
|
||||
} else if (s === 'available') {
|
||||
els.wsstate.classList.add('ws-available');
|
||||
}
|
||||
}
|
||||
|
||||
// Функция для определения общего состояния WebSocket соединений
|
||||
function determineWsState() {
|
||||
const openConnections = Object.keys(state.open);
|
||||
|
||||
console.log('determineWsState: Проверяем', openConnections.length, 'соединений');
|
||||
console.log('determineWsState: Все соединения:', openConnections);
|
||||
|
||||
// Если нет открытых соединений, проверяем сервер через AJAX
|
||||
if (openConnections.length === 0) {
|
||||
console.log('determineWsState: Нет соединений, проверяем сервер');
|
||||
// Асинхронно проверяем сервер, но возвращаем 'off' для немедленного отображения
|
||||
// Если сервер доступен, checkWebSocketStatus установит 'on'
|
||||
setTimeout(() => {
|
||||
checkWebSocketStatus();
|
||||
}, 100);
|
||||
return 'off';
|
||||
}
|
||||
|
||||
// Проверяем состояние всех соединений
|
||||
let hasActiveConnection = false;
|
||||
let hasConnecting = false;
|
||||
let closedConnections = [];
|
||||
let errorConnections = [];
|
||||
|
||||
for (const id of openConnections) {
|
||||
const obj = state.open[id];
|
||||
if (obj && obj.ws) {
|
||||
console.log(`determineWsState: Соединение ${id}, readyState:`, obj.ws.readyState, 'WebSocket:', obj.ws);
|
||||
|
||||
if (obj.ws.readyState === WebSocket.OPEN) {
|
||||
hasActiveConnection = true;
|
||||
console.log(`determineWsState: Соединение ${id} активно`);
|
||||
} else if (obj.ws.readyState === WebSocket.CONNECTING) {
|
||||
hasConnecting = true;
|
||||
console.log(`determineWsState: Соединение ${id} подключается`);
|
||||
} else if (obj.ws.readyState === WebSocket.CLOSED || obj.ws.readyState === WebSocket.CLOSING) {
|
||||
closedConnections.push(id);
|
||||
console.log(`determineWsState: Соединение ${id} закрыто/закрывается`);
|
||||
}
|
||||
} else {
|
||||
console.log(`determineWsState: Соединение ${id} не найдено или нет WebSocket, obj:`, obj);
|
||||
closedConnections.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
// Удаляем закрытые соединения
|
||||
closedConnections.forEach(id => {
|
||||
console.log(`determineWsState: Удаляем закрытое соединение ${id}`);
|
||||
delete state.open[id];
|
||||
});
|
||||
|
||||
// Если есть активные соединения или есть соединения в процессе установки
|
||||
if (hasActiveConnection || hasConnecting) {
|
||||
console.log('determineWsState: Есть активные/подключающиеся соединения, возвращаем on');
|
||||
return 'on';
|
||||
} else {
|
||||
console.log('determineWsState: Нет активных соединений, проверяем сервер');
|
||||
// Асинхронно проверяем сервер, но возвращаем 'off' для немедленного отображения
|
||||
// Если сервер доступен, checkWebSocketStatus установит 'on'
|
||||
setTimeout(() => {
|
||||
checkWebSocketStatus();
|
||||
}, 100);
|
||||
return 'off';
|
||||
}
|
||||
}
|
||||
|
||||
// Функция для проверки состояния WebSocket через AJAX
|
||||
async function checkWebSocketStatus() {
|
||||
try {
|
||||
const token = localStorage.getItem('access_token');
|
||||
if (!token) {
|
||||
console.log('checkWebSocketStatus: Нет токена, устанавливаем off');
|
||||
setWsState('off');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('checkWebSocketStatus: Отправляем запрос к /api/websocket/status');
|
||||
const response = await fetch('/api/websocket/status', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
console.log('checkWebSocketStatus: Получен ответ, статус:', response.status, response.statusText);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('checkWebSocketStatus: Получен ответ от сервера:', data);
|
||||
|
||||
if (data.status === 'available') {
|
||||
// Проверяем активные клиентские соединения
|
||||
const openConnections = Object.keys(state.open);
|
||||
let hasActiveConnection = false;
|
||||
|
||||
for (const id of openConnections) {
|
||||
const obj = state.open[id];
|
||||
if (obj && obj.ws && obj.ws.readyState === WebSocket.OPEN) {
|
||||
hasActiveConnection = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Если сервер доступен, всегда показываем 'on'
|
||||
console.log('checkWebSocketStatus: Сервер доступен, устанавливаем on');
|
||||
setWsState('on');
|
||||
} else if (data.status === 'no_containers') {
|
||||
console.log('checkWebSocketStatus: Нет контейнеров, устанавливаем off');
|
||||
setWsState('off');
|
||||
} else {
|
||||
console.log('checkWebSocketStatus: Ошибка сервера, устанавливаем err');
|
||||
setWsState('err');
|
||||
}
|
||||
} else {
|
||||
console.log('checkWebSocketStatus: HTTP ошибка, устанавливаем err');
|
||||
setWsState('err');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('checkWebSocketStatus: Ошибка запроса:', error);
|
||||
setWsState('err');
|
||||
}
|
||||
}
|
||||
|
||||
// Интервал для автоматической проверки состояния WebSocket
|
||||
let wsStatusInterval = null;
|
||||
|
||||
// Функция для запуска автоматической проверки состояния WebSocket
|
||||
function startWebSocketStatusCheck() {
|
||||
if (wsStatusInterval) {
|
||||
clearInterval(wsStatusInterval);
|
||||
}
|
||||
|
||||
// Проверяем каждые 3 секунды
|
||||
wsStatusInterval = setInterval(() => {
|
||||
console.log('Автоматическая проверка состояния WebSocket');
|
||||
checkWebSocketStatus();
|
||||
}, 3000);
|
||||
|
||||
console.log('Запущена автоматическая проверка состояния WebSocket');
|
||||
}
|
||||
|
||||
// Функция для остановки автоматической проверки
|
||||
function stopWebSocketStatusCheck() {
|
||||
if (wsStatusInterval) {
|
||||
clearInterval(wsStatusInterval);
|
||||
wsStatusInterval = null;
|
||||
console.log('Остановлена автоматическая проверка состояния WebSocket');
|
||||
}
|
||||
}
|
||||
|
||||
@ -4059,55 +4342,29 @@ function positionTooltip(event, tooltip) {
|
||||
|
||||
|
||||
|
||||
// Функции для help tooltip
|
||||
// Функции для help modal
|
||||
function showHelpTooltip() {
|
||||
const helpBtn = document.getElementById('helpBtn');
|
||||
const helpTooltip = document.getElementById('helpTooltip');
|
||||
|
||||
if (!helpBtn || !helpTooltip) return;
|
||||
if (!helpTooltip) return;
|
||||
|
||||
// Позиционируем tooltip относительно кнопки
|
||||
positionHelpTooltip(helpBtn, helpTooltip);
|
||||
|
||||
// Показываем tooltip
|
||||
// Показываем модальное окно
|
||||
helpTooltip.classList.add('show');
|
||||
|
||||
// Блокируем скролл страницы
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function hideHelpTooltip() {
|
||||
const helpTooltip = document.getElementById('helpTooltip');
|
||||
if (helpTooltip) {
|
||||
helpTooltip.classList.remove('show');
|
||||
|
||||
// Восстанавливаем скролл страницы
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -4149,12 +4406,7 @@ document.addEventListener('click', (event) => {
|
||||
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', () => {
|
||||
@ -4562,6 +4814,9 @@ function openMultiViewWs(service) {
|
||||
ws.onmessage = (event) => {
|
||||
console.log(`Multi-view WebSocket received message for ${service.name}: ${event.data.substring(0, 100)}...`);
|
||||
|
||||
// Устанавливаем состояние 'on' при получении сообщений
|
||||
setWsState('on');
|
||||
|
||||
const parts = (event.data||'').split(/\r?\n/);
|
||||
|
||||
// Проверяем на дублирование в исходных данных
|
||||
@ -4940,6 +5195,7 @@ function openWs(svc, panel){
|
||||
console.log(`openWs: Created state.open[${id}] with logEl:`, !!logEl, 'wrapEl:', !!wrapEl);
|
||||
|
||||
ws.onopen = ()=> {
|
||||
console.log(`WebSocket ${id}: Соединение открыто`);
|
||||
setWsState('on');
|
||||
// Очищаем сообщение "Connecting..." когда соединение установлено
|
||||
if (state.current && state.current.id === id && els.logContent) {
|
||||
@ -4949,12 +5205,38 @@ function openWs(svc, panel){
|
||||
if (obj.logEl) {
|
||||
obj.logEl.innerHTML = '';
|
||||
}
|
||||
|
||||
// Принудительно проверяем состояние через AJAX через 500мс и 1 секунду
|
||||
setTimeout(() => {
|
||||
console.log(`WebSocket ${id}: Принудительная проверка состояния после открытия (500мс)`);
|
||||
checkWebSocketStatus();
|
||||
}, 500);
|
||||
|
||||
setTimeout(() => {
|
||||
console.log(`WebSocket ${id}: Принудительная проверка состояния после открытия (1с)`);
|
||||
checkWebSocketStatus();
|
||||
}, 1000);
|
||||
};
|
||||
ws.onclose = ()=> {
|
||||
console.log(`WebSocket ${id}: Соединение закрыто`);
|
||||
setWsState(determineWsState());
|
||||
|
||||
// Принудительно проверяем состояние через AJAX через 500мс
|
||||
setTimeout(() => {
|
||||
console.log(`WebSocket ${id}: Принудительная проверка состояния после закрытия`);
|
||||
checkWebSocketStatus();
|
||||
}, 500);
|
||||
};
|
||||
ws.onerror = (error)=> {
|
||||
console.log(`WebSocket ${id}: Ошибка соединения:`, error);
|
||||
setWsState('err');
|
||||
};
|
||||
ws.onclose = ()=> setWsState(Object.keys(state.open).length? 'on':'off');
|
||||
ws.onerror = ()=> setWsState('err');
|
||||
ws.onmessage = (ev)=>{
|
||||
console.log(`Received WebSocket message: ${ev.data.substring(0, 100)}...`);
|
||||
|
||||
// Устанавливаем состояние 'on' при получении сообщений
|
||||
setWsState('on');
|
||||
|
||||
const parts = (ev.data||'').split(/\r?\n/);
|
||||
console.log(`openWs: Processing ${parts.length} lines for container ${id}`);
|
||||
|
||||
@ -6134,10 +6416,28 @@ function openFanGroup(services){
|
||||
const ws = new WebSocket(fanGroupUrl(services.join(','), fake.project||''));
|
||||
state.open[id] = {ws, logEl, wrapEl, counters, pausedBuffer:[], serviceName: ('group:'+services.join(','))};
|
||||
|
||||
ws.onopen = ()=> setWsState('on');
|
||||
ws.onclose = ()=> setWsState(Object.keys(state.open).length? 'on':'off');
|
||||
ws.onerror = ()=> setWsState('err');
|
||||
ws.onopen = ()=> {
|
||||
console.log(`WebSocket ${id}: Соединение открыто`);
|
||||
setWsState('on');
|
||||
};
|
||||
ws.onclose = ()=> {
|
||||
console.log(`WebSocket ${id}: Соединение закрыто`);
|
||||
setWsState(determineWsState());
|
||||
|
||||
// Принудительно проверяем состояние через AJAX через 500мс
|
||||
setTimeout(() => {
|
||||
console.log(`WebSocket ${id}: Принудительная проверка состояния после закрытия`);
|
||||
checkWebSocketStatus();
|
||||
}, 500);
|
||||
};
|
||||
ws.onerror = (error)=> {
|
||||
console.log(`WebSocket ${id}: Ошибка соединения:`, error);
|
||||
setWsState('err');
|
||||
};
|
||||
ws.onmessage = (ev)=>{
|
||||
// Устанавливаем состояние 'on' при получении сообщений
|
||||
setWsState('on');
|
||||
|
||||
const parts = (ev.data||'').split(/\r?\n/);
|
||||
for (let i=0;i<parts.length;i++){
|
||||
if (parts[i].length===0 && i===parts.length-1) continue;
|
||||
@ -7114,6 +7414,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
} finally {
|
||||
// Останавливаем автоматическую проверку WebSocket
|
||||
stopWebSocketStatusCheck();
|
||||
// Очищаем localStorage
|
||||
localStorage.removeItem('access_token');
|
||||
// Перенаправляем на страницу входа
|
||||
@ -7144,33 +7446,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const helpTooltip = document.getElementById('helpTooltip');
|
||||
let tooltipTimeout;
|
||||
|
||||
// Показ tooltip при наведении
|
||||
els.helpBtn.addEventListener('mouseenter', () => {
|
||||
clearTimeout(tooltipTimeout);
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
showHelpTooltip();
|
||||
}, 300); // Задержка 300мс перед показом
|
||||
// Показ модального окна при клике
|
||||
els.helpBtn.addEventListener('click', () => {
|
||||
showHelpTooltip();
|
||||
});
|
||||
|
||||
// Скрытие tooltip при уходе мыши
|
||||
els.helpBtn.addEventListener('mouseleave', () => {
|
||||
clearTimeout(tooltipTimeout);
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
// Кнопка закрытия модального окна
|
||||
const helpTooltipClose = document.getElementById('helpTooltipClose');
|
||||
if (helpTooltipClose) {
|
||||
helpTooltipClose.addEventListener('click', () => {
|
||||
hideHelpTooltip();
|
||||
}, 200); // Задержка 200мс перед скрытием
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Показ tooltip при наведении на сам tooltip
|
||||
helpTooltip.addEventListener('mouseenter', () => {
|
||||
clearTimeout(tooltipTimeout);
|
||||
});
|
||||
|
||||
// Скрытие tooltip при уходе мыши с tooltip
|
||||
helpTooltip.addEventListener('mouseleave', () => {
|
||||
clearTimeout(tooltipTimeout);
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
// Закрытие по Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
hideHelpTooltip();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
// Закрытие по клику вне модального окна
|
||||
helpTooltip.addEventListener('click', (e) => {
|
||||
if (e.target === helpTooltip) {
|
||||
hideHelpTooltip();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -7431,13 +7731,117 @@ window.addEventListener('keydown', async (e)=>{
|
||||
e.preventDefault();
|
||||
toggleSidebar();
|
||||
}
|
||||
|
||||
// Фокус на фильтр по Ctrl/Cmd+F
|
||||
if ((e.ctrlKey || e.metaKey) && (e.key==='f' || e.key==='а')){
|
||||
e.preventDefault();
|
||||
console.log('Ctrl+F pressed, els.filter:', els.filter);
|
||||
|
||||
// Функция для фокусировки на фильтре
|
||||
const focusFilter = () => {
|
||||
// Сначала попробуем использовать els.filter
|
||||
let filterElement = els.filter;
|
||||
|
||||
// Если els.filter не найден, попробуем найти элемент напрямую
|
||||
if (!filterElement) {
|
||||
console.log('els.filter not found, searching directly...');
|
||||
filterElement = document.getElementById('filter');
|
||||
}
|
||||
|
||||
// Если элемент найден, фокусируемся на нем
|
||||
if (filterElement) {
|
||||
console.log('Focusing on filter element:', filterElement);
|
||||
try {
|
||||
filterElement.focus();
|
||||
filterElement.select();
|
||||
console.log('Filter focused successfully');
|
||||
} catch (error) {
|
||||
console.error('Error focusing filter:', error);
|
||||
}
|
||||
} else {
|
||||
console.error('Filter element not found anywhere!');
|
||||
// Попробуем еще раз через небольшую задержку
|
||||
setTimeout(() => {
|
||||
const retryElement = document.getElementById('filter');
|
||||
if (retryElement) {
|
||||
console.log('Filter found on retry, focusing...');
|
||||
retryElement.focus();
|
||||
retryElement.select();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
// Вызываем функцию фокусировки
|
||||
focusFilter();
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// Функция для переинициализации элементов
|
||||
function reinitializeElements() {
|
||||
// Переинициализируем элементы, которые могут быть не найдены при первой загрузке
|
||||
els.filter = document.getElementById('filter');
|
||||
els.containerList = document.getElementById('containerList');
|
||||
els.logContent = document.getElementById('logContent');
|
||||
els.mobileToggle = document.getElementById('mobileToggle');
|
||||
els.optionsBtn = document.getElementById('optionsBtn');
|
||||
els.helpBtn = document.getElementById('helpBtn');
|
||||
els.logoutBtn = document.getElementById('logoutBtn');
|
||||
els.sidebar = document.getElementById('sidebar');
|
||||
els.sidebarToggle = document.getElementById('sidebarToggle');
|
||||
els.header = document.getElementById('header');
|
||||
|
||||
console.log('Elements reinitialized:', {
|
||||
filter: !!els.filter,
|
||||
containerList: !!els.containerList,
|
||||
logContent: !!els.logContent,
|
||||
sidebar: !!els.sidebar,
|
||||
sidebarToggle: !!els.sidebarToggle
|
||||
});
|
||||
}
|
||||
|
||||
// Инициализация
|
||||
(async function init() {
|
||||
console.log('Initializing LogBoard+...');
|
||||
|
||||
// Переинициализируем элементы
|
||||
reinitializeElements();
|
||||
|
||||
// Инициализируем состояние WebSocket
|
||||
setWsState('off');
|
||||
|
||||
// Дополнительно инициализируем элементы после полной загрузки DOM
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', reinitializeElements);
|
||||
}
|
||||
|
||||
// Инициализируем элементы после полной загрузки страницы
|
||||
window.addEventListener('load', reinitializeElements);
|
||||
|
||||
// Обработчик для правильной очистки при перезагрузке страницы
|
||||
window.addEventListener('beforeunload', () => {
|
||||
// Останавливаем автоматическую проверку WebSocket
|
||||
stopWebSocketStatusCheck();
|
||||
|
||||
// Закрываем все WebSocket соединения
|
||||
Object.keys(state.open).forEach(id => {
|
||||
const obj = state.open[id];
|
||||
if (obj && obj.ws) {
|
||||
try {
|
||||
obj.ws.close();
|
||||
} catch (e) {
|
||||
// Игнорируем ошибки при закрытии
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Очищаем состояние
|
||||
state.open = {};
|
||||
});
|
||||
|
||||
// Проверяем авторизацию
|
||||
const token = localStorage.getItem('access_token');
|
||||
if (!token) {
|
||||
@ -7482,6 +7886,23 @@ window.addEventListener('keydown', async (e)=>{
|
||||
await fetchProjects();
|
||||
await fetchServices();
|
||||
|
||||
// Проверяем состояние WebSocket после загрузки сервисов
|
||||
setTimeout(() => {
|
||||
console.log('Проверка состояния WebSocket после загрузки сервисов');
|
||||
setWsState(determineWsState());
|
||||
}, 1000);
|
||||
|
||||
// Запускаем автоматическую проверку состояния WebSocket
|
||||
startWebSocketStatusCheck();
|
||||
|
||||
// Добавляем обработчик клика для кнопки WebSocket статуса
|
||||
if (els.wsstate) {
|
||||
els.wsstate.addEventListener('click', () => {
|
||||
console.log('Ручная проверка состояния WebSocket');
|
||||
checkWebSocketStatus();
|
||||
});
|
||||
}
|
||||
|
||||
// Проверяем, есть ли сохраненный контейнер в localStorage
|
||||
const savedContainerId = getSelectedContainerFromStorage();
|
||||
if (savedContainerId) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user