rev1.2
This commit is contained in:
262
index.html
262
index.html
@@ -4,7 +4,7 @@
|
|||||||
<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</title>
|
<title>Log Viewer Pro // Analytics</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">
|
||||||
@@ -60,9 +60,8 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
transition: 0.2s;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-item:hover {
|
.file-item:hover {
|
||||||
@@ -92,26 +91,26 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Chart Area */
|
/* Intensity Chart */
|
||||||
.chart-container {
|
.chart-container {
|
||||||
height: 160px;
|
height: 150px;
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stats & Toggles */
|
/* Stats & Toggles */
|
||||||
.level-toggles .btn {
|
.level-toggles .btn {
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 0.72rem;
|
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.25;
|
opacity: 0.2;
|
||||||
filter: grayscale(0.8);
|
filter: grayscale(0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -145,10 +144,16 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Search with Clear Button */
|
/* Search & Time Filter */
|
||||||
|
.controls-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.search-container {
|
.search-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 320px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container input {
|
.search-container input {
|
||||||
@@ -156,33 +161,38 @@
|
|||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 5px 35px 5px 35px;
|
padding: 4px 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
left: 8px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-search {
|
.clear-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 8px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
opacity: 0.4;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
border: none;
|
border: none;
|
||||||
background: none;
|
background: none;
|
||||||
color: white;
|
color: #64748b;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-search:hover {
|
/* Time Filter Dropdown */
|
||||||
opacity: 1;
|
.time-range-select {
|
||||||
|
background: #242b3d;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table */
|
/* Table */
|
||||||
@@ -204,7 +214,6 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: 10px 15px !important;
|
padding: 10px 15px !important;
|
||||||
border-bottom: 1px solid var(--border-color) !important;
|
border-bottom: 1px solid var(--border-color) !important;
|
||||||
color: #94a3b8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.lvl-indicator {
|
.lvl-indicator {
|
||||||
@@ -215,40 +224,13 @@
|
|||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-TRC .lvl-indicator {
|
|
||||||
background: #64748b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-DBG .lvl-indicator {
|
|
||||||
background: #0ea5e9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-INF .lvl-indicator {
|
.row-INF .lvl-indicator {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-WRN .lvl-indicator {
|
|
||||||
background: #f59e0b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.row-ERR .lvl-indicator {
|
.row-ERR .lvl-indicator {
|
||||||
background: #ef4444;
|
background: #ef4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-CRT .lvl-indicator {
|
|
||||||
background: #a855f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-trigger {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.4;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details-trigger:hover {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--brand-color);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -260,9 +242,8 @@
|
|||||||
<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="terminal" class="text-success"></i> LogViewer Pro
|
<i data-lucide="terminal" class="text-success"></i> LogViewer Pro
|
||||||
</h6>
|
</h6>
|
||||||
<button class="btn btn-sm btn-outline-secondary w-100"
|
<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> Open Directory
|
||||||
<i data-lucide="folder-search" size="14"></i> Open Directory
|
|
||||||
</button>
|
</button>
|
||||||
<input type="file" id="dir-input" webkitdirectory hidden>
|
<input type="file" id="dir-input" webkitdirectory hidden>
|
||||||
</div>
|
</div>
|
||||||
@@ -271,34 +252,35 @@
|
|||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="top-bar">
|
<div class="top-bar">
|
||||||
<div class="level-toggles" id="filter-buttons">
|
<div class="level-toggles">
|
||||||
<input type="checkbox" class="btn-check" id="t-TRC" checked value="TRC">
|
|
||||||
<label class="btn btn-trc" for="t-TRC">TRC <span class="badge" id="c-TRC">0</span></label>
|
|
||||||
|
|
||||||
<input type="checkbox" class="btn-check" id="t-DBG" checked value="DBG">
|
|
||||||
<label class="btn btn-dbg" for="t-DBG">DBG <span class="badge" id="c-DBG">0</span></label>
|
|
||||||
|
|
||||||
<input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
|
<input type="checkbox" class="btn-check" id="t-INF" checked value="INF">
|
||||||
<label class="btn btn-inf" for="t-INF">INF <span class="badge" id="c-INF">0</span></label>
|
<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">
|
<input type="checkbox" class="btn-check" id="t-WRN" checked value="WRN">
|
||||||
<label class="btn btn-wrn" for="t-WRN">WRN <span class="badge" id="c-WRN">0</span></label>
|
<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">
|
<input type="checkbox" class="btn-check" id="t-ERR" checked value="ERR">
|
||||||
<label class="btn btn-err" for="t-ERR">ERR <span class="badge" id="c-ERR">0</span></label>
|
<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">
|
<input type="checkbox" class="btn-check" id="t-CRT" checked value="CRT">
|
||||||
<label class="btn btn-crt" for="t-CRT">CRT <span class="badge" id="c-CRT">0</span></label>
|
<label class="btn btn-crt" for="t-CRT">CRT <span id="c-CRT">0</span></label>
|
||||||
</div>
|
</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="search-container">
|
<div class="search-container">
|
||||||
<i data-lucide="search" size="16" class="search-icon"></i>
|
<i data-lucide="search" size="14" class="search-icon"></i>
|
||||||
<input type="text" id="global-search" placeholder="Regex search...">
|
<input type="text" id="global-search" placeholder="Search logs...">
|
||||||
<button id="clear-search" class="clear-search"><i data-lucide="x-circle" size="16"></i></button>
|
<button id="clear-search" class="clear-btn"><i data-lucide="x" size="14"></i></button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chart-container" title="Left-click to filter time | Right-click to reset">
|
<div class="chart-container">
|
||||||
<canvas id="intensityChart"></canvas>
|
<canvas id="intensityChart"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -310,7 +292,7 @@
|
|||||||
<th width="35"></th>
|
<th width="35"></th>
|
||||||
<th width="90">Level</th>
|
<th width="90">Level</th>
|
||||||
<th width="130">Time</th>
|
<th width="130">Time</th>
|
||||||
<th>Description</th>
|
<th>Message</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
@@ -322,14 +304,10 @@
|
|||||||
|
|
||||||
<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 shadow-lg">
|
<div class="modal-content bg-dark border-secondary">
|
||||||
<div class="modal-header border-secondary py-2">
|
|
||||||
<h6 class="modal-title small">Log Context</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-info-emphasis"
|
<pre id="modal-content" class="m-0 p-4 text-info-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;"></pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -342,99 +320,101 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
lucide.createIcons();
|
lucide.createIcons();
|
||||||
let chart;
|
let chart, table;
|
||||||
let table;
|
let latestLogTime = null;
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// DataTable Initialization
|
|
||||||
table = $('#log-table').DataTable({
|
table = $('#log-table').DataTable({
|
||||||
dom: 'rtip',
|
dom: 'rtip',
|
||||||
pageLength: 50,
|
pageLength: 50,
|
||||||
order: [[2, 'desc']],
|
order: [[2, 'desc']],
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{ className: 'text-center opacity-50', orderable: false, data: null, defaultContent: '<i data-lucide="eye" size="14"></i>' },
|
||||||
className: 'details-trigger text-center',
|
{ data: 'level', render: l => `<span class="lvl-indicator"></span><strong>${l}</strong>` },
|
||||||
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: 'time', className: 'text-muted' },
|
||||||
{
|
{ data: 'message', render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>` }
|
||||||
data: 'message',
|
|
||||||
render: m => `<span class="text-truncate d-block" style="max-width: 900px;">${m}</span>`
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
createdRow: (row, data) => $(row).addClass('row-' + data.level),
|
createdRow: (row, data) => $(row).addClass('row-' + data.level),
|
||||||
drawCallback: () => lucide.createIcons()
|
drawCallback: () => lucide.createIcons()
|
||||||
});
|
});
|
||||||
|
|
||||||
// Search logic
|
// Search Control
|
||||||
$('#global-search').on('keyup', function () {
|
$('#global-search').on('keyup', function () {
|
||||||
const val = this.value;
|
table.search(this.value, true, false).draw();
|
||||||
table.search(val, true, false).draw();
|
$('#clear-search').toggle(this.value.length > 0);
|
||||||
$('#clear-search').toggle(val.length > 0);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#clear-search').on('click', function () {
|
$('#clear-search').on('click', function () {
|
||||||
$('#global-search').val('').trigger('keyup');
|
$('#global-search').val('').trigger('keyup');
|
||||||
table.column(2).search('').draw(); // Also clear chart filters
|
$('#time-range').val('all').trigger('change');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize Chart
|
// 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', borderRadius: 2 }] },
|
data: { labels: [], datasets: [{ label: 'Logs', data: [], backgroundColor: '#4ade80', borderRadius: 2 }] },
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true, maintainAspectRatio: false,
|
||||||
maintainAspectRatio: false,
|
|
||||||
plugins: { legend: { display: false } },
|
plugins: { legend: { display: false } },
|
||||||
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 } } }
|
||||||
},
|
},
|
||||||
onClick: (e, activeEls) => {
|
onClick: (e, els) => {
|
||||||
if (activeEls.length > 0) {
|
if (els.length > 0) {
|
||||||
const label = chart.data.labels[activeEls[0].index];
|
const label = chart.data.labels[els[0].index];
|
||||||
table.column(2).search('^' + label, true, false).draw();
|
table.column(2).search('^' + label, true, false).draw();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Right Click to Reset Chart/Time Filter
|
// Right click chart reset
|
||||||
document.getElementById('intensityChart').addEventListener('contextmenu', (e) => {
|
$('#intensityChart').on('contextmenu', e => { e.preventDefault(); table.column(2).search('').draw(); });
|
||||||
e.preventDefault();
|
|
||||||
table.column(2).search('').draw();
|
// --- GRAFANA TIME RANGE LOGIC ---
|
||||||
});
|
$('#time-range').on('change', function () { table.draw(); });
|
||||||
|
|
||||||
// Level Toggles
|
|
||||||
$('.btn-check').on('change', () => table.draw());
|
|
||||||
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
|
$.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
|
||||||
|
// Level Filter
|
||||||
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();
|
||||||
return checked.includes(lvl);
|
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);
|
||||||
});
|
});
|
||||||
|
|
||||||
// File/Directory Loader
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load Files
|
||||||
$('#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((file, idx) => {
|
|
||||||
list.append(`<div class="file-item" onclick="loadLog(${idx})"><span>${file.name}</span></div>`);
|
|
||||||
});
|
|
||||||
window.loadedFiles = files;
|
window.loadedFiles = files;
|
||||||
});
|
});
|
||||||
|
|
||||||
window.loadLog = function (idx) {
|
window.loadLog = function (idx) {
|
||||||
$('.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 = function (e) {
|
reader.onload = e => {
|
||||||
const logs = parseLogs(e.target.result);
|
const logs = parseLogs(e.target.result);
|
||||||
|
if (logs.length > 0) latestLogTime = logs[logs.length - 1].time;
|
||||||
table.clear().rows.add(logs).draw();
|
table.clear().rows.add(logs).draw();
|
||||||
updateAnalytics(logs);
|
updateAnalytics(logs);
|
||||||
};
|
};
|
||||||
@@ -442,49 +422,33 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
function parseLogs(text) {
|
function parseLogs(text) {
|
||||||
const lines = text.split(/\r?\n/);
|
|
||||||
const logs = [];
|
const logs = [];
|
||||||
const headerRegex = /^(\d{2}:\d{2}:\d{2}\.\d{3})\s\[(TRC|DBG|INF|WRN|ERR|CRT)\]\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 => {
|
||||||
lines.forEach(line => {
|
const match = line.match(regex);
|
||||||
const match = line.match(headerRegex);
|
if (match) logs.push({ time: match[1], level: match[2], message: match[3], exception: "" });
|
||||||
if (match) {
|
else if (logs.length > 0) logs[logs.length - 1].exception += line + "\n";
|
||||||
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 updateAnalytics(logs) {
|
function updateAnalytics(logs) {
|
||||||
// Update Counts
|
const counts = { INF: 0, WRN: 0, ERR: 0, CRT: 0 }, bins = {};
|
||||||
const counts = { TRC: 0, DBG: 0, INF: 0, WRN: 0, ERR: 0, CRT: 0 };
|
|
||||||
const bins = {};
|
|
||||||
|
|
||||||
logs.forEach(l => {
|
logs.forEach(l => {
|
||||||
// Count levels
|
|
||||||
if (counts[l.level] !== undefined) counts[l.level]++;
|
if (counts[l.level] !== undefined) counts[l.level]++;
|
||||||
// Bin minutes for chart
|
|
||||||
const min = l.time.substring(0, 5);
|
const min = l.time.substring(0, 5);
|
||||||
bins[min] = (bins[min] || 0) + 1;
|
bins[min] = (bins[min] || 0) + 1;
|
||||||
});
|
});
|
||||||
|
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k]));
|
||||||
// Set numbers in UI
|
const labels = Object.keys(bins).sort();
|
||||||
Object.keys(counts).forEach(k => $(`#c-${k}`).text(counts[k].toLocaleString()));
|
chart.data.labels = labels;
|
||||||
|
chart.data.datasets[0].data = labels.map(l => bins[l]);
|
||||||
// Update Chart
|
|
||||||
const sortedLabels = Object.keys(bins).sort();
|
|
||||||
chart.data.labels = sortedLabels;
|
|
||||||
chart.data.datasets[0].data = sortedLabels.map(l => bins[l]);
|
|
||||||
chart.update();
|
chart.update();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix: Show Detail Modal logic
|
$('#log-table tbody').on('click', 'tr', function () {
|
||||||
$('#log-table tbody').on('click', '.details-trigger', function () {
|
const data = table.row(this).data();
|
||||||
const rowData = table.row($(this).closest('tr')).data();
|
$('#modal-content').text(`[TIME] ${data.time}\n[LVL] ${data.level}\n\n${data.message}\n\n${data.exception}`);
|
||||||
const full = `[TIMESTAMP] ${rowData.time}\n[LEVEL] ${rowData.level}\n[MESSAGE] ${rowData.message}\n\n[CONTEXT/STACK TRACE]\n${rowData.exception || 'No additional context available.'}`;
|
|
||||||
$('#modal-content').text(full);
|
|
||||||
new bootstrap.Modal('#logModal').show();
|
new bootstrap.Modal('#logModal').show();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user