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

rev1.1

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 21:30:17 +07:00
parent 712bceccbe
commit 7c662f67e9
1 changed files with 181 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
index.html
View File

@@ -4,7 +4,7 @@
<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 Analytics Dashboard</title> <title>Log Viewer Pro</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">
@@ -24,7 +24,7 @@
background-color: var(--bg-dark); background-color: var(--bg-dark);
color: #f1f5f9; color: #f1f5f9;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 0.85rem; font-size: 0.82rem;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
@@ -62,6 +62,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 0.8rem; font-size: 0.8rem;
transition: 0.2s;
} }
.file-item:hover { .file-item:hover {
@@ -71,6 +72,7 @@
.file-item.active { .file-item.active {
background: rgba(74, 222, 128, 0.15); background: rgba(74, 222, 128, 0.15);
color: var(--brand-color); color: var(--brand-color);
font-weight: 600;
} }
/* Main Content */ /* Main Content */
@@ -82,7 +84,7 @@
} }
.top-bar { .top-bar {
padding: 0.75rem 1.5rem; padding: 0.6rem 1.5rem;
background: var(--card-dark); background: var(--card-dark);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
@@ -92,8 +94,8 @@
/* Chart Area */ /* Chart Area */
.chart-container { .chart-container {
height: 180px; height: 160px;
background: #111827; background: #0b0e14;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
} }
@@ -101,41 +103,92 @@
/* Stats & Toggles */ /* Stats & Toggles */
.level-toggles .btn { .level-toggles .btn {
border: none; border: none;
font-size: 0.7rem; font-size: 0.72rem;
font-weight: 600; font-weight: 700;
padding: 4px 10px; padding: 4px 12px;
margin-right: 4px; margin-right: 4px;
border-radius: 4px;
} }
.btn-check:not(:checked)+.btn { .btn-check:not(:checked)+.btn {
opacity: 0.2; opacity: 0.25;
filter: grayscale(1); filter: grayscale(0.8);
}
.btn-trc {
background: #64748b;
color: #fff;
} }
.btn-dbg { .btn-dbg {
background: #0ea5e9; background: #0ea5e9;
color: white; color: #fff;
} }
.btn-inf { .btn-inf {
background: #10b981; background: #10b981;
color: white; color: #fff;
} }
.btn-wrn { .btn-wrn {
background: #f59e0b; background: #f59e0b;
color: white; color: #fff;
} }
.btn-err { .btn-err {
background: #ef4444; background: #ef4444;
color: #fff;
}
.btn-crt {
background: #a855f7;
color: #fff;
}
/* Search with Clear Button */
.search-container {
position: relative;
width: 320px;
}
.search-container input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
color: white; color: white;
border-radius: 6px;
padding: 5px 35px 5px 35px;
width: 100%;
}
.search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
}
.clear-search {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
cursor: pointer;
display: none;
border: none;
background: none;
color: white;
}
.clear-search:hover {
opacity: 1;
} }
/* Table */ /* Table */
.content-area { .content-area {
flex-grow: 1; flex-grow: 1;
padding: 1.25rem; padding: 1rem;
overflow-y: auto; overflow-y: auto;
} }
@@ -146,11 +199,12 @@
} }
table.dataTable thead th { table.dataTable thead th {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.02);
font-size: 0.7rem; font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
padding: 10px 15px !important; padding: 10px 15px !important;
border-bottom: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important;
color: #94a3b8;
} }
.lvl-indicator { .lvl-indicator {
@@ -161,30 +215,39 @@
margin-right: 8px; margin-right: 8px;
} }
.row-INF .lvl-indicator { .row-TRC .lvl-indicator {
background: #10b981; background: #64748b;
}
.row-ERR .lvl-indicator {
background: #ef4444;
} }
.row-DBG .lvl-indicator { .row-DBG .lvl-indicator {
background: #0ea5e9; background: #0ea5e9;
} }
.row-INF .lvl-indicator {
background: #10b981;
}
.row-WRN .lvl-indicator { .row-WRN .lvl-indicator {
background: #f59e0b; background: #f59e0b;
} }
.search-input { .row-ERR .lvl-indicator {
background: rgba(0, 0, 0, 0.2); background: #ef4444;
border: 1px solid var(--border-color); }
color: white;
border-radius: 4px; .row-CRT .lvl-indicator {
padding: 4px 10px; background: #a855f7;
font-size: 0.8rem; }
width: 250px;
.details-trigger {
cursor: pointer;
opacity: 0.4;
transition: 0.2s;
}
.details-trigger:hover {
opacity: 1;
color: var(--brand-color);
} }
</style> </style>
</head> </head>
@@ -194,10 +257,12 @@
<div class="wrapper"> <div class="wrapper">
<aside> <aside>
<div class="sidebar-header"> <div class="sidebar-header">
<h6 class="mb-3"><i data-lucide="activity" class="text-success me-2"></i>LogViewer Pro</h6> <h6 class="mb-3 d-flex align-items-center gap-2">
<i data-lucide="terminal" class="text-success"></i> LogViewer Pro
</h6>
<button class="btn btn-sm btn-outline-secondary w-100" <button class="btn btn-sm btn-outline-secondary w-100"
onclick="document.getElementById('dir-input').click()"> onclick="document.getElementById('dir-input').click()">
<i data-lucide="folder" size="14"></i> Load Directory <i data-lucide="folder-search" size="14"></i> Open Directory
</button> </button>
<input type="file" id="dir-input" webkitdirectory hidden> <input type="file" id="dir-input" webkitdirectory hidden>
</div> </div>
@@ -207,25 +272,33 @@
<main> <main>
<div class="top-bar"> <div class="top-bar">
<div class="level-toggles" 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="t-TRC" checked value="TRC">
<label class="btn btn-dbg" for="toggle-DBG">DBG <span id="count-DBG">0</span></label> <label class="btn btn-trc" for="t-TRC">TRC <span class="badge" id="c-TRC">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF">
<label class="btn btn-inf" for="toggle-INF">INF <span id="count-INF">0</span></label> <input type="checkbox" class="btn-check" id="t-DBG" checked value="DBG">
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN"> <label class="btn btn-dbg" for="t-DBG">DBG <span class="badge" id="c-DBG">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="t-INF" checked value="INF">
<label class="btn btn-err" for="toggle-ERR">ERR <span id="count-ERR">0</span></label> <label class="btn btn-inf" for="t-INF">INF <span class="badge" id="c-INF">0</span></label>
<input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
<label class="btn btn-wrn" for="t-WRN">WRN <span class="badge" id="c-WRN">0</span></label>
<input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
<label class="btn btn-err" for="t-ERR">ERR <span class="badge" id="c-ERR">0</span></label>
<input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
<label class="btn btn-crt" for="t-CRT">CRT <span class="badge" id="c-CRT">0</span></label>
</div> </div>
<div class="d-flex gap-3"> <div class="search-container">
<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="Regex search...">
<i data-lucide="rotate-ccw" size="18"></i> <button id="clear-search" class="clear-search"><i data-lucide="x-circle" size="16"></i></button>
</button>
</div> </div>
</div> </div>
<div class="chart-container"> <div class="chart-container" title="Left-click to filter time | Right-click to reset">
<canvas id="intensityChart"></canvas> <canvas id="intensityChart"></canvas>
</div> </div>
@@ -234,10 +307,10 @@
<table id="log-table" class="table table-dark table-hover table-sm 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="35"></th>
<th width="90">Level</th> <th width="90">Level</th>
<th width="120">Time</th> <th width="130">Time</th>
<th>Message</th> <th>Description</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -249,10 +322,14 @@
<div class="modal fade" id="logModal" 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 bg-dark border-secondary"> <div class="modal-content bg-dark border-secondary shadow-lg">
<div class="modal-header border-secondary py-2">
<h6 class="modal-title small">Log Context</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-4 text-info" <pre id="modal-content" class="m-0 p-4 text-info-emphasis"
style="font-size: 0.8rem; background: #000;"></pre> style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
</div> </div>
</div> </div>
</div> </div>
@@ -266,25 +343,26 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
let chart; let chart;
let rawData = []; let table;
$(document).ready(function () { $(document).ready(function () {
const table = $('#log-table').DataTable({ // DataTable Initialization
table = $('#log-table').DataTable({
dom: 'rtip', dom: 'rtip',
pageLength: 100, pageLength: 50,
order: [[2, 'desc']], order: [[2, 'desc']],
columns: [ columns: [
{ {
className: 'text-center opacity-50', className: 'details-trigger text-center',
orderable: false, orderable: false,
data: null, data: null,
render: (d, t, row) => row.exception ? '<i data-lucide="plus-square" size="14"></i>' : '' defaultContent: '<i data-lucide="eye" 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' }, { data: 'time', className: 'text-muted' },
{ {
data: 'message', data: 'message',
render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
@@ -294,46 +372,55 @@
drawCallback: () => lucide.createIcons() drawCallback: () => lucide.createIcons()
}); });
// Search & Reset // Search logic
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); }); $('#global-search').on('keyup', function () {
$('#reset-filter').on('click', () => { const val = this.value;
$('#global-search').val(''); table.search(val, true, false).draw();
table.search('').column(2).search('').draw(); $('#clear-search').toggle(val.length > 0);
}); });
// Initialize Chart.js $('#clear-search').on('click', function () {
$('#global-search').val('').trigger('keyup');
table.column(2).search('').draw(); // Also clear chart filters
});
// Initialize Chart
const ctx = document.getElementById('intensityChart').getContext('2d'); const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, { chart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80' }] }, data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } }, plugins: { legend: { display: false } },
scales: { scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } }, x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#334155' }, ticks: { color: '#64748b' } } y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
}, },
onClick: (e, activeEls) => { onClick: (e, activeEls) => {
if (activeEls.length > 0) { if (activeEls.length > 0) {
const index = activeEls[0].index; const label = chart.data.labels[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(); table.column(2).search('^' + label, true, false).draw();
} }
} }
} }
}); });
// Right Click to Reset Chart/Time Filter
document.getElementById('intensityChart').addEventListener('contextmenu', (e) => {
e.preventDefault();
table.column(2).search('').draw();
});
// Level Toggles // Level Toggles
$('.btn-check').on('change', () => table.draw()); $('.btn-check').on('change', () => table.draw());
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => { $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
const level = data[1]; const lvl = data[1];
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get(); const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
return checked.includes(level); return checked.includes(lvl);
}); });
// Directory Handler // File/Directory Loader
$('#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();
@@ -348,10 +435,8 @@
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function (e) { reader.onload = function (e) {
const logs = parseLogs(e.target.result); const logs = parseLogs(e.target.result);
rawData = logs;
table.clear().rows.add(logs).draw(); table.clear().rows.add(logs).draw();
updateChart(logs); updateAnalytics(logs);
updateCounts(logs);
}; };
reader.readAsText(window.loadedFiles[idx]); reader.readAsText(window.loadedFiles[idx]);
}; };
@@ -359,7 +444,7 @@
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/); const lines = text.split(/\r?\n/);
const logs = []; const logs = [];
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/; const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
lines.forEach(line => { lines.forEach(line => {
const match = line.match(headerRegex); const match = line.match(headerRegex);
@@ -372,31 +457,34 @@
return logs; return logs;
} }
function updateChart(logs) { function updateAnalytics(logs) {
// Bin logs by Minute (HH:mm) // Update Counts
const counts = { TRC: 0, DBG: 0, INF: 0, WRN: 0, ERR: 0, CRT: 0 };
const bins = {}; const bins = {};
logs.forEach(l => { logs.forEach(l => {
const min = l.time.substring(0, 5); // Get HH:mm // Count levels
if (counts[l.level] !== undefined) counts[l.level]++;
// Bin minutes for chart
const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1; bins[min] = (bins[min] || 0) + 1;
}); });
const labels = Object.keys(bins).sort(); // Set numbers in UI
const data = labels.map(l => bins[l]); Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
chart.data.labels = labels; // Update Chart
chart.data.datasets[0].data = data; const sortedLabels = Object.keys(bins).sort();
chart.data.labels = sortedLabels;
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
chart.update(); chart.update();
} }
function updateCounts(logs) { // Fix: Show Detail Modal logic
const counts = { DBG: 0, INF: 0, WRN: 0, ERR: 0 }; $('#log-table tbody').on('click', '.details-trigger', function () {
logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; }); const rowData = table.row($(this).closest('tr')).data();
Object.keys(counts).forEach(lvl => $(`#count-${lvl}`).text(counts[lvl])); const full = `[TIMESTAMP] ${rowData.time}\n[LEVEL] ${rowData.level}\n[MESSAGE] ${rowData.message}\n\n[CONTEXT/STACK TRACE]\n${rowData.exception || 'No additional context available.'}`;
} $('#modal-content').text(full);
$('#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(); new bootstrap.Modal('#logModal').show();
}); });
}); });