Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 alazhar
|
8d65b877dd
|
||
|
alazhar
|
8a34443b77
|
||
|
alazhar
|
7c662f67e9
|
||
|
alazhar
|
712bceccbe
|
||
|
alazhar
|
d2bf90ccec
|
+382
-286
@@ -4,238 +4,298 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Log Viewer Pro // Dark Mode</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">
|
||||
<script src="js/lucide.min.js"></script>
|
||||
<script src="js/chart.js"></script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #0f111a;
|
||||
--card-bg: #1a1c27;
|
||||
--border-color: #2d303e;
|
||||
--accent-color: #3d5afe;
|
||||
--sidebar-width: 260px;
|
||||
--brand-color: #4ade80;
|
||||
--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 {
|
||||
background-color: var(--bg-color);
|
||||
color: #e0e0e0;
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
font-size: 0.85rem;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--bg-dark);
|
||||
color: #f1f5f9;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.82rem;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Full Screen Drop Zone */
|
||||
#drop-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(61, 90, 254, 0.9);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: var(--sidebar-width);
|
||||
background: var(--card-dark);
|
||||
border-right: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4px dashed #fff;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Sleek Table Design */
|
||||
.main-container {
|
||||
padding: 1.5rem;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
.sidebar-header {
|
||||
padding: 1rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
border: none !important;
|
||||
.file-list {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.file-item {
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.file-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.file-item.active {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: var(--brand-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
padding: 0.6rem 1.5rem;
|
||||
background: var(--card-dark);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Chart Area with Selection Overlay */
|
||||
.chart-container {
|
||||
height: 160px;
|
||||
background: #0b0e14;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
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 {
|
||||
border: none;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.btn-check:not(:checked)+.btn {
|
||||
opacity: 0.2;
|
||||
filter: grayscale(0.8);
|
||||
}
|
||||
|
||||
.btn-inf {
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-wrn {
|
||||
background: #f59e0b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-err {
|
||||
background: #ef4444;
|
||||
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;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex-grow: 1;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: var(--card-dark);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
table.dataTable thead th {
|
||||
background: #242736;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
font-size: 0.65rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 1px;
|
||||
padding: 10px 15px !important;
|
||||
border-bottom: 1px solid var(--border-color) !important;
|
||||
}
|
||||
|
||||
/* Level Badges */
|
||||
.lvl-badge {
|
||||
font-weight: 700;
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
.lvl-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.lvl-TRC {
|
||||
background: #424242;
|
||||
color: #bdbdbd;
|
||||
.row-INF .lvl-indicator {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.lvl-DBG {
|
||||
background: #1e3a8a;
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.lvl-INF {
|
||||
background: #064e3b;
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
.lvl-WRN {
|
||||
background: #78350f;
|
||||
color: #fcd34d;
|
||||
}
|
||||
|
||||
.lvl-ERR {
|
||||
background: #7f1d1d;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.lvl-CRT {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(236, 72, 153, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.details-control {
|
||||
cursor: pointer;
|
||||
color: var(--accent-color);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.details-control:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.exception-view {
|
||||
background: #000;
|
||||
color: #ff5555;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
border-left: 3px solid #7f1d1d;
|
||||
}
|
||||
|
||||
/* Search Bar Customization */
|
||||
.dataTables_filter input {
|
||||
background: #242736;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
width: 300px !important;
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
color: var(--accent-color);
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.props-col {
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
.row-ERR .lvl-indicator {
|
||||
background: #ef4444;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="drop-overlay">
|
||||
<i data-lucide="upload-cloud" size="64"></i>
|
||||
<h2 class="mt-3">Drop Log File to Import</h2>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<header class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="mb-0 fw-bold"><i data-lucide="terminal" class="me-2 text-primary"></i>LogView <span
|
||||
class="text-primary">Pro</span></h4>
|
||||
<p class="text-muted small mb-0">v3.0 • Dark Mode Enabled</p>
|
||||
<div class="wrapper">
|
||||
<aside>
|
||||
<div class="sidebar-header">
|
||||
<h6 class="mb-3 d-flex align-items-center gap-2">
|
||||
<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> Directory
|
||||
</button>
|
||||
<input type="file" id="dir-input" webkitdirectory hidden>
|
||||
</div>
|
||||
<button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('file-input').click()">
|
||||
<i data-lucide="file-plus" class="me-1"></i> Open File
|
||||
</button>
|
||||
<input type="file" id="file-input" hidden accept=".log,.txt">
|
||||
</header>
|
||||
<div class="file-list" id="file-list"></div>
|
||||
</aside>
|
||||
|
||||
<div class="table-card">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<select id="level-filter" class="form-select form-select-sm bg-dark border-secondary"
|
||||
style="width: 150px;">
|
||||
<option value="">All Levels</option>
|
||||
<option value="CRT">CRT (Critical)</option>
|
||||
<option value="ERR">ERR (Error)</option>
|
||||
<option value="WRN">WRN (Warning)</option>
|
||||
<option value="INF">INF (Info)</option>
|
||||
<option value="DBG">DBG (Debug)</option>
|
||||
<option value="TRC">TRC (Trace)</option>
|
||||
</select>
|
||||
<div id="stats-area" class="small text-muted"></div>
|
||||
<main>
|
||||
<div class="top-bar">
|
||||
<div class="level-toggles">
|
||||
<input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
|
||||
<label class="btn btn-inf" for="t-INF">INF <span 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 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 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 id="c-CRT">0</span></label>
|
||||
</div>
|
||||
|
||||
<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... (RegEx enabled)">
|
||||
<button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="log-table" class="table table-dark table-hover w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30"></th>
|
||||
<th width="120">Timestamp</th>
|
||||
<th width="80">Level</th>
|
||||
<th>Message</th>
|
||||
<th width="300">Properties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<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 shadow">
|
||||
<table id="log-table" class="table table-dark table-hover table-sm w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="35"></th>
|
||||
<th width="90">Level</th>
|
||||
<th width="130">Time</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="logModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content border-secondary shadow-lg">
|
||||
<div class="modal-header border-secondary">
|
||||
<h6 class="modal-title">Log Message Detail</h6>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<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-body-content" class="m-0 p-3"
|
||||
style="background:#000; color:#fff; font-size:0.8rem;"></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>
|
||||
@@ -248,139 +308,175 @@
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
const TRUNCATE_LIMIT = 150;
|
||||
let chart, table;
|
||||
let timeRange = { start: null, end: null };
|
||||
|
||||
$(document).ready(function () {
|
||||
const table = $('#log-table').DataTable({
|
||||
dom: '<"d-flex justify-content-between align-items-center mb-2"f>rtip',
|
||||
table = $('#log-table').DataTable({
|
||||
dom: 'rtip',
|
||||
pageLength: 50,
|
||||
order: [[2, 'desc']],
|
||||
columns: [
|
||||
{
|
||||
className: 'details-control',
|
||||
orderable: false,
|
||||
data: null,
|
||||
render: (d, t, row) => row.exception ? '<i data-lucide="chevron-right" size="16"></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: 'time', className: 'text-muted' },
|
||||
{
|
||||
data: 'level',
|
||||
render: l => `<span class="lvl-badge lvl-${l}">${l}</span>`
|
||||
},
|
||||
{
|
||||
data: 'message',
|
||||
render: function (data) {
|
||||
if (data.length > TRUNCATE_LIMIT) {
|
||||
return `<span>${data.substring(0, TRUNCATE_LIMIT)}</span><a class="btn-more ms-1" onclick="viewMore('${btoa(unescape(encodeURIComponent(data)))}')">...more</a>`;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
},
|
||||
{
|
||||
data: 'props',
|
||||
className: 'props-col',
|
||||
render: p => p ? `<span title="${p} text-truncate d-block" style="max-width:280px">${p}</span>` : ''
|
||||
}
|
||||
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
|
||||
],
|
||||
order: [[1, 'asc']],
|
||||
drawCallback: function () { lucide.createIcons(); },
|
||||
language: { search: "", searchPlaceholder: "Filter logs..." }
|
||||
createdRow: (row, data) => $(row).addClass('row-' + data.level),
|
||||
drawCallback: () => lucide.createIcons()
|
||||
});
|
||||
|
||||
// Expandable Exception Rows
|
||||
$('#log-table tbody').on('click', 'td.details-control', function () {
|
||||
let tr = $(this).closest('tr'), row = table.row(tr);
|
||||
if (row.child.isShown()) {
|
||||
row.child.hide();
|
||||
$(this).html('<i data-lucide="chevron-right" size="16"></i>');
|
||||
} else if (row.data().exception) {
|
||||
row.child(`<div class="exception-view">${row.data().exception}</div>`).show();
|
||||
$(this).html('<i data-lucide="chevron-down" class="text-danger" size="16"></i>');
|
||||
// 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');
|
||||
chart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', barPercentage: 0.9, categoryPercentage: 0.9 }] },
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: 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 } } }
|
||||
}
|
||||
}
|
||||
lucide.createIcons();
|
||||
});
|
||||
|
||||
// Level Filter
|
||||
$('#level-filter').on('change', function () {
|
||||
table.column(2).search(this.value ? `^${this.value}$` : '', true, false).draw();
|
||||
// --- DRAG TO SELECT LOGIC ---
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
const $overlay = $('#selection-overlay');
|
||||
const $rect = $('.selection-rect');
|
||||
|
||||
$('#chart-parent').on('mousedown', function (e) {
|
||||
isDragging = true;
|
||||
startX = e.pageX - $overlay.offset().left;
|
||||
$rect.attr({ 'x': startX, 'width': 0 }).show();
|
||||
});
|
||||
|
||||
// --- FULL SCREEN DRAG & DROP ---
|
||||
let dragCounter = 0;
|
||||
window.addEventListener('dragenter', e => {
|
||||
e.preventDefault();
|
||||
dragCounter++;
|
||||
$('#drop-overlay').css('display', 'flex');
|
||||
$(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.addEventListener('dragleave', e => {
|
||||
dragCounter--;
|
||||
if (dragCounter === 0) $('#drop-overlay').hide();
|
||||
$(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();
|
||||
});
|
||||
|
||||
window.addEventListener('dragover', e => e.preventDefault());
|
||||
// Right-click reset
|
||||
$('#chart-parent').on('contextmenu', e => { e.preventDefault(); resetFilters(); });
|
||||
|
||||
window.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
dragCounter = 0;
|
||||
$('#drop-overlay').hide();
|
||||
processFile(e.dataTransfer.files[0]);
|
||||
// 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;
|
||||
});
|
||||
|
||||
$('#file-input').on('change', e => processFile(e.target.files[0]));
|
||||
$('.btn-check').on('change', () => table.draw());
|
||||
|
||||
function processFile(file) {
|
||||
if (!file) return;
|
||||
// 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>`));
|
||||
window.loadedFiles = files;
|
||||
});
|
||||
|
||||
window.loadLog = function (idx) {
|
||||
$('.file-item').removeClass('active').eq(idx).addClass('active');
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const logs = parseLogs(e.target.result);
|
||||
table.clear().rows.add(logs).draw();
|
||||
updateStats(logs);
|
||||
updateAnalytics(logs);
|
||||
resetFilters();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
reader.readAsText(window.loadedFiles[idx]);
|
||||
};
|
||||
|
||||
function parseLogs(text) {
|
||||
const lines = text.split(/\r?\n/);
|
||||
const results = [];
|
||||
// Support 6 levels: TRC, DBG, WRN, INF, ERR, CRT
|
||||
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|WRN|INF|ERR|CRT)\]\s(.*)$/;
|
||||
|
||||
lines.forEach(line => {
|
||||
if (!line.trim()) return;
|
||||
const match = line.match(headerRegex);
|
||||
|
||||
if (match) {
|
||||
let content = match[3].trim();
|
||||
let message = content, props = "";
|
||||
|
||||
// Parse props at the end: (key: value)
|
||||
const lastParenIdx = content.lastIndexOf(' (');
|
||||
if (lastParenIdx !== -1 && content.endsWith(')')) {
|
||||
const possibleProps = content.substring(lastParenIdx + 2, content.length - 1);
|
||||
if (possibleProps.includes(':')) {
|
||||
props = possibleProps;
|
||||
message = content.substring(0, lastParenIdx).trim();
|
||||
}
|
||||
}
|
||||
results.push({ time: match[1], level: match[2], message, props, exception: "" });
|
||||
} else if (results.length > 0) {
|
||||
results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
|
||||
}
|
||||
const logs = [];
|
||||
const regex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\s(.*)$/;
|
||||
text.split(/\r?\n/).forEach(line => {
|
||||
const match = line.match(regex);
|
||||
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 results;
|
||||
return logs;
|
||||
}
|
||||
|
||||
function updateStats(logs) {
|
||||
const count = logs.length;
|
||||
const errs = logs.filter(l => l.level === 'ERR' || l.level === 'CRT').length;
|
||||
$('#stats-area').html(`<span class="me-3">${count} total logs</span> <span class="text-danger">${errs} errors/criticals</span>`);
|
||||
function updateAnalytics(logs) {
|
||||
const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
|
||||
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()));
|
||||
const sortedLabels = Object.keys(bins).sort();
|
||||
chart.data.labels = sortedLabels;
|
||||
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
|
||||
chart.update();
|
||||
}
|
||||
|
||||
window.viewMore = function (encoded) {
|
||||
const text = decodeURIComponent(escape(atob(encoded)));
|
||||
$('#modal-body-content').text(text);
|
||||
$('#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>
|
||||
</body>
|
||||
|
||||
+14
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user