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

Compare commits

base: alazhar:gemini_v2.1
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
gemini_v2. ... 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
3 changed files with 114 additions and 97 deletions
Expand all files Collapse all files

197
index.html
View File

@@ -4,15 +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 Pro // Zoom Edition</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/hammer.min.js"></script>
<script src="js/chartjs-plugin-zoom.min.js"></script>
<style> <style>
:root { :root {
@@ -21,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 {
@@ -92,14 +91,34 @@
align-items: center; align-items: center;
} }
/* Chart Area with Selection Overlay */
.chart-container { .chart-container {
height: 160px; 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;
} }
#selection-overlay {
position: absolute;
top: 10px;
left: 20px;
right: 20px;
bottom: 10px;
pointer-events: none;
z-index: 10;
}
.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;
@@ -133,7 +152,6 @@
color: #fff; color: #fff;
} }
/* Search Input Styling */
.search-container { .search-container {
position: relative; position: relative;
width: 280px; width: 280px;
@@ -168,10 +186,6 @@
display: none; display: none;
} }
.clear-btn:hover {
color: #fff;
}
.content-area { .content-area {
flex-grow: 1; flex-grow: 1;
padding: 1rem; padding: 1rem;
@@ -216,10 +230,10 @@
<aside> <aside>
<div class="sidebar-header"> <div class="sidebar-header">
<h6 class="mb-3 d-flex align-items-center gap-2"> <h6 class="mb-3 d-flex align-items-center gap-2">
<i data-lucide="shield-check" class="text-success"></i> LogViewer Pro <i data-lucide="activity" class="text-success"></i> LogAnalytics
</h6> </h6>
<button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()"> <button class="btn btn-sm btn-outline-secondary w-100" onclick="$('#dir-input').click()">
<i data-lucide="folder" size="14"></i> Open Directory <i data-lucide="folder" size="14"></i> Directory
</button> </button>
<input type="file" id="dir-input" webkitdirectory hidden> <input type="file" id="dir-input" webkitdirectory hidden>
</div> </div>
@@ -240,9 +254,9 @@
</div> </div>
<div class="d-flex align-items-center gap-2"> <div class="d-flex align-items-center gap-2">
<button class="btn btn-sm btn-outline-secondary" id="reset-chart-btn" title="Reset Chart Zoom"> <div id="filter-info" class="small text-muted me-2" style="display:none">
<i data-lucide="maximize" size="14"></i> Reset Chart <span class="badge bg-secondary">Time Filtered</span>
</button> </div>
<div class="search-container"> <div class="search-container">
<i data-lucide="search" size="14" class="search-icon"></i> <i data-lucide="search" size="14" class="search-icon"></i>
<input type="text" id="global-search" placeholder="Search... (RegEx enabled)"> <input type="text" id="global-search" placeholder="Search... (RegEx enabled)">
@@ -251,8 +265,11 @@
</div> </div>
</div> </div>
<div class="chart-container" id="chart-parent" title="Drag to Zoom | Right Click to Zoom Out"> <div class="chart-container" id="chart-parent">
<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">
@@ -276,10 +293,6 @@
<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">
<div class="modal-header py-2 border-secondary">
<h6 class="modal-title small">Log Context / Exception</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-success-emphasis" <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> style="font-size: 0.75rem; background: #000; overflow-x: auto; font-family: 'Fira Code', monospace;"></pre>
@@ -296,8 +309,7 @@
<script> <script>
lucide.createIcons(); lucide.createIcons();
let chart, table; let chart, table;
let rawLogs = []; let timeRange = { start: null, end: null };
let visibleTimeRange = { min: null, max: null };
$(document).ready(function () { $(document).ready(function () {
table = $('#log-table').DataTable({ table = $('#log-table').DataTable({
@@ -314,35 +326,30 @@
drawCallback: () => lucide.createIcons() drawCallback: () => lucide.createIcons()
}); });
// Search Controls // Global Search
$('#global-search').on('keyup', function () { $('#global-search').on('keyup', function () {
table.search(this.value, true, false).draw(); table.search(this.value, true, false).draw();
$('#clear-search').toggle(this.value.length > 0); $('#clear-search').toggle(this.value.length > 0);
}); });
$('#clear-search').on('click', function () { $('#clear-search').on('click', resetFilters);
$('#global-search').val('').trigger('keyup');
chart.resetZoom();
});
// Initialize Chart with Zoom Plugin 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: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] }, data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
options: { options: {
responsive: true, maintainAspectRatio: false, responsive: true, maintainAspectRatio: false,
plugins: { plugins: { legend: { display: false }, tooltip: { enabled: true } },
legend: { display: false },
zoom: {
zoom: {
drag: { enabled: true, backgroundColor: 'rgba(74, 222, 128, 0.1)', borderColor: 'rgba(74, 222, 128, 0.4)', borderWidth: 1 },
mode: 'x',
onZoomComplete: ({ chart }) => updateFiltersFromZoom(chart)
},
pan: { enabled: true, mode: 'x', onPanComplete: ({ chart }) => updateFiltersFromZoom(chart) }
}
},
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: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } } y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
@@ -350,51 +357,78 @@
} }
}); });
// Manual Zoom Controls // --- DRAG TO SELECT LOGIC ---
$('#reset-chart-btn').on('click', () => chart.resetZoom()); let isDragging = false;
let startX = 0;
const $overlay = $('#selection-overlay');
const $rect = $('.selection-rect');
// Right Click on Canvas to Zoom Out $('#chart-parent').on('mousedown', function (e) {
document.getElementById('intensityChart').addEventListener('contextmenu', (e) => { isDragging = true;
e.preventDefault(); startX = e.pageX - $overlay.offset().left;
chart.resetZoom(); $rect.attr({ 'x': startX, 'width': 0 }).show();
}); });
function updateFiltersFromZoom(chartInstance) { $(window).on('mousemove', function (e) {
const minIndex = Math.floor(chartInstance.scales.x.min); if (!isDragging) return;
const maxIndex = Math.ceil(chartInstance.scales.x.max); let currentX = e.pageX - $overlay.offset().left;
const labels = chartInstance.data.labels; let width = currentX - startX;
if (width < 0) {
$rect.attr('x', currentX).attr('width', Math.abs(width));
} else {
$rect.attr('width', width);
}
});
visibleTimeRange = { $(window).on('mouseup', function (e) {
min: labels[Math.max(0, minIndex)], if (!isDragging) return;
max: labels[Math.min(labels.length - 1, maxIndex)] 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))];
}; };
// Update main level counters based on zoomed logs timeRange.start = getValAtPixel(finalX);
const filteredLogs = rawLogs.filter(l => { timeRange.end = getValAtPixel(finalX + finalWidth);
const time = l.time.substring(0, 5);
return time >= visibleTimeRange.min && time <= visibleTimeRange.max;
});
updateLevelCounts(filteredLogs); $('#filter-info').show();
table.draw(); // Refresh table view based on global search + new time range table.draw();
} });
// Combined Filter (DataTable search + Level toggles + Zoom range) // Right-click reset
$('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
// Custom Table Filter (Time + Level)
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => { $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
const lvl = 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();
if (!checked.includes(lvl)) return false; if (!checked.includes(lvl)) return false;
if (visibleTimeRange.min && visibleTimeRange.max) { if (timeRange.start && timeRange.end) {
const logTime = data[2].substring(0, 5); const logTime = data[2].substring(0, 5); // HH:mm
return logTime >= visibleTimeRange.min && logTime <= visibleTimeRange.max; return logTime >= timeRange.start && logTime <= timeRange.end;
} }
return true; return true;
}); });
$('.btn-check').on('change', () => table.draw()); $('.btn-check').on('change', () => table.draw());
// File/Directory logic // 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'));
$('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`)); $('#file-list').empty().append(files.map((f, i) => `<div class="file-item" onclick="loadLog(${i})"><span>${f.name}</span></div>`));
@@ -405,28 +439,17 @@
$('.file-item').removeClass('active').eq(idx).addClass('active'); $('.file-item').removeClass('active').eq(idx).addClass('active');
const reader = new FileReader(); const reader = new FileReader();
reader.onload = e => { reader.onload = e => {
rawLogs = parseLogs(e.target.result); const logs = parseLogs(e.target.result);
table.clear().rows.add(rawLogs).draw(); table.clear().rows.add(logs).draw();
updateAnalytics(logs);
// Set initial chart data resetFilters();
const bins = {};
rawLogs.forEach(l => {
const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1;
});
const sortedLabels = Object.keys(bins).sort();
chart.data.labels = sortedLabels;
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
chart.resetZoom();
updateLevelCounts(rawLogs);
}; };
reader.readAsText(window.loadedFiles[idx]); reader.readAsText(window.loadedFiles[idx]);
}; };
function parseLogs(text) { function parseLogs(text) {
const logs = []; const logs = [];
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(INF|WRN|ERR|CRT|DBG|TRC)\]\s(.*)$/; const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
text.split(/\r?\n/).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], exception: "" }); if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
@@ -435,10 +458,18 @@
return logs; return logs;
} }
function updateLevelCounts(logs) { function updateAnalytics(logs) {
const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }; const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
logs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; }); logs.forEach(l => {
if (counts[l.level] !== undefined) counts[l.level]++;
const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1;
});
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString())); Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
const sortedLabels = Object.keys(bins).sort();
chart.data.labels = sortedLabels;
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
chart.update();
} }
$('#log-table tbody').on('click', 'tr', function () { $('#log-table tbody').on('click', 'tr', function () {

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

File diff suppressed because one or more lines are too long

7
js/hammer.min.js vendored
View File

File diff suppressed because one or more lines are too long