Jakach/jakach-logging
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding search
Deploy / deploy (push) Successful in 8s
Details

Browse Source
This commit is contained in:
janis steiner
2026-05-06 12:33:20 +02:00
parent 556ac06413
commit 36abf1bdd4
5 changed files with 134 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+66
View File
@@ -82,6 +82,7 @@ pre.raw-line { background: var(--bs-tertiary-bg); padding: .75rem; border-radius
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" href="#" data-page="dashboard"><i class="bi bi-speedometer2"></i>Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-page="alerts"><i class="bi bi-bell"></i>Alerts</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-page="logs"><i class="bi bi-search"></i>Logs</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-page="sources"><i class="bi bi-database"></i>Sources</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-page="rules"><i class="bi bi-sliders"></i>Rules</a></li>
<li class="nav-item"><a class="nav-link" href="#" data-page="settings"><i class="bi bi-gear"></i>Settings</a></li>
@@ -184,6 +185,38 @@ pre.raw-line { background: var(--bs-tertiary-bg); padding: .75rem; border-radius
</div>
</div>
<!-- LOGS -->
<div class="page-section" id="page-logs">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0"><i class="bi bi-search me-2"></i>Log Search</h5>
<small class="text-secondary" id="logsCount"></small>
</div>
<div class="card mb-3">
<div class="card-body py-3">
<div class="input-group">
<input type="text" class="form-control" id="logSearchInput" placeholder="Search all log lines..." maxlength="200">
<button class="btn btn-primary" id="logSearchBtn"><i class="bi bi-search me-1"></i>Search</button>
</div>
<small class="text-secondary mt-1 d-block">Use FTS5 syntax: <code>error</code>, <code>"disk full"</code>, <code>error NOT warning</code>, <code>auth*</code></small>
</div>
</div>
<div class="card">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-sm table-hover mb-0">
<thead class="table-dark"><tr>
<th style="width:60px">ID</th>
<th style="width:170px">Time</th>
<th>Line</th>
<th>Source</th>
</tr></thead>
<tbody id="logsBody"><tr><td colspan="4" class="empty-state"><i class="bi bi-search"></i><p class="mb-0">Enter a search query above</p></td></tr></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- SOURCES -->
<div class="page-section" id="page-sources">
<div class="d-flex justify-content-between align-items-center mb-3">
@@ -455,6 +488,7 @@ function loadPage(name) {
switch (name) {
case 'dashboard': loadDashboard(); break;
case 'alerts': loadAlerts(); break;
case 'logs': break;
case 'sources': loadSources(); break;
case 'rules': loadRules(); break;
case 'settings': loadSettings(); break;
@@ -772,6 +806,38 @@ document.getElementById('saveTokensBtn').addEventListener('click', async () => {
}
});
// --- LOGS ---
async function loadLogs(query) {
if (!query) {
query = document.getElementById('logSearchInput').value.trim();
if (!query) {
document.getElementById('logsBody').innerHTML = '<tr><td colspan="4" class="empty-state"><i class="bi bi-search"></i><p class="mb-0">Enter a search query above</p></td></tr>';
document.getElementById('logsCount').textContent = '';
return;
}
}
try {
const res = await api('/logs/search?q=' + encodeURIComponent(query) + '&limit=200');
const entries = res.data || [];
const tbody = document.getElementById('logsBody');
if (!entries.length) {
tbody.innerHTML = '<tr><td colspan="4" class="empty-state"><i class="bi bi-inbox"></i><p class="mb-0">No results for "' + esc(query) + '"</p></td></tr>';
} else {
tbody.innerHTML = entries.map(e => `<tr>
<td class="text-secondary" style="font-size:.75rem">#${e.id}</td>
<td class="text-secondary" style="white-space:nowrap;font-size:.8rem">${new Date(e.created_at).toLocaleString()}</td>
<td style="font-family:monospace;font-size:.8rem;max-width:600px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(e.line)}</td>
<td>${e.source_name ? '<span class="badge bg-secondary">' + esc(e.source_name) + '</span>' : '—'}</td>
</tr>`).join('');
}
document.getElementById('logsCount').textContent = entries.length + ' results';
} catch (e) { console.error('logs error', e); }
}
document.getElementById('logSearchBtn').addEventListener('click', () => loadLogs());
document.getElementById('logSearchInput').addEventListener('keydown', e => { if (e.key === 'Enter') loadLogs(); });
// --- Helpers ---
function esc(s) {
const d = document.createElement('div');