feat: proper logging architecture — Docker rotation, persisted service logs, verbosity config
docker-compose.yml: - Add json-file logging driver (max-size: 10m, max-file: 5) to all 13 containers - Docker now owns container stdout/stderr rotation automatically - Add ./data/logs:/app/api/data/logs volume to API — service logs now persist across restarts log_manager.py: - Remove container log collection hack (Docker handles it natively) - Add set_service_level(service, level) — change log level at runtime without restart - Add get_service_levels() — return current per-service levels - Simplify get_all_log_file_infos to return only service log files app.py: - Add GET /api/logs/verbosity — return current per-service log levels - Add PUT /api/logs/verbosity — update levels at runtime, persist to config/log_levels.json - Load persisted log level overrides at startup from log_levels.json - Simplify rotate endpoint (service logs only, container logs owned by Docker) wireguard_manager.py: - get_keys(): return empty strings if key files don't exist (prevents get_status crash when wg0.conf is missing at startup and falls through to generate_config) Logs page (4 tabs): - API Service Logs: structured JSON logs from Python managers, with search/filter/rotate panel - Container Logs: live docker logs (read via existing /api/containers/<name>/logs endpoint) - Verbosity Config: per-service level dropdowns, apply immediately + persist - Health History: existing health poll table Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+44
-18
@@ -125,6 +125,16 @@ service_log_configs = {
|
||||
for service, config in service_log_configs.items():
|
||||
log_manager.add_service_logger(service, config)
|
||||
|
||||
# Apply any persisted log level overrides
|
||||
_levels_file = os.path.join(os.path.dirname(__file__), 'config', 'log_levels.json')
|
||||
if os.path.exists(_levels_file):
|
||||
try:
|
||||
with open(_levels_file) as _f:
|
||||
for _svc, _lvl in json.load(_f).items():
|
||||
log_manager.set_service_level(_svc, _lvl)
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
# Start service bus
|
||||
service_bus.start()
|
||||
|
||||
@@ -619,17 +629,11 @@ def get_log_statistics():
|
||||
|
||||
@app.route('/api/logs/rotate', methods=['POST'])
|
||||
def rotate_logs():
|
||||
"""Manually rotate logs (API service log or container log)."""
|
||||
"""Manually rotate an API service log file."""
|
||||
try:
|
||||
data = request.get_json(silent=True) or {}
|
||||
name = data.get('name') # e.g. 'wireguard' or 'container_cell-api'
|
||||
kind = data.get('kind', 'service') # 'service' or 'container'
|
||||
|
||||
if kind == 'container':
|
||||
container_name = name[len('container_'):] if name and name.startswith('container_') else name
|
||||
log_manager.rotate_container_log(container_name)
|
||||
else:
|
||||
log_manager.rotate_logs(name)
|
||||
service = data.get('service') # None = rotate all
|
||||
log_manager.rotate_logs(service)
|
||||
return jsonify({"message": "Logs rotated successfully"})
|
||||
except Exception as e:
|
||||
logger.error(f"Error rotating logs: {e}")
|
||||
@@ -637,23 +641,45 @@ def rotate_logs():
|
||||
|
||||
@app.route('/api/logs/files', methods=['GET'])
|
||||
def get_log_file_infos():
|
||||
"""List all stored log files (service + container) with sizes."""
|
||||
"""List service log files with sizes."""
|
||||
try:
|
||||
return jsonify(log_manager.get_all_log_file_infos())
|
||||
except Exception as e:
|
||||
logger.error(f"Error listing log files: {e}")
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
@app.route('/api/logs/containers/<container_name>', methods=['GET'])
|
||||
def get_stored_container_logs(container_name):
|
||||
"""Collect latest docker logs into file and return last N lines."""
|
||||
@app.route('/api/logs/verbosity', methods=['GET'])
|
||||
def get_log_verbosity():
|
||||
"""Return current per-service log levels."""
|
||||
try:
|
||||
tail = int(request.args.get('tail', 100))
|
||||
log_manager.collect_container_logs(container_name)
|
||||
lines = log_manager.get_container_log_lines(container_name, tail)
|
||||
return jsonify({'container': container_name, 'lines': lines})
|
||||
return jsonify(log_manager.get_service_levels())
|
||||
except Exception as e:
|
||||
logger.error(f"Error getting stored container logs for {container_name}: {e}")
|
||||
logger.error(f"Error getting log verbosity: {e}")
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
@app.route('/api/logs/verbosity', methods=['PUT'])
|
||||
def set_log_verbosity():
|
||||
"""Update log levels for one or all services. Body: {service: level} map."""
|
||||
try:
|
||||
data = request.get_json(silent=True) or {}
|
||||
for service, level in data.items():
|
||||
log_manager.set_service_level(service, level)
|
||||
# Persist to config so levels survive API restarts
|
||||
levels_file = os.path.join(os.path.dirname(__file__), 'config', 'log_levels.json')
|
||||
os.makedirs(os.path.dirname(levels_file), exist_ok=True)
|
||||
current = {}
|
||||
if os.path.exists(levels_file):
|
||||
try:
|
||||
with open(levels_file) as f:
|
||||
current = json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
current.update(data)
|
||||
with open(levels_file, 'w') as f:
|
||||
json.dump(current, f, indent=2)
|
||||
return jsonify({"message": "Log levels updated", "levels": log_manager.get_service_levels()})
|
||||
except Exception as e:
|
||||
logger.error(f"Error setting log verbosity: {e}")
|
||||
return jsonify({"error": str(e)}), 500
|
||||
|
||||
# Network Services API
|
||||
|
||||
+19
-72
@@ -498,88 +498,35 @@ class LogManager:
|
||||
except Exception as e:
|
||||
return {'error': str(e)}
|
||||
|
||||
def collect_container_logs(self, container_name: str, docker_client=None) -> int:
|
||||
"""Append new docker container stdout/stderr to a persistent log file.
|
||||
Returns number of new lines written, or -1 on error."""
|
||||
def set_service_level(self, service: str, level: str):
|
||||
"""Change log level for a service at runtime."""
|
||||
try:
|
||||
import subprocess
|
||||
log_file = self.log_dir / f'container_{container_name}.log'
|
||||
# Determine --since timestamp from last line of existing file
|
||||
since_arg = []
|
||||
if log_file.exists() and log_file.stat().st_size > 0:
|
||||
with open(log_file, 'r', encoding='utf-8', errors='ignore') as f:
|
||||
for line in f:
|
||||
pass
|
||||
# Parse last timestamp from docker log line (format: 2006-01-02T15:04:05...)
|
||||
ts_match = re.match(r'^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d+Z)', line.strip())
|
||||
if ts_match:
|
||||
since_arg = ['--since', ts_match.group(1)]
|
||||
|
||||
result = subprocess.run(
|
||||
['docker', 'logs', '--timestamps'] + since_arg + [container_name],
|
||||
capture_output=True, text=True, timeout=30
|
||||
)
|
||||
output = result.stdout + result.stderr
|
||||
lines = [l for l in output.splitlines() if l.strip()]
|
||||
if lines:
|
||||
with open(log_file, 'a', encoding='utf-8') as f:
|
||||
f.write('\n'.join(lines) + '\n')
|
||||
return len(lines)
|
||||
log_level = getattr(logging, level.upper(), logging.INFO)
|
||||
if service in self.service_loggers:
|
||||
self.service_loggers[service].setLevel(log_level)
|
||||
if service in self.handlers and 'file' in self.handlers[service]:
|
||||
self.handlers[service]['file'].setLevel(log_level)
|
||||
logger.info(f"Set log level for {service} to {level}")
|
||||
else:
|
||||
logger.warning(f"Service logger not found: {service}")
|
||||
except Exception as e:
|
||||
logger.error(f"Error collecting container logs for {container_name}: {e}")
|
||||
return -1
|
||||
logger.error(f"Error setting log level for {service}: {e}")
|
||||
|
||||
def get_container_log_lines(self, container_name: str, lines: int = 100) -> List[str]:
|
||||
"""Read last N lines from stored container log file."""
|
||||
try:
|
||||
log_file = self.log_dir / f'container_{container_name}.log'
|
||||
if not log_file.exists():
|
||||
return []
|
||||
with open(log_file, 'r', encoding='utf-8', errors='ignore') as f:
|
||||
all_lines = f.readlines()
|
||||
return [l.rstrip() for l in all_lines[-lines:]] if lines > 0 else [l.rstrip() for l in all_lines]
|
||||
except Exception as e:
|
||||
logger.error(f"Error reading container log for {container_name}: {e}")
|
||||
return []
|
||||
|
||||
def rotate_container_log(self, container_name: str):
|
||||
"""Rotate a stored container log file."""
|
||||
try:
|
||||
log_file = self.log_dir / f'container_{container_name}.log'
|
||||
if not log_file.exists():
|
||||
return
|
||||
# Find next available backup index
|
||||
for i in range(1, self.backup_count + 1):
|
||||
backup = self.log_dir / f'container_{container_name}.log.{i}'
|
||||
if not backup.exists():
|
||||
log_file.rename(backup)
|
||||
logger.info(f"Rotated container log for {container_name} → {backup.name}")
|
||||
return
|
||||
# All slots full — remove oldest, shift others
|
||||
oldest = self.log_dir / f'container_{container_name}.log.{self.backup_count}'
|
||||
oldest.unlink(missing_ok=True)
|
||||
for i in range(self.backup_count - 1, 0, -1):
|
||||
src = self.log_dir / f'container_{container_name}.log.{i}'
|
||||
if src.exists():
|
||||
src.rename(self.log_dir / f'container_{container_name}.log.{i + 1}')
|
||||
log_file.rename(self.log_dir / f'container_{container_name}.log.1')
|
||||
logger.info(f"Rotated container log for {container_name}")
|
||||
except Exception as e:
|
||||
logger.error(f"Error rotating container log for {container_name}: {e}")
|
||||
def get_service_levels(self) -> Dict[str, str]:
|
||||
"""Return current log level for each service logger."""
|
||||
return {
|
||||
svc: logging.getLevelName(lgr.level)
|
||||
for svc, lgr in self.service_loggers.items()
|
||||
}
|
||||
|
||||
def get_all_log_file_infos(self) -> List[Dict[str, Any]]:
|
||||
"""Return size/mtime info for all log files (API service logs + container logs)."""
|
||||
"""Return size/mtime info for all service log files."""
|
||||
results = []
|
||||
for log_file in sorted(self.log_dir.glob('*.log')):
|
||||
try:
|
||||
stat = log_file.stat()
|
||||
name = log_file.stem # e.g. 'wireguard' or 'container_cell-api'
|
||||
kind = 'container' if name.startswith('container_') else 'service'
|
||||
label = name[len('container_'):] if kind == 'container' else name
|
||||
results.append({
|
||||
'name': name,
|
||||
'label': label,
|
||||
'kind': kind,
|
||||
'name': log_file.stem,
|
||||
'file': log_file.name,
|
||||
'size': stat.st_size,
|
||||
'modified': datetime.fromtimestamp(stat.st_mtime).isoformat(),
|
||||
|
||||
@@ -74,9 +74,13 @@ class WireGuardManager(BaseServiceManager):
|
||||
pass
|
||||
|
||||
def get_keys(self) -> Dict[str, str]:
|
||||
"""Return server public/private keys as base64 strings."""
|
||||
"""Return server public/private keys as base64 strings. Generates them if missing."""
|
||||
priv_file = os.path.join(self.keys_dir, 'private.key')
|
||||
pub_file = os.path.join(self.keys_dir, 'public.key')
|
||||
if not os.path.exists(priv_file):
|
||||
self._ensure_server_keys()
|
||||
if not os.path.exists(priv_file):
|
||||
return {'private_key': '', 'public_key': ''}
|
||||
with open(priv_file, 'rb') as f:
|
||||
priv = f.read()
|
||||
with open(pub_file, 'rb') as f:
|
||||
|
||||
@@ -18,6 +18,11 @@ services:
|
||||
networks:
|
||||
cell-network:
|
||||
ipv4_address: 172.20.0.2
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# DNS Server - CoreDNS for .cell TLD resolution
|
||||
dns:
|
||||
@@ -34,6 +39,11 @@ services:
|
||||
networks:
|
||||
cell-network:
|
||||
ipv4_address: 172.20.0.3
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# DHCP Server - dnsmasq for IP leasing
|
||||
dhcp:
|
||||
@@ -51,6 +61,11 @@ services:
|
||||
command: ["/bin/sh", "-c", "apk add --no-cache dnsmasq && dnsmasq -d -C /etc/dnsmasq.conf"]
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# NTP Server - chrony for time synchronization
|
||||
ntp:
|
||||
@@ -67,6 +82,11 @@ services:
|
||||
cap_add:
|
||||
- SYS_TIME
|
||||
command: ["/bin/sh", "-c", "apk add --no-cache chrony && rm -f /var/run/chrony/chronyd.pid && exec chronyd -d -f /etc/chrony/chrony.conf -n"]
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# Email Server - Postfix + Dovecot
|
||||
mail:
|
||||
@@ -91,6 +111,11 @@ services:
|
||||
ipv4_address: 172.20.0.6
|
||||
cap_add:
|
||||
- NET_ADMIN
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# Calendar & Contacts - Radicale
|
||||
radicale:
|
||||
@@ -105,6 +130,11 @@ services:
|
||||
networks:
|
||||
cell-network:
|
||||
ipv4_address: 172.20.0.7
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# File Storage - WebDAV
|
||||
webdav:
|
||||
@@ -122,6 +152,11 @@ services:
|
||||
networks:
|
||||
cell-network:
|
||||
ipv4_address: 172.20.0.8
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# WireGuard VPN
|
||||
wireguard:
|
||||
@@ -146,6 +181,11 @@ services:
|
||||
sysctls:
|
||||
- net.ipv4.conf.all.src_valid_mark=1
|
||||
- net.ipv4.ip_forward=1
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# API Server
|
||||
api:
|
||||
@@ -159,6 +199,7 @@ services:
|
||||
- ./config/api:/app/config
|
||||
- ./config/wireguard:/app/config/wireguard
|
||||
- ./config/dns:/app/config/dns
|
||||
- ./data/logs:/app/api/data/logs
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
pid: host
|
||||
restart: unless-stopped
|
||||
@@ -168,6 +209,11 @@ services:
|
||||
depends_on:
|
||||
- wireguard
|
||||
- dns
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# Web UI - React + Vite
|
||||
webui:
|
||||
@@ -179,6 +225,11 @@ services:
|
||||
networks:
|
||||
cell-network:
|
||||
ipv4_address: 172.20.0.11
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# Webmail - RainLoop
|
||||
rainloop:
|
||||
@@ -192,6 +243,11 @@ services:
|
||||
- "8888:8888"
|
||||
volumes:
|
||||
- ./data/rainloop:/rainloop/data
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
# File Manager - FileGator
|
||||
filegator:
|
||||
@@ -205,6 +261,11 @@ services:
|
||||
- "8082:8080"
|
||||
volumes:
|
||||
- ./data/filegator:/var/www/filegator/private
|
||||
logging:
|
||||
driver: json-file
|
||||
options:
|
||||
max-size: "10m"
|
||||
max-file: "5"
|
||||
|
||||
networks:
|
||||
cell-network:
|
||||
|
||||
+161
-172
@@ -1,11 +1,8 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Activity, Clock, FileText, AlertTriangle, Search, RefreshCw,
|
||||
RotateCcw, Box, BarChart2
|
||||
} from 'lucide-react';
|
||||
import { Activity, FileText, AlertTriangle, Search, RefreshCw, RotateCcw, Box, Settings } from 'lucide-react';
|
||||
import { monitoringAPI, logsAPI, containerAPI } from '../services/api';
|
||||
|
||||
const API_SERVICES = ['ALL', 'network', 'wireguard', 'routing', 'email', 'calendar', 'files', 'vault', 'container', 'api'];
|
||||
const API_SERVICES = ['ALL', 'network', 'wireguard', 'routing', 'email', 'calendar', 'files', 'vault', 'api'];
|
||||
const LEVELS = ['ALL', 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'];
|
||||
const LEVEL_COLORS = {
|
||||
DEBUG: 'text-gray-500',
|
||||
@@ -21,20 +18,21 @@ function LevelBadge({ level }) {
|
||||
}
|
||||
|
||||
function LogLine({ entry }) {
|
||||
if (!entry || entry.raw_line !== undefined) {
|
||||
return <div className="font-mono text-xs text-gray-300 py-0.5 break-all">{entry?.raw_line || ''}</div>;
|
||||
}
|
||||
if (!entry || entry.raw_line !== undefined)
|
||||
return <div className="font-mono text-xs text-gray-300 py-0.5 break-all">{entry?.raw_line ?? ''}</div>;
|
||||
return (
|
||||
<div className="font-mono text-xs py-0.5 flex gap-2 flex-wrap">
|
||||
<span className="text-gray-500 shrink-0">{String(entry.timestamp || '').slice(0, 19)}</span>
|
||||
<span className="text-gray-500 shrink-0">{String(entry.timestamp ?? '').slice(0, 19)}</span>
|
||||
<LevelBadge level={entry.level} />
|
||||
{entry.service && <span className="text-purple-400 shrink-0">[{entry.service}]</span>}
|
||||
<span className="text-gray-200 break-all">{entry.message || ''}</span>
|
||||
<span className="text-gray-200 break-all">{entry.message ?? ''}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tab: API Service Logs ───────────────────────────────────────────────────
|
||||
// ── Tab 1: API Service Logs ─────────────────────────────────────────────────
|
||||
// These are structured JSON logs written by Python service managers.
|
||||
// Stored in /app/api/data/logs/ (persisted to ./data/logs/ on the host via volume mount).
|
||||
function ApiServiceLogsTab() {
|
||||
const [service, setService] = useState('ALL');
|
||||
const [level, setLevel] = useState('ALL');
|
||||
@@ -43,6 +41,9 @@ function ApiServiceLogsTab() {
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [fileInfos, setFileInfos] = useState([]);
|
||||
const [rotating, setRotating] = useState(null);
|
||||
const [showFiles, setShowFiles] = useState(false);
|
||||
const intervalRef = useRef(null);
|
||||
|
||||
const doFetch = useCallback(async () => {
|
||||
@@ -59,9 +60,7 @@ function ApiServiceLogsTab() {
|
||||
} else {
|
||||
const res = await logsAPI.getServiceLogs(service, level, lines);
|
||||
const raw = res.data.logs || [];
|
||||
const parsed = raw.map(line => {
|
||||
try { return JSON.parse(line); } catch { return { raw_line: line }; }
|
||||
});
|
||||
const parsed = raw.map(l => { try { return JSON.parse(l); } catch { return { raw_line: l }; } });
|
||||
setLogs(parsed.reverse());
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -74,21 +73,32 @@ function ApiServiceLogsTab() {
|
||||
useEffect(() => { doFetch(); }, [service, level, lines]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh) {
|
||||
intervalRef.current = setInterval(doFetch, 5000);
|
||||
} else {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
if (autoRefresh) intervalRef.current = setInterval(doFetch, 5000);
|
||||
else clearInterval(intervalRef.current);
|
||||
return () => clearInterval(intervalRef.current);
|
||||
}, [autoRefresh, doFetch]);
|
||||
|
||||
const loadFileInfos = async () => {
|
||||
try { setFileInfos((await logsAPI.getLogFiles()).data || []); } catch {}
|
||||
};
|
||||
|
||||
const toggleFiles = () => {
|
||||
if (!showFiles) loadFileInfos();
|
||||
setShowFiles(v => !v);
|
||||
};
|
||||
|
||||
const rotate = async (service) => {
|
||||
if (!window.confirm(`Rotate log for ${service || 'all services'}?\nCurrent file will be archived.`)) return;
|
||||
setRotating(service || 'all');
|
||||
try { await logsAPI.rotateLogs(service || null); await loadFileInfos(); } catch {}
|
||||
setRotating(null);
|
||||
};
|
||||
|
||||
const fmtSize = b => !b ? '0 B' : b < 1024 ? `${b} B` : b < 1048576 ? `${(b/1024).toFixed(1)} KB` : `${(b/1048576).toFixed(2)} MB`;
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-500 bg-gray-50 rounded px-3 py-2">
|
||||
These are structured logs written by the API backend for each service manager (wireguard, network, routing, etc.).
|
||||
They are stored in <code>/app/data/logs/<service>.log</code> and can be rotated from the Statistics tab.
|
||||
</p>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<select className="border rounded px-2 py-1 text-sm" value={service} onChange={e => setService(e.target.value)}>
|
||||
{API_SERVICES.map(s => <option key={s} value={s}>{s === 'ALL' ? 'ALL services' : s}</option>)}
|
||||
@@ -96,7 +106,7 @@ function ApiServiceLogsTab() {
|
||||
<select className="border rounded px-2 py-1 text-sm" value={level} onChange={e => setLevel(e.target.value)}>
|
||||
{LEVELS.map(l => <option key={l} value={l}>{l}</option>)}
|
||||
</select>
|
||||
{service !== 'ALL' && (
|
||||
{service !== 'ALL' && !query && (
|
||||
<select className="border rounded px-2 py-1 text-sm" value={lines} onChange={e => setLines(Number(e.target.value))}>
|
||||
{[50, 100, 200, 500].map(n => <option key={n} value={n}>{n} lines</option>)}
|
||||
</select>
|
||||
@@ -110,25 +120,55 @@ function ApiServiceLogsTab() {
|
||||
onKeyDown={e => e.key === 'Enter' && doFetch()}
|
||||
/>
|
||||
<button className="btn btn-secondary px-2 py-1 text-sm" onClick={doFetch}><Search className="h-4 w-4" /></button>
|
||||
{query && <button className="btn btn-secondary px-2 py-1 text-sm" onClick={() => { setQuery(''); }}>✕</button>}
|
||||
{query && <button className="btn btn-secondary px-2 py-1 text-sm" onClick={() => setQuery('')}>✕</button>}
|
||||
</div>
|
||||
<button
|
||||
className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
title="Auto-refresh 5s"
|
||||
onClick={() => setAutoRefresh(v => !v)}
|
||||
>
|
||||
<button className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`} title="Auto-refresh 5s" onClick={() => setAutoRefresh(v => !v)}>
|
||||
<RefreshCw className={`h-4 w-4 ${autoRefresh ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button className="btn btn-secondary px-2 py-1 text-sm" onClick={doFetch}><RefreshCw className="h-4 w-4" /></button>
|
||||
<button className="btn btn-secondary px-2 py-1 text-sm" onClick={toggleFiles} title="Files & Rotation">
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* File info panel */}
|
||||
{showFiles && (
|
||||
<div className="border rounded bg-gray-50 p-3">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">Log Files (persisted to ./data/logs/)</span>
|
||||
<button className="btn btn-secondary text-xs px-2 py-0.5" onClick={() => rotate(null)} disabled={rotating === 'all'}>
|
||||
<RotateCcw className={`h-3 w-3 inline mr-1 ${rotating === 'all' ? 'animate-spin' : ''}`} />Rotate All
|
||||
</button>
|
||||
</div>
|
||||
<table className="w-full text-xs">
|
||||
<thead><tr className="text-gray-500"><th className="text-left py-1">Service</th><th className="text-right py-1">Size</th><th className="text-left py-1 pl-3">Modified</th><th className="text-center py-1"></th></tr></thead>
|
||||
<tbody>
|
||||
{fileInfos.map(f => (
|
||||
<tr key={f.name} className="border-t">
|
||||
<td className="py-1 font-mono">{f.name}</td>
|
||||
<td className="py-1 text-right font-mono">{fmtSize(f.size)}</td>
|
||||
<td className="py-1 pl-3 text-gray-500">{f.modified?.slice(0, 19)}</td>
|
||||
<td className="py-1 text-center">
|
||||
<button className="btn btn-secondary px-1.5 py-0.5 text-xs" onClick={() => rotate(f.name)} disabled={rotating === f.name}>
|
||||
<RotateCcw className={`h-3 w-3 ${rotating === f.name ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{fileInfos.length === 0 && <tr><td colSpan={4} className="text-gray-400 py-2 text-center">No log files found.</td></tr>}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Log output */}
|
||||
<div className="bg-gray-900 rounded-lg p-3 h-[500px] overflow-y-auto">
|
||||
{loading && logs.length === 0 ? (
|
||||
{loading && !logs.length ? (
|
||||
<div className="text-gray-400 text-sm">Loading…</div>
|
||||
) : logs.length === 0 ? (
|
||||
) : !logs.length ? (
|
||||
<div className="text-gray-500 text-sm">No entries found.</div>
|
||||
) : (
|
||||
logs.map((entry, i) => <LogLine key={i} entry={entry} />)
|
||||
logs.map((e, i) => <LogLine key={i} entry={e} />)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{logs.length} entries</div>
|
||||
@@ -136,7 +176,9 @@ function ApiServiceLogsTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tab: Container Logs ─────────────────────────────────────────────────────
|
||||
// ── Tab 2: Container Logs ───────────────────────────────────────────────────
|
||||
// Container stdout/stderr read live via `docker logs`.
|
||||
// Docker itself rotates these files (json-file driver, max-size 10m, max-file 5 — configured in docker-compose.yml).
|
||||
function ContainerLogsTab() {
|
||||
const [containers, setContainers] = useState([]);
|
||||
const [selected, setSelected] = useState('cell-api');
|
||||
@@ -151,10 +193,9 @@ function ContainerLogsTab() {
|
||||
.then(res => {
|
||||
const names = (res.data || [])
|
||||
.map(c => c.name || c.Names?.[0]?.replace('/', ''))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
.filter(Boolean).sort();
|
||||
setContainers(names);
|
||||
if (names.length > 0 && !names.includes(selected)) setSelected(names[0]);
|
||||
if (names.length && !names.includes(selected)) setSelected(names[0]);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
@@ -163,8 +204,9 @@ function ContainerLogsTab() {
|
||||
if (!selected) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await logsAPI.getStoredContainerLogs(selected, tail);
|
||||
setLines(res.data.lines || []);
|
||||
const res = await containerAPI.getContainerLogs(selected, tail);
|
||||
const raw = res.data.logs || '';
|
||||
setLines(typeof raw === 'string' ? raw.split('\n').filter(Boolean) : raw);
|
||||
} catch (e) {
|
||||
setLines([`Error: ${e.message}`]);
|
||||
} finally {
|
||||
@@ -175,193 +217,148 @@ function ContainerLogsTab() {
|
||||
useEffect(() => { doFetch(); }, [selected, tail]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh) {
|
||||
intervalRef.current = setInterval(doFetch, 5000);
|
||||
} else {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
if (autoRefresh) intervalRef.current = setInterval(doFetch, 5000);
|
||||
else clearInterval(intervalRef.current);
|
||||
return () => clearInterval(intervalRef.current);
|
||||
}, [autoRefresh, doFetch]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-gray-500 bg-gray-50 rounded px-3 py-2">
|
||||
Container stdout/stderr collected from Docker and stored in <code>/app/data/logs/container_<name>.log</code>.
|
||||
Each fetch appends new lines since last collection. Rotate from the Statistics tab.
|
||||
</p>
|
||||
|
||||
<div className="text-xs text-gray-500 bg-gray-50 rounded px-3 py-2">
|
||||
Live stdout/stderr from Docker. Rotation is automatic: <code>json-file</code> driver,
|
||||
<strong> 10 MB max-size, 5 backups</strong> per container — configured in <code>docker-compose.yml</code>.
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<select className="border rounded px-2 py-1 text-sm" value={selected} onChange={e => setSelected(e.target.value)}>
|
||||
{(containers.length > 0 ? containers : ['cell-api']).map(c => (
|
||||
<option key={c} value={c}>{c}</option>
|
||||
))}
|
||||
{(containers.length ? containers : ['cell-api']).map(c => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
<select className="border rounded px-2 py-1 text-sm" value={tail} onChange={e => setTail(Number(e.target.value))}>
|
||||
{[50, 100, 200, 500].map(n => <option key={n} value={n}>{n} lines</option>)}
|
||||
</select>
|
||||
<button
|
||||
className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
title="Auto-refresh 5s"
|
||||
onClick={() => setAutoRefresh(v => !v)}
|
||||
>
|
||||
<button className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`} title="Auto-refresh 5s" onClick={() => setAutoRefresh(v => !v)}>
|
||||
<RefreshCw className={`h-4 w-4 ${autoRefresh ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button className="btn btn-secondary px-2 py-1 text-sm" onClick={doFetch}><RefreshCw className="h-4 w-4" /></button>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-900 text-green-300 rounded-lg p-3 h-[500px] overflow-y-auto font-mono text-xs">
|
||||
{loading && lines.length === 0 ? (
|
||||
{loading && !lines.length ? (
|
||||
<span className="text-gray-400">Loading…</span>
|
||||
) : lines.length === 0 ? (
|
||||
<span className="text-gray-500">No stored logs. Click refresh to collect.</span>
|
||||
) : !lines.length ? (
|
||||
<span className="text-gray-500">No output.</span>
|
||||
) : (
|
||||
lines.map((l, i) => <div key={i} className="py-0.5 break-all">{l}</div>)
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{lines.length} lines stored</div>
|
||||
<div className="text-xs text-gray-400">{lines.length} lines</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tab: Statistics & Rotation ──────────────────────────────────────────────
|
||||
function StatisticsTab() {
|
||||
const [files, setFiles] = useState([]);
|
||||
// ── Tab 3: Verbosity Config ─────────────────────────────────────────────────
|
||||
function VerbosityTab() {
|
||||
const [levels, setLevels] = useState({});
|
||||
const [pending, setPending] = useState({});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [rotating, setRotating] = useState(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [msg, setMsg] = useState('');
|
||||
|
||||
const doFetch = async () => {
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await logsAPI.getLogFiles();
|
||||
setFiles(res.data || []);
|
||||
const res = await logsAPI.getVerbosity();
|
||||
setLevels(res.data || {});
|
||||
setPending(res.data || {});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setMsg(`Error: ${e.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { doFetch(); }, []);
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const rotate = async (file) => {
|
||||
const label = file ? file.label : 'all log files';
|
||||
if (!window.confirm(`Rotate logs for ${label}?\nThe current file will be archived and a new one started.`)) return;
|
||||
const key = file ? file.name : 'all';
|
||||
setRotating(key);
|
||||
const save = async () => {
|
||||
const changed = Object.fromEntries(
|
||||
Object.entries(pending).filter(([k, v]) => v !== levels[k])
|
||||
);
|
||||
if (!Object.keys(changed).length) { setMsg('No changes.'); return; }
|
||||
setSaving(true);
|
||||
setMsg('');
|
||||
try {
|
||||
if (file) {
|
||||
await logsAPI.rotateLogs(file.name, file.kind);
|
||||
} else {
|
||||
// Rotate all: service logs via old endpoint, container logs individually
|
||||
await Promise.all(files.map(f => logsAPI.rotateLogs(f.name, f.kind)));
|
||||
}
|
||||
setMsg('Rotation complete.');
|
||||
await doFetch();
|
||||
const res = await logsAPI.setVerbosity(changed);
|
||||
setLevels(res.data.levels || pending);
|
||||
setMsg('Levels saved and applied.');
|
||||
} catch (e) {
|
||||
setMsg(`Error: ${e.message}`);
|
||||
} finally {
|
||||
setRotating(null);
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fmtSize = bytes => {
|
||||
if (!bytes) return '0 B';
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / 1024 ** 2).toFixed(2)} MB`;
|
||||
};
|
||||
const services = Object.keys(pending).sort();
|
||||
|
||||
const serviceFiles = files.filter(f => f.kind === 'service');
|
||||
const containerFiles = files.filter(f => f.kind === 'container');
|
||||
return (
|
||||
<div className="space-y-4 max-w-lg">
|
||||
<div className="text-xs text-gray-500 bg-gray-50 rounded px-3 py-2">
|
||||
Changes apply immediately to the running API — no restart needed. Levels are persisted to
|
||||
<code> config/log_levels.json</code> and restored on container restart.
|
||||
</div>
|
||||
|
||||
const FileTable = ({ rows, title }) => (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-700 mb-2">{title}</h4>
|
||||
{rows.length === 0 ? (
|
||||
<p className="text-sm text-gray-400">No files yet.</p>
|
||||
) : (
|
||||
<table className="min-w-full text-sm border rounded mb-4">
|
||||
{loading ? <div className="text-gray-500 text-sm">Loading…</div> : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="px-3 py-2 text-left">Name</th>
|
||||
<th className="px-3 py-2 text-right">Size</th>
|
||||
<th className="px-3 py-2 text-left">Last Modified</th>
|
||||
<th className="px-3 py-2 text-center">Rotate</th>
|
||||
<th className="px-3 py-2 text-left">Service</th>
|
||||
<th className="px-3 py-2 text-left">Log Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(f => (
|
||||
<tr key={f.name} className="border-t hover:bg-gray-50">
|
||||
<td className="px-3 py-2 font-mono text-xs">{f.label}</td>
|
||||
<td className="px-3 py-2 text-right font-mono text-xs">{fmtSize(f.size)}</td>
|
||||
<td className="px-3 py-2 text-xs text-gray-500">{f.modified?.slice(0, 19)}</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<button
|
||||
className="btn btn-secondary text-xs px-2 py-0.5"
|
||||
onClick={() => rotate(f)}
|
||||
disabled={rotating === f.name}
|
||||
{services.map(svc => (
|
||||
<tr key={svc} className="border-t">
|
||||
<td className="px-3 py-2 font-medium">{svc}</td>
|
||||
<td className="px-3 py-2">
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={pending[svc] || 'INFO'}
|
||||
onChange={e => setPending(p => ({ ...p, [svc]: e.target.value }))}
|
||||
>
|
||||
<RotateCcw className={`h-3 w-3 inline ${rotating === f.name ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
{['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'].map(l => (
|
||||
<option key={l} value={l}>{l}</option>
|
||||
))}
|
||||
</select>
|
||||
{pending[svc] !== levels[svc] && (
|
||||
<span className="ml-2 text-xs text-yellow-600">changed</span>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium text-gray-900">Log Files & Rotation</h3>
|
||||
<div className="flex gap-2">
|
||||
<button className="btn btn-secondary text-sm" onClick={doFetch}>
|
||||
<RefreshCw className="h-4 w-4 mr-1 inline" /> Refresh
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary text-sm"
|
||||
onClick={() => rotate(null)}
|
||||
disabled={rotating === 'all'}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4 mr-1 inline" /> Rotate All
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="btn btn-primary text-sm" onClick={save} disabled={saving}>
|
||||
{saving ? 'Saving…' : 'Apply Changes'}
|
||||
</button>
|
||||
<button className="btn btn-secondary text-sm" onClick={load}>Reset</button>
|
||||
{msg && <span className="text-sm text-gray-600">{msg}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{msg && <div className="text-sm text-green-700 bg-green-50 rounded px-3 py-2">{msg}</div>}
|
||||
|
||||
{loading ? <div className="text-gray-500 text-sm">Loading…</div> : (
|
||||
<>
|
||||
<FileTable rows={serviceFiles} title="API Service Logs" />
|
||||
<FileTable rows={containerFiles} title="Container Logs (stored)" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tab: Health History ─────────────────────────────────────────────────────
|
||||
// ── Tab 4: Health History ───────────────────────────────────────────────────
|
||||
function HealthHistoryTab() {
|
||||
const [healthHistory, setHealthHistory] = useState([]);
|
||||
const [history, setHistory] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const doFetch = async () => {
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await monitoringAPI.getHealthHistory();
|
||||
setHealthHistory(res.data || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
try { setHistory((await monitoringAPI.getHealthHistory()).data || []); } catch {}
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { doFetch(); }, []);
|
||||
useEffect(() => { load(); }, []);
|
||||
|
||||
const SvcCol = ({ data }) => (data?.status === 'online' || data?.running === true)
|
||||
? <span className="text-green-600">OK</span>
|
||||
@@ -371,23 +368,21 @@ function HealthHistoryTab() {
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium text-gray-900">Health History</h3>
|
||||
<button className="btn btn-secondary text-sm" onClick={doFetch}>
|
||||
<RefreshCw className="h-4 w-4 mr-1 inline" /> Refresh
|
||||
</button>
|
||||
<button className="btn btn-secondary text-sm" onClick={load}><RefreshCw className="h-4 w-4 mr-1 inline" />Refresh</button>
|
||||
</div>
|
||||
{loading ? <div className="text-gray-500 text-sm">Loading…</div> : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
{['Timestamp', 'Network', 'WireGuard', 'Email', 'Calendar', 'Files', 'Routing', 'Vault', 'Alerts'].map(h => (
|
||||
{['Timestamp','Network','WireGuard','Email','Calendar','Files','Routing','Vault','Alerts'].map(h => (
|
||||
<th key={h} className="px-2 py-1 text-left">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{healthHistory.map((h, i) => (
|
||||
<tr key={i} className={h.alerts?.length > 0 ? 'bg-red-50' : ''}>
|
||||
{history.map((h, i) => (
|
||||
<tr key={i} className={h.alerts?.length ? 'bg-red-50' : ''}>
|
||||
<td className="px-2 py-1 font-mono text-xs">{h.timestamp}</td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.network} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.wireguard} /></td>
|
||||
@@ -397,7 +392,7 @@ function HealthHistoryTab() {
|
||||
<td className="px-2 py-1"><SvcCol data={h.routing} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.vault} /></td>
|
||||
<td className="px-2 py-1">
|
||||
{h.alerts?.length > 0
|
||||
{h.alerts?.length
|
||||
? h.alerts.map((a, j) => (
|
||||
<span key={j} className="text-red-700 font-semibold flex items-center gap-1">
|
||||
<AlertTriangle className="h-3 w-3 text-red-500" />{a}
|
||||
@@ -419,20 +414,18 @@ function HealthHistoryTab() {
|
||||
const TABS = [
|
||||
{ id: 'api', label: 'API Service Logs', icon: FileText },
|
||||
{ id: 'container', label: 'Container Logs', icon: Box },
|
||||
{ id: 'statistics', label: 'Statistics & Rotation', icon: BarChart2 },
|
||||
{ id: 'verbosity', label: 'Verbosity Config', icon: Settings },
|
||||
{ id: 'health', label: 'Health History', icon: Activity },
|
||||
];
|
||||
|
||||
function Logs() {
|
||||
export default function Logs() {
|
||||
const [tab, setTab] = useState('api');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Logs & Monitoring</h1>
|
||||
<p className="mt-1 text-gray-600">API service logs, container stdout/stderr, rotation, and health history.</p>
|
||||
<p className="mt-1 text-gray-600">API service logs · Container stdout/stderr · Log level config · Health history</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex gap-2 border-b">
|
||||
{TABS.map(({ id, label, icon: Icon }) => (
|
||||
<button
|
||||
@@ -442,20 +435,16 @@ function Logs() {
|
||||
}`}
|
||||
onClick={() => setTab(id)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
<Icon className="h-4 w-4" />{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
{tab === 'api' && <ApiServiceLogsTab />}
|
||||
{tab === 'container' && <ContainerLogsTab />}
|
||||
{tab === 'statistics' && <StatisticsTab />}
|
||||
{tab === 'verbosity' && <VerbosityTab />}
|
||||
{tab === 'health' && <HealthHistoryTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logs;
|
||||
|
||||
@@ -191,13 +191,10 @@ export const logsAPI = {
|
||||
getServiceLogs: (service, level = 'ALL', lines = 100) =>
|
||||
api.get(`/api/logs/services/${service}`, { params: { level, lines } }),
|
||||
searchLogs: (data) => api.post('/api/logs/search', data),
|
||||
exportLogs: (data) => api.post('/api/logs/export', data),
|
||||
getStatistics: (service) =>
|
||||
api.get('/api/logs/statistics', service ? { params: { service } } : {}),
|
||||
rotateLogs: (name, kind = 'service') => api.post('/api/logs/rotate', { name, kind }),
|
||||
getLogFiles: () => api.get('/api/logs/files'),
|
||||
getStoredContainerLogs: (containerName, tail = 100) =>
|
||||
api.get(`/api/logs/containers/${containerName}`, { params: { tail } }),
|
||||
rotateLogs: (service) => api.post('/api/logs/rotate', service ? { service } : {}),
|
||||
getVerbosity: () => api.get('/api/logs/verbosity'),
|
||||
setVerbosity: (levels) => api.put('/api/logs/verbosity', levels),
|
||||
};
|
||||
|
||||
// Container Management API
|
||||
|
||||
Reference in New Issue
Block a user