first commit
This commit is contained in:
Первов Артем
365
public/app.js
Normal file
365
public/app.js
Normal file
@@ -0,0 +1,365 @@
|
||||
const state = {
|
||||
events: [],
|
||||
selectedId: undefined,
|
||||
filter: '',
|
||||
connected: false,
|
||||
followLatest: true,
|
||||
maxEvents: 500,
|
||||
}
|
||||
|
||||
const elements = {
|
||||
batchCount: document.querySelector('#batchCount'),
|
||||
itemCount: document.querySelector('#itemCount'),
|
||||
byteCount: document.querySelector('#byteCount'),
|
||||
lastBatch: document.querySelector('#lastBatch'),
|
||||
packetRate: document.querySelector('#packetRate'),
|
||||
packetList: document.querySelector('#packetList'),
|
||||
itemTable: document.querySelector('#itemTable'),
|
||||
rawPayload: document.querySelector('#rawPayload'),
|
||||
jsonMeta: document.querySelector('#jsonMeta'),
|
||||
expandJsonButton: document.querySelector('#expandJsonButton'),
|
||||
copyRawButton: document.querySelector('#copyRawButton'),
|
||||
jsonModal: document.querySelector('#jsonModal'),
|
||||
jsonModalBackdrop: document.querySelector('#jsonModalBackdrop'),
|
||||
jsonModalTitle: document.querySelector('#jsonModalTitle'),
|
||||
jsonModalPayload: document.querySelector('#jsonModalPayload'),
|
||||
copyModalJsonButton: document.querySelector('#copyModalJsonButton'),
|
||||
closeJsonModalButton: document.querySelector('#closeJsonModalButton'),
|
||||
detailTitle: document.querySelector('#detailTitle'),
|
||||
detailMeta: document.querySelector('#detailMeta'),
|
||||
connectionStatus: document.querySelector('#connectionStatus'),
|
||||
filterInput: document.querySelector('#filterInput'),
|
||||
followButton: document.querySelector('#followButton'),
|
||||
copyButton: document.querySelector('#copyButton'),
|
||||
clearButton: document.querySelector('#clearButton'),
|
||||
}
|
||||
|
||||
const numberFormatter = new Intl.NumberFormat('ru-RU')
|
||||
const byteFormatter = new Intl.NumberFormat('ru-RU', {
|
||||
maximumFractionDigits: 1,
|
||||
})
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (bytes < 1024) {
|
||||
return `${bytes} B`
|
||||
}
|
||||
|
||||
if (bytes < 1024 * 1024) {
|
||||
return `${byteFormatter.format(bytes / 1024)} KB`
|
||||
}
|
||||
|
||||
return `${byteFormatter.format(bytes / 1024 / 1024)} MB`
|
||||
}
|
||||
|
||||
function formatTime(timestamp) {
|
||||
return new Intl.DateTimeFormat('ru-RU', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
}).format(new Date(timestamp))
|
||||
}
|
||||
|
||||
function getSelectedEvent() {
|
||||
return state.events.find((event) => event.id === state.selectedId)
|
||||
}
|
||||
|
||||
function getSelectedJson() {
|
||||
const selected = getSelectedEvent()
|
||||
return selected ? JSON.stringify(selected.payload, null, 2) : ''
|
||||
}
|
||||
|
||||
async function copySelectedJson(button) {
|
||||
const json = getSelectedJson()
|
||||
|
||||
if (!json) {
|
||||
return
|
||||
}
|
||||
|
||||
const originalText = button.textContent
|
||||
await navigator.clipboard.writeText(json)
|
||||
button.textContent = 'Copied'
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText
|
||||
}, 900)
|
||||
}
|
||||
|
||||
function openJsonModal() {
|
||||
const selected = getSelectedEvent()
|
||||
|
||||
if (!selected) {
|
||||
return
|
||||
}
|
||||
|
||||
elements.jsonModalTitle.textContent = `${selected.count} values - ${formatTime(
|
||||
selected.receivedAt,
|
||||
)}`
|
||||
elements.jsonModalPayload.textContent = getSelectedJson()
|
||||
elements.jsonModal.classList.add('open')
|
||||
elements.jsonModal.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
}
|
||||
|
||||
function closeJsonModal() {
|
||||
elements.jsonModal.classList.remove('open')
|
||||
elements.jsonModal.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
}
|
||||
|
||||
function setConnectionStatus(status) {
|
||||
state.connected = status === 'live'
|
||||
elements.connectionStatus.className = `status ${status}`
|
||||
elements.connectionStatus.querySelector('span:last-child').textContent = status
|
||||
}
|
||||
|
||||
function applySnapshot(snapshot) {
|
||||
const previousSelectedId = state.selectedId
|
||||
state.events = snapshot.events ?? []
|
||||
state.maxEvents = snapshot.maxEvents ?? state.maxEvents
|
||||
const latest = state.events[state.events.length - 1]
|
||||
const selectedStillExists = state.events.some(
|
||||
(event) => event.id === previousSelectedId,
|
||||
)
|
||||
|
||||
if (state.followLatest && latest) {
|
||||
state.selectedId = latest.id
|
||||
} else if (!selectedStillExists && latest) {
|
||||
state.selectedId = latest.id
|
||||
} else if (state.events.length === 0) {
|
||||
state.selectedId = undefined
|
||||
}
|
||||
|
||||
elements.batchCount.textContent = numberFormatter.format(snapshot.receivedBatches ?? 0)
|
||||
elements.itemCount.textContent = numberFormatter.format(snapshot.receivedItems ?? 0)
|
||||
elements.byteCount.textContent = formatBytes(snapshot.receivedBytes ?? 0)
|
||||
elements.packetRate.textContent = `${numberFormatter.format(
|
||||
snapshot.recentBatchesPerMinute ?? 0,
|
||||
)}/min`
|
||||
elements.lastBatch.textContent = snapshot.latest
|
||||
? `${snapshot.latest.count} items`
|
||||
: 'none'
|
||||
|
||||
render()
|
||||
}
|
||||
|
||||
function applySummary(summary) {
|
||||
state.maxEvents = summary.maxEvents ?? state.maxEvents
|
||||
elements.batchCount.textContent = numberFormatter.format(summary.receivedBatches ?? 0)
|
||||
elements.itemCount.textContent = numberFormatter.format(summary.receivedItems ?? 0)
|
||||
elements.byteCount.textContent = formatBytes(summary.receivedBytes ?? 0)
|
||||
elements.packetRate.textContent = `${numberFormatter.format(
|
||||
summary.recentBatchesPerMinute ?? 0,
|
||||
)}/min`
|
||||
elements.lastBatch.textContent = summary.latest
|
||||
? `${summary.latest.count} items`
|
||||
: 'none'
|
||||
}
|
||||
|
||||
function appendEvent(event) {
|
||||
state.events.push(event)
|
||||
|
||||
while (state.events.length > state.maxEvents) {
|
||||
const removed = state.events.shift()
|
||||
|
||||
if (removed?.id === state.selectedId) {
|
||||
state.selectedId = state.events[0]?.id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renderPackets() {
|
||||
if (state.events.length === 0) {
|
||||
elements.packetList.innerHTML = '<div class="empty">No packets yet.</div>'
|
||||
return
|
||||
}
|
||||
|
||||
elements.packetList.innerHTML = state.events
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((event) => {
|
||||
const active = event.id === state.selectedId ? ' active' : ''
|
||||
const forward = event.forward
|
||||
? `forward: ${event.forward.status}`
|
||||
: 'local only'
|
||||
|
||||
return `
|
||||
<button class="packet${active}" data-id="${event.id}" type="button">
|
||||
<span class="packet-main">
|
||||
<span>${formatTime(event.receivedAt)}</span>
|
||||
<span>${event.count} items</span>
|
||||
</span>
|
||||
<span class="packet-meta">
|
||||
<span>${formatBytes(event.bytes)}</span>
|
||||
<span>${forward}</span>
|
||||
</span>
|
||||
</button>
|
||||
`
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
function matchesFilter(item) {
|
||||
if (!state.filter) {
|
||||
return true
|
||||
}
|
||||
|
||||
const haystack = `${item.edge} ${item.tag} ${item.value}`.toLowerCase()
|
||||
return haystack.includes(state.filter)
|
||||
}
|
||||
|
||||
function renderDetails() {
|
||||
const selected = getSelectedEvent()
|
||||
|
||||
if (!selected) {
|
||||
elements.detailTitle.textContent = 'Waiting for ingest'
|
||||
elements.detailMeta.textContent = 'POST /api/ingest'
|
||||
elements.jsonMeta.textContent = 'No payload selected'
|
||||
elements.itemTable.innerHTML = ''
|
||||
elements.rawPayload.textContent = 'No payload yet.'
|
||||
return
|
||||
}
|
||||
|
||||
const visibleItems = selected.items.filter(matchesFilter)
|
||||
|
||||
elements.detailTitle.textContent = `${selected.count} values received`
|
||||
elements.detailMeta.textContent = `${formatTime(selected.receivedAt)} · ${formatBytes(
|
||||
selected.bytes,
|
||||
)}${selected.forward ? ` · forward: ${selected.forward.status}` : ''}`
|
||||
elements.jsonMeta.textContent = `${formatBytes(selected.bytes)} - ${selected.count} values`
|
||||
elements.detailMeta.textContent = `${formatTime(selected.receivedAt)} - ${formatBytes(
|
||||
selected.bytes,
|
||||
)}${selected.forward ? ` - forward: ${selected.forward.status}` : ''}`
|
||||
elements.rawPayload.textContent = getSelectedJson()
|
||||
|
||||
if (elements.jsonModal.classList.contains('open')) {
|
||||
elements.jsonModalTitle.textContent = `${selected.count} values - ${formatTime(
|
||||
selected.receivedAt,
|
||||
)}`
|
||||
elements.jsonModalPayload.textContent = getSelectedJson()
|
||||
}
|
||||
|
||||
elements.itemTable.innerHTML =
|
||||
visibleItems.length === 0
|
||||
? '<tr><td class="empty" colspan="4">No matching values.</td></tr>'
|
||||
: visibleItems
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td>${item.tag}</td>
|
||||
<td>${item.edge}</td>
|
||||
<td class="value">${item.value}</td>
|
||||
<td>${formatTime(item.timestamp)}</td>
|
||||
</tr>
|
||||
`,
|
||||
)
|
||||
.join('')
|
||||
}
|
||||
|
||||
function render() {
|
||||
elements.followButton.classList.toggle('active', state.followLatest)
|
||||
elements.followButton.textContent = state.followLatest
|
||||
? 'Following latest'
|
||||
: 'Follow latest'
|
||||
renderPackets()
|
||||
renderDetails()
|
||||
}
|
||||
|
||||
async function loadSnapshot() {
|
||||
const response = await fetch('/api/events')
|
||||
applySnapshot(await response.json())
|
||||
}
|
||||
|
||||
function connectEvents() {
|
||||
const source = new EventSource('/events')
|
||||
|
||||
source.onopen = () => setConnectionStatus('live')
|
||||
source.onerror = () => setConnectionStatus('offline')
|
||||
source.onmessage = (message) => {
|
||||
const data = JSON.parse(message.data)
|
||||
|
||||
if (data.snapshot) {
|
||||
applySnapshot(data.snapshot)
|
||||
return
|
||||
}
|
||||
|
||||
if (data.type === 'ingest') {
|
||||
appendEvent(data.event)
|
||||
applySummary(data.summary)
|
||||
|
||||
if (state.followLatest || !state.selectedId) {
|
||||
state.selectedId = data.event.id
|
||||
}
|
||||
|
||||
render()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
elements.packetList.addEventListener('click', (event) => {
|
||||
const packet = event.target.closest('.packet')
|
||||
|
||||
if (!packet) {
|
||||
return
|
||||
}
|
||||
|
||||
state.selectedId = packet.dataset.id
|
||||
state.followLatest = false
|
||||
render()
|
||||
})
|
||||
|
||||
elements.followButton.addEventListener('click', () => {
|
||||
state.followLatest = !state.followLatest
|
||||
|
||||
if (state.followLatest && state.events.length > 0) {
|
||||
state.selectedId = state.events[state.events.length - 1].id
|
||||
}
|
||||
|
||||
render()
|
||||
})
|
||||
|
||||
elements.filterInput.addEventListener('input', (event) => {
|
||||
state.filter = event.target.value.trim().toLowerCase()
|
||||
renderDetails()
|
||||
})
|
||||
|
||||
elements.copyButton.addEventListener('click', async () => {
|
||||
await copySelectedJson(elements.copyButton)
|
||||
})
|
||||
|
||||
elements.copyRawButton.addEventListener('click', async () => {
|
||||
await copySelectedJson(elements.copyRawButton)
|
||||
})
|
||||
|
||||
elements.expandJsonButton.addEventListener('click', () => {
|
||||
openJsonModal()
|
||||
})
|
||||
|
||||
elements.copyModalJsonButton.addEventListener('click', async () => {
|
||||
await copySelectedJson(elements.copyModalJsonButton)
|
||||
})
|
||||
|
||||
elements.closeJsonModalButton.addEventListener('click', () => {
|
||||
closeJsonModal()
|
||||
})
|
||||
|
||||
elements.jsonModalBackdrop.addEventListener('click', () => {
|
||||
closeJsonModal()
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
closeJsonModal()
|
||||
}
|
||||
})
|
||||
|
||||
elements.clearButton.addEventListener('click', async () => {
|
||||
await fetch('/api/events', { method: 'DELETE' })
|
||||
state.events = []
|
||||
state.selectedId = undefined
|
||||
state.followLatest = true
|
||||
render()
|
||||
await loadSnapshot()
|
||||
})
|
||||
|
||||
setConnectionStatus('connecting')
|
||||
await loadSnapshot()
|
||||
connectEvents()
|
||||
Reference in New Issue
Block a user