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

Compare commits

base: alazhar:dc6714c3bf5dbf29ed905778c8d70dac2cbc667b
Branches Tags
alazhar:main alazhar:claude alazhar:gemini_v2.1 alazhar:gemini_v2
..
compare: alazhar:gemini_v2
Branches Tags
alazhar:claude alazhar:gemini_v2.1 alazhar:gemini_v2 alazhar:main

3 Commits
dc6714c3bf ... gemini_v2

Author SHA1 Message Date
Al Azhar
8d65b877dd rev1.3 2026-04-27 21:34:30 +07:00
Al Azhar
8a34443b77 rev1.2 2026-04-27 21:31:53 +07:00
Al Azhar
7c662f67e9 rev1.1 2026-04-27 21:30:17 +07:00
2 changed files with 244 additions and 156 deletions
Expand all files Collapse all files

393
index.html
View File

@@ -4,13 +4,12 @@
<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 // Grafana Style</title> <title>Log Viewer Pro // Timeline Brush</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> <script src="js/chart.js"></script>
<script src="js/chartjs-plugin-zoom.min.js"></script>
<style> <style>
:root { :root {
@@ -19,6 +18,8 @@
--bg-dark: #0f172a; --bg-dark: #0f172a;
--card-dark: #1e293b; --card-dark: #1e293b;
--border-color: #334155; --border-color: #334155;
--selection-bg: rgba(74, 222, 128, 0.2);
--selection-border: rgba(74, 222, 128, 0.5);
} }
body { body {
@@ -35,7 +36,6 @@
height: 100vh; height: 100vh;
} }
/* Sidebar */
aside { aside {
width: var(--sidebar-width); width: var(--sidebar-width);
background: var(--card-dark); background: var(--card-dark);
@@ -61,9 +61,8 @@
cursor: pointer; cursor: pointer;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 2px; margin-bottom: 2px;
font-size: 0.75rem;
transition: 0.2s;
} }
.file-item:hover { .file-item:hover {
@@ -73,9 +72,9 @@
.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 { main {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@@ -90,63 +89,103 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
z-index: 10;
} }
/* Chart Area - Styled like Grafana */ /* Chart Area with Selection Overlay */
.chart-section { .chart-container {
height: 200px; height: 160px;
background: #0b0e14; background: #0b0e14;
padding: 10px 20px; padding: 10px 20px;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
position: relative; position: relative;
user-select: none;
} }
.chart-hint { #selection-overlay {
position: absolute; position: absolute;
top: 5px; top: 10px;
left: 20px;
right: 20px; right: 20px;
font-size: 0.7rem; bottom: 10px;
color: #64748b;
pointer-events: none; pointer-events: none;
z-index: 10;
} }
/* Toggles */ .selection-rect {
fill: var(--selection-bg);
stroke: var(--selection-border);
stroke-width: 1;
display: none;
}
/* Toggles & Controls */
.level-toggles .btn { .level-toggles .btn {
border: none; border: none;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 700; font-weight: 700;
padding: 4px 12px; padding: 4px 10px;
margin-right: 4px; margin-right: 3px;
border-radius: 4px;
} }
.btn-check:not(:checked)+.btn { .btn-check:not(:checked)+.btn {
opacity: 0.15; opacity: 0.2;
filter: grayscale(1); filter: grayscale(0.8);
}
.btn-dbg {
background: #38bdf8;
color: #000;
} }
.btn-inf { .btn-inf {
background: #4ade80; background: #10b981;
color: #000; color: #fff;
} }
.btn-wrn { .btn-wrn {
background: #fbbf24; background: #f59e0b;
color: #000; color: #fff;
} }
.btn-err { .btn-err {
background: #f87171; background: #ef4444;
color: #000; color: #fff;
}
.btn-crt {
background: #a855f7;
color: #fff;
}
.search-container {
position: relative;
width: 280px;
}
.search-container input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
color: white;
border-radius: 6px;
padding: 4px 30px;
width: 100%;
}
.search-icon {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
opacity: 0.4;
}
.clear-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
color: #64748b;
cursor: pointer;
display: none;
} }
/* Table */
.content-area { .content-area {
flex-grow: 1; flex-grow: 1;
padding: 1rem; padding: 1rem;
@@ -155,33 +194,32 @@
.table-container { .table-container {
background: var(--card-dark); background: var(--card-dark);
border-radius: 6px; border-radius: 8px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
table.dataTable thead th { table.dataTable thead th {
background: #111827; background: rgba(255, 255, 255, 0.02);
font-size: 0.7rem; font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; padding: 10px 15px !important;
color: #94a3b8;
border-bottom: 1px solid var(--border-color) !important; border-bottom: 1px solid var(--border-color) !important;
} }
.search-input { .lvl-indicator {
background: #0f172a; width: 8px;
border: 1px solid var(--border-color); height: 8px;
color: white; border-radius: 50%;
border-radius: 4px; display: inline-block;
padding: 4px 12px; margin-right: 8px;
font-size: 0.8rem;
width: 280px;
} }
.range-info { .row-INF .lvl-indicator {
font-size: 0.75rem; background: #10b981;
color: var(--brand-color); }
font-weight: 600;
.row-ERR .lvl-indicator {
background: #ef4444;
} }
</style> </style>
</head> </head>
@@ -190,13 +228,12 @@
<div class="wrapper"> <div class="wrapper">
<aside> <aside>
<div class="sidebar-header text-center"> <div class="sidebar-header">
<h6 class="mb-3 d-flex align-items-center justify-content-center gap-2"> <h6 class="mb-3 d-flex align-items-center gap-2">
<i data-lucide="bar-chart-3" class="text-success"></i> LOG EXPLORER <i data-lucide="activity" class="text-success"></i> LogAnalytics
</h6> </h6>
<button class="btn btn-sm btn-outline-primary w-100 mb-2" <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
onclick="document.getElementById('dir-input').click()"> <i data-lucide="folder" size="14"></i> Directory
<i data-lucide="plus" size="14"></i> Select Project Folder
</button> </button>
<input type="file" id="dir-input" webkitdirectory hidden> <input type="file" id="dir-input" webkitdirectory hidden>
</div> </div>
@@ -206,40 +243,44 @@
<main> <main>
<div class="top-bar"> <div class="top-bar">
<div class="level-toggles"> <div class="level-toggles">
<input type="checkbox" class="btn-check" id="toggle-DBG" checked value="DBG"> <input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
<label class="btn btn-dbg" for="toggle-DBG">DBG</label> <label class="btn btn-inf" for="t-INF">INF <span id="c-INF">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-INF" checked value="INF"> <input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
<label class="btn btn-inf" for="toggle-INF">INF</label> <label class="btn btn-wrn" for="t-WRN">WRN <span id="c-WRN">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-WRN" checked value="WRN"> <input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
<label class="btn btn-wrn" for="toggle-WRN">WRN</label> <label class="btn btn-err" for="t-ERR">ERR <span id="c-ERR">0</span></label>
<input type="checkbox" class="btn-check" id="toggle-ERR" checked value="ERR"> <input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
<label class="btn btn-err" for="toggle-ERR">ERR</label> <label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
<span id="range-display" class="range-info ms-3"></span>
</div> </div>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<input type="text" id="global-search" class="search-input" placeholder="Regex Search..."> <div id="filter-info" class="small text-muted me-2" style="display:none">
<button class="btn btn-sm btn-dark border-secondary" id="reset-all" title="Reset Range & Filters"> <span class="badge bg-secondary">Time Filtered</span>
<i data-lucide="refresh-cw" size="14"></i> </div>
</button> <div class="search-container">
<i data-lucide="search" size="14" class="search-icon"></i>
<input type="text" id="global-search" placeholder="Search... (RegEx enabled)">
<button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
</div>
</div> </div>
</div> </div>
<div class="chart-section"> <div class="chart-container" id="chart-parent">
<span class="chart-hint"><i data-lucide="mouse-pointer-2" size="10"></i> Drag to select time
range</span>
<canvas id="intensityChart"></canvas> <canvas id="intensityChart"></canvas>
<svg id="selection-overlay" width="100%" height="100%">
<rect class="selection-rect" x="0" y="0" width="0" height="100%"></rect>
</svg>
</div> </div>
<div class="content-area"> <div class="content-area">
<div class="table-container shadow-lg"> <div class="table-container shadow">
<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="80">Level</th> <th width="90">Level</th>
<th width="120">Time</th> <th width="130">Time</th>
<th>Description</th> <th>Message</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@@ -249,6 +290,17 @@
</main> </main>
</div> </div>
<div class="modal fade" id="logModal" tabindex="-1">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content bg-dark border-secondary">
<div class="modal-body p-0">
<pre id="modal-content" class="m-0 p-4 text-success-emphasis"
style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
</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>
@@ -256,95 +308,130 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
let chart; let chart, table;
let selectedTimeRange = null; // {start: 'HH:mm', end: 'HH:mm'} let timeRange = { start: null, end: null };
$(document).ready(function () { $(document).ready(function () {
const table = $('#log-table').DataTable({ table = $('#log-table').DataTable({
dom: 'rtip', dom: 'rtip',
pageLength: 50, pageLength: 50,
order: [[2, 'desc']], order: [[2, 'desc']],
columns: [ columns: [
{ data: null, orderable: false, render: () => `<i data-lucide="more-horizontal" size="14" style="opacity:0.3"></i>` }, { className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
{ { data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
data: 'level', { data: 'time', className: 'text-muted' },
render: l => `<span class="badge w-100 btn-${l.toLowerCase()}">${l}</span>` { data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
},
{ data: 'time' },
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px">${m}</span>` }
], ],
createdRow: (row, data) => $(row).addClass('row-' + data.level),
drawCallback: () => lucide.createIcons() drawCallback: () => lucide.createIcons()
}); });
// Chart.js Configuration // Global Search
$('#global-search').on('keyup', function () {
table.search(this.value, true, false).draw();
$('#clear-search').toggle(this.value.length > 0);
});
$('#clear-search').on('click', resetFilters);
function resetFilters() {
$('#global-search').val('').trigger('keyup');
timeRange = { start: null, end: null };
table.draw();
$('#filter-info').hide();
$('.selection-rect').hide();
}
// Intensity 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: [{ data: [], backgroundColor: '#4ade80', borderRadius: 2, barPercentage: 0.8 }] }, data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
options: { options: {
responsive: true, responsive: true, maintainAspectRatio: false,
maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { enabled: true } },
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, ticks: { color: '#475569' }, grid: { color: '#1e293b' } } y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
},
plugins: {
legend: { display: false },
zoom: {
zoom: {
drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.2)', borderColor: '#4ade80', borderWidth: 1 },
mode: 'x',
onZoomComplete: ({ chart }) => {
const { min, max } = chart.scales.x;
const labels = chart.data.labels;
const start = labels[Math.max(0, Math.floor(min))];
const end = labels[Math.min(labels.length - 1, Math.ceil(max))];
selectedTimeRange = { start, end };
$('#range-display').text(`Range: ${start} - ${end}`);
table.draw();
}
}
}
} }
} }
}); });
// Custom Table Filter for Levels + Time Range // --- DRAG TO SELECT LOGIC ---
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => { let isDragging = false;
const level = data[1]; let startX = 0;
const timeStr = data[2]; // HH:mm:ss.SSS const $overlay = $('#selection-overlay');
const timeShort = timeStr.substring(0, 5); // HH:mm const $rect = $('.selection-rect');
// 1. Filter by Level $('#chart-parent').on('mousedown', function (e) {
const checkedLevels = $('.btn-check:checked').map((i, el) => $(el).val()).get(); isDragging = true;
if (!checkedLevels.includes(level)) return false; startX = e.pageX - $overlay.offset().left;
$rect.attr({ 'x': startX, 'width': 0 }).show();
// 2. Filter by Time Range (if zoomed)
if (selectedTimeRange) {
return timeShort >= selectedTimeRange.start && timeShort <= selectedTimeRange.end;
}
return true;
}); });
// Search & Reset $(window).on('mousemove', function (e) {
$('#global-search').on('keyup', function () { table.search(this.value, true, false).draw(); }); if (!isDragging) return;
$('#reset-all').on('click', () => { let currentX = e.pageX - $overlay.offset().left;
chart.resetZoom(); let width = currentX - startX;
selectedTimeRange = null; if (width < 0) {
$('#range-display').text(''); $rect.attr('x', currentX).attr('width', Math.abs(width));
$('#global-search').val(''); } else {
table.search('').draw(); $rect.attr('width', width);
}
});
$(window).on('mouseup', function (e) {
if (!isDragging) return;
isDragging = false;
const finalX = parseInt($rect.attr('x'));
const finalWidth = parseInt($rect.attr('width'));
if (finalWidth < 5) { // If just a click
resetFilters();
return;
}
// Map pixels to Chart labels
const labels = chart.data.labels;
const chartArea = chart.chartArea;
const scale = chart.scales.x;
const getValAtPixel = (px) => {
const decimal = scale.getValueForPixel(px);
const index = Math.round(decimal);
return labels[Math.max(0, Math.min(labels.length - 1, index))];
};
timeRange.start = getValAtPixel(finalX);
timeRange.end = getValAtPixel(finalX + finalWidth);
$('#filter-info').show();
table.draw();
});
// Right-click reset
$('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
// Custom Table Filter (Time + Level)
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
const lvl = data[1];
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
if (!checked.includes(lvl)) return false;
if (timeRange.start && timeRange.end) {
const logTime = data[2].substring(0, 5); // HH:mm
return logTime >= timeRange.start && logTime <= timeRange.end;
}
return true;
}); });
$('.btn-check').on('change', () => table.draw()); $('.btn-check').on('change', () => table.draw());
// File/Directory Loading // File loading
$('#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(); $('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
files.forEach((f, i) => list.append(`<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
window.loadedFiles = files; window.loadedFiles = files;
}); });
@@ -354,34 +441,42 @@
reader.onload = e => { reader.onload = e => {
const logs = parseLogs(e.target.result); const logs = parseLogs(e.target.result);
table.clear().rows.add(logs).draw(); table.clear().rows.add(logs).draw();
updateChart(logs); updateAnalytics(logs);
resetFilters();
}; };
reader.readAsText(window.loadedFiles[idx]); reader.readAsText(window.loadedFiles[idx]);
}; };
function parseLogs(text) { function parseLogs(text) {
const lines = text.split(/\r?\n/);
const logs = []; const logs = [];
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/; const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
lines.forEach(line => { text.split(/\r?\n/).forEach(line => {
const match = line.match(regex); const match = line.match(regex);
if (match) logs.push({ time: match[1], level: match[2], message: match[3] }); if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";
}); });
return logs; return logs;
} }
function updateChart(logs) { function updateAnalytics(logs) {
const bins = {}; const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
logs.forEach(l => { logs.forEach(l => {
const m = l.time.substring(0, 5); if (counts[l.level] !== undefined) counts[l.level]++;
bins[m] = (bins[m] || 0) + 1; const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1;
}); });
const labels = Object.keys(bins).sort(); Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
chart.data.labels = labels; const sortedLabels = Object.keys(bins).sort();
chart.data.datasets[0].data = labels.map(l => bins[l]); chart.data.labels = sortedLabels;
chart.resetZoom(); chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
chart.update(); chart.update();
} }
$('#log-table tbody').on('click', 'tr', function () {
const data = table.row(this).data();
$('#modal-content').text(`[TIME] ${data.time}\n[LVL] ${data.level}\n\n${data.message}\n\n${data.exception}`);
new bootstrap.Modal('#logModal').show();
});
}); });
</script> </script>
</body> </body>

7
js/chartjs-plugin-zoom.min.js vendored
View File

File diff suppressed because one or more lines are too long