feat: multi-region monitor support — region selector in UI, region flag on pings

This commit is contained in:
M1
2026-03-18 16:08:39 +04:00
parent 52f7f8102b
commit 93db31db3b
11 changed files with 158 additions and 14 deletions
+13
View File
@@ -81,11 +81,20 @@
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<%
const regionFlag = {
'eu-central': '🇩🇪',
'us-east': '🇺🇸',
'us-west': '🇺🇸',
'ap-southeast': '🇸🇬',
};
%>
<thead>
<tr class="text-gray-500 text-xs">
<th class="text-left px-4 py-2 font-medium">Status</th>
<th class="text-left px-4 py-2 font-medium">Code</th>
<th class="text-left px-4 py-2 font-medium">Latency</th>
<th class="text-left px-4 py-2 font-medium">Region</th>
<th class="text-left px-4 py-2 font-medium">Time / Jitter</th>
<th class="text-left px-4 py-2 font-medium">Error</th>
</tr>
@@ -96,6 +105,7 @@
<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 != null ? 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 text-sm" title="<%= c.region || '' %>"><%= c.region ? (regionFlag[c.region] || '🌐') + ' ' + c.region : '—' %></td>
<td class="px-4 py-2 text-gray-500"><%~ it.timeAgoSSR(c.checked_at) %><% if (c.jitter_ms != null) { %> <span class="text-gray-600 text-xs">(+<%= c.jitter_ms %>ms)</span><% } %></td>
<td class="px-4 py-2 text-red-400/70 text-xs truncate max-w-[200px]"><%= c.error ? c.error : '' %></td>
</tr>
@@ -313,10 +323,13 @@
if (tbody) {
const tr = document.createElement('tr');
tr.className = 'hover:bg-gray-800/50';
const regionFlags = {'eu-central':'🇩🇪','us-east':'🇺🇸','us-west':'🇺🇸','ap-southeast':'🇸🇬'};
const regionDisplay = ping.region ? `${regionFlags[ping.region] || '🌐'} ${ping.region}` : '—';
tr.innerHTML = `
<td class="px-4 py-2">${ping.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">${ping.status_code ?? '—'}</td>
<td class="px-4 py-2 text-gray-300">${ping.latency_ms != null ? ping.latency_ms + 'ms' : '—'}</td>
<td class="px-4 py-2 text-gray-500 text-sm" title="${ping.region || ''}">${regionDisplay}</td>
<td class="px-4 py-2 text-gray-500">${timeAgo(ping.checked_at)}${ping.jitter_ms != null ? ` <span class="text-gray-600 text-xs">(+${ping.jitter_ms}ms)</span>` : ''}</td>
<td class="px-4 py-2 text-red-400/70 text-xs truncate max-w-[200px]">${ping.error ? escapeHtml(ping.error) : ''}</td>
`;