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

rev1.3

Browse Source
This commit is contained in:
Al Azhar
2026-04-27 21:34:30 +07:00
parent 8a34443b77
commit 8d65b877dd
1 changed files with 118 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
index.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log Viewer Pro // Analytics</title>
<title>Log Viewer Pro // Timeline Brush</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
@@ -18,6 +18,8 @@
--bg-dark: #0f172a;
--card-dark: #1e293b;
--border-color: #334155;
--selection-bg: rgba(74, 222, 128, 0.2);
--selection-border: rgba(74, 222, 128, 0.5);
}
body {
@@ -34,7 +36,6 @@
height: 100vh;
}
/* Sidebar */
aside {
width: var(--sidebar-width);
background: var(--card-dark);
@@ -74,7 +75,6 @@
font-weight: 600;
}
/* Main Content */
main {
flex-grow: 1;
display: flex;
@@ -91,16 +91,34 @@
align-items: center;
}
/* Intensity Chart */
/* Chart Area with Selection Overlay */
.chart-container {
height: 150px;
height: 160px;
background: #0b0e14;
padding: 10px 20px;
border-bottom: 1px solid var(--border-color);
position: relative;
user-select: none;
}
/* Stats & Toggles */
#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 {
border: none;
font-size: 0.7rem;
@@ -114,16 +132,6 @@
filter: grayscale(0.8);
}
.btn-trc {
background: #64748b;
color: #fff;
}
.btn-dbg {
background: #0ea5e9;
color: #fff;
}
.btn-inf {
background: #10b981;
color: #fff;
@@ -144,16 +152,9 @@
color: #fff;
}
/* Search & Time Filter */
.controls-group {
display: flex;
align-items: center;
gap: 10px;
}
.search-container {
position: relative;
width: 250px;
width: 280px;
}
.search-container input {
@@ -185,17 +186,6 @@
display: none;
}
/* Time Filter Dropdown */
.time-range-select {
background: #242b3d;
border: 1px solid var(--border-color);
color: #94a3b8;
font-size: 0.75rem;
border-radius: 6px;
padding: 4px 8px;
}
/* Table */
.content-area {
flex-grow: 1;
padding: 1rem;
@@ -240,10 +230,10 @@
<aside>
<div class="sidebar-header">
<h6 class="mb-3 d-flex align-items-center gap-2">
<i data-lucide="terminal" class="text-success"></i> LogViewer Pro
<i data-lucide="activity" class="text-success"></i> LogAnalytics
</h6>
<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>
<input type="file" id="dir-input" webkitdirectory hidden>
</div>
@@ -263,29 +253,27 @@
<label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
</div>
<div class="controls-group">
<select id="time-range" class="time-range-select">
<option value="all">All Time</option>
<option value="5">Last 5 Mins</option>
<option value="15">Last 15 Mins</option>
<option value="60">Last 1 Hour</option>
<option value="custom">Custom Range...</option>
</select>
<div class="d-flex align-items-center gap-2">
<div id="filter-info" class="small text-muted me-2" style="display:none">
<span class="badge bg-secondary">Time Filtered</span>
</div>
<div class="search-container">
<i data-lucide="search" size="14" class="search-icon"></i>
<input type="text" id="global-search" placeholder="Search logs...">
<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 class="chart-container">
<div class="chart-container" id="chart-parent">
<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 class="content-area">
<div class="table-container">
<div class="table-container shadow">
<table id="log-table" class="table table-dark table-hover table-sm w-100">
<thead>
<tr>
@@ -306,8 +294,8 @@
<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-info-emphasis"
style="font-size: 0.75rem; background: #000; overflow-x: auto;"></pre>
<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>
@@ -321,7 +309,7 @@
<script>
lucide.createIcons();
let chart, table;
let latestLogTime = null;
let timeRange = { start: null, end: null };
$(document).ready(function () {
table = $('#log-table').DataTable({
@@ -338,71 +326,109 @@
drawCallback: () => lucide.createIcons()
});
// Search Control
// 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', function () {
$('#clear-search').on('click', resetFilters);
function resetFilters() {
$('#global-search').val('').trigger('keyup');
$('#time-range').val('all').trigger('change');
});
timeRange = { start: null, end: null };
table.draw();
$('#filter-info').hide();
$('.selection-rect').hide();
}
// Intensity Chart
const ctx = document.getElementById('intensityChart').getContext('2d');
chart = new Chart(ctx, {
type: 'bar',
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
options: {
responsive: true, maintainAspectRatio: false,
plugins: { legend: { display: false } },
plugins: { legend: { display: false }, tooltip: { enabled: true } },
scales: {
x: { ticks: { color: '#64748b', font: { size: 10 } }, grid: { display: false } },
y: { beginAtZero: true, grid: { color: '#1e293b' }, ticks: { color: '#64748b', font: { size: 10 } } }
},
onClick: (e, els) => {
if (els.length > 0) {
const label = chart.data.labels[els[0].index];
table.column(2).search('^' + label, true, false).draw();
}
}
}
});
// Right click chart reset
$('#intensityChart').on('contextmenu', e => { e.preventDefault(); table.column(2).search('').draw(); });
// --- DRAG TO SELECT LOGIC ---
let isDragging = false;
let startX = 0;
const $overlay = $('#selection-overlay');
const $rect = $('.selection-rect');
// --- GRAFANA TIME RANGE LOGIC ---
$('#time-range').on('change', function () { table.draw(); });
$('#chart-parent').on('mousedown', function (e) {
isDragging = true;
startX = e.pageX - $overlay.offset().left;
$rect.attr({ 'x': startX, 'width': 0 }).show();
});
$(window).on('mousemove', function (e) {
if (!isDragging) return;
let currentX = e.pageX - $overlay.offset().left;
let width = currentX - startX;
if (width < 0) {
$rect.attr('x', currentX).attr('width', Math.abs(width));
} else {
$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) => {
// Level Filter
const lvl = data[1];
const checked = $('.btn-check:checked').map((i, el) => $(el).val()).get();
if (!checked.includes(lvl)) return false;
// Time Range Filter
const range = $('#time-range').val();
if (range === 'all') return true;
if (range === 'custom') return true; // Placeholder for custom modal
const logTimeStr = data[2]; // HH:mm:ss.SSS
if (!latestLogTime) return true;
const diffMinutes = getMinutesDiff(logTimeStr, latestLogTime);
return diffMinutes <= parseInt(range);
if (timeRange.start && timeRange.end) {
const logTime = data[2].substring(0, 5); // HH:mm
return logTime >= timeRange.start && logTime <= timeRange.end;
}
return true;
});
function getMinutesDiff(timeStr, latestStr) {
const parse = (s) => {
const parts = s.split(':');
return parseInt(parts[0]) * 60 + parseInt(parts[1]) + (parseFloat(parts[2]) / 60);
};
return Math.abs(parse(latestStr) - parse(timeStr));
}
$('.btn-check').on('change', () => table.draw());
// Load Files
// File loading
$('#dir-input').on('change', function (e) {
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>`));
@@ -414,9 +440,9 @@
const reader = new FileReader();
reader.onload = e => {
const logs = parseLogs(e.target.result);
if (logs.length > 0) latestLogTime = logs[logs.length - 1].time;
table.clear().rows.add(logs).draw();
updateAnalytics(logs);
resetFilters();
};
reader.readAsText(window.loadedFiles[idx]);
};
@@ -439,10 +465,10 @@
const min = l.time.substring(0, 5);
bins[min] = (bins[min] || 0) + 1;
});
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k]));
const labels = Object.keys(bins).sort();
chart.data.labels = labels;
chart.data.datasets[0].data = labels.map(l => bins[l]);
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();
}