WebUI: Log-Viewer fuer vergangene Tage und Kopieren
Umsetzung von #564. Das WebUI zeigte bisher nur den Live-Stream seit dem Prozessstart. GET /api/logs lieferte den Verlauf im Speicher, die Oberflaeche nutzte ihn nicht. Der Desktop hat einen Log-Viewer ueber die Tagesdateien. Den gibt es jetzt auch im WebUI. - GET /api/logs/files listet die vorhandenen Tage (Logs/yyyy-MM-dd.jsonl), neueste zuerst. Die .log-Textdateien und fremde Dateien bleiben aussen vor. - GET /api/logs/file filtert nach Level, Korrelations-ID und Text, alle ohne Gross-/Kleinschreibung. Hoechstens 20000 Treffer wie im Desktop, dazu Seitenaufteilung. Unlesbare Zeilen werden uebersprungen und gezaehlt. - Der Dateiname entsteht aus dem geprueften Datum, nie aus der Eingabe. "../../etc/passwd" kommt deshalb gar nicht erst in den Pfad; die Tests halten das fest. - Gelesen wird mit FileShare.ReadWrite, weil der Logger laufend an die Tagesdatei anhaengt. Oberflaeche: "Live" und "Log-Viewer (vergangene Tage)" als Unter-Tabs. "Alles kopieren" im Live-Tab, "Seite kopieren" im Viewer. navigator.clipboard gibt es nur in sicheren Kontexten, ueber LAN/VPN laeuft das WebUI aber per http. Dafuer gibt es einen Rueckweg ueber ein unsichtbares Textfeld, sonst schluege das Kopieren dort still fehl. Logzeilen werden per textContent eingesetzt, nicht per innerHTML: Logtexte enthalten, was andere eingegeben haben. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Richard
@@ -0,0 +1,8 @@
|
||||
namespace PolyTrader.Web.Configuration
|
||||
{
|
||||
/// <summary>
|
||||
/// Ordner der Log-Tagesdateien für den Log-Viewer (#564). Im Betrieb nicht registriert: Dann gilt derselbe
|
||||
/// Ordner, in den der TerminalLogger schreibt. Tests legen ihn in ein temporäres Verzeichnis.
|
||||
/// </summary>
|
||||
public sealed record LogDirectory(string Path);
|
||||
}
|
||||
@@ -1,3 +1,8 @@
|
||||
using PolyTrader.Web.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using System.IO;
|
||||
using System.Globalization;
|
||||
using System.Collections.Generic;
|
||||
using System;
|
||||
using System.Linq;
|
||||
using System.Text.Json;
|
||||
@@ -13,6 +18,17 @@ namespace PolyTrader.Web.Endpoints
|
||||
{
|
||||
public static class LogsEndpoints
|
||||
{
|
||||
/// <summary>Wie im Desktop-Viewer: Schutz bei sehr grossen Tagen.</summary>
|
||||
internal const int MaxMatches = 20000;
|
||||
|
||||
/// <summary>Etwas mehr als ein Jahr - aeltere Tage lassen sich weiter direkt ueber das Datum abrufen.</summary>
|
||||
internal const int MaxListedDays = 400;
|
||||
|
||||
/// <summary>Ordner der Tagesdateien. Ohne Registrierung derselbe wie im TerminalLogger.</summary>
|
||||
private static string ResolveLogDirectory(IServiceProvider sp) =>
|
||||
sp.GetService<LogDirectory>()?.Path
|
||||
?? Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Logs");
|
||||
|
||||
public static IEndpointRouteBuilder MapLogsEndpoints(this IEndpointRouteBuilder routes)
|
||||
{
|
||||
var group = routes.MapGroup("/api/logs");
|
||||
@@ -84,6 +100,95 @@ namespace PolyTrader.Web.Endpoints
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Log-Viewer (#564) ---------------------------------------------------------------
|
||||
// Gegenstueck zum Tab "Log Viewer" im Desktop (TerminalWindow.LoadViewer): Tagesdateien
|
||||
// Logs/yyyy-MM-dd.jsonl, gefiltert nach Level, Korrelations-ID und Text, hoechstens
|
||||
// MaxMatches Treffer. Der Live-Stream zeigt nur, was seit dem Prozessstart aufgelaufen ist.
|
||||
|
||||
group.MapGet("/files", (IServiceProvider sp) =>
|
||||
{
|
||||
string dir = ResolveLogDirectory(sp);
|
||||
if (!Directory.Exists(dir))
|
||||
return Results.Ok(new List<object>());
|
||||
|
||||
var files = Directory.EnumerateFiles(dir, "*.jsonl")
|
||||
.Select(p => (Full: p, Name: Path.GetFileNameWithoutExtension(p)))
|
||||
.Where(f => DateOnly.TryParseExact(f.Name, "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.None, out _))
|
||||
.OrderByDescending(f => f.Name, StringComparer.Ordinal)
|
||||
.Take(MaxListedDays)
|
||||
.Select(f => (object)new { date = f.Name, sizeBytes = new FileInfo(f.Full).Length })
|
||||
.ToList();
|
||||
|
||||
return Results.Ok(files);
|
||||
});
|
||||
|
||||
group.MapGet("/file", (IServiceProvider sp, string? date, string? level, string? cid, string? q, int? page, int? pageSize) =>
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(date)
|
||||
|| !DateOnly.TryParseExact(date.Trim(), "yyyy-MM-dd", CultureInfo.InvariantCulture, DateTimeStyles.None, out var day))
|
||||
return Results.BadRequest(new { error = "Datum fehlt oder ist ungültig – erwartet yyyy-MM-dd." });
|
||||
|
||||
// Der Dateiname entsteht aus dem GEPRUEFTEN Datum, nie aus der Eingabe. Ein "../" kann so
|
||||
// gar nicht erst in den Pfad gelangen.
|
||||
string path = Path.Combine(ResolveLogDirectory(sp), $"{day:yyyy-MM-dd}.jsonl");
|
||||
if (!File.Exists(path))
|
||||
return Results.NotFound(new { error = $"Für den {day:dd.MM.yyyy} gibt es keine Logdatei." });
|
||||
|
||||
string levelFilter = string.IsNullOrWhiteSpace(level) || level.Trim().Equals("Alle", StringComparison.OrdinalIgnoreCase)
|
||||
? string.Empty : level.Trim();
|
||||
string cidFilter = cid?.Trim() ?? string.Empty;
|
||||
string textFilter = q?.Trim() ?? string.Empty;
|
||||
|
||||
var matches = new List<LogJson.ParsedLogLine>();
|
||||
bool truncated = false;
|
||||
int unreadable = 0;
|
||||
|
||||
// FileShare.ReadWrite: Der Logger haengt an die Tagesdatei laufend Zeilen an.
|
||||
using (var fs = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.ReadWrite | FileShare.Delete))
|
||||
using (var reader = new StreamReader(fs))
|
||||
{
|
||||
string? line;
|
||||
while ((line = reader.ReadLine()) != null)
|
||||
{
|
||||
var parsed = LogJson.ParseLine(line);
|
||||
if (parsed == null)
|
||||
{
|
||||
if (!string.IsNullOrWhiteSpace(line)) unreadable++;
|
||||
continue;
|
||||
}
|
||||
if (levelFilter.Length > 0 && !parsed.Level.Equals(levelFilter, StringComparison.OrdinalIgnoreCase)) continue;
|
||||
if (cidFilter.Length > 0 && !parsed.Cid.Contains(cidFilter, StringComparison.OrdinalIgnoreCase)) continue;
|
||||
if (textFilter.Length > 0 && !parsed.Message.Contains(textFilter, StringComparison.OrdinalIgnoreCase)) continue;
|
||||
|
||||
if (matches.Count >= MaxMatches)
|
||||
{
|
||||
truncated = true;
|
||||
break;
|
||||
}
|
||||
matches.Add(parsed);
|
||||
}
|
||||
}
|
||||
|
||||
int size = Math.Clamp(pageSize ?? 500, 50, 2000);
|
||||
int totalPages = Math.Max(1, (int)Math.Ceiling(matches.Count / (double)size));
|
||||
int current = Math.Clamp(page ?? 1, 1, totalPages);
|
||||
|
||||
return Results.Ok(new
|
||||
{
|
||||
date = day.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture),
|
||||
total = matches.Count,
|
||||
truncated,
|
||||
maxMatches = MaxMatches,
|
||||
unreadableLines = unreadable,
|
||||
page = current,
|
||||
pageSize = size,
|
||||
totalPages,
|
||||
items = matches.Skip((current - 1) * size).Take(size)
|
||||
.Select(p => new { time = p.Time, level = p.Level, cid = p.Cid, msg = p.Message })
|
||||
.ToList()
|
||||
});
|
||||
});
|
||||
|
||||
return routes;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1119,6 +1119,13 @@ Wähle ein Profil und stelle mir eine Frage zu deinen Positionen, Risiken oder d
|
||||
|
||||
<!-- VIEW: TERMINAL / LOGS -->
|
||||
<section id="view-logs" class="view-panel">
|
||||
<!-- #564: Live-Stream und Log-Viewer fuer vergangene Tage, wie die beiden Tabs im Desktop. -->
|
||||
<div class="module-tabs" style="margin-bottom: 12px; width: fit-content;">
|
||||
<button class="module-tab-btn active" id="logTabBtn-live" onclick="switchLogTab('live')">Live</button>
|
||||
<button class="module-tab-btn" id="logTabBtn-viewer" onclick="switchLogTab('viewer')">Log-Viewer (vergangene Tage)</button>
|
||||
</div>
|
||||
|
||||
<div id="logTab-live">
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-toolbar">
|
||||
<div style="display: flex; gap: 10px; align-items: center;">
|
||||
@@ -1139,11 +1146,46 @@ Wähle ein Profil und stelle mir eine Frage zu deinen Positionen, Risiken oder d
|
||||
<label class="checkbox-label" style="font-size: 12px; color: var(--muted);">
|
||||
<input type="checkbox" id="chkAutoScroll" checked> Auto-Scroll
|
||||
</label>
|
||||
<button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px;" onclick="copyLiveLogs()">Alles kopieren</button>
|
||||
<button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px;" onclick="clearLogs()">Leeren</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-logs" id="logContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="logTab-viewer" hidden>
|
||||
<div class="terminal-window">
|
||||
<div class="terminal-toolbar" style="flex-wrap: wrap; gap: 10px;">
|
||||
<div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
|
||||
<select id="logViewerDate" class="form-input" style="padding: 4px 8px; font-size: 12px; width: auto;" aria-label="Tag">
|
||||
<option value="">Lade Tage …</option>
|
||||
</select>
|
||||
<select id="logViewerLevel" class="form-input" style="padding: 4px 8px; font-size: 12px; width: auto;" aria-label="Level">
|
||||
<option value="">Alle Level</option>
|
||||
<option>Debug</option>
|
||||
<option>Info</option>
|
||||
<option>Warning</option>
|
||||
<option>Error</option>
|
||||
<option>Trade</option>
|
||||
<option>TradeReasoning</option>
|
||||
</select>
|
||||
<input id="logViewerCid" class="form-input" placeholder="Korrelations-ID" style="padding: 4px 8px; font-size: 12px; width: 150px;" onkeydown="if (event.key === 'Enter') loadLogViewer(1)">
|
||||
<input id="logViewerText" class="form-input" placeholder="Text enthält …" style="padding: 4px 8px; font-size: 12px; width: 190px;" onkeydown="if (event.key === 'Enter') loadLogViewer(1)">
|
||||
<button class="btn btn-primary" style="padding: 4px 10px; font-size: 12px;" onclick="loadLogViewer(1)">Laden</button>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
|
||||
<span id="logViewerStatus" style="font-size: 12px; color: var(--muted);"></span>
|
||||
<button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px;" onclick="changeLogViewerPage(-1)">‹ Zurück</button>
|
||||
<button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px;" onclick="changeLogViewerPage(1)">Weiter ›</button>
|
||||
<button class="btn btn-secondary" style="padding: 4px 8px; font-size: 12px;" onclick="copyLogViewer()">Seite kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="terminal-logs" id="logViewerContainer">
|
||||
<div class="form-desc" style="padding: 12px;">Tag wählen und „Laden“.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- VIEW: MODULES -->
|
||||
|
||||
@@ -658,6 +658,158 @@ function clearLogs() {
|
||||
document.getElementById('logContainer').innerHTML = '';
|
||||
}
|
||||
|
||||
// ==================== Log-Viewer und Kopieren (#564) ====================
|
||||
|
||||
let logViewerState = { page: 1, totalPages: 1, items: [] };
|
||||
let logViewerDaysLoaded = false;
|
||||
|
||||
function switchLogTab(tab) {
|
||||
['live', 'viewer'].forEach(t => {
|
||||
document.getElementById(`logTabBtn-${t}`)?.classList.toggle('active', t === tab);
|
||||
const panel = document.getElementById(`logTab-${t}`);
|
||||
if (panel) panel.hidden = t !== tab;
|
||||
});
|
||||
if (tab === 'viewer' && !logViewerDaysLoaded) loadLogViewerDays();
|
||||
}
|
||||
|
||||
async function loadLogViewerDays() {
|
||||
const select = document.getElementById('logViewerDate');
|
||||
const status = document.getElementById('logViewerStatus');
|
||||
try {
|
||||
const res = await fetch('/api/logs/files');
|
||||
if (!res.ok) throw new Error(await errorText(res));
|
||||
const days = await res.json();
|
||||
select.innerHTML = days.length
|
||||
? days.map(d => `<option value="${escapeHtml(d.date)}">${escapeHtml(formatLogDay(d.date))} · ${escapeHtml(formatBytes(d.sizeBytes))}</option>`).join('')
|
||||
: '<option value="">keine Logdateien</option>';
|
||||
logViewerDaysLoaded = true;
|
||||
} catch (e) {
|
||||
status.textContent = `Tage nicht ladbar: ${e.message}`;
|
||||
}
|
||||
}
|
||||
|
||||
function formatLogDay(iso) {
|
||||
const [y, m, d] = String(iso).split('-');
|
||||
return `${d}.${m}.${y}`;
|
||||
}
|
||||
|
||||
function formatBytes(n) {
|
||||
return n >= 1048576 ? `${(n / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
|
||||
}
|
||||
|
||||
/** Eine Logzeile als DOM-Knoten. textContent statt innerHTML: Logtexte enthalten, was andere eingegeben haben. */
|
||||
function buildLogRow(time, level, msg, cid) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'log-entry';
|
||||
const t = document.createElement('span');
|
||||
t.className = 'log-time';
|
||||
t.textContent = `[${time}]`;
|
||||
const l = document.createElement('span');
|
||||
l.className = 'log-level';
|
||||
l.classList.add(String(level).replace(/[^A-Za-z]/g, ''));
|
||||
l.textContent = level;
|
||||
const m = document.createElement('span');
|
||||
m.className = 'log-msg';
|
||||
m.textContent = cid ? `${msg} ⟨${cid}⟩` : msg;
|
||||
div.append(t, l, m);
|
||||
return div;
|
||||
}
|
||||
|
||||
async function loadLogViewer(page) {
|
||||
const date = document.getElementById('logViewerDate').value;
|
||||
const status = document.getElementById('logViewerStatus');
|
||||
const container = document.getElementById('logViewerContainer');
|
||||
if (!date) {
|
||||
status.textContent = 'Kein Tag gewählt.';
|
||||
return;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({ date, page: String(page || 1), pageSize: '500' });
|
||||
const level = document.getElementById('logViewerLevel').value;
|
||||
const cid = document.getElementById('logViewerCid').value.trim();
|
||||
const q = document.getElementById('logViewerText').value.trim();
|
||||
if (level) params.set('level', level);
|
||||
if (cid) params.set('cid', cid);
|
||||
if (q) params.set('q', q);
|
||||
|
||||
status.textContent = 'Lade …';
|
||||
try {
|
||||
const res = await fetch(`/api/logs/file?${params}`);
|
||||
if (!res.ok) throw new Error(await errorText(res));
|
||||
const data = await res.json();
|
||||
logViewerState = { page: data.page, totalPages: data.totalPages, items: data.items };
|
||||
|
||||
container.innerHTML = '';
|
||||
// ts ist ISO mit Offset ("2026-09-12T14:03:22.123+02:00"); angezeigt wird die Uhrzeit.
|
||||
data.items.forEach(item => container.appendChild(
|
||||
buildLogRow(item.time.length >= 19 ? item.time.substring(11, 19) : item.time, item.level, item.msg, item.cid)));
|
||||
if (!data.items.length)
|
||||
container.innerHTML = '<div class="form-desc" style="padding: 12px;">Keine Einträge für diese Auswahl.</div>';
|
||||
container.scrollTop = 0;
|
||||
|
||||
let text = `${data.total.toLocaleString('de-DE')} Einträge · Seite ${data.page}/${data.totalPages}`;
|
||||
if (data.truncated) text += ` · nach ${data.maxMatches.toLocaleString('de-DE')} Treffern abgeschnitten – Filter enger fassen`;
|
||||
if (data.unreadableLines) text += ` · ${data.unreadableLines} unlesbare Zeilen übersprungen`;
|
||||
status.textContent = text;
|
||||
} catch (e) {
|
||||
container.innerHTML = '';
|
||||
status.textContent = e.message;
|
||||
}
|
||||
}
|
||||
|
||||
function changeLogViewerPage(delta) {
|
||||
const next = logViewerState.page + delta;
|
||||
if (next < 1 || next > logViewerState.totalPages) return;
|
||||
loadLogViewer(next);
|
||||
}
|
||||
|
||||
/**
|
||||
* navigator.clipboard gibt es nur in sicheren Kontexten (https oder localhost). Über LAN/VPN läuft das
|
||||
* WebUI per http – ohne diesen Rückweg über ein unsichtbares Textfeld schlüge das Kopieren dort still fehl.
|
||||
*/
|
||||
async function copyText(text) {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
}
|
||||
const area = document.createElement('textarea');
|
||||
area.value = text;
|
||||
area.setAttribute('readonly', '');
|
||||
area.style.position = 'fixed';
|
||||
area.style.opacity = '0';
|
||||
document.body.appendChild(area);
|
||||
area.select();
|
||||
const ok = document.execCommand('copy');
|
||||
area.remove();
|
||||
if (!ok) throw new Error('Die Zwischenablage ist in diesem Browser nicht erreichbar.');
|
||||
}
|
||||
|
||||
async function copyWithFeedback(text, okMessage) {
|
||||
if (!text) {
|
||||
alert('Nichts zu kopieren.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await copyText(text);
|
||||
alert(okMessage);
|
||||
} catch (e) {
|
||||
alert(`Kopieren fehlgeschlagen: ${e.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyLiveLogs() {
|
||||
const filter = document.getElementById('logLevelFilter').value;
|
||||
const visible = allLogs.filter(e => filter === 'ALL' || e.level.toUpperCase() === filter);
|
||||
await copyWithFeedback(visible.map(e => `[${e.time}] ${e.level} ${e.msg}`).join('\n'), `${visible.length} Zeilen kopiert.`);
|
||||
}
|
||||
|
||||
async function copyLogViewer() {
|
||||
const items = logViewerState.items;
|
||||
await copyWithFeedback(
|
||||
items.map(e => `[${e.time}] ${e.level}${e.cid ? ` ⟨${e.cid}⟩` : ''} ${e.msg}`).join('\n'),
|
||||
`${items.length} Zeilen kopiert.`);
|
||||
}
|
||||
|
||||
// Settings View
|
||||
async function loadSettings() {
|
||||
loadServerSettings();
|
||||
|
||||
Reference in New Issue
Block a user