paging
This commit is contained in:
213
index.html
213
index.html
@@ -758,98 +758,93 @@
|
||||
<input type="file" id="file-input" accept=".log,.txt,.json,text/plain">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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" />
|
||||
</svg>
|
||||
<span id="time-badge-label">time range</span>
|
||||
<span class="tx-close">✕</span>
|
||||
</div>
|
||||
<button id="clear-filters">Clear filters</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 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="loading-overlay" id="loader">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading Data...</p>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="loading-overlay" id="loader">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading Data...</p>
|
||||
</div>
|
||||
<script>
|
||||
// ---- State ----
|
||||
let allLogs = [];
|
||||
@@ -863,6 +858,8 @@
|
||||
let chart = null;
|
||||
let chartBuckets = [];
|
||||
const msg_len_limit = 100;
|
||||
let currentPage = 1;
|
||||
const PAGE_SIZE = 500;
|
||||
|
||||
// ---- Demo data generator ----
|
||||
function generateDemoLogs() {
|
||||
@@ -1148,6 +1145,7 @@
|
||||
// ---- Filtering ----
|
||||
function applyTimeFilter(start, end) {
|
||||
showLoading()
|
||||
currentPage = 1;
|
||||
timeFilter = { start, end };
|
||||
const startD = new Date(start), endD = new Date(end);
|
||||
document.getElementById('time-badge-label').textContent =
|
||||
@@ -1160,6 +1158,7 @@
|
||||
|
||||
function clearTimeFilter() {
|
||||
showLoading()
|
||||
currentPage = 1;
|
||||
timeFilter = null;
|
||||
document.getElementById('time-badge').classList.remove('visible');
|
||||
if (chart) chart.resetZoom();
|
||||
@@ -1169,6 +1168,7 @@
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
currentPage = 1;
|
||||
let regex = null;
|
||||
const searchVal = document.getElementById('search').value;
|
||||
const searchEl = document.getElementById('search');
|
||||
@@ -1204,11 +1204,15 @@
|
||||
return sortDir === 'asc' ? (av > bv ? 1 : -1) : (av < bv ? 1 : -1);
|
||||
});
|
||||
|
||||
const totalPages = Math.max(1, Math.ceil(sorted.length / PAGE_SIZE));
|
||||
currentPage = Math.min(currentPage, totalPages);
|
||||
const pageData = sorted.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
|
||||
|
||||
expandedRows.clear();
|
||||
const tbody = document.getElementById('log-tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
sorted.forEach((log, idx) => {
|
||||
pageData.forEach((log, idx) => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.className = 'fade-in';
|
||||
tr.dataset.idx = idx;
|
||||
@@ -1221,6 +1225,8 @@
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
renderPager(totalPages);
|
||||
|
||||
// Sort indicators
|
||||
document.querySelectorAll('thead th').forEach(th => {
|
||||
th.classList.remove('sort-asc', 'sort-desc');
|
||||
@@ -1228,6 +1234,37 @@
|
||||
});
|
||||
}
|
||||
|
||||
function renderPager(totalPages) {
|
||||
let el = document.getElementById('pager');
|
||||
if (!el) {
|
||||
el = document.createElement('div');
|
||||
el.id = 'pager';
|
||||
el.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 20px;border-top:1px solid var(--border);background:var(--surface);font-size:11px;font-family:var(--font-mono);color:var(--text2);flex-shrink:0';
|
||||
document.getElementById('status-bar').before(el);
|
||||
}
|
||||
const btn = (label, page, disabled) =>
|
||||
`<button onclick="goPage(${page})" ${disabled ? 'disabled' : ''} style="padding:3px 9px;border-radius:var(--radius);border:1px solid var(--border2);background:${page === currentPage ? 'var(--accent-dim)' : 'transparent'};color:${page === currentPage ? 'var(--accent)' : 'var(--text2)'};cursor:${disabled ? 'default' : 'pointer'};font-family:var(--font-mono);font-size:11px">${label}</button>`;
|
||||
|
||||
const pages = [];
|
||||
for (let p = 1; p <= totalPages; p++) {
|
||||
if (p === 1 || p === totalPages || Math.abs(p - currentPage) <= 1) pages.push(p);
|
||||
else if (pages[pages.length - 1] !== '…') pages.push('…');
|
||||
}
|
||||
|
||||
el.innerHTML = btn('‹', currentPage - 1, currentPage === 1)
|
||||
+ pages.map(p => p === '…' ? `<span style="color:var(--text3)">…</span>` : btn(p, p, false)).join('')
|
||||
+ btn('›', currentPage + 1, currentPage === totalPages)
|
||||
+ `<span style="margin-left:8px;color:var(--text3)">page ${currentPage} / ${totalPages}</span>`;
|
||||
}
|
||||
|
||||
window.goPage = function (p) {
|
||||
const totalPages = Math.ceil(filteredLogs.length / PAGE_SIZE);
|
||||
if (p < 1 || p > totalPages) return;
|
||||
currentPage = p;
|
||||
renderTable();
|
||||
document.getElementById('dt-wrap').scrollTop = 0;
|
||||
};
|
||||
|
||||
function toggleDetail(tr, log, idx) {
|
||||
if (expandedRows.has(idx)) {
|
||||
expandedRows.delete(idx);
|
||||
|
||||
Reference in New Issue
Block a user