<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dial9 Trace Browser</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
background: #1a1a2e; color: #e0e0e0;
display: flex; flex-direction: column; height: 100vh;
}
header {
padding: 12px 20px; background: #16213e;
border-bottom: 1px solid #333; flex-shrink: 0;
display: flex; align-items: center; gap: 12px;
}
header h1 { font-size: 1.1em; color: #6c63ff; }
header span { font-size: 0.8em; color: #666; }
header .spacer { flex: 1; }
.controls {
padding: 12px 20px; background: #16213e;
border-bottom: 1px solid #333; flex-shrink: 0;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.controls label { font-size: 0.8em; color: #888; }
.controls input[type="text"], .controls input[type="datetime-local"] {
background: #2a2a4a; border: 1px solid #444; color: #e0e0e0;
padding: 6px 10px; border-radius: 4px; font-size: 0.85em;
font-family: inherit;
}
button {
background: #2a2a4a; border: 1px solid #444; color: #ccc;
padding: 6px 14px; border-radius: 4px; cursor: pointer;
font-size: 0.85em; font-family: inherit;
}
button:hover { background: #3a3a5a; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { background: #6c63ff; border-color: #6c63ff; color: #fff; }
button.primary:hover { background: #5a52e0; }
button.primary:disabled { background: #4a4a6a; border-color: #4a4a6a; }
button.active { background: #6c63ff; border-color: #6c63ff; color: #fff; }
.quick-btns { display: flex; gap: 4px; }
.quick-btns button.selected { background: #6c63ff; border-color: #6c63ff; color: #fff; }
.main-area { flex: 1; overflow-y: auto; padding: 0; display: flex; flex-direction: column; }
.status { padding: 40px; text-align: center; color: #666; font-size: 0.9em; }
.status.error { color: #ff6b6b; }
.tab-bar {
display: flex; gap: 0; border-bottom: 1px solid #333;
padding: 0 20px; background: #16213e; flex-shrink: 0;
}
.tab-bar button {
border: none; border-bottom: 2px solid transparent;
border-radius: 0; padding: 8px 16px; font-size: 0.85em;
background: transparent; color: #888;
}
.tab-bar button:hover { color: #ccc; background: transparent; }
.tab-bar button.active { color: #6c63ff; border-bottom-color: #6c63ff; background: transparent; }
.host-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px; padding: 20px;
}
.host-card {
background: #222244; border: 1px solid #333; border-radius: 6px;
padding: 14px; cursor: pointer; transition: border-color 0.15s;
}
.host-card:hover { border-color: #6c63ff; }
.host-card.selected { border-color: #6c63ff; background: #2a2a5a; }
.host-card .svc { color: #7ec8e3; font-size: 0.85em; margin-bottom: 2px; }
.host-card .hostname { font-size: 1em; font-weight: 600; }
.host-card .meta { font-size: 0.8em; color: #888; margin-top: 6px; }
.segment-panel { padding: 12px 20px; flex: 1; overflow-y: auto; }
.segment-panel .back-link {
font-size: 0.85em; color: #6c63ff; cursor: pointer;
margin-bottom: 10px; display: inline-block;
}
.segment-panel .back-link:hover { text-decoration: underline; }
.segment-panel h3 { font-size: 0.95em; margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
thead th {
position: sticky; top: 0; background: #1a1a2e;
text-align: left; padding: 8px 6px; color: #888;
border-bottom: 1px solid #333; font-weight: 600;
cursor: pointer; user-select: none;
}
thead th:hover { color: #bbb; }
thead th .sort-arrow { font-size: 0.7em; margin-left: 3px; }
tbody tr { border-bottom: 1px solid #222; }
tbody tr:hover { background: #222244; }
tbody td { padding: 6px; white-space: nowrap; }
td.size, td.date { color: #aaa; }
td.service { color: #7ec8e3; }
td.host { color: #aaa; font-size: 0.8em; }
td input[type="checkbox"] { accent-color: #6c63ff; }
.actions {
padding: 8px 20px; background: #16213e;
border-top: 1px solid #333; flex-shrink: 0;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.actions .count { font-size: 0.8em; color: #888; margin-left: auto; }
footer {
padding: 6px 20px; font-size: 0.75em; color: #444;
border-top: 1px solid #222; flex-shrink: 0;
}
footer a { color: #6c63ff; text-decoration: none; }
</style>
</head>
<body>
<header>
<h1>dial9 Trace Browser</h1>
<span>search & view traces from S3</span>
<span class="spacer"></span>
<button id="tz-btn" title="Toggle between UTC and local timezone">TZ: UTC</button>
</header>
<div class="controls">
<label>Bucket:</label>
<input type="text" id="bucket-input" placeholder="my-trace-bucket" style="width:180px" />
<label>Prefix:</label>
<input type="text" id="prefix-input" placeholder="detecting…" style="width:120px" />
<span id="prefix-suggestions" style="display:inline-flex;gap:4px"></span>
<span style="color:#444">|</span>
<div class="quick-btns">
<button onclick="setQuickRange(1)">Last 1hr</button>
<button onclick="setQuickRange(3)">Last 3hr</button>
<button onclick="setQuickRange(24)">Last 24hr</button>
</div>
<label>From:</label>
<input type="datetime-local" id="range-from" step="60" />
<label>To:</label>
<input type="datetime-local" id="range-to" step="60" />
<button class="primary" id="search-btn" onclick="doTimeRangeSearch()" disabled>Search</button>
</div>
<div class="tab-bar">
<button class="active" onclick="switchTab('browse')" id="tab-browse">Browse</button>
<button onclick="switchTab('raw')" id="tab-raw">Raw Search</button>
</div>
<div class="main-area" id="main-area">
<div id="browse-view">
<div class="status" id="browse-status">
Select a time range and click Search to find traces.
</div>
<div class="host-grid" id="host-grid" style="display:none"></div>
<div class="segment-panel" id="segment-panel" style="display:none"></div>
</div>
<div id="raw-view" style="display:none">
<div style="padding:12px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<label style="font-size:0.8em;color:#888">Prefix:</label>
<input type="text" id="raw-search-input"
placeholder="e.g. 2026-04-09/1910/checkout-api"
style="flex:1;min-width:200px;background:#2a2a4a;border:1px solid #444;color:#e0e0e0;padding:6px 10px;border-radius:4px;font-size:0.85em;font-family:inherit" />
<button onclick="doRawSearch()">Search</button>
</div>
<div class="status" id="raw-status">Enter a prefix and search.</div>
<div style="padding:0 20px;flex:1;overflow-y:auto">
<table id="raw-table" style="display:none">
<thead>
<tr>
<th style="width:30px"><input type="checkbox" id="raw-select-all" /></th>
<th data-sort="service">Service</th>
<th data-sort="host">Host</th>
<th data-sort="bootId">Boot</th>
<th data-sort="traceStart">Trace Start</th>
<th data-sort="segIndex">Seg #</th>
<th data-sort="size">Size</th>
<th data-sort="last_modified">Uploaded</th>
</tr>
</thead>
<tbody id="raw-body"></tbody>
</table>
</div>
</div>
</div>
<div class="actions" id="actions-bar">
<button onclick="rawSelectAll(true)">Select All</button>
<button onclick="rawSelectAll(false)">Deselect All</button>
<button class="primary" id="view-btn" onclick="viewSelected()" disabled>
View Selected in Trace Viewer
</button>
<span class="count" id="selection-count"></span>
</div>
<footer id="footer-drop"
style="padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:2px dashed transparent;transition:border-color 0.2s">
<a href="viewer.html">Open Trace Viewer</a>
<span style="color:#333">|</span>
<button class="primary" id="load-demo-btn" style="padding:4px 12px;font-size:0.8em">Load demo trace</button>
<span style="color:#555;font-size:0.8em;margin-left:auto">drop a .bin file to open viewer</span>
</footer>
<script>
(function() {
const t = new URLSearchParams(window.location.search).get('trace');
if (t) { window.location.replace('viewer.html?trace=' + encodeURIComponent(t)); return; }
})();
document.getElementById('load-demo-btn').addEventListener('click', () => {
window.open('viewer.html?trace=demo-trace.bin', '_blank');
});
const footerDrop = document.getElementById('footer-drop');
document.body.addEventListener('dragover', (e) => { e.preventDefault(); footerDrop.style.borderColor = '#6c63ff'; });
document.body.addEventListener('dragleave', (e) => {
if (!e.relatedTarget || !document.body.contains(e.relatedTarget)) footerDrop.style.borderColor = 'transparent';
});
document.body.addEventListener('drop', (e) => {
e.preventDefault(); footerDrop.style.borderColor = 'transparent';
const file = e.dataTransfer.files[0];
if (file) {
const url = URL.createObjectURL(file);
window.open('viewer.html?trace=' + encodeURIComponent(url), '_blank');
}
});
let useLocalTz = false;
let allObjects = []; let hostGroups = {}; let selectedHost = null; let rawObjects = []; let currentTab = 'browse';
const bucketInput = document.getElementById('bucket-input');
const browseStatus = document.getElementById('browse-status');
const hostGrid = document.getElementById('host-grid');
const segmentPanel = document.getElementById('segment-panel');
const params = new URLSearchParams(window.location.search);
if (params.get('bucket')) bucketInput.value = params.get('bucket');
const prefixInput = document.getElementById('prefix-input');
let serverHasPrefix = false;
function updateSearchReady() {
const waitingForPrefix = serverHasPrefix && prefixInput.value.trim() === '';
document.getElementById('search-btn').disabled = waitingForPrefix;
}
prefixInput.addEventListener('input', updateSearchReady);
fetch('/api/config').then(async r => {
if (!r.ok) {
const body = await r.text().catch(() => '');
throw new Error(`HTTP ${r.status}${body ? ': ' + body : ''}`);
}
return r.json();
}).then(config => {
if (!bucketInput.value && config.default_bucket) bucketInput.value = config.default_bucket;
if (config.default_prefix) {
prefixInput.value = config.default_prefix;
serverHasPrefix = true;
updateSearchReady();
}
discoverPrefixes();
}).catch(() => { discoverPrefixes(); });
setQuickRange(1);
async function discoverPrefixes() {
const bucket = bucketInput.value.trim();
if (!bucket) { prefixInput.placeholder = 'e.g. traces'; updateSearchReady(); return; }
try {
const resp = await fetch(`/api/prefixes?bucket=${encodeURIComponent(bucket)}`);
if (!resp.ok) {
const body = await resp.text().catch(() => '');
console.warn(`prefix discovery failed: HTTP ${resp.status}${body ? ': ' + body : ''}`);
prefixInput.placeholder = 'discovery failed — enter manually';
updateSearchReady();
return;
}
const prefixes = await resp.json();
const suggestions = document.getElementById('prefix-suggestions');
suggestions.innerHTML = '';
if (prefixes.length === 0) {
prefixInput.placeholder = '(none found)';
updateSearchReady();
return;
}
if (prefixes.length === 1 && !prefixInput.value) {
prefixInput.value = prefixes[0].replace(/\/$/, '');
}
prefixInput.placeholder = 'e.g. traces';
for (const p of prefixes) {
const label = p.replace(/\/$/, '');
const btn = document.createElement('button');
btn.textContent = label;
btn.style.cssText = 'font-size:0.75em;padding:2px 8px';
btn.addEventListener('click', () => {
prefixInput.value = label;
suggestions.querySelectorAll('button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
updateSearchReady();
});
if (prefixInput.value === label) btn.classList.add('active');
suggestions.appendChild(btn);
}
updateSearchReady();
} catch {
prefixInput.placeholder = 'discovery failed — enter manually';
updateSearchReady();
}
}
bucketInput.addEventListener('change', discoverPrefixes);
document.getElementById('tz-btn').addEventListener('click', () => {
const fromDate = pickerToDate(document.getElementById('range-from').value);
const toDate = pickerToDate(document.getElementById('range-to').value);
useLocalTz = !useLocalTz;
document.getElementById('tz-btn').textContent = useLocalTz ? 'TZ: Local' : 'TZ: UTC';
if (fromDate) document.getElementById('range-from').value = dateToPickerStr(fromDate);
if (toDate) document.getElementById('range-to').value = dateToPickerStr(toDate);
if (currentTab === 'browse') {
if (selectedHost) showSegments(selectedHost);
else if (Object.keys(hostGroups).length) renderHostGrid();
} else {
renderRawTable(rawObjects);
}
});
function esc(s) {
const d = document.createElement('div');
d.textContent = s;
return d.innerHTML.replace(/"/g, '"');
}
function formatSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}
function formatDate(dateStr) {
if (!dateStr) return '';
try {
const d = new Date(dateStr);
if (useLocalTz) {
const pad = n => String(n).padStart(2, '0');
return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) +
' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
}
return d.toISOString().replace('T', ' ').slice(0, 19);
} catch { return dateStr; }
}
function formatEpoch(epoch) {
if (!epoch) return '';
return formatDate(new Date(epoch * 1000).toISOString());
}
function parseKey(key) {
const parts = key.split('/');
const dateRe = /^\d{4}-\d{2}-\d{2}$/;
let dateIdx = -1;
for (let i = parts.length - 1; i >= 0; i--) {
if (dateRe.test(parts[i])) { dateIdx = i; break; }
}
const file = parts[parts.length - 1];
const match = file.match(/^(\d+)-(\d+)\.bin/);
let epoch = 0, segIndex = '';
if (match) {
epoch = parseInt(match[1], 10);
segIndex = match[2];
}
if (dateIdx >= 0) {
const below = parts.length - 1 - dateIdx; if (below === 5) {
return {
service: parts[dateIdx + 2],
host: parts[dateIdx + 3],
bootId: parts[dateIdx + 4],
epoch, segIndex,
get traceStart() { return formatEpoch(epoch); },
};
}
if (below === 4) {
return {
service: parts[dateIdx + 2],
host: parts[dateIdx + 3],
bootId: '',
epoch, segIndex,
get traceStart() { return formatEpoch(epoch); },
};
}
}
if (parts.length >= 5) {
return {
service: parts[parts.length - 3],
host: parts[parts.length - 2],
bootId: '',
epoch, segIndex,
get traceStart() { return formatEpoch(epoch); },
};
}
return { service: '', host: key, bootId: '', epoch: 0, segIndex: '', get traceStart() { return ''; } };
}
function toLocalDatetime(d) {
const pad = n => String(n).padStart(2, '0');
return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()) +
'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}
function toUTCDatetime(d) {
const pad = n => String(n).padStart(2, '0');
return d.getUTCFullYear() + '-' + pad(d.getUTCMonth()+1) + '-' + pad(d.getUTCDate()) +
'T' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes());
}
function dateToPickerStr(d) {
return useLocalTz ? toLocalDatetime(d) : toUTCDatetime(d);
}
function pickerToDate(str) {
if (!str) return null;
if (useLocalTz) return new Date(str);
return new Date(str + 'Z');
}
function setQuickRange(hours) {
const now = new Date();
const from = new Date(now.getTime() - hours * 3600 * 1000);
document.getElementById('range-from').value = dateToPickerStr(from);
document.getElementById('range-to').value = dateToPickerStr(now);
document.querySelectorAll('.quick-btns button').forEach(b => b.classList.remove('selected'));
const labels = {'1': 'Last 1hr', '3': 'Last 3hr', '24': 'Last 24hr'};
document.querySelectorAll('.quick-btns button').forEach(b => {
if (b.textContent === labels[hours]) b.classList.add('selected');
});
}
document.getElementById('range-from').addEventListener('input', () => {
document.querySelectorAll('.quick-btns button').forEach(b => b.classList.remove('selected'));
});
document.getElementById('range-to').addEventListener('input', () => {
document.querySelectorAll('.quick-btns button').forEach(b => b.classList.remove('selected'));
});
function switchTab(tab) {
currentTab = tab;
document.getElementById('tab-browse').classList.toggle('active', tab === 'browse');
document.getElementById('tab-raw').classList.toggle('active', tab === 'raw');
document.getElementById('browse-view').style.display = tab === 'browse' ? '' : 'none';
document.getElementById('raw-view').style.display = tab === 'raw' ? '' : 'none';
updateSelectionCount();
}
function hourPrefixes(from, to) {
const prefixes = [];
const cur = new Date(from);
cur.setUTCMinutes(0, 0, 0);
while (cur <= to) {
const pad = n => String(n).padStart(2, '0');
const dateStr = cur.getUTCFullYear() + '-' + pad(cur.getUTCMonth()+1) + '-' + pad(cur.getUTCDate());
const hourStr = pad(cur.getUTCHours());
prefixes.push(dateStr + '/' + hourStr);
cur.setTime(cur.getTime() + 3600 * 1000);
}
return prefixes;
}
async function doTimeRangeSearch() {
const bucket = bucketInput.value.trim();
if (!bucket) { alert('Bucket is required'); return; }
const fromStr = document.getElementById('range-from').value;
const toStr = document.getElementById('range-to').value;
if (!fromStr || !toStr) { alert('Select a time range'); return; }
const from = pickerToDate(fromStr);
const to = pickerToDate(toStr);
const keyPrefix = !serverHasPrefix ? prefixInput.value.trim() : '';
const prefixes = hourPrefixes(from, to).map(
p => keyPrefix ? keyPrefix + '/' + p : p
);
browseStatus.textContent = `Searching ${prefixes.length} hour(s)…`;
browseStatus.className = 'status';
browseStatus.style.display = '';
hostGrid.style.display = 'none';
segmentPanel.style.display = 'none';
selectedHost = null;
try {
const fetches = prefixes.map(p => {
const url = `/api/search?bucket=${encodeURIComponent(bucket)}&q=${encodeURIComponent(p)}`;
return fetch(url).then(async r => {
if (!r.ok) {
const body = await r.text().catch(() => '');
throw new Error(`HTTP ${r.status}${body ? ': ' + body : ''}`);
}
return r.json();
});
});
const results = await Promise.all(fetches);
allObjects = results.flat();
const fromEpoch = from.getTime() / 1000;
const toEpoch = to.getTime() / 1000;
allObjects = allObjects.filter(obj => {
const p = parseKey(obj.key);
if (!p.epoch) return true; const end = obj.last_modified ? new Date(obj.last_modified).getTime() / 1000 : p.epoch;
return p.epoch <= toEpoch && end >= fromEpoch;
});
if (allObjects.length === 0) {
browseStatus.className = 'status';
hostGroups = {};
try {
const sampleResp = await fetch(`/api/search?bucket=${encodeURIComponent(bucket)}&q=`);
const samples = sampleResp.ok ? await sampleResp.json() : [];
if (samples.length > 0) {
browseStatus.innerHTML = 'No traces found in this time range. Sample keys in this bucket:<br>' +
samples.slice(0, 5).map(o => `<code style="color:#7ec8e3;font-size:0.85em">${esc(o.key)}</code>`).join('<br>');
} else {
browseStatus.textContent = 'No traces found in this time range. Bucket appears empty.';
}
} catch {
browseStatus.textContent = 'No traces found in this time range.';
}
return;
}
hostGroups = {};
for (const obj of allObjects) {
const p = parseKey(obj.key);
const groupKey = p.bootId
? p.service + '/' + p.host + '/' + p.bootId
: p.service + '/' + p.host;
if (!hostGroups[groupKey]) hostGroups[groupKey] = { service: p.service, host: p.host, bootId: p.bootId, objects: [] };
hostGroups[groupKey].objects.push(obj);
}
browseStatus.style.display = 'none';
renderHostGrid();
} catch (err) {
browseStatus.textContent = 'Error: ' + err.message;
browseStatus.className = 'status error';
}
}
function renderHostGrid() {
hostGrid.innerHTML = '';
hostGrid.style.display = '';
segmentPanel.style.display = 'none';
selectedHost = null;
const groups = Object.values(hostGroups).sort((a, b) =>
((a.service + a.host + (a.bootId || '')).localeCompare(b.service + b.host + (b.bootId || ''))));
for (const g of groups) {
const epochs = g.objects.map(o => parseKey(o.key).epoch).filter(e => e > 0);
const minEpoch = epochs.length ? Math.min(...epochs) : 0;
const endTimes = g.objects.map(o => o.last_modified ? new Date(o.last_modified).getTime() / 1000 : 0).filter(e => e > 0);
const maxEnd = endTimes.length ? Math.max(...endTimes) : 0;
const totalSize = g.objects.reduce((s, o) => s + o.size, 0);
const bootLine = g.bootId ? `<div class="meta" style="font-size:0.75em;color:#7a7ab0">boot ${esc(g.bootId)}</div>` : '';
const card = document.createElement('div');
card.className = 'host-card';
card.innerHTML = `
<div class="svc">${esc(g.service)}</div>
<div class="hostname">${esc(g.host)}</div>
${bootLine}
<div class="meta">
${g.objects.length} segment${g.objects.length !== 1 ? 's' : ''} · ${formatSize(totalSize)}<br>
${formatEpoch(minEpoch)}${maxEnd ? ' → ' + formatEpoch(maxEnd) : ''}
</div>
`;
const gk = g.bootId ? g.service + '/' + g.host + '/' + g.bootId : g.service + '/' + g.host;
card.addEventListener('click', () => showSegments(gk));
hostGrid.appendChild(card);
}
}
function showSegments(groupKey) {
selectedHost = groupKey;
hostGrid.style.display = 'none';
segmentPanel.style.display = '';
const g = hostGroups[groupKey];
if (!g) return;
const sorted = [...g.objects].sort((a, b) => parseKey(a.key).epoch - parseKey(b.key).epoch);
segmentPanel.innerHTML = `
<span class="back-link" onclick="renderHostGrid()">← Back to hosts</span>
<h3>${esc(g.service)} / ${esc(g.host)}${g.bootId ? ' <span style="color:#7a7ab0;font-weight:400;font-size:0.85em">(boot ' + esc(g.bootId) + ')</span>' : ''}</h3>
<div style="margin-bottom:8px;display:flex;gap:8px;align-items:center">
<button onclick="segSelectAll(true)">Select All</button>
<button onclick="segSelectAll(false)">Deselect All</button>
<button class="primary" onclick="viewSelected()" id="seg-view-btn">
View Selected in Trace Viewer
</button>
<span class="count" id="seg-count"></span>
</div>
<table>
<thead>
<tr>
<th style="width:30px"><input type="checkbox" id="seg-select-all" checked /></th>
<th>Trace Start</th>
<th>Seg #</th>
<th>Size</th>
<th>Uploaded</th>
</tr>
</thead>
<tbody id="seg-body"></tbody>
</table>
`;
const tbody = document.getElementById('seg-body');
for (const obj of sorted) {
const p = parseKey(obj.key);
const tr = document.createElement('tr');
tr.innerHTML = `
<td><input type="checkbox" class="seg-cb" data-key="${esc(obj.key)}" checked /></td>
<td>${esc(p.traceStart)}</td>
<td>${esc(p.segIndex)}</td>
<td class="size">${formatSize(obj.size)}</td>
<td class="date">${formatDate(obj.last_modified)}</td>
`;
tr.querySelector('.seg-cb').addEventListener('change', updateSegCount);
tbody.appendChild(tr);
}
document.getElementById('seg-select-all').addEventListener('change', (e) => {
segSelectAll(e.target.checked);
});
updateSegCount();
}
function segSelectAll(checked) {
document.querySelectorAll('.seg-cb').forEach(cb => { cb.checked = checked; });
const sa = document.getElementById('seg-select-all');
if (sa) sa.checked = checked;
updateSegCount();
}
function updateSegCount() {
const keys = getSegSelectedKeys();
const el = document.getElementById('seg-count');
if (el) el.textContent = keys.length ? `${keys.length} selected` : '';
}
function getSegSelectedKeys() {
return Array.from(document.querySelectorAll('.seg-cb:checked')).map(cb => cb.dataset.key);
}
async function doRawSearch() {
const bucket = bucketInput.value.trim();
if (!bucket) { alert('Bucket is required'); return; }
const q = document.getElementById('raw-search-input').value.trim();
const url = `/api/search?bucket=${encodeURIComponent(bucket)}&q=${encodeURIComponent(q)}`;
const rawStatus = document.getElementById('raw-status');
rawStatus.textContent = 'Searching…';
rawStatus.className = 'status';
rawStatus.style.display = '';
document.getElementById('raw-table').style.display = 'none';
try {
const resp = await fetch(url);
if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);
rawObjects = await resp.json();
renderRawTable(rawObjects);
} catch (err) {
rawStatus.textContent = 'Error: ' + err.message;
rawStatus.className = 'status error';
}
}
document.getElementById('raw-search-input').addEventListener('keydown', (e) => {
if (e.key === 'Enter') doRawSearch();
});
async function renderRawTable(objects) {
const rawStatus = document.getElementById('raw-status');
const rawTable = document.getElementById('raw-table');
const rawBody = document.getElementById('raw-body');
rawBody.innerHTML = '';
if (objects.length === 0) {
rawStatus.style.display = '';
rawTable.style.display = 'none';
try {
const bucket = bucketInput.value.trim();
const sampleResp = await fetch(`/api/search?bucket=${encodeURIComponent(bucket)}&q=`);
const samples = sampleResp.ok ? await sampleResp.json() : [];
if (samples.length > 0) {
rawStatus.innerHTML = 'No results found. Sample keys in this bucket:<br>' +
samples.slice(0, 5).map(o => `<code style="color:#7ec8e3;font-size:0.85em">${esc(o.key)}</code>`).join('<br>');
} else {
rawStatus.textContent = 'No results found. Bucket appears empty.';
}
} catch {
rawStatus.textContent = 'No results found.';
}
return;
}
rawStatus.style.display = 'none';
rawTable.style.display = '';
const rows = objects.map(obj => ({ ...obj, parsed: parseKey(obj.key) }));
rows.sort((a, b) => a.parsed.epoch - b.parsed.epoch);
for (const row of rows) {
const p = row.parsed;
const tr = document.createElement('tr');
tr.innerHTML = `
<td><input type="checkbox" class="raw-cb" data-key="${esc(row.key)}" /></td>
<td class="service">${esc(p.service)}</td>
<td class="host">${esc(p.host)}</td>
<td class="host">${esc(p.bootId || '')}</td>
<td>${esc(p.traceStart)}</td>
<td>${esc(p.segIndex)}</td>
<td class="size">${formatSize(row.size)}</td>
<td class="date">${formatDate(row.last_modified)}</td>
`;
tr.querySelector('.raw-cb').addEventListener('change', updateSelectionCount);
rawBody.appendChild(tr);
}
updateSelectionCount();
}
document.getElementById('raw-select-all').addEventListener('change', (e) => {
rawSelectAll(e.target.checked);
});
function rawSelectAll(checked) {
document.querySelectorAll('.raw-cb').forEach(cb => { cb.checked = checked; });
document.getElementById('raw-select-all').checked = checked;
updateSelectionCount();
}
function getSelectedKeys() {
if (currentTab === 'browse' && selectedHost) {
return getSegSelectedKeys();
}
return Array.from(document.querySelectorAll('.raw-cb:checked')).map(cb => cb.dataset.key);
}
function updateSelectionCount() {
const keys = getSelectedKeys();
const el = document.getElementById('selection-count');
el.textContent = keys.length ? `${keys.length} selected` : '';
document.getElementById('view-btn').disabled = keys.length === 0;
}
function viewSelected() {
const keys = getSelectedKeys();
if (keys.length === 0) return;
const bucket = bucketInput.value.trim();
const keysParams = keys.map(k => `keys=${encodeURIComponent(k)}`).join('&');
const traceUrl = `/api/trace?bucket=${encodeURIComponent(bucket)}&${keysParams}`;
const parsed = keys.map(k => parseKey(k));
const services = [...new Set(parsed.map(p => p.service).filter(Boolean))];
const hosts = [...new Set(parsed.map(p => p.host).filter(Boolean))];
const epochs = parsed.map(p => p.epoch).filter(e => e > 0).sort((a, b) => a - b);
const titleParams = new URLSearchParams();
titleParams.set('trace', traceUrl);
if (services.length) titleParams.set('svc', services.join(', '));
if (hosts.length === 1) titleParams.set('host', hosts[0]);
if (epochs.length >= 2) {
titleParams.set('from', formatEpoch(epochs[0]));
titleParams.set('to', formatEpoch(epochs[epochs.length - 1]));
} else if (epochs.length === 1) {
titleParams.set('from', formatEpoch(epochs[0]));
}
titleParams.set('segs', String(keys.length));
window.open(`viewer.html?${titleParams.toString()}`, '_blank');
}
</script>
</body>
</html>