sami7777/dashcaddy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(logs): error-log parser fix + dedicated /logs page (DC-051) [UNJUDGED]

Browse Source
This commit is contained in:
Hermes
2026-08-17 19:10:44 -07:00
parent 5f95fdcf70
commit 99bb3f6db8
6 changed files with 593 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
status/index.html
+1
View File
@@ -203,6 +203,7 @@
<div class="tools-section-items">
<button id="view-error-logs" aria-label="View error logs">📋 Error Logs</button>
<button id="view-container-logs" aria-label="View container logs">📜 Container Logs</button>
<a id="view-logs-page" aria-label="Dedicated logs page" href="/logs.html" target="_blank" rel="noopener" style="text-decoration:none;color:inherit">📄 Logs Page</a>
<button id="manage-notifications" aria-label="Manage notifications">🔔 Alerts</button>
<button id="audit-log-btn" aria-label="Audit log">📜 Audit</button>
<button id="security-center-btn" aria-label="Security Center">🛡️ Security</button>
status/js/error-logs.js
+85 -13
View File
@@ -1,40 +1,110 @@
// ========== ERROR LOG VIEWER ==========
// DC-051: The /api/v1/error-logs route now parses the unified-logger
// ── (U+2500) separator (verified 2026-08-18 — previous '=' splitter
// returned ZERO entries and the modal always rendered "No errors logged").
// The modal now renders the captured `details` (stack trace + req context)
// and offers a Level filter + tail cap mirroring the audit-log viewer
// (DC-050). Mirrors the audit-log-viewer shape (5f95fdc).
(function() {
// Inject modal HTML
injectModal('error-log-modal', '<div id="error-log-modal" class="logs-modal"><div class="logs-modal-content"><div class="logs-header"><h3>📋 Error Logs</h3><div class="logs-controls"><button id="error-log-refresh" style="padding:4px 12px!important;font-size:.85rem!important">🔄 Refresh</button><button id="error-log-clear" style="padding:4px 12px!important;font-size:.85rem!important;background:color-mix(in srgb,var(--bad-fg) 15%,transparent)!important;border-color:var(--bad-fg)!important;color:var(--bad-fg)!important">🗑️ Clear</button><button id="error-log-close" class="close-btn">✕</button></div></div><div class="logs-container"><div id="error-log-content" class="logs-content"><div class="logs-loading">Loading error logs...</div></div></div></div></div>');
const MAX_LEVELS = ['ERR', 'WRN', 'INF', 'DBG'];
injectModal('error-log-modal', [
'<div id="error-log-modal" class="logs-modal">',
' <div class="logs-modal-content">',
' <div class="logs-header">',
' <h3>📋 Error Logs</h3>',
' <div class="logs-controls">',
' <select id="error-log-level" aria-label="Filter by level" style="padding:4px 8px!important;font-size:.85rem!important">',
' <option value="">All levels</option>',
' <option value="ERR">Errors</option>',
' <option value="WRN">Warnings</option>',
' <option value="INF">Info</option>',
' <option value="DBG">Debug</option>',
' </select>',
' <select id="error-log-tail" aria-label="Tail length" style="padding:4px 8px!important;font-size:.85rem!important">',
' <option value="50">Last 50</option>',
' <option value="100" selected>Last 100</option>',
' <option value="200">Last 200</option>',
' <option value="500">Last 500</option>',
' </select>',
' <button id="error-log-refresh" style="padding:4px 12px!important;font-size:.85rem!important">🔄 Refresh</button>',
' <button id="error-log-clear" style="padding:4px 12px!important;font-size:.85rem!important;background:color-mix(in srgb,var(--bad-fg) 15%,transparent)!important;border-color:var(--bad-fg)!important;color:var(--bad-fg)!important">🗑️ Clear</button>',
' <button id="error-log-close" class="close-btn">✕</button>',
' </div>',
' </div>',
' <div class="logs-container">',
' <div id="error-log-meta" class="logs-meta" style="padding:6px 12px;color:var(--muted);font-size:.8rem;border-bottom:1px solid var(--border)"></div>',
' <div id="error-log-content" class="logs-content"><div class="logs-loading">Loading error logs...</div></div>',
' </div>',
' </div>',
'</div>',
].join(''));
const modal = document.getElementById('error-log-modal');
const content = document.getElementById('error-log-content');
const meta = document.getElementById('error-log-meta');
const viewBtn = document.getElementById('view-error-logs');
const refreshBtn = document.getElementById('error-log-refresh');
const clearBtn = document.getElementById('error-log-clear');
const closeBtn = document.getElementById('error-log-close');
const levelSelect = /** @type {HTMLSelectElement|null} */ (document.getElementById('error-log-level'));
const tailSelect = /** @type {HTMLSelectElement|null} */ (document.getElementById('error-log-tail'));
function levelClass(level) {
const L = (level || '').toUpperCase();
if (L === 'ERR') return 'log-entry error';
if (L === 'WRN') return 'log-entry warn';
if (L === 'INF') return 'log-entry info';
if (L === 'DBG') return 'log-entry debug';
return 'log-entry';
}
function formatBytes(n) {
if (!Number.isFinite(n) || n <= 0) return '0 B';
if (n < 1024) return n + ' B';
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KiB';
return (n / 1024 / 1024).toFixed(2) + ' MiB';
}
async function loadErrorLogs() {
content.innerHTML = '<div class="logs-loading">Loading error logs...</div>';
meta.textContent = '';
const tail = encodeURIComponent(tailSelect.value || '100');
const level = levelSelect.value || '';
const qs = `tail=${tail}` + (level ? `&level=${encodeURIComponent(level)}` : '');
try {
const response = await fetch('/api/v1/error-logs');
const response = await fetch('/api/v1/error-logs?' + qs);
const data = await response.json();
if (data.success && data.logs) {
if (data.logs.length === 0) {
content.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--muted);">✅ No errors logged! Everything is working smoothly.</div>';
} else {
content.innerHTML = data.logs.map(log => {
content.innerHTML = data.logs.map((log, idx) => {
const date = new Date(log.timestamp).toLocaleString();
const lvl = (log.level || 'ERR').toUpperCase();
const detailsId = `error-log-details-${idx}`;
const details = log.details ? escapeHtml(log.details) : null;
const ctx = log.context ? `<strong>${escapeHtml(log.context)}</strong>: ` : '';
const msg = escapeHtml(log.message || '');
return `
<div class="log-entry error">
<span class="log-timestamp">${date}</span>
<span class="log-level">ERROR</span>
<div class="${levelClass(log.level)}">
<span class="log-timestamp">${escapeHtml(date)}</span>
<span class="log-level">${escapeHtml(lvl)}</span>
<div class="log-message">
<strong>${escapeHtml(log.context)}</strong>: ${escapeHtml(log.error)}
${log.details ? `<br><small style="opacity: 0.7;">${escapeHtml(log.details)}</small>` : ''}
${ctx}${msg}
${details ? `<br><details id="${detailsId}"><summary style="cursor:pointer;opacity:.7">stack + request context</summary><pre style="margin:6px 0 0;font-size:.75rem;background:var(--card-bg);padding:8px;border-radius:4px;overflow-x:auto">${details}</pre></details>` : ''}
</div>
</div>
`;
}).join('');
}
const sizeStr = formatBytes(data.totalSize);
const truncStr = data.truncated ? ' (showing last 2 MiB)' : '';
const returnedStr = `${data.returned ?? data.logs.length}`;
meta.textContent = `${returnedStr} entries · ${sizeStr}${truncStr}`;
} else {
content.innerHTML = '<div style="padding: 20px; color: var(--bad-fg);">❌ Failed to load error logs</div>';
}
@@ -49,7 +119,7 @@
try {
const response = await secureFetch('/api/v1/error-logs', { method: 'DELETE' });
const data = await response.json();
if (data.success) {
showNotification('✅ Error logs cleared', 'success', 3000);
loadErrorLogs();
@@ -68,5 +138,7 @@
refreshBtn?.addEventListener('click', loadErrorLogs);
clearBtn?.addEventListener('click', clearErrorLogs);
levelSelect?.addEventListener('change', loadErrorLogs);
tailSelect?.addEventListener('change', loadErrorLogs);
wireModal(modal, closeBtn);
})();
})();
status/js/logs-page.js
+172
View File
@@ -0,0 +1,172 @@
// Logs page (status/logs.html) — dedicated admin log viewer.
// Two tabs: Error log (calls /api/v1/error-logs) + Container (calls
// /api/v1/logs/containers + /api/v1/logs/container/:id). Mirrors the
// /api/v1/error-logs parser fix from DC-051 — U+2500 separator, capped
// tail, level filter.
(function() {
'use strict';
function escapeHtml(s) {
if (s === null || s === undefined) return '';
return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function formatBytes(n) {
if (!Number.isFinite(n) || n <= 0) return '0 B';
if (n < 1024) return n + ' B';
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KiB';
return (n / 1024 / 1024).toFixed(2) + ' MiB';
}
const out = document.getElementById('output');
const meta = document.getElementById('meta');
const tabError = document.getElementById('tab-error');
const tabContainer = document.getElementById('tab-container');
const errorCtrls = document.getElementById('error-controls');
const containerCtrls = document.getElementById('container-controls');
let activeTab = 'error';
let containers = [];
function switchTab(tab) {
activeTab = tab;
tabError.classList.toggle('active', tab === 'error');
tabContainer.classList.toggle('active', tab === 'container');
errorCtrls.style.display = tab === 'error' ? 'flex' : 'none';
containerCtrls.style.display = tab === 'container' ? 'flex' : 'none';
if (tab === 'error') loadErrorLog();
else loadContainerList();
}
async function fetchJson(url, opts) {
const r = await fetch(url, opts);
const data = await r.json().catch(() => ({}));
if (!r.ok || (data && data.success === false)) {
throw new Error((data && (data.error || data.message)) || `HTTP ${r.status}`);
}
return data;
}
async function loadErrorLog() {
const tailEl = /** @type {HTMLSelectElement} */ (document.getElementById('tail'));
const levelEl = /** @type {HTMLSelectElement} */ (document.getElementById('level'));
const tail = tailEl.value;
const level = levelEl.value;
let qs = `tail=${encodeURIComponent(tail)}`;
if (level) qs += '&level=' + encodeURIComponent(level);
out.innerHTML = '<div class="logs-loading">Loading error log…</div>';
meta.textContent = '';
try {
const data = await fetchJson('/api/v1/error-logs?' + qs);
const logs = data.logs || [];
if (logs.length === 0) {
out.innerHTML = '<div class="empty">✅ No errors logged</div>';
} else {
out.innerHTML = logs.map((log, idx) => {
const date = new Date(log.timestamp).toLocaleString();
const lvl = (log.level || 'ERR').toUpperCase();
const cls = ['ERR','WRN','INF','DBG'].includes(lvl) ? lvl.toLowerCase() : 'error';
const details = log.details ? escapeHtml(log.details) : null;
return `
<div class="log-entry ${cls}">
<span class="log-timestamp">${escapeHtml(date)}</span>
<span class="log-level">${escapeHtml(lvl)}</span>
<div class="log-message">
<strong>${escapeHtml(log.context || '')}</strong>: ${escapeHtml(log.message || '')}
${details ? `<details><summary style="cursor:pointer;opacity:.7">stack + request context</summary><pre>${details}</pre></details>` : ''}
</div>
</div>
`;
}).join('');
}
const sizeStr = formatBytes(data.totalSize);
const truncStr = data.truncated ? ' (last 2 MiB)' : '';
const returnedStr = data.returned ?? logs.length;
meta.textContent = `${returnedStr} entries · ${sizeStr}${truncStr}`;
} catch (err) {
out.innerHTML = `<div class="empty">❌ ${escapeHtml(err.message)}</div>`;
}
}
async function clearErrorLog() {
if (!confirm('Clear all error logs?')) return;
try {
await fetchJson('/api/v1/error-logs', { method: 'DELETE' });
meta.textContent = '✅ cleared';
loadErrorLog();
} catch (err) {
meta.textContent = '❌ ' + err.message;
}
}
async function loadContainerList() {
const sel = document.getElementById('container-select');
out.innerHTML = '<div class="logs-loading">Loading containers…</div>';
document.getElementById('container-meta').textContent = '';
try {
const data = await fetchJson('/api/v1/logs/containers');
containers = data.containers || [];
sel.innerHTML = containers.map(c => {
const name = c.name || c.id;
const state = (c.status || 'unknown');
return `<option value="${escapeHtml(c.id)}">${escapeHtml(name)} (${escapeHtml(state)})</option>`;
}).join('');
if (containers.length === 0) {
out.innerHTML = '<div class="empty">No containers running</div>';
return;
}
loadContainerLog();
} catch (err) {
out.innerHTML = `<div class="empty">❌ ${escapeHtml(err.message)}</div>`;
}
}
async function loadContainerLog() {
const sel = /** @type {HTMLSelectElement} */ (document.getElementById('container-select'));
const tailEl = /** @type {HTMLSelectElement} */ (document.getElementById('container-tail'));
const tail = tailEl.value;
const id = sel.value;
if (!id) {
out.innerHTML = '<div class="empty">Select a container</div>';
return;
}
out.innerHTML = '<div class="logs-loading">Loading container logs…</div>';
document.getElementById('container-meta').textContent = '';
try {
const data = await fetchJson(`/api/v1/logs/container/${encodeURIComponent(id)}?tail=${encodeURIComponent(tail)}&timestamps=true`);
const logs = data.logs || [];
if (logs.length === 0) {
out.innerHTML = '<div class="empty">No log lines</div>';
} else {
out.innerHTML = logs.map(l => {
const cls = l.stream === 'stderr' ? 'error' : 'info';
const ts = l.timestamp || (data.logs.length ? '' : '');
return `
<div class="log-entry ${cls}">
${ts ? `<span class="log-timestamp">${escapeHtml(new Date(ts).toLocaleString())}</span>` : ''}
<span class="log-level">${l.stream === 'stderr' ? 'ERR' : 'OUT'}</span>
<div class="log-message"><pre style="margin:0;white-space:pre-wrap">${escapeHtml(l.text)}</pre></div>
</div>
`;
}).join('');
}
const containerName = data.containerName || '';
document.getElementById('container-meta').textContent = `${escapeHtml(containerName)} · ${logs.length} lines`;
} catch (err) {
out.innerHTML = `<div class="empty">❌ ${escapeHtml(err.message)}</div>`;
}
}
tabError.addEventListener('click', () => switchTab('error'));
tabContainer.addEventListener('click', () => switchTab('container'));
document.getElementById('refresh').addEventListener('click', loadErrorLog);
document.getElementById('clear').addEventListener('click', clearErrorLog);
document.getElementById('level').addEventListener('change', loadErrorLog);
document.getElementById('tail').addEventListener('change', loadErrorLog);
document.getElementById('container-refresh').addEventListener('click', loadContainerLog);
document.getElementById('container-select').addEventListener('change', loadContainerLog);
document.getElementById('container-tail').addEventListener('change', loadContainerLog);
switchTab('error');
})();
status/logs.html
+99
View File
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DashCaddy — Logs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/style.css">
<style>
body.logs-page { padding: 0; margin: 0; background: var(--bg, #0e1116); color: var(--fg, #e6e6e6); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.logs-wrap { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
.logs-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card-bg, #161a22); border-radius: 8px; margin-bottom: 16px; }
.logs-top h1 { margin: 0; font-size: 1.1rem; }
.logs-tabs { display: flex; gap: 6px; margin-left: auto; }
.logs-tabs button { padding: 6px 12px; background: transparent; border: 1px solid var(--border, #2a2f3a); color: inherit; border-radius: 6px; cursor: pointer; font: inherit; font-size: .85rem; }
.logs-tabs button.active { background: var(--accent, #4f8cff); color: white; border-color: transparent; }
.logs-controls { display: flex; gap: 8px; align-items: center; padding: 10px 16px; background: var(--card-bg, #161a22); border-radius: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.logs-controls select, .logs-controls input { background: var(--bg, #0e1116); color: inherit; border: 1px solid var(--border, #2a2f3a); padding: 4px 8px; border-radius: 4px; font: inherit; font-size: .85rem; }
.logs-controls button { padding: 6px 12px; background: var(--accent, #4f8cff); color: white; border: none; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; }
.logs-controls button.danger { background: color-mix(in srgb, #ff5555 25%, transparent); border: 1px solid #ff5555; color: #ff5555; }
.logs-meta { color: var(--muted, #8a93a6); font-size: .8rem; margin-left: auto; }
.logs-output { background: var(--card-bg, #161a22); border-radius: 8px; padding: 12px; max-height: 70vh; overflow-y: auto; font-size: .85rem; line-height: 1.4; }
.logs-output .log-entry { padding: 8px 10px; border-bottom: 1px solid var(--border, #2a2f3a); }
.logs-output .log-entry:last-child { border-bottom: none; }
.logs-output .log-entry.error { border-left: 3px solid #ff5555; }
.logs-output .log-entry.warn { border-left: 3px solid #f0b400; }
.logs-output .log-entry.info { border-left: 3px solid #4f8cff; }
.logs-output .log-entry.debug { border-left: 3px solid #8a93a6; }
.logs-output .log-timestamp { color: var(--muted, #8a93a6); margin-right: 8px; font-size: .75rem; }
.logs-output .log-level { display: inline-block; padding: 0 6px; border-radius: 3px; font-size: .7rem; font-weight: 600; margin-right: 8px; min-width: 38px; text-align: center; }
.log-entry.error .log-level { background: #ff5555; color: white; }
.log-entry.warn .log-level { background: #f0b400; color: black; }
.log-entry.info .log-level { background: #4f8cff; color: white; }
.log-entry.debug .log-level { background: #555; color: white; }
.logs-output .log-message pre { margin: 6px 0 0; font-size: .75rem; padding: 6px 8px; background: rgba(0,0,0,0.25); border-radius: 4px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.logs-output .empty { color: var(--muted, #8a93a6); text-align: center; padding: 40px; }
.logs-loading { color: var(--muted, #8a93a6); text-align: center; padding: 40px; }
.logs-back { padding: 4px 10px; background: transparent; border: 1px solid var(--border, #2a2f3a); color: inherit; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: none; }
.container-pick { display: flex; gap: 6px; align-items: center; }
</style>
</head>
<body class="logs-page">
<div class="logs-wrap">
<div class="logs-top">
<a href="/" class="logs-back">← Back</a>
<h1>📋 Logs</h1>
<div class="logs-tabs">
<button id="tab-error" class="active">Error log</button>
<button id="tab-container">Container</button>
</div>
</div>
<!-- Error log controls -->
<div id="error-controls" class="logs-controls">
<label>Level:
<select id="level">
<option value="">All</option>
<option value="ERR">Errors</option>
<option value="WRN">Warnings</option>
<option value="INF">Info</option>
<option value="DBG">Debug</option>
</select>
</label>
<label>Tail:
<select id="tail">
<option value="50">50</option>
<option value="100" selected>100</option>
<option value="200">200</option>
<option value="500">500</option>
</select>
</label>
<button id="refresh">🔄 Refresh</button>
<button id="clear" class="danger">🗑️ Clear</button>
<span class="logs-meta" id="meta"></span>
</div>
<!-- Container log controls -->
<div id="container-controls" class="logs-controls" style="display:none">
<label>Container:
<select id="container-select"></select>
</label>
<label>Tail:
<select id="container-tail">
<option value="50">50</option>
<option value="200" selected>200</option>
<option value="1000">1000</option>
</select>
</label>
<button id="container-refresh">🔄 Refresh</button>
<span class="logs-meta" id="container-meta"></span>
</div>
<div class="logs-output" id="output">
<div class="logs-loading">Loading…</div>
</div>
</div>
<script src="/js/logs-page.js" defer></script>
</body>
</html>