rev3
This commit is contained in:
323
index.html
323
index.html
@@ -4,96 +4,123 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Advanced Log Parser</title>
|
||||
<title>Log Viewer Pro</title>
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
<style>
|
||||
body {
|
||||
background-color: #f4f7f6;
|
||||
font-size: 0.85rem;
|
||||
background-color: #f8f9fa;
|
||||
font-size: 0.82rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Drag & Drop */
|
||||
#drop-zone {
|
||||
border: 2px dashed #0d6efd;
|
||||
border: 2px dashed #dee2e6;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#drop-zone:hover {
|
||||
#drop-zone:hover,
|
||||
#drop-zone.dragover {
|
||||
border-color: #0d6efd;
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
/* Table Styling */
|
||||
.table-card {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge-ERR {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
table.dataTable {
|
||||
border-collapse: collapse !important;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.badge-INF {
|
||||
background-color: #0dcaf0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.badge-DBG {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-TRC {
|
||||
background-color: #6610f2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Detail Rows */
|
||||
td.details-control {
|
||||
cursor: pointer;
|
||||
.badge-lvl {
|
||||
font-weight: 600;
|
||||
padding: 0.4em 0.7em;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
min-width: 45px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #0d6efd;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.exception-box {
|
||||
background: #fff5f5;
|
||||
border-left: 4px solid #dc3545;
|
||||
padding: 12px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
white-space: pre-wrap;
|
||||
margin: 5px 0;
|
||||
.bg-INF {
|
||||
background-color: #e3f2fd;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.clickable-text {
|
||||
color: #0d6efd;
|
||||
.bg-ERR {
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.bg-DBG {
|
||||
background-color: #f5f5f5;
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.bg-TRC {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
/* Child Row / Exception */
|
||||
.details-control {
|
||||
cursor: pointer;
|
||||
color: #0d6efd;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.exception-wrapper {
|
||||
background: #1e1e1e;
|
||||
color: #dcdcdc;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
font-family: 'Consolas', monospace;
|
||||
font-size: 0.75rem;
|
||||
white-space: pre-wrap;
|
||||
margin: 10px 0;
|
||||
border-left: 4px solid #c62828;
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
.text-truncate-custom {
|
||||
max-width: 500px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.btn-more {
|
||||
color: #0d6efd;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Search styling */
|
||||
.dataTables_filter input {
|
||||
border-radius: 20px;
|
||||
padding: 5px 15px;
|
||||
border: 1px solid #ddd;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dataTables_filter input:focus {
|
||||
border-color: #0d6efd;
|
||||
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, .15);
|
||||
.props-text {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -102,35 +129,34 @@
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="drop-zone" onclick="document.getElementById('file-input').click()">
|
||||
<h3><i class="bi bi-file-earmark-text"></i> Drag & Drop Log File</h3>
|
||||
<p class="text-muted mb-0">The parser now supports inconsistent log formats and multi-line errors.</p>
|
||||
<h5 class="mb-1"><i class="bi bi-file-earmark-arrow-up text-primary"></i> Drop your .log file here</h5>
|
||||
<p class="text-muted small mb-0">The parser handles timestamped headers and multi-line exceptions
|
||||
automatically.</p>
|
||||
<input type="file" id="file-input" hidden accept=".log,.txt">
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="row g-3 mb-4 align-items-end">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label fw-bold small text-uppercase">Filter Level</label>
|
||||
<select id="level-filter" class="form-select form-select-sm">
|
||||
<option value="">Show All Levels</option>
|
||||
<option value="INF">INF (Info)</option>
|
||||
<option value="ERR">ERR (Error)</option>
|
||||
<option value="DBG">DBG (Debug)</option>
|
||||
<option value="TRC">TRC (Trace)</option>
|
||||
<div class="table-card">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
<select id="level-filter" class="form-select form-select-sm" style="width: 140px;">
|
||||
<option value="">All Levels</option>
|
||||
<option value="INF">INF</option>
|
||||
<option value="ERR">ERR</option>
|
||||
<option value="DBG">DBG</option>
|
||||
<option value="TRC">TRC</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="search-container"></div>
|
||||
</div>
|
||||
|
||||
<table id="log-table" class="table table-sm table-hover w-100">
|
||||
<table id="log-table" class="table table-hover table-sm w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="30"></th>
|
||||
<th width="110">Time</th>
|
||||
<th width="70">Level</th>
|
||||
<th width="50">ID</th>
|
||||
<th width="70">Tag</th>
|
||||
<th width="100">Timestamp</th>
|
||||
<th width="60">Lvl</th>
|
||||
<th>Message</th>
|
||||
<th>Props</th>
|
||||
<th width="250">Properties</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
@@ -139,16 +165,15 @@
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="logModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h6 class="modal-title fw-bold">Full Log Content</h6>
|
||||
<div class="modal-header py-2 px-3">
|
||||
<h6 class="modal-title">Full Message Log</h6>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<div id="modal-content-text"
|
||||
style="white-space: pre-wrap; font-family: monospace; background: #212529; color: #f8f9fa; padding: 20px; margin: 0; min-height: 200px;">
|
||||
</div>
|
||||
<div class="modal-body bg-light">
|
||||
<div id="modal-body-content"
|
||||
style="white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,135 +186,131 @@
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
const MAX_LEN = 100;
|
||||
const TRUNCATE_LIMIT = 120;
|
||||
|
||||
// DataTable setup
|
||||
let table = $('#log-table').DataTable({
|
||||
// 'f' adds the search filter box
|
||||
dom: '<"d-flex justify-content-between align-items-center mb-3"lf>rtip',
|
||||
const table = $('#log-table').DataTable({
|
||||
dom: '<"d-flex justify-content-between mb-2"f>rtip',
|
||||
columns: [
|
||||
{
|
||||
className: 'details-control',
|
||||
orderable: false,
|
||||
data: null,
|
||||
render: (data, type, row) => row.exception ? '<i class="bi bi-plus-circle-fill"></i>' : ''
|
||||
render: (data, type, row) => row.exception ? '<i class="bi bi-chevron-right"></i>' : ''
|
||||
},
|
||||
{ data: 'time' },
|
||||
{
|
||||
data: 'level',
|
||||
render: l => `<span class="badge badge-${l}">${l}</span>`
|
||||
render: l => `<span class="badge-lvl bg-${l}">${l}</span>`
|
||||
},
|
||||
{ data: 'id' },
|
||||
{ data: 'tag' },
|
||||
{
|
||||
data: 'message',
|
||||
render: (data) => {
|
||||
if (data.length > MAX_LEN) {
|
||||
return `${data.substr(0, MAX_LEN)}... <span class="clickable-text show-full" data-full="${btoa(unescape(encodeURIComponent(data)))}">[view more]</span>`;
|
||||
render: function (data) {
|
||||
if (data.length > TRUNCATE_LIMIT) {
|
||||
return `<span class="text-truncate-custom">${data.substring(0, TRUNCATE_LIMIT)}</span><span class="btn-more" onclick="showFullLog('${btoa(unescape(encodeURIComponent(data)))}')">...more</span>`;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
},
|
||||
{
|
||||
data: 'props',
|
||||
render: p => `<span class="text-muted small" title="${p}">${p}</span>`
|
||||
render: p => `<span class="props-text">${p}</span>`
|
||||
}
|
||||
],
|
||||
order: [[1, 'asc']],
|
||||
language: { search: "", searchPlaceholder: "Search any log..." }
|
||||
language: { search: "", searchPlaceholder: "Quick search logs..." }
|
||||
});
|
||||
|
||||
// Expand Exceptions
|
||||
// Expand/Collapse Child Row
|
||||
$('#log-table tbody').on('click', 'td.details-control', function () {
|
||||
let tr = $(this).closest('tr'), row = table.row(tr);
|
||||
let tr = $(this).closest('tr');
|
||||
let row = table.row(tr);
|
||||
let icon = $(this).find('i');
|
||||
|
||||
if (row.child.isShown()) {
|
||||
row.child.hide();
|
||||
$(this).html('<i class="bi bi-plus-circle-fill"></i>');
|
||||
icon.attr('class', 'bi bi-chevron-right');
|
||||
} else if (row.data().exception) {
|
||||
row.child(`<div class="exception-box">${row.data().exception}</div>`).show();
|
||||
$(this).html('<i class="bi bi-dash-circle-fill text-danger"></i>');
|
||||
row.child(`<div class="exception-wrapper">${row.data().exception}</div>`).show();
|
||||
icon.attr('class', 'bi bi-chevron-down text-danger');
|
||||
}
|
||||
});
|
||||
|
||||
// Full Content Modal
|
||||
$('#log-table tbody').on('click', '.show-full', function () {
|
||||
const fullText = decodeURIComponent(escape(atob($(this).data('full'))));
|
||||
$('#modal-content-text').text(fullText);
|
||||
new bootstrap.Modal('#logModal').show();
|
||||
// Level Filter
|
||||
$('#level-filter').on('change', function () {
|
||||
table.column(2).search(this.value).draw();
|
||||
});
|
||||
|
||||
// Filters
|
||||
$('#level-filter').on('change', function () { table.column(2).search(this.value).draw(); });
|
||||
|
||||
// File Input
|
||||
$('#file-input').on('change', e => handleFile(e.target.files[0]));
|
||||
$('#drop-zone').on('dragover', e => { e.preventDefault(); $('#drop-zone').css('background', '#f0f7ff'); });
|
||||
$('#drop-zone').on('dragleave', e => { $('#drop-zone').css('background', '#fff'); });
|
||||
$('#drop-zone').on('drop', e => {
|
||||
// Drag and Drop Logic
|
||||
const zone = $('#drop-zone');
|
||||
zone.on('dragover', e => { e.preventDefault(); zone.addClass('dragover'); });
|
||||
zone.on('dragleave', e => { zone.removeClass('dragover'); });
|
||||
zone.on('drop', e => {
|
||||
e.preventDefault();
|
||||
$('#drop-zone').css('background', '#fff');
|
||||
handleFile(e.originalEvent.dataTransfer.files[0]);
|
||||
zone.removeClass('dragover');
|
||||
processFile(e.originalEvent.dataTransfer.files[0]);
|
||||
});
|
||||
$('#file-input').on('change', e => processFile(e.target.files[0]));
|
||||
|
||||
function handleFile(file) {
|
||||
function processFile(file) {
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const logs = parseLogs(e.target.result);
|
||||
table.clear().rows.add(logs).draw();
|
||||
const data = parseLogFile(e.target.result);
|
||||
table.clear().rows.add(data).draw();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function parseLogs(text) {
|
||||
function parseLogFile(text) {
|
||||
const lines = text.split(/\r?\n/);
|
||||
const logs = [];
|
||||
|
||||
// Revised Regex: Just gets Time, Level, and the rest.
|
||||
const baseRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||||
// Secondary regex to see if the "rest" starts with the ID | (Tag) pattern
|
||||
const metaRegex = /^(\d+)\s\|\s\((.*?)\)\s(.*)$/;
|
||||
const results = [];
|
||||
// Header pattern: HH:mm:ss.SSS [LVL]
|
||||
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(\w+)\]\s(.*)$/;
|
||||
|
||||
lines.forEach(line => {
|
||||
const trimmed = line.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
const baseMatch = line.match(baseRegex);
|
||||
const match = line.match(headerRegex);
|
||||
if (match) {
|
||||
let time = match[1];
|
||||
let level = match[2];
|
||||
let content = match[3].trim();
|
||||
|
||||
if (baseMatch) {
|
||||
let time = baseMatch[1];
|
||||
let level = baseMatch[2];
|
||||
let content = baseMatch[3];
|
||||
let message = content;
|
||||
let props = "";
|
||||
|
||||
let id = "", tag = "", message = content, props = "";
|
||||
|
||||
// Check if this line has the "ID | (TAG)" format
|
||||
const metaMatch = content.match(metaRegex);
|
||||
if (metaMatch) {
|
||||
id = metaMatch[1];
|
||||
tag = metaMatch[2];
|
||||
message = metaMatch[3];
|
||||
// Template: {message} ({props})
|
||||
// Look for the last set of parentheses that contain a colon (key:value)
|
||||
const lastOpenParen = content.lastIndexOf(' (');
|
||||
if (lastOpenParen !== -1 && content.endsWith(')')) {
|
||||
const potentialProps = content.substring(lastOpenParen + 2, content.length - 1);
|
||||
if (potentialProps.includes(':')) {
|
||||
props = potentialProps;
|
||||
message = content.substring(0, lastOpenParen).trim();
|
||||
}
|
||||
}
|
||||
|
||||
// Extract Props if they exist at the end (idtask: 123)
|
||||
const propMatch = message.match(/\(([^)]+:[^)]+)\)$/);
|
||||
if (propMatch) {
|
||||
props = propMatch[1];
|
||||
message = message.replace(propMatch[0], "").trim();
|
||||
}
|
||||
|
||||
logs.push({ time, level, id, tag, message, props, exception: "" });
|
||||
results.push({ time, level, message, props, exception: "" });
|
||||
} else {
|
||||
// If it's not a header line, it's an exception/stack trace
|
||||
if (logs.length > 0) {
|
||||
logs[logs.length - 1].exception += line + "\n";
|
||||
// If line doesn't start with timestamp, it's an exception/stack trace
|
||||
if (results.length > 0) {
|
||||
results[results.length - 1].exception += (results[results.length - 1].exception ? "\n" : "") + line;
|
||||
}
|
||||
}
|
||||
});
|
||||
return logs;
|
||||
return results;
|
||||
}
|
||||
|
||||
// Modal Helper
|
||||
window.showFullLog = function (encoded) {
|
||||
const text = decodeURIComponent(escape(atob(encoded)));
|
||||
$('#modal-body-content').text(text);
|
||||
new bootstrap.Modal('#logModal').show();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user