rename: checks → pings throughout (DB, API, UI, Rust)
This commit is contained in:
M1
@@ -56,7 +56,7 @@
|
||||
<div id="stat-uptime" class="text-lg font-semibold text-gray-200"></div>
|
||||
</div>
|
||||
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
|
||||
<div class="text-xs text-gray-500 mb-1">Last Check</div>
|
||||
<div class="text-xs text-gray-500 mb-1">Last Ping</div>
|
||||
<div id="stat-last" class="text-lg font-semibold text-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -73,10 +73,10 @@
|
||||
<div id="status-bar" class="flex gap-0.5 h-8 rounded overflow-hidden"></div>
|
||||
</div>
|
||||
|
||||
<!-- Recent checks table -->
|
||||
<!-- Recent pings table -->
|
||||
<div class="bg-gray-900 border border-gray-800 rounded-xl mb-8 overflow-hidden">
|
||||
<div class="px-4 py-3 border-b border-gray-800">
|
||||
<h3 class="text-sm text-gray-400">Recent Checks</h3>
|
||||
<h3 class="text-sm text-gray-400">Recent Pings</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm">
|
||||
@@ -89,7 +89,7 @@
|
||||
<th class="text-left px-4 py-2 font-medium">Error</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="checks-table" class="divide-y divide-gray-800/50"></tbody>
|
||||
<tbody id="pings-table" class="divide-y divide-gray-800/50"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,12 +148,12 @@
|
||||
document.getElementById('content').classList.remove('hidden');
|
||||
|
||||
const results = data.results || [];
|
||||
const lastCheck = results[0];
|
||||
const lastPing = results[0];
|
||||
|
||||
// Header
|
||||
document.getElementById('monitor-name').textContent = data.name;
|
||||
document.getElementById('monitor-url').textContent = data.url;
|
||||
document.getElementById('status-dot').innerHTML = statusBadge(lastCheck?.up);
|
||||
document.getElementById('status-dot').innerHTML = statusBadge(lastPing?.up);
|
||||
|
||||
// Toggle button
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
@@ -166,41 +166,41 @@
|
||||
|
||||
// Delete button
|
||||
document.getElementById('delete-btn').onclick = async () => {
|
||||
if (!confirm('Delete this monitor and all its check history?')) return;
|
||||
if (!confirm('Delete this monitor and all its ping history?')) return;
|
||||
await api(`/monitors/${monitorId}`, { method: 'DELETE' });
|
||||
window.location.href = '/dashboard/home';
|
||||
};
|
||||
|
||||
// Stats
|
||||
const upChecks = results.filter(r => r.up);
|
||||
const upPings = results.filter(r => r.up);
|
||||
const latencies = results.filter(r => r.latency_ms != null).map(r => r.latency_ms);
|
||||
const avgLatency = latencies.length ? Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length) : null;
|
||||
const uptime = results.length ? Math.round((upChecks.length / results.length) * 100) : null;
|
||||
const uptime = results.length ? Math.round((upPings.length / results.length) * 100) : null;
|
||||
|
||||
document.getElementById('stat-status').innerHTML = lastCheck
|
||||
? (lastCheck.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>')
|
||||
document.getElementById('stat-status').innerHTML = lastPing
|
||||
? (lastPing.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>')
|
||||
: '<span class="text-gray-500">—</span>';
|
||||
document.getElementById('stat-latency').textContent = avgLatency != null ? `${avgLatency}ms` : '—';
|
||||
document.getElementById('stat-uptime').textContent = uptime != null ? `${uptime}%` : '—';
|
||||
document.getElementById('stat-last').textContent = lastCheck ? timeAgo(lastCheck.checked_at) : '—';
|
||||
document.getElementById('stat-last').textContent = lastPing ? timeAgo(lastPing.pinged_at) : '—';
|
||||
|
||||
// Latency chart
|
||||
renderLatencyChart(results.slice().reverse());
|
||||
|
||||
// Status bar
|
||||
const statusBar = document.getElementById('status-bar');
|
||||
const barChecks = results.slice(0, 60).reverse();
|
||||
statusBar.innerHTML = barChecks.map(c =>
|
||||
`<div class="flex-1 ${c.up ? 'bg-green-500/70' : 'bg-red-500/70'}" title="${new Date(c.checked_at).toLocaleString()} — ${c.up ? 'Up' : 'Down'} ${c.latency_ms ? c.latency_ms + 'ms' : ''}"></div>`
|
||||
const barPings = results.slice(0, 60).reverse();
|
||||
statusBar.innerHTML = barPings.map(c =>
|
||||
`<div class="flex-1 ${c.up ? 'bg-green-500/70' : 'bg-red-500/70'}" title="${new Date(c.pinged_at).toLocaleString()} — ${c.up ? 'Up' : 'Down'} ${c.latency_ms ? c.latency_ms + 'ms' : ''}"></div>`
|
||||
).join('') || '<div class="flex-1 bg-gray-800 text-center text-xs text-gray-600 leading-8">No data</div>';
|
||||
|
||||
// Checks table
|
||||
document.getElementById('checks-table').innerHTML = results.slice(0, 30).map(c => `
|
||||
// Pings table
|
||||
document.getElementById('pings-table').innerHTML = results.slice(0, 30).map(c => `
|
||||
<tr class="hover:bg-gray-800/50">
|
||||
<td class="px-4 py-2">${c.up ? '<span class="text-green-400">Up</span>' : '<span class="text-red-400">Down</span>'}</td>
|
||||
<td class="px-4 py-2 text-gray-300">${c.status_code ?? '—'}</td>
|
||||
<td class="px-4 py-2 text-gray-300">${c.latency_ms != null ? c.latency_ms + 'ms' : '—'}</td>
|
||||
<td class="px-4 py-2 text-gray-500">${timeAgo(c.checked_at)}</td>
|
||||
<td class="px-4 py-2 text-gray-500">${timeAgo(c.pinged_at)}</td>
|
||||
<td class="px-4 py-2 text-red-400/70 text-xs truncate max-w-[200px]">${c.error ? escapeHtml(c.error) : ''}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
@@ -216,9 +216,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
function renderLatencyChart(checks) {
|
||||
function renderLatencyChart(pings) {
|
||||
const container = document.getElementById('latency-chart');
|
||||
const data = checks.filter(c => c.latency_ms != null);
|
||||
const data = pings.filter(c => c.latency_ms != null);
|
||||
if (data.length < 2) {
|
||||
container.innerHTML = '<div class="h-full flex items-center justify-center text-gray-600 text-sm">Not enough data</div>';
|
||||
return;
|
||||
|
||||
@@ -54,32 +54,32 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Fetch last check for each monitor
|
||||
const monitorsWithChecks = await Promise.all(
|
||||
// Fetch last ping for each monitor
|
||||
const monitorsWithPings = await Promise.all(
|
||||
monitors.map(async (m) => {
|
||||
try {
|
||||
const checks = await api(`/monitors/${m.id}/history?limit=20`);
|
||||
return { ...m, checks };
|
||||
const pings = await api(`/monitors/${m.id}/pings?limit=20`);
|
||||
return { ...m, pings };
|
||||
} catch {
|
||||
return { ...m, checks: [] };
|
||||
return { ...m, pings: [] };
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
const upCount = monitorsWithChecks.filter(m => m.checks[0]?.up === true).length;
|
||||
const downCount = monitorsWithChecks.filter(m => m.checks[0]?.up === false).length;
|
||||
const upCount = monitorsWithPings.filter(m => m.pings[0]?.up === true).length;
|
||||
const downCount = monitorsWithPings.filter(m => m.pings[0]?.up === false).length;
|
||||
summary.innerHTML = `<span class="text-green-400">${upCount} up</span> · <span class="${downCount > 0 ? 'text-red-400' : 'text-gray-500'}">${downCount} down</span> · ${monitors.length} total`;
|
||||
|
||||
list.innerHTML = monitorsWithChecks.map(m => {
|
||||
const lastCheck = m.checks[0];
|
||||
const latencies = m.checks.filter(c => c.latency_ms != null).map(c => c.latency_ms).reverse();
|
||||
list.innerHTML = monitorsWithPings.map(m => {
|
||||
const lastPing = m.pings[0];
|
||||
const latencies = m.pings.filter(c => c.latency_ms != null).map(c => c.latency_ms).reverse();
|
||||
const avgLatency = latencies.length ? Math.round(latencies.reduce((a, b) => a + b, 0) / latencies.length) : null;
|
||||
|
||||
return `
|
||||
<a href="/dashboard/monitors/${m.id}" class="block bg-gray-900 hover:bg-gray-800/80 border border-gray-800 rounded-xl p-4 transition-colors group">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
${statusBadge(lastCheck?.up)}
|
||||
${statusBadge(lastPing?.up)}
|
||||
<div class="min-w-0">
|
||||
<div class="font-medium text-gray-100 group-hover:text-white truncate">${escapeHtml(m.name)}</div>
|
||||
<div class="text-xs text-gray-500 truncate">${escapeHtml(m.url)}</div>
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="hidden sm:block">${sparkline(latencies)}</div>
|
||||
<div class="text-right">
|
||||
<div class="text-sm text-gray-300">${avgLatency != null ? avgLatency + 'ms' : '—'}</div>
|
||||
<div class="text-xs text-gray-500">${lastCheck ? timeAgo(lastCheck.checked_at) : 'no checks'}</div>
|
||||
<div class="text-xs text-gray-500">${lastPing ? timeAgo(lastPing.pinged_at) : 'no pings'}</div>
|
||||
</div>
|
||||
<div class="text-xs px-2 py-1 rounded ${m.enabled ? 'bg-gray-800 text-gray-400' : 'bg-yellow-900/30 text-yellow-500'}">${m.enabled ? m.interval_s + 's' : 'paused'}</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<label class="block text-xs text-gray-500 uppercase tracking-wider mb-2">Account Key</label>
|
||||
<input id="key-input" type="text" placeholder="XXXX-XXXX-XXXX-XXXX"
|
||||
class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-gray-100 placeholder-gray-600 focus:outline-none focus:border-blue-500 key-display text-center text-lg"
|
||||
maxlength="19" autocomplete="off" spellcheck="false">
|
||||
maxlength="19" autocomplete="off" spellping="false">
|
||||
<button id="login-btn"
|
||||
class="w-full mt-3 bg-blue-600 hover:bg-blue-500 text-white font-medium py-3 rounded-lg transition-colors">
|
||||
Sign In
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Check Interval</label>
|
||||
<label class="block text-sm text-gray-400 mb-1.5">Ping Interval</label>
|
||||
<select id="interval"
|
||||
class="w-full bg-gray-900 border border-gray-800 rounded-lg px-4 py-2.5 text-gray-100 focus:outline-none focus:border-blue-500">
|
||||
<option value="10">10 seconds</option>
|
||||
|
||||
Reference in New Issue
Block a user