alazhar/LogViewer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

rev1

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 21:23:50 +07:00
parent d2bf90ccec
commit 712bceccbe
2 changed files with 334 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
index.html
View File

@@ -1,204 +1,243 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-bs-theme="dark"> <html lang="en" data-bs-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log Viewer</title> <title>Log Analytics Dashboard</title>
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet"> <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
<script src="js/lucide.min.js"></script> <script src="js/lucide.min.js"></script>
<script src="js/chart.js"></script>
<style> <style>
:root { :root {
--sidebar-width: 280px; --sidebar-width: 260px;
--brand-color: #4ade80; --brand-color: #4ade80;
--bg-light: #f8fafc;
--bg-dark: #0f172a; --bg-dark: #0f172a;
--card-light: #ffffff;
--card-dark: #1e293b; --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; --border-color: #334155;
--text-main: #f1f5f9;
} }
body { body {
background-color: var(--body-bg); background-color: var(--bg-dark);
color: var(--text-main); color: #f1f5f9;
font-family: 'Inter', system-ui, -apple-system, sans-serif; font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-size: 0.85rem;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
/* Layout Structure */ .wrapper {
.wrapper { display: flex; height: 100vh; } display: flex;
height: 100vh;
}
/* Sidebar */ /* Sidebar */
aside { aside {
width: var(--sidebar-width); width: var(--sidebar-width);
background: var(--card-bg); background: var(--card-dark);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.sidebar-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); } .sidebar-header {
.file-list { overflow-y: auto; flex-grow: 1; padding: 0.5rem; } padding: 1rem;
border-bottom: 1px solid var(--border-color);
}
.file-list {
overflow-y: auto;
flex-grow: 1;
padding: 0.5rem;
}
.file-item { .file-item {
padding: 8px 12px; padding: 8px 12px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
margin-bottom: 2px; margin-bottom: 2px;
transition: 0.2s; font-size: 0.8rem;
}
.file-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.file-item.active {
background: rgba(74, 222, 128, 0.15);
color: var(--brand-color);
} }
.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 Content */
main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; } main {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.top-bar { .top-bar {
padding: 1rem 1.5rem; padding: 0.75rem 1.5rem;
background: var(--card-bg); background: var(--card-dark);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
/* Chart Area */
.chart-container {
height: 180px;
background: #111827;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
}
/* Stats & Toggles */ /* Stats & Toggles */
.level-toggles .btn { .level-toggles .btn {
border: none; border: none;
font-size: 0.75rem; font-size: 0.7rem;
font-weight: 600; font-weight: 600;
padding: 5px 12px; padding: 4px 10px;
margin-right: 5px; margin-right: 4px;
display: inline-flex;
align-items: center;
gap: 6px;
} }
.btn-check:not(:checked) + .btn { opacity: 0.4; filter: grayscale(1); }
/* Level Colors */ .btn-check:not(:checked)+.btn {
.btn-trc { background: #64748b; color: white; } opacity: 0.2;
.btn-dbg { background: #0ea5e9; color: white; } filter: grayscale(1);
.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 */ .btn-dbg {
.search-wrapper { position: relative; width: 300px; } background: #0ea5e9;
.search-wrapper input { color: white;
background: rgba(0,0,0,0.1); }
.btn-inf {
background: #10b981;
color: white;
}
.btn-wrn {
background: #f59e0b;
color: white;
}
.btn-err {
background: #ef4444;
color: white;
}
/* Table */
.content-area {
flex-grow: 1;
padding: 1.25rem;
overflow-y: auto;
}
.table-container {
background: var(--card-dark);
border-radius: 8px;
border: 1px solid var(--border-color); 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 { table.dataTable thead th {
background: rgba(0,0,0,0.02); background: rgba(255, 255, 255, 0.03);
font-size: 0.7rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; padding: 10px 15px !important;
padding: 12px 15px !important;
border-bottom: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important;
} }
.lvl-indicator { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; } .lvl-indicator {
.row-TRC .lvl-indicator { background: #64748b; } width: 8px;
.row-DBG .lvl-indicator { background: #0ea5e9; } height: 8px;
.row-INF .lvl-indicator { background: #10b981; } border-radius: 50%;
.row-WRN .lvl-indicator { background: #f59e0b; } display: inline-block;
.row-ERR .lvl-indicator { background: #ef4444; } margin-right: 8px;
.row-CRT .lvl-indicator { background: #a855f7; } }
.exception-row { background: #000 !important; color: #fb7185 !important; font-family: 'Fira Code', monospace; font-size: 0.75rem; } .row-INF .lvl-indicator {
.details-btn { cursor: pointer; opacity: 0.5; } background: #10b981;
.details-btn:hover { opacity: 1; color: var(--brand-color); } }
.row-ERR .lvl-indicator {
background: #ef4444;
}
.row-DBG .lvl-indicator {
background: #0ea5e9;
}
.row-WRN .lvl-indicator {
background: #f59e0b;
}
.search-input {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border-color);
color: white;
border-radius: 4px;
padding: 4px 10px;
font-size: 0.8rem;
width: 250px;
}
</style> </style>
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<aside> <aside>
<div class="sidebar-header"> <div class="sidebar-header">
<h5 class="mb-3 d-flex align-items-center gap-2"> <h6 class="mb-3"><i data-lucide="activity" class="text-success me-2"></i>LogViewer Pro</h6>
<i data-lucide="scroll-text" class="text-success"></i> Log Viewer <button class="btn btn-sm btn-outline-secondary w-100"
</h5> onclick="document.getElementById('dir-input').click()">
<button class="btn btn-sm btn-outline-secondary w-100" onclick="document.getElementById('dir-input').click()"> <i data-lucide="folder" size="14"></i> Load Directory
<i data-lucide="folder-open" size="14"></i> Select Directory
</button> </button>
<input type="file" id="dir-input" webkitdirectory hidden> <input type="file" id="dir-input" webkitdirectory hidden>
</div> </div>
<div class="file-list" id="file-list"> <div class="file-list" id="file-list"></div>
<div class="text-center mt-5 opacity-50 small">No logs loaded</div>
</div>
</aside> </aside>
<main> <main>
<div class="top-bar"> <div class="top-bar">
<div class="level-toggles d-flex align-items-center" id="filter-buttons"> <div class="level-toggles" id="filter-buttons">
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG"> <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> <label class="btn btn-dbg" for="toggle-DBG">DBG <span id="count-DBG">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF"> <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> <label class="btn btn-inf" for="toggle-INF">INF <span id="count-INF">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN"> <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> <label class="btn btn-wrn" for="toggle-WRN">WRN <span id="count-WRN">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR"> <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> <label class="btn btn-err" for="toggle-ERR">ERR <span id="count-ERR">0</span></label>
</div> </div>
<div class="d-flex align-items-center gap-3"> <div class="d-flex gap-3">
<div class="search-wrapper"> <input type="text" id="global-search" class="search-input" placeholder="Search RegEx...">
<i data-lucide="search" size="16" class="search-icon"></i> <button class="btn btn-link text-white p-0" id="reset-filter" title="Reset Filters">
<input type="text" id="global-search" placeholder="Search... RegEx welcome!"> <i data-lucide="rotate-ccw" size="18"></i>
</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> </button>
</div> </div>
</div> </div>
<div class="chart-container">
<canvas id="intensityChart"></canvas>
</div> </div>
<div class="content-area"> <div class="content-area">
<div class="table-container shadow-sm"> <div class="table-container">
<table id="log-table" class="table table-hover w-100"> <table id="log-table" class="table table-dark table-hover table-sm w-100">
<thead> <thead>
<tr> <tr>
<th width="30"></th> <th width="30"></th>
<th width="100">Level</th> <th width="90">Level</th>
<th width="150">Time</th> <th width="120">Time</th>
<th>Description</th> <th>Message</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -206,116 +245,115 @@
</div> </div>
</div> </div>
</main> </main>
</div> </div>
<div class="modal fade" id="detailModal" tabindex="-1"> <div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered"> <div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content"> <div class="modal-content bg-dark border-secondary">
<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"> <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> <pre id="modal-content" class="m-0 p-4 text-info"
style="font-size: 0.8rem; background: #000;"></pre>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="js/jquery-3.7.0.min.js"></script> <script src="js/jquery-3.7.0.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script> <script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap5.min.js"></script> <script src="js/dataTables.bootstrap5.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script> <script>
lucide.createIcons(); lucide.createIcons();
let currentLogs = []; let chart;
let rawData = [];
$(document).ready(function() { $(document).ready(function () {
const table = $('#log-table').DataTable({ const table = $('#log-table').DataTable({
dom: 'rtip', dom: 'rtip',
pageLength: 50, pageLength: 100,
order: [[2, 'desc']], order: [[2, 'desc']],
columns: [ columns: [
{ {
className: 'details-btn text-center', className: 'text-center opacity-50',
orderable: false, orderable: false,
data: null, data: null,
render: (d, t, row) => row.exception ? '<i data-lucide="maximize-2" size="14"></i>' : '' render: (d, t, row) => row.exception ? '<i data-lucide="plus-square" size="14"></i>' : ''
}, },
{ {
data: 'level', data: 'level',
render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>`
}, },
{ data: 'time', className: 'text-muted' }, { data: 'time' },
{ {
data: 'message', data: 'message',
render: m => `<span class="text-truncate d-block" style="max-width: 800px;">${m}</span>` render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
} }
], ],
createdRow: function(row, data) { createdRow: (row, data) => $(row).addClass('row-' + data.level),
$(row).addClass('row-' + data.level); drawCallback: () => lucide.createIcons()
});
// Search & Reset
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); });
$('#reset-filter').on('click', () => {
$('#global-search').val('');
table.search('').column(2).search('').draw();
});
// Initialize Chart.js
const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80' }] },
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#334155' }, ticks: { color: '#64748b' } }
},
onClick: (e, activeEls) => {
if (activeEls.length > 0) {
const index = activeEls[0].index;
const label = chart.data.labels[index];
// Filter table by the HH:mm from the chart
table.column(2).search('^' + label, true, false).draw();
}
}
} }
}); });
// Regex Search // Level Toggles
$('#global-search').on('keyup', function() { $('.btn-check').on('change', () => table.draw());
table.search(this.value, true, false).draw(); $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
});
// 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 level = data[1];
const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get(); const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
return checkedLevels.includes(level); return checked.includes(level);
}); });
// Directory Selection // Directory Handler
$('#dir-input').on('change', function(e) { $('#dir-input').on('change', function (e) {
const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log')); const files = Array.from(e.target.files).filter(f => f.name.endsWith('.log'));
const list = $('#file-list').empty(); const list = $('#file-list').empty();
files.forEach((file, idx) => { files.forEach((file, idx) => {
const size = (file.size / 1024).toFixed(2) + ' KB'; list.append(`<div class="file-item" onclick="loadLog(${idx})"><span>${file.name}</span></div>`);
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; window.loadedFiles = files;
}); });
// File Loading window.loadLog = function (idx) {
window.loadLogFile = function(el, idx) { $('.file-item').removeClass('active').eq(idx).addClass('active');
$('.file-item').removeClass('active');
$(el).addClass('active');
const file = window.loadedFiles[idx];
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function(e) { reader.onload = function (e) {
const parsed = parseLogs(e.target.result); const logs = parseLogs(e.target.result);
currentLogs = parsed; rawData = logs;
table.clear().rows.add(parsed).draw(); table.clear().rows.add(logs).draw();
updateCounts(parsed); updateChart(logs);
lucide.createIcons(); updateCounts(logs);
}; };
reader.readAsText(file); reader.readAsText(window.loadedFiles[idx]);
}; };
function parseLogs(text) { function parseLogs(text) {
@@ -324,18 +362,9 @@
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/; const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
lines.forEach(line => { lines.forEach(line => {
if (!line.trim()) return;
const match = line.match(headerRegex); const match = line.match(headerRegex);
if (match) { if (match) {
let content = match[3]; logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
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) { } else if (logs.length > 0) {
logs[logs.length - 1].exception += line + "\n"; logs[logs.length - 1].exception += line + "\n";
} }
@@ -343,22 +372,35 @@
return logs; return logs;
} }
function updateCounts(logs) { function updateChart(logs) {
const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0, CRT: 0 }; // Bin logs by Minute (HH:mm)
logs.forEach(l => { if(counts[l.level] !== undefined) counts[l.level]++; }); const bins = {};
Object.keys(counts).forEach(lvl => { logs.forEach(l => {
$(`#count-${lvl}`).text(counts[lvl].toLocaleString()); const min = l.time.substring(0, 5); // Get HH:mm
bins[min] = (bins[min] || 0) + 1;
}); });
const labels = Object.keys(bins).sort();
const data = labels.map(l => bins[l]);
chart.data.labels = labels;
chart.data.datasets[0].data = data;
chart.update();
} }
// Row Detail Modal function updateCounts(logs) {
$('#log-table tbody').on('click', '.details-btn', function() { const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0 };
const data = table.row($(this).closest('tr')).data(); logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
const fullContent = `[${data.time}] [${data.level}] ${data.message}\n\nProperties: ${data.props}\n\n${data.exception}`; Object.keys(counts).forEach(lvl => $(`#count-${lvl}`).text(counts[lvl]));
$('#modal-content').text(fullContent); }
new bootstrap.Modal('#detailModal').show();
$('#log-table tbody').on('click', 'tr', function () {
const data = table.row(this).data();
$('#modal-content').text(`[${data.time}] [${data.level}] ${data.message}\n\n${data.exception}`);
new bootstrap.Modal('#logModal').show();
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

14
js/chart.js Normal file
View File

File diff suppressed because one or more lines are too long