364 lines
14 KiB
HTML
364 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" data-bs-theme="dark">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Log Viewer</title>
|
||
|
|
|
||
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||
|
|
<script src="js/lucide.min.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--sidebar-width: 280px;
|
||
|
|
--brand-color: #4ade80;
|
||
|
|
--bg-light: #f8fafc;
|
||
|
|
--bg-dark: #0f172a;
|
||
|
|
--card-light: #ffffff;
|
||
|
|
--card-dark: #1e293b;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-bs-theme="light"] {
|
||
|
|
--body-bg: var(--bg-light);
|
||
|
|
--card-bg: var(--card-light);
|
||
|
|
--border-color: #e2e8f0;
|
||
|
|
--text-main: #334155;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-bs-theme="dark"] {
|
||
|
|
--body-bg: var(--bg-dark);
|
||
|
|
--card-bg: var(--card-dark);
|
||
|
|
--border-color: #334155;
|
||
|
|
--text-main: #f1f5f9;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--body-bg);
|
||
|
|
color: var(--text-main);
|
||
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Layout Structure */
|
||
|
|
.wrapper { display: flex; height: 100vh; }
|
||
|
|
|
||
|
|
/* Sidebar */
|
||
|
|
aside {
|
||
|
|
width: var(--sidebar-width);
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-right: 1px solid var(--border-color);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); }
|
||
|
|
.file-list { overflow-y: auto; flex-grow: 1; padding: 0.5rem; }
|
||
|
|
.file-item {
|
||
|
|
padding: 8px 12px;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
transition: 0.2s;
|
||
|
|
}
|
||
|
|
.file-item:hover { background: rgba(74, 222, 128, 0.1); }
|
||
|
|
.file-item.active { background: rgba(74, 222, 128, 0.2); color: var(--brand-color); font-weight: 600; }
|
||
|
|
.file-size { font-size: 0.7rem; opacity: 0.6; }
|
||
|
|
|
||
|
|
/* Main Content */
|
||
|
|
main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||
|
|
.top-bar {
|
||
|
|
padding: 1rem 1.5rem;
|
||
|
|
background: var(--card-bg);
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Stats & Toggles */
|
||
|
|
.level-toggles .btn {
|
||
|
|
border: none;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
padding: 5px 12px;
|
||
|
|
margin-right: 5px;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.btn-check:not(:checked) + .btn { opacity: 0.4; filter: grayscale(1); }
|
||
|
|
|
||
|
|
/* Level Colors */
|
||
|
|
.btn-trc { background: #64748b; color: white; }
|
||
|
|
.btn-dbg { background: #0ea5e9; color: white; }
|
||
|
|
.btn-inf { background: #10b981; color: white; }
|
||
|
|
.btn-wrn { background: #f59e0b; color: white; }
|
||
|
|
.btn-err { background: #ef4444; color: white; }
|
||
|
|
.btn-crt { background: #a855f7; color: white; }
|
||
|
|
|
||
|
|
/* Search & Controls */
|
||
|
|
.search-wrapper { position: relative; width: 300px; }
|
||
|
|
.search-wrapper input {
|
||
|
|
background: rgba(0,0,0,0.1);
|
||
|
|
border: 1px solid var(--border-color);
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 6px 12px 6px 35px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: 0.5; }
|
||
|
|
|
||
|
|
/* Table Area */
|
||
|
|
.content-area { flex-grow: 1; padding: 1.5rem; overflow-y: auto; }
|
||
|
|
.table-container { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
|
||
|
|
|
||
|
|
table.dataTable { margin: 0 !important; border: none; }
|
||
|
|
table.dataTable thead th {
|
||
|
|
background: rgba(0,0,0,0.02);
|
||
|
|
font-size: 0.7rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
padding: 12px 15px !important;
|
||
|
|
border-bottom: 1px solid var(--border-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lvl-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
|
||
|
|
.row-TRC .lvl-indicator { background: #64748b; }
|
||
|
|
.row-DBG .lvl-indicator { background: #0ea5e9; }
|
||
|
|
.row-INF .lvl-indicator { background: #10b981; }
|
||
|
|
.row-WRN .lvl-indicator { background: #f59e0b; }
|
||
|
|
.row-ERR .lvl-indicator { background: #ef4444; }
|
||
|
|
.row-CRT .lvl-indicator { background: #a855f7; }
|
||
|
|
|
||
|
|
.exception-row { background: #000 !important; color: #fb7185 !important; font-family: 'Fira Code', monospace; font-size: 0.75rem; }
|
||
|
|
.details-btn { cursor: pointer; opacity: 0.5; }
|
||
|
|
.details-btn:hover { opacity: 1; color: var(--brand-color); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<aside>
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<h5 class="mb-3 d-flex align-items-center gap-2">
|
||
|
|
<i data-lucide="scroll-text" class="text-success"></i> Log Viewer
|
||
|
|
</h5>
|
||
|
|
<button class="btn btn-sm btn-outline-secondary w-100" onclick="document.getElementById('dir-input').click()">
|
||
|
|
<i data-lucide="folder-open" size="14"></i> Select Directory
|
||
|
|
</button>
|
||
|
|
<input type="file" id="dir-input" webkitdirectory hidden>
|
||
|
|
</div>
|
||
|
|
<div class="file-list" id="file-list">
|
||
|
|
<div class="text-center mt-5 opacity-50 small">No logs loaded</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<div class="top-bar">
|
||
|
|
<div class="level-toggles d-flex align-items-center" id="filter-buttons">
|
||
|
|
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG">
|
||
|
|
<label class="btn btn-dbg" for="toggle-DBG">Debug: <span id="count-DBG">0</span></label>
|
||
|
|
|
||
|
|
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
|
||
|
|
<label class="btn btn-inf" for="toggle-INF">Info: <span id="count-INF">0</span></label>
|
||
|
|
|
||
|
|
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN">
|
||
|
|
<label class="btn btn-wrn" for="toggle-WRN">Warning: <span id="count-WRN">0</span></label>
|
||
|
|
|
||
|
|
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR">
|
||
|
|
<label class="btn btn-err" for="toggle-ERR">Error: <span id="count-ERR">0</span></label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="d-flex align-items-center gap-3">
|
||
|
|
<div class="search-wrapper">
|
||
|
|
<i data-lucide="search" size="16" class="search-icon"></i>
|
||
|
|
<input type="text" id="global-search" placeholder="Search... RegEx welcome!">
|
||
|
|
</div>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn btn-link p-1 text-reset" id="theme-toggle" title="Toggle Dark/Light">
|
||
|
|
<i data-lucide="sun"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-link p-1 text-reset" onclick="location.reload()" title="Refresh">
|
||
|
|
<i data-lucide="refresh-cw"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content-area">
|
||
|
|
<div class="table-container shadow-sm">
|
||
|
|
<table id="log-table" class="table table-hover w-100">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th width="30"></th>
|
||
|
|
<th width="100">Level</th>
|
||
|
|
<th width="150">Time</th>
|
||
|
|
<th>Description</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="modal fade" id="detailModal" tabindex="-1">
|
||
|
|
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h6 class="modal-title">Log Entry Details</h6>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body p-0">
|
||
|
|
<pre id="modal-content" class="m-0 p-3 bg-black text-danger-emphasis" style="font-size: 0.8rem; overflow-x: auto;"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="js/jquery-3.7.0.min.js"></script>
|
||
|
|
<script src="js/jquery.dataTables.min.js"></script>
|
||
|
|
<script src="js/dataTables.bootstrap5.min.js"></script>
|
||
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
lucide.createIcons();
|
||
|
|
let currentLogs = [];
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
const table = $('#log-table').DataTable({
|
||
|
|
dom: 'rtip',
|
||
|
|
pageLength: 50,
|
||
|
|
order: [[2, 'desc']],
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
className: 'details-btn text-center',
|
||
|
|
orderable: false,
|
||
|
|
data: null,
|
||
|
|
render: (d, t, row) => row.exception ? '<i data-lucide="maximize-2" size="14"></i>' : ''
|
||
|
|
},
|
||
|
|
{
|
||
|
|
data: 'level',
|
||
|
|
render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>`
|
||
|
|
},
|
||
|
|
{ data: 'time', className: 'text-muted' },
|
||
|
|
{
|
||
|
|
data: 'message',
|
||
|
|
render: m => `<span class="text-truncate d-block" style="max-width: 800px;">${m}</span>`
|
||
|
|
}
|
||
|
|
],
|
||
|
|
createdRow: function(row, data) {
|
||
|
|
$(row).addClass('row-' + data.level);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Regex Search
|
||
|
|
$('#global-search').on('keyup', function() {
|
||
|
|
table.search(this.value, true, false).draw();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Theme Toggle
|
||
|
|
$('#theme-toggle').on('click', () => {
|
||
|
|
const current = $('html').attr('data-bs-theme');
|
||
|
|
const target = current === 'dark' ? 'light' : 'dark';
|
||
|
|
$('html').attr('data-bs-theme', target);
|
||
|
|
$('#theme-toggle i').attr('data-lucide', target === 'dark' ? 'sun' : 'moon');
|
||
|
|
lucide.createIcons();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Filter Buttons Logic
|
||
|
|
$('.btn-check').on('change', function() {
|
||
|
|
table.draw();
|
||
|
|
});
|
||
|
|
|
||
|
|
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
|
||
|
|
const level = data[1];
|
||
|
|
const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get();
|
||
|
|
return checkedLevels.includes(level);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Directory Selection
|
||
|
|
$('#dir-input').on('change', function(e) {
|
||
|
|
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
|
||
|
|
const list = $('#file-list').empty();
|
||
|
|
|
||
|
|
files.forEach((file, idx) => {
|
||
|
|
const size = (file.size / 1024).toFixed(2) + ' KB';
|
||
|
|
list.append(`
|
||
|
|
<div class="file-item" onclick="loadLogFile(this, ${idx})">
|
||
|
|
<span>${file.name}</span>
|
||
|
|
<span class="file-size">${size}</span>
|
||
|
|
</div>
|
||
|
|
`);
|
||
|
|
file.raw = file;
|
||
|
|
});
|
||
|
|
window.loadedFiles = files;
|
||
|
|
});
|
||
|
|
|
||
|
|
// File Loading
|
||
|
|
window.loadLogFile = function(el, idx) {
|
||
|
|
$('.file-item').removeClass('active');
|
||
|
|
$(el).addClass('active');
|
||
|
|
|
||
|
|
const file = window.loadedFiles[idx];
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = function(e) {
|
||
|
|
const parsed = parseLogs(e.target.result);
|
||
|
|
currentLogs = parsed;
|
||
|
|
table.clear().rows.add(parsed).draw();
|
||
|
|
updateCounts(parsed);
|
||
|
|
lucide.createIcons();
|
||
|
|
};
|
||
|
|
reader.readAsText(file);
|
||
|
|
};
|
||
|
|
|
||
|
|
function parseLogs(text) {
|
||
|
|
const lines = text.split(/\r?\n/);
|
||
|
|
const logs = [];
|
||
|
|
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||
|
|
|
||
|
|
lines.forEach(line => {
|
||
|
|
if (!line.trim()) return;
|
||
|
|
const match = line.match(headerRegex);
|
||
|
|
|
||
|
|
if (match) {
|
||
|
|
let content = match[3];
|
||
|
|
let msg = content, props = "";
|
||
|
|
const lastParen = content.lastIndexOf(' (');
|
||
|
|
if (lastParen !== -1 && content.endsWith(')')) {
|
||
|
|
msg = content.substring(0, lastParen).trim();
|
||
|
|
props = content.substring(lastParen + 2, content.length - 1);
|
||
|
|
}
|
||
|
|
logs.push({ time: match[1], level: match[2], message: msg, props, exception: "" });
|
||
|
|
} else if (logs.length > 0) {
|
||
|
|
logs[logs.length - 1].exception += line + "\n";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return logs;
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateCounts(logs) {
|
||
|
|
const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0, CRT: 0 };
|
||
|
|
logs.forEach(l => { if(counts[l.level] !== undefined) counts[l.level]++; });
|
||
|
|
Object.keys(counts).forEach(lvl => {
|
||
|
|
$(`#count-${lvl}`).text(counts[lvl].toLocaleString());
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Row Detail Modal
|
||
|
|
$('#log-table tbody').on('click', '.details-btn', function() {
|
||
|
|
const data = table.row($(this).closest('tr')).data();
|
||
|
|
const fullContent = `[${data.time}] [${data.level}] ${data.message}\n\nProperties: ${data.props}\n\n${data.exception}`;
|
||
|
|
$('#modal-content').text(fullContent);
|
||
|
|
new bootstrap.Modal('#detailModal').show();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|