feat: persistent container log collection, unified rotation, logs page redesign
- log_manager: add collect_container_logs (appends docker logs to container_<name>.log), get_container_log_lines, rotate_container_log, get_all_log_file_infos - app.py: new endpoints /api/logs/files (all log file sizes), /api/logs/containers/<name> (collect+return stored container logs); rotate endpoint now handles both service and container logs - Logs page: split into API Service Logs tab (python manager logs) and Container Logs tab (persistent docker stdout/stderr); Statistics tab shows both kinds with per-row rotate; each tab has a description explaining what it shows and where files live - wireguard_manager: test_connectivity peer_ip=None guard (already in previous commit, now rebuilt) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+184
-226
@@ -1,61 +1,58 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
Activity, Clock, FileText, AlertTriangle, Search, RefreshCw,
|
||||
RotateCcw, Box, BarChart2, Download, ChevronDown, ChevronUp,
|
||||
Filter
|
||||
RotateCcw, Box, BarChart2
|
||||
} from 'lucide-react';
|
||||
import { monitoringAPI, logsAPI, containerAPI } from '../services/api';
|
||||
|
||||
const SERVICES = ['ALL', 'network', 'wireguard', 'routing', 'email', 'calendar', 'files', 'vault', 'container'];
|
||||
const API_SERVICES = ['ALL', 'network', 'wireguard', 'routing', 'email', 'calendar', 'files', 'vault', 'container', 'api'];
|
||||
const LEVELS = ['ALL', 'DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'];
|
||||
const LEVEL_COLORS = {
|
||||
DEBUG: 'text-gray-400',
|
||||
DEBUG: 'text-gray-500',
|
||||
INFO: 'text-blue-400',
|
||||
WARNING: 'text-yellow-400',
|
||||
ERROR: 'text-red-400',
|
||||
CRITICAL: 'text-red-600 font-bold',
|
||||
CRITICAL: 'text-red-500 font-bold',
|
||||
};
|
||||
|
||||
function LevelBadge({ level }) {
|
||||
const color = LEVEL_COLORS[level?.toUpperCase()] || 'text-gray-300';
|
||||
return <span className={`font-mono text-xs ${color}`}>[{level}]</span>;
|
||||
const cls = LEVEL_COLORS[level?.toUpperCase()] || 'text-gray-400';
|
||||
return <span className={`font-mono text-xs shrink-0 ${cls}`}>[{level || '?'}]</span>;
|
||||
}
|
||||
|
||||
function LogLine({ entry }) {
|
||||
if (entry.raw_line) {
|
||||
return <div className="font-mono text-xs text-gray-300 py-0.5">{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">
|
||||
<span className="text-gray-500 shrink-0">{entry.timestamp?.slice(0, 19)}</span>
|
||||
<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>
|
||||
<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: Service Logs ───────────────────────────────────────────────────────
|
||||
function ServiceLogsTab() {
|
||||
const [service, setService] = useState('network');
|
||||
// ── Tab: API Service Logs ───────────────────────────────────────────────────
|
||||
function ApiServiceLogsTab() {
|
||||
const [service, setService] = useState('ALL');
|
||||
const [level, setLevel] = useState('ALL');
|
||||
const [lines, setLines] = useState(100);
|
||||
const [query, setQuery] = useState('');
|
||||
const [logs, setLogs] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [searchMode, setSearchMode] = useState(false);
|
||||
const intervalRef = useRef(null);
|
||||
const bottomRef = useRef(null);
|
||||
|
||||
const fetch = useCallback(async () => {
|
||||
const doFetch = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const allServices = SERVICES.filter(s => s !== 'ALL');
|
||||
if (service === 'ALL' || (searchMode && query)) {
|
||||
const allSvcs = API_SERVICES.filter(s => s !== 'ALL');
|
||||
if (service === 'ALL' || query) {
|
||||
const res = await logsAPI.searchLogs({
|
||||
query: query || '',
|
||||
services: service === 'ALL' ? allServices : [service],
|
||||
services: service === 'ALL' ? allSvcs : [service],
|
||||
level: level === 'ALL' ? undefined : level,
|
||||
});
|
||||
setLogs(res.data.results || []);
|
||||
@@ -72,99 +69,69 @@ function ServiceLogsTab() {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [service, level, lines, query, searchMode]);
|
||||
}, [service, level, lines, query]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch();
|
||||
}, [service, level, lines]);
|
||||
useEffect(() => { doFetch(); }, [service, level, lines]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh) {
|
||||
intervalRef.current = setInterval(fetch, 5000);
|
||||
intervalRef.current = setInterval(doFetch, 5000);
|
||||
} else {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
return () => clearInterval(intervalRef.current);
|
||||
}, [autoRefresh, fetch]);
|
||||
}, [autoRefresh, doFetch]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 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)}
|
||||
>
|
||||
{SERVICES.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={level}
|
||||
onChange={e => setLevel(e.target.value)}
|
||||
>
|
||||
<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>)}
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<div className="flex gap-1 flex-1 min-w-48">
|
||||
{service !== 'ALL' && (
|
||||
<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>
|
||||
)}
|
||||
<div className="flex gap-1 flex-1 min-w-40">
|
||||
<input
|
||||
className="border rounded px-2 py-1 text-sm flex-1"
|
||||
placeholder="Search…"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === 'Enter') { setSearchMode(true); fetch(); } }}
|
||||
onKeyDown={e => e.key === 'Enter' && doFetch()}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-secondary text-sm px-2 py-1"
|
||||
onClick={() => { setSearchMode(true); fetch(); }}
|
||||
title="Search"
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
</button>
|
||||
{query && (
|
||||
<button
|
||||
className="btn btn-secondary text-sm px-2 py-1"
|
||||
onClick={() => { setQuery(''); setSearchMode(false); }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
<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>}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`btn text-sm px-2 py-1 ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
title="Auto-refresh 5s"
|
||||
onClick={() => setAutoRefresh(v => !v)}
|
||||
title="Auto-refresh every 5s"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${autoRefresh ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
|
||||
<button className="btn btn-secondary text-sm px-2 py-1" onClick={fetch} title="Refresh">
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="btn btn-secondary px-2 py-1 text-sm" onClick={doFetch}><RefreshCw className="h-4 w-4" /></button>
|
||||
</div>
|
||||
|
||||
{/* Log output */}
|
||||
<div className="bg-gray-900 rounded-lg p-3 h-[500px] overflow-y-auto">
|
||||
{loading && logs.length === 0 ? (
|
||||
<div className="text-gray-400 text-sm">Loading…</div>
|
||||
) : logs.length === 0 ? (
|
||||
<div className="text-gray-500 text-sm">No log entries found.</div>
|
||||
<div className="text-gray-500 text-sm">No entries found.</div>
|
||||
) : (
|
||||
logs.map((entry, i) => <LogLine key={i} entry={entry} />)
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{logs.length} entries</div>
|
||||
<div className="text-xs text-gray-400">{logs.length} entries</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -174,7 +141,7 @@ function ContainerLogsTab() {
|
||||
const [containers, setContainers] = useState([]);
|
||||
const [selected, setSelected] = useState('cell-api');
|
||||
const [tail, setTail] = useState(100);
|
||||
const [logs, setLogs] = useState('');
|
||||
const [lines, setLines] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const intervalRef = useRef(null);
|
||||
@@ -182,88 +149,92 @@ function ContainerLogsTab() {
|
||||
useEffect(() => {
|
||||
containerAPI.listContainers()
|
||||
.then(res => {
|
||||
const names = (res.data || []).map(c => c.name || c.Names?.[0]?.replace('/', '')).filter(Boolean);
|
||||
const names = (res.data || [])
|
||||
.map(c => c.name || c.Names?.[0]?.replace('/', ''))
|
||||
.filter(Boolean)
|
||||
.sort();
|
||||
setContainers(names);
|
||||
if (names.length > 0 && !names.includes(selected)) setSelected(names[0]);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
const fetch = useCallback(async () => {
|
||||
const doFetch = useCallback(async () => {
|
||||
if (!selected) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await containerAPI.getContainerLogs(selected, tail);
|
||||
setLogs(res.data.logs || '');
|
||||
const res = await logsAPI.getStoredContainerLogs(selected, tail);
|
||||
setLines(res.data.lines || []);
|
||||
} catch (e) {
|
||||
setLogs(`Error: ${e.message}`);
|
||||
setLines([`Error: ${e.message}`]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selected, tail]);
|
||||
|
||||
useEffect(() => { fetch(); }, [selected, tail]);
|
||||
useEffect(() => { doFetch(); }, [selected, tail]);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoRefresh) {
|
||||
intervalRef.current = setInterval(fetch, 5000);
|
||||
intervalRef.current = setInterval(doFetch, 5000);
|
||||
} else {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
return () => clearInterval(intervalRef.current);
|
||||
}, [autoRefresh, fetch]);
|
||||
}, [autoRefresh, doFetch]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<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.map(c => <option key={c} value={c}>{c}</option>)
|
||||
: <option value="cell-api">cell-api</option>}
|
||||
</select>
|
||||
<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>
|
||||
|
||||
<select
|
||||
className="border rounded px-2 py-1 text-sm"
|
||||
value={tail}
|
||||
onChange={e => setTail(Number(e.target.value))}
|
||||
>
|
||||
<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>
|
||||
))}
|
||||
</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 text-sm px-2 py-1 ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
className={`btn px-2 py-1 text-sm ${autoRefresh ? 'btn-primary' : 'btn-secondary'}`}
|
||||
title="Auto-refresh 5s"
|
||||
onClick={() => setAutoRefresh(v => !v)}
|
||||
title="Auto-refresh every 5s"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${autoRefresh ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
|
||||
<button className="btn btn-secondary text-sm px-2 py-1" onClick={fetch}>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</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-400 rounded-lg p-3 h-[500px] overflow-y-auto font-mono text-xs whitespace-pre-wrap">
|
||||
{loading ? 'Loading…' : logs || 'No logs.'}
|
||||
<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 ? (
|
||||
<span className="text-gray-400">Loading…</span>
|
||||
) : lines.length === 0 ? (
|
||||
<span className="text-gray-500">No stored logs. Click refresh to collect.</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>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tab: Statistics & Rotation ──────────────────────────────────────────────
|
||||
function StatisticsTab() {
|
||||
const [stats, setStats] = useState({});
|
||||
const [files, setFiles] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [rotating, setRotating] = useState(null);
|
||||
const [msg, setMsg] = useState('');
|
||||
|
||||
const fetch = async () => {
|
||||
const doFetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await logsAPI.getStatistics();
|
||||
setStats(res.data || {});
|
||||
const res = await logsAPI.getLogFiles();
|
||||
setFiles(res.data || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
@@ -271,37 +242,84 @@ function StatisticsTab() {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, []);
|
||||
useEffect(() => { doFetch(); }, []);
|
||||
|
||||
const rotate = async (service) => {
|
||||
const label = service || 'all services';
|
||||
if (!window.confirm(`Rotate logs for ${label}? Current log file will be archived and a new one started.`)) return;
|
||||
setRotating(service || 'all');
|
||||
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);
|
||||
setMsg('');
|
||||
try {
|
||||
await logsAPI.rotateLogs(service || null);
|
||||
await fetch();
|
||||
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();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setMsg(`Error: ${e.message}`);
|
||||
} finally {
|
||||
setRotating(null);
|
||||
}
|
||||
};
|
||||
|
||||
const fmtSize = (bytes) => {
|
||||
const fmtSize = bytes => {
|
||||
if (!bytes) return '0 B';
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
|
||||
if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
return `${(bytes / 1024 ** 2).toFixed(2)} MB`;
|
||||
};
|
||||
|
||||
const services = Object.keys(stats);
|
||||
const serviceFiles = files.filter(f => f.kind === 'service');
|
||||
const containerFiles = files.filter(f => f.kind === 'container');
|
||||
|
||||
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">
|
||||
<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>
|
||||
</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}
|
||||
>
|
||||
<RotateCcw className={`h-3 w-3 inline ${rotating === f.name ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</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 File Statistics</h3>
|
||||
<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={fetch}>
|
||||
<button className="btn btn-secondary text-sm" onClick={doFetch}>
|
||||
<RefreshCw className="h-4 w-4 mr-1 inline" /> Refresh
|
||||
</button>
|
||||
<button
|
||||
@@ -314,63 +332,13 @@ function StatisticsTab() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-gray-500 text-sm">Loading…</div>
|
||||
) : services.length === 0 ? (
|
||||
<div className="text-gray-500 text-sm">No log statistics available.</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm border rounded">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="px-3 py-2 text-left">Service</th>
|
||||
<th className="px-3 py-2 text-right">File Size</th>
|
||||
<th className="px-3 py-2 text-right">Total Entries</th>
|
||||
<th className="px-3 py-2 text-right">Errors</th>
|
||||
<th className="px-3 py-2 text-right">Warnings</th>
|
||||
<th className="px-3 py-2 text-left">Last Entry</th>
|
||||
<th className="px-3 py-2 text-center">Rotate</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{services.map(svc => {
|
||||
const s = stats[svc];
|
||||
const hasError = s?.error;
|
||||
const errorCount = s?.level_counts?.ERROR || 0;
|
||||
const warnCount = s?.level_counts?.WARNING || 0;
|
||||
return (
|
||||
<tr key={svc} className="border-t hover:bg-gray-50">
|
||||
<td className="px-3 py-2 font-medium">{svc}</td>
|
||||
<td className="px-3 py-2 text-right font-mono">
|
||||
{hasError ? '—' : fmtSize(s.file_size)}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-right">
|
||||
{hasError ? <span className="text-red-500 text-xs">{s.error}</span> : s.total_entries}
|
||||
</td>
|
||||
<td className={`px-3 py-2 text-right ${errorCount > 0 ? 'text-red-600 font-bold' : ''}`}>
|
||||
{hasError ? '—' : errorCount}
|
||||
</td>
|
||||
<td className={`px-3 py-2 text-right ${warnCount > 0 ? 'text-yellow-600' : ''}`}>
|
||||
{hasError ? '—' : warnCount}
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono text-xs text-gray-500">
|
||||
{hasError ? '—' : (s.last_entry?.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(svc)}
|
||||
disabled={rotating === svc}
|
||||
>
|
||||
<RotateCcw className={`h-3 w-3 ${rotating === svc ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
);
|
||||
@@ -381,7 +349,7 @@ function HealthHistoryTab() {
|
||||
const [healthHistory, setHealthHistory] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetch = async () => {
|
||||
const doFetch = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await monitoringAPI.getHealthHistory();
|
||||
@@ -393,26 +361,21 @@ function HealthHistoryTab() {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetch(); }, []);
|
||||
useEffect(() => { doFetch(); }, []);
|
||||
|
||||
const ServiceCol = ({ data }) => {
|
||||
const ok = data?.status === 'online' || data?.running === true;
|
||||
return ok
|
||||
? <span className="text-green-600">OK</span>
|
||||
: <span className="text-red-600 font-bold">Down</span>;
|
||||
};
|
||||
const SvcCol = ({ data }) => (data?.status === 'online' || data?.running === true)
|
||||
? <span className="text-green-600">OK</span>
|
||||
: <span className="text-red-600 font-bold">Down</span>;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium text-gray-900">Health History (last 100 checks)</h3>
|
||||
<button className="btn btn-secondary text-sm" onClick={fetch}>
|
||||
<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>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div className="text-gray-500 text-sm">Loading…</div>
|
||||
) : (
|
||||
{loading ? <div className="text-gray-500 text-sm">Loading…</div> : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-sm">
|
||||
<thead>
|
||||
@@ -426,23 +389,21 @@ function HealthHistoryTab() {
|
||||
{healthHistory.map((h, i) => (
|
||||
<tr key={i} className={h.alerts?.length > 0 ? 'bg-red-50' : ''}>
|
||||
<td className="px-2 py-1 font-mono text-xs">{h.timestamp}</td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.network} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.wireguard} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.email} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.calendar} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.files} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.routing} /></td>
|
||||
<td className="px-2 py-1"><ServiceCol data={h.vault} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.network} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.wireguard} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.email} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.calendar} /></td>
|
||||
<td className="px-2 py-1"><SvcCol data={h.files} /></td>
|
||||
<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.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}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-green-600">—</span>
|
||||
)}
|
||||
{h.alerts?.length > 0
|
||||
? 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}
|
||||
</span>
|
||||
))
|
||||
: <span className="text-green-600">—</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -454,33 +415,30 @@ function HealthHistoryTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Logs Page ──────────────────────────────────────────────────────────
|
||||
// ── Main ────────────────────────────────────────────────────────────────────
|
||||
const TABS = [
|
||||
{ id: 'service', label: 'Service Logs', icon: FileText },
|
||||
{ id: 'api', label: 'API Service Logs', icon: FileText },
|
||||
{ id: 'container', label: 'Container Logs', icon: Box },
|
||||
{ id: 'statistics', label: 'Statistics & Rotation', icon: BarChart2 },
|
||||
{ id: 'health', label: 'Health History', icon: Activity },
|
||||
];
|
||||
|
||||
function Logs() {
|
||||
const [tab, setTab] = useState('service');
|
||||
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">Search service logs, view container output, and manage log rotation.</p>
|
||||
<p className="mt-1 text-gray-600">API service logs, container stdout/stderr, rotation, and health history.</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-4 flex gap-2 border-b">
|
||||
{TABS.map(({ id, label, icon: Icon }) => (
|
||||
<button
|
||||
key={id}
|
||||
className={`px-4 py-2 text-sm font-medium flex items-center gap-1 border-b-2 transition-colors ${
|
||||
tab === id
|
||||
? 'border-primary-600 text-primary-700'
|
||||
: 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
tab === id ? 'border-primary-600 text-primary-700' : 'border-transparent text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={() => setTab(id)}
|
||||
>
|
||||
@@ -491,7 +449,7 @@ function Logs() {
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
{tab === 'service' && <ServiceLogsTab />}
|
||||
{tab === 'api' && <ApiServiceLogsTab />}
|
||||
{tab === 'container' && <ContainerLogsTab />}
|
||||
{tab === 'statistics' && <StatisticsTab />}
|
||||
{tab === 'health' && <HealthHistoryTab />}
|
||||
|
||||
@@ -194,7 +194,10 @@ export const logsAPI = {
|
||||
exportLogs: (data) => api.post('/api/logs/export', data),
|
||||
getStatistics: (service) =>
|
||||
api.get('/api/logs/statistics', service ? { params: { service } } : {}),
|
||||
rotateLogs: (service) => api.post('/api/logs/rotate', service ? { 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 } }),
|
||||
};
|
||||
|
||||
// Container Management API
|
||||
|
||||
Reference in New Issue
Block a user