fix time filter and loader
This commit is contained in:
299
index.html
299
index.html
@@ -676,6 +676,57 @@
|
||||
.fade-in {
|
||||
animation: fadeIn .2s ease forwards
|
||||
}
|
||||
|
||||
.log-container {
|
||||
position: relative;
|
||||
/* Crucial: pins the loader to this div */
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
/* The Overlay */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* Modern shorthand for top, left, bottom, right: 0 */
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
/* Dim the background */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
/* Ensures it stays on top of the chart */
|
||||
color: white;
|
||||
transition: opacity 0.3s ease;
|
||||
visibility: hidden;
|
||||
/* Hidden by default */
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Show state */
|
||||
.loading-overlay.is-active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Simple Spinner Animation */
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -694,7 +745,7 @@
|
||||
|
||||
<!-- Header -->
|
||||
<div id="header">
|
||||
<div id="logo">log<span>scope</span></div>
|
||||
<div id="logo">log<span>viewer</span></div>
|
||||
<div class="hdr-sep"></div>
|
||||
<div id="file-info">No file loaded — drag & drop or select a file</div>
|
||||
<button id="file-btn" onclick="document.getElementById('file-input').click()">
|
||||
@@ -707,88 +758,95 @@
|
||||
<input type="file" id="file-input" accept=".log,.txt,.json,text/plain">
|
||||
</div>
|
||||
|
||||
<!-- Filter bar -->
|
||||
<div id="filter-bar">
|
||||
<div id="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4" />
|
||||
<path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
|
||||
</svg>
|
||||
<input type="text" id="search" placeholder="Filter messages… (regex supported)" autocomplete="off">
|
||||
<span id="regex-badge">.*</span>
|
||||
</div>
|
||||
<div class="hdr-sep"></div>
|
||||
<div class="level-pills" id="level-pills">
|
||||
<button class="level-pill" data-level="TRACE"><span class="pill-dot"></span>Trace<span class="pill-count"
|
||||
id="cnt-TRACE">0</span></button>
|
||||
<button class="level-pill" data-level="DEBUG"><span class="pill-dot"></span>Debug<span class="pill-count"
|
||||
id="cnt-DEBUG">0</span></button>
|
||||
<button class="level-pill" data-level="INFO"><span class="pill-dot"></span>Info<span class="pill-count"
|
||||
id="cnt-INFO">0</span></button>
|
||||
<button class="level-pill" data-level="WARN"><span class="pill-dot"></span>Warn<span class="pill-count"
|
||||
id="cnt-WARN">0</span></button>
|
||||
<button class="level-pill" data-level="ERROR"><span class="pill-dot"></span>Error<span class="pill-count"
|
||||
id="cnt-ERROR">0</span></button>
|
||||
<button class="level-pill" data-level="FATAL"><span class="pill-dot"></span>Fatal<span class="pill-count"
|
||||
id="cnt-FATAL">0</span></button>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<div id="time-badge">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4" />
|
||||
<path d="M8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
|
||||
<div id="log-container">
|
||||
<!-- Filter bar -->
|
||||
<div id="filter-bar">
|
||||
<div id="search-wrap">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.4" />
|
||||
<path d="M10.5 10.5L14 14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
|
||||
</svg>
|
||||
<span id="time-badge-label">time range</span>
|
||||
<span class="tx-close">✕</span>
|
||||
<input type="text" id="search" placeholder="Filter messages… (regex supported)" autocomplete="off">
|
||||
<span id="regex-badge">.*</span>
|
||||
</div>
|
||||
<button id="clear-filters">Clear filters</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Chart -->
|
||||
<div id="chart-panel">
|
||||
<div id="chart-wrap">
|
||||
<canvas id="intensity-chart"></canvas>
|
||||
<span id="chart-hint">drag to zoom · right-click to reset</span>
|
||||
<div class="hdr-sep"></div>
|
||||
<div class="level-pills" id="level-pills">
|
||||
<button class="level-pill" data-level="TRACE"><span class="pill-dot"></span>Trace<span class="pill-count"
|
||||
id="cnt-TRACE">0</span></button>
|
||||
<button class="level-pill" data-level="DEBUG"><span class="pill-dot"></span>Debug<span class="pill-count"
|
||||
id="cnt-DEBUG">0</span></button>
|
||||
<button class="level-pill" data-level="INFO"><span class="pill-dot"></span>Info<span class="pill-count"
|
||||
id="cnt-INFO">0</span></button>
|
||||
<button class="level-pill" data-level="WARN"><span class="pill-dot"></span>Warn<span class="pill-count"
|
||||
id="cnt-WARN">0</span></button>
|
||||
<button class="level-pill" data-level="ERROR"><span class="pill-dot"></span>Error<span class="pill-count"
|
||||
id="cnt-ERROR">0</span></button>
|
||||
<button class="level-pill" data-level="FATAL"><span class="pill-dot"></span>Fatal<span class="pill-count"
|
||||
id="cnt-FATAL">0</span></button>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<div id="time-badge">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.4" />
|
||||
<path d="M8 5v3l2 2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
|
||||
</svg>
|
||||
<span id="time-badge-label">time range</span>
|
||||
<span class="tx-close">✕</span>
|
||||
</div>
|
||||
<button id="clear-filters">Clear filters</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty state / Table area -->
|
||||
<div id="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||||
<rect x="6" y="6" width="36" height="36" rx="6" stroke="currentColor" stroke-width="1.5"
|
||||
stroke-dasharray="5 3" />
|
||||
<path d="M16 20h16M16 24h10M16 28h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
<div class="es-title">No log file loaded</div>
|
||||
<div class="es-sub">Drag & drop a log file anywhere on the page or click below to browse</div>
|
||||
<button class="es-btn" onclick="document.getElementById('file-input').click()">Select log file</button>
|
||||
</div>
|
||||
<!-- Main -->
|
||||
<div id="main">
|
||||
<!-- Chart -->
|
||||
<div id="chart-panel">
|
||||
<div id="chart-wrap">
|
||||
<canvas id="intensity-chart"></canvas>
|
||||
<span id="chart-hint">drag to zoom · right-click to reset</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="table-area" style="display:none">
|
||||
<div id="dt-wrap">
|
||||
<table id="log-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-time" data-col="time">Time</th>
|
||||
<th class="col-level" data-col="level">Level</th>
|
||||
<th class="col-msg" data-col="message">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="log-tbody"></tbody>
|
||||
</table>
|
||||
<!-- Empty state / Table area -->
|
||||
<div id="empty-state">
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||||
<rect x="6" y="6" width="36" height="36" rx="6" stroke="currentColor" stroke-width="1.5"
|
||||
stroke-dasharray="5 3" />
|
||||
<path d="M16 20h16M16 24h10M16 28h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
||||
</svg>
|
||||
<div class="es-title">No log file loaded</div>
|
||||
<div class="es-sub">Drag & drop a log file anywhere on the page or click below to browse</div>
|
||||
<button class="es-btn" onclick="document.getElementById('file-input').click()">Select log file</button>
|
||||
</div>
|
||||
|
||||
<div id="table-area" style="display:none">
|
||||
<div id="dt-wrap">
|
||||
<table id="log-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-time" data-col="time">Time</th>
|
||||
<th class="col-level" data-col="level">Level</th>
|
||||
<th class="col-msg" data-col="message">Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="log-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div id="status-bar" style="display:none">
|
||||
<span class="status-count" id="status-showing">0 entries</span>
|
||||
<span class="sb-sep">·</span>
|
||||
<span id="status-total">0 total</span>
|
||||
<span class="sb-sep">·</span>
|
||||
<span id="status-file">no file</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div id="status-bar" style="display:none">
|
||||
<span class="status-count" id="status-showing">0 entries</span>
|
||||
<span class="sb-sep">·</span>
|
||||
<span id="status-total">0 total</span>
|
||||
<span class="sb-sep">·</span>
|
||||
<span id="status-file">no file</span>
|
||||
<div class="loading-overlay" id="loader">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading Data...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -804,6 +862,7 @@
|
||||
let expandedRows = new Set();
|
||||
let chart = null;
|
||||
let chartBuckets = [];
|
||||
const msg_len_limit = 100;
|
||||
|
||||
// ---- Demo data generator ----
|
||||
function generateDemoLogs() {
|
||||
@@ -864,7 +923,7 @@
|
||||
];
|
||||
|
||||
let i = 0;
|
||||
debugger
|
||||
//debugger
|
||||
while (i < lines.length) {
|
||||
const line = lines[i].trim();
|
||||
let matched = false;
|
||||
@@ -899,7 +958,14 @@
|
||||
j++;
|
||||
}
|
||||
i = j - 1;
|
||||
logs.push({ time, level: levelStr, message: msg.trim(), props: null, exception: exception || null });
|
||||
logs.push({
|
||||
time,
|
||||
level: levelStr,
|
||||
message: msg.length > msg_len_limit ? msg.slice(0, msg_len_limit) + "..." : msg.trim(),
|
||||
fullmessage: msg.length > msg_len_limit ? msg : null,
|
||||
props: null,
|
||||
exception: exception || null
|
||||
});
|
||||
matched = true;
|
||||
break;
|
||||
}
|
||||
@@ -932,7 +998,12 @@
|
||||
const usedKeys = new Set([...timeKeys, ...levelKeys, ...msgKeys].filter(k => obj[k] !== undefined));
|
||||
const props = Object.fromEntries(Object.entries(obj).filter(([k]) => !usedKeys.has(k)));
|
||||
const exception = obj.exception || obj.error || obj.stack || null;
|
||||
logs.push({ time, level: ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'].includes(level) ? level : 'INFO', message: String(msgVal), props: Object.keys(props).length ? props : null, exception: exception ? String(exception) : null });
|
||||
logs.push({
|
||||
time,
|
||||
level: ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'].includes(level) ? level : 'INFO',
|
||||
message: String(msgVal), props: Object.keys(props).length ? props : null,
|
||||
exception: exception ? String(exception) : null
|
||||
});
|
||||
} catch { }
|
||||
}
|
||||
return logs;
|
||||
@@ -1016,7 +1087,39 @@
|
||||
x: {
|
||||
type: 'category',
|
||||
stacked: true,
|
||||
ticks: { display: false },
|
||||
ticks: {
|
||||
// Grouping: Limit the number of labels shown to prevent overlapping
|
||||
maxTicksLimit: 15,
|
||||
// Formatting
|
||||
// callback: function (val, index) {
|
||||
// // Assuming your data labels are Date objects or Date strings
|
||||
// const date = new Date(this.getLabelForValue(val));
|
||||
|
||||
// // Returns "HH:mm:ss" in local time
|
||||
// return date.toLocaleTimeString('sv-SE');
|
||||
// }
|
||||
callback: function (val, index) {
|
||||
const labels = this.chart.data.labels;
|
||||
const date = new Date(labels[index]);
|
||||
|
||||
// Check if the first and last labels are on the same day
|
||||
const firstDate = new Date(labels[0]).toDateString();
|
||||
const lastDate = new Date(labels[labels.length - 1]).toDateString();
|
||||
const isSameDay = firstDate === lastDate;
|
||||
|
||||
// Format based on the result
|
||||
if (isSameDay) {
|
||||
// Returns: HH:mm:ss
|
||||
return date.toLocaleTimeString('sv-SE');
|
||||
} else {
|
||||
// Returns: DD/MM HH:mm:ss
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const time = date.toLocaleTimeString('sv-SE');
|
||||
return `${day}/${month} ${time}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: { color: '#ffffff08', drawBorder: false },
|
||||
border: { color: '#ffffff10' }
|
||||
},
|
||||
@@ -1032,6 +1135,7 @@
|
||||
|
||||
canvas.addEventListener('contextmenu', e => {
|
||||
e.preventDefault();
|
||||
showLoading()
|
||||
clearTimeFilter();
|
||||
});
|
||||
}
|
||||
@@ -1043,19 +1147,25 @@
|
||||
|
||||
// ---- Filtering ----
|
||||
function applyTimeFilter(start, end) {
|
||||
showLoading()
|
||||
timeFilter = { start, end };
|
||||
const startD = new Date(start), endD = new Date(end);
|
||||
document.getElementById('time-badge-label').textContent =
|
||||
`${fmtShort(startD)} – ${fmtShort(endD)}`;
|
||||
document.getElementById('time-badge').classList.add('visible');
|
||||
applyFilters();
|
||||
updateFilteredLevelCounts();
|
||||
hideLoading()
|
||||
}
|
||||
|
||||
function clearTimeFilter() {
|
||||
showLoading()
|
||||
timeFilter = null;
|
||||
document.getElementById('time-badge').classList.remove('visible');
|
||||
if (chart) chart.resetZoom();
|
||||
applyFilters();
|
||||
updateLevelCounts();
|
||||
hideLoading()
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
@@ -1103,9 +1213,9 @@
|
||||
tr.className = 'fade-in';
|
||||
tr.dataset.idx = idx;
|
||||
tr.innerHTML = `
|
||||
<td class="col-time">${fmtTime(log.time)}</td>
|
||||
<td class="col-time">${fmtTimeLocal(log.time)}</td>
|
||||
<td class="col-level"><span class="lv lv-${log.level}">${log.level}</span></td>
|
||||
<td class="col-msg">${esc(log.message)}${log.exception || log.props ? ' <span style="color:var(--text3);font-size:10px">▸ details</span>' : ''}</td>
|
||||
<td class="col-msg">${esc(log.message)}${log.exception || log.props || log.fullmessage ? ' <span style="color:var(--text3);font-size:10px">▸ details</span>' : ''}</td>
|
||||
`;
|
||||
tr.addEventListener('click', () => toggleDetail(tr, log, idx));
|
||||
tbody.appendChild(tr);
|
||||
@@ -1129,6 +1239,9 @@
|
||||
const detailTr = document.createElement('tr');
|
||||
detailTr.className = 'row-detail';
|
||||
let sections = '';
|
||||
if (log.fullmessage) {
|
||||
sections += `<div class="detail-section"><div class="detail-label">Full Message</div><div class="detail-val">${esc(log.fullmessage)}</div></div>`;
|
||||
}
|
||||
if (log.exception) {
|
||||
sections += `<div class="detail-section"><div class="detail-label">Exception / Stack Trace</div><div class="detail-val" style="color:var(--error)">${esc(log.exception)}</div></div>`;
|
||||
}
|
||||
@@ -1149,6 +1262,14 @@
|
||||
});
|
||||
}
|
||||
|
||||
function updateFilteredLevelCounts() {
|
||||
const counts = { TRACE: 0, DEBUG: 0, INFO: 0, WARN: 0, ERROR: 0, FATAL: 0 };
|
||||
filteredLogs.forEach(l => { if (counts[l.level] !== undefined) counts[l.level]++; });
|
||||
Object.entries(counts).forEach(([lv, cnt]) => {
|
||||
document.getElementById('cnt-' + lv).textContent = cnt.toLocaleString();
|
||||
});
|
||||
}
|
||||
|
||||
// ---- Status bar ----
|
||||
function updateStatus() {
|
||||
const s = document.getElementById('status-showing');
|
||||
@@ -1161,6 +1282,9 @@
|
||||
function fmtTime(d) {
|
||||
return d.toISOString().replace('T', ' ').replace(/\.\d+Z$/, '');
|
||||
}
|
||||
function fmtTimeLocal(d) {
|
||||
return d.toLocaleString('sv-SE').replace('T', ' ').replace(/\.\d+Z$/, '');
|
||||
}
|
||||
function fmtShort(d) {
|
||||
return d.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
}
|
||||
@@ -1171,6 +1295,7 @@
|
||||
// ---- Load file ----
|
||||
function loadFile(file) {
|
||||
//debugger
|
||||
showLoading();
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const text = e.target.result;
|
||||
@@ -1248,8 +1373,19 @@
|
||||
buildChart(allLogs);
|
||||
renderTable();
|
||||
updateStatus();
|
||||
hideLoading();
|
||||
}
|
||||
|
||||
const loader = document.getElementById('loader');
|
||||
function showLoading() {
|
||||
if (!loader.classList.contains('is-active')) {
|
||||
loader.classList.add('is-active');
|
||||
}
|
||||
}
|
||||
function hideLoading() {
|
||||
loader.classList.remove('is-active');
|
||||
}
|
||||
|
||||
// ---- Events ----
|
||||
document.getElementById('file-input').addEventListener('change', e => {
|
||||
if (e.target.files[0]) loadFile(e.target.files[0]);
|
||||
@@ -1274,6 +1410,7 @@
|
||||
|
||||
document.getElementById('time-badge').addEventListener('click', () => clearTimeFilter());
|
||||
document.getElementById('clear-filters').addEventListener('click', () => {
|
||||
//showLoading()
|
||||
levelFilter = null;
|
||||
document.getElementById('search').value = '';
|
||||
document.querySelectorAll('.level-pill').forEach(p => p.classList.remove('active'));
|
||||
@@ -1314,7 +1451,7 @@
|
||||
});
|
||||
|
||||
// Load demo on start
|
||||
loadDemo();
|
||||
//loadDemo();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user