ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/dashboard/tailwind.css
+1 -1
View File
File diff suppressed because one or more lines are too long
apps/web/src/views/detail.ejs
+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>
`;
apps/web/src/views/new.ejs
+20
View File
@@ -78,6 +78,24 @@
</div>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1.5">Regions <span class="text-gray-600">(optional — leave all unselected to use all regions)</span></label>
<div class="flex flex-wrap gap-2" id="region-list">
<label class="region-option flex items-center gap-2 bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
<input type="checkbox" value="eu-central" class="region-check accent-blue-500"> <span class="text-sm text-gray-300">🇩🇪 EU Central</span>
</label>
<label class="region-option flex items-center gap-2 bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
<input type="checkbox" value="us-east" class="region-check accent-blue-500"> <span class="text-sm text-gray-300">🇺🇸 US East</span>
</label>
<label class="region-option flex items-center gap-2 bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
<input type="checkbox" value="us-west" class="region-check accent-blue-500"> <span class="text-sm text-gray-300">🇺🇸 US West</span>
</label>
<label class="region-option flex items-center gap-2 bg-gray-900 border border-gray-800 hover:border-gray-600 rounded-lg px-3 py-2 cursor-pointer transition-colors">
<input type="checkbox" value="ap-southeast" class="region-check accent-blue-500"> <span class="text-sm text-gray-300">🇸🇬 AP Southeast</span>
</label>
</div>
</div>
<div>
<label class="block text-sm text-gray-400 mb-1.5">Query Conditions <span class="text-gray-600">(optional)</span></label>
<p class="text-xs text-gray-600 mb-3">Define when this monitor should be considered "up". Defaults to status &lt; 400.</p>
@@ -145,6 +163,8 @@
timeout_ms: Number(document.getElementById('timeout').value),
};
if (Object.keys(headers).length) body.request_headers = headers;
const regions = [...document.querySelectorAll('.region-check:checked')].map(el => el.value);
if (regions.length) body.regions = regions;
const rb = document.getElementById('request-body').value.trim();
if (rb) body.request_body = rb;
if (currentQuery) body.query = currentQuery;