Merge pull request #22 from JavaScriptSolidServer/issue-21-relay-filter-tabs

Relays page: filter tabs (All/Online/Writable/Paid/Auth) with per-category counts

Author: melvincarvalho

public/index.html

@@ -117,6 +117,12 @@
     padding:.4rem .85rem;border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
   .toggle:hover{border-color:var(--accent);color:var(--accent)}
   .toggle.on{background:var(--accent-soft);border-color:#dcd8f5;color:var(--accent)}
+  .tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1rem}
+  .tab{font-size:.84rem;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--muted);padding:.42rem .85rem;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:border-color .15s,color .15s,background .15s}
+  .tab:hover{border-color:var(--accent);color:var(--accent)}
+  .tab.on{background:var(--accent-soft);border-color:#dcd8f5;color:var(--accent)}
+  .tab .tabn{font-family:var(--mono);font-size:.74rem;font-weight:500;color:var(--faint)}
+  .tab.on .tabn{color:var(--accent)}
   .caveat{font-size:.8rem;color:var(--faint);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;margin-bottom:1rem}
   .rtable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.86rem}
   .rtable thead th{text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
@@ -349,7 +355,14 @@ <h2>${esc(c.name || short(pk))}</h2>
 }
 
 // ---- relay directory (firehose health data) ----
-const relaysState = { online: true, sortKey: 'lastChecked', dir: -1, rows: [], meta: {} };
+const relaysState = { filter: 'online', sortKey: 'lastChecked', dir: -1, rows: [], meta: {} };
+const RTABS = [
+  { key: 'all', label: 'All' },
+  { key: 'online', label: 'Online' },
+  { key: 'writable', label: 'Writable' },
+  { key: 'paid', label: 'Paid' },
+  { key: 'auth', label: 'Auth' },
+];
 const RCOLS = [
   { key: 'relay', label: 'Relay', num: false },
   { key: 'online', label: 'Status', num: false },
@@ -394,20 +407,22 @@ <h2>${esc(c.name || short(pk))}</h2>
 }
 
 function renderRelays() {
-  const { rows, meta, sortKey, dir, online } = relaysState;
+  const { rows, meta, sortKey, dir, filter } = relaysState;
+  const counts = meta.counts || {};
   const sorted = [...rows].sort((a, b) => cmpRelay(a, b, sortKey, dir));
   const head = RCOLS.map((c) => `<th class="${c.num ? 'num' : ''}" data-key="${c.key}">${c.label}${sortKey === c.key ? ` <span class="arrow">${dir < 0 ? '▼' : '▲'}</span>` : ''}</th>`).join('');
+  const tabs = RTABS.map((t) => `<button class="tab ${filter === t.key ? 'on' : ''}" data-filter="${t.key}">${t.label} <span class="tabn">${fmt(counts[t.key] || 0)}</span></button>`).join('');
+  const label = filter === 'all' ? 'relays' : `${filter} relays`;
   view.innerHTML = `<div class="detail">
     <div class="back" id="back">← all identities</div>
-    <div class="relays-head"><h2>Relay directory</h2>
-      <span class="sub"><strong>${fmt(meta.online)}</strong> online of <strong>${fmt(meta.total)}</strong> known relays</span></div>
-    <div class="caveat">Health snapshot · relays last checked <strong>${esc(meta.lastChecked ? ageStr(meta.lastChecked) + ' ago' : 'unknown')}</strong>. Live monitoring is paused, so these figures reflect that snapshot.</div>
-    <div class="relays-controls"><button class="toggle ${online ? 'on' : ''}" id="r-online">Online only</button></div>
+    <div class="relays-head"><h2>Relay directory</h2></div>
+    <div class="tabs">${tabs}</div>
+    <div class="caveat">Health checked live · relays last checked <strong>${esc(meta.lastChecked ? ageStr(meta.lastChecked) + ' ago' : 'unknown')}</strong>.</div>
     <div style="overflow-x:auto"><table class="rtable"><thead><tr>${head}</tr></thead><tbody>${sorted.map(relayRow).join('')}</tbody></table></div>
-    <div class="caveat" style="margin-top:1rem">Showing ${sorted.length} relays. Click a column to sort.</div>
+    <div class="caveat" style="margin-top:1rem">Showing ${sorted.length} ${label}. Click a column to sort.</div>
   </div>`;
   $('#back').onclick = () => navigate('/');
-  $('#r-online').onclick = () => { relaysState.online = !relaysState.online; relaysView(); };
+  view.querySelectorAll('.tabs .tab').forEach((b) => { b.onclick = () => { relaysState.filter = b.dataset.filter; relaysView(); }; });
   view.querySelectorAll('.rtable thead th').forEach((th) => { th.onclick = () => {
     const k = th.dataset.key;
     if (relaysState.sortKey === k) relaysState.dir = -relaysState.dir;
@@ -420,7 +435,7 @@ <h2>${esc(c.name || short(pk))}</h2>
   if ($('#q')) $('#q').value = '';
   $('#stat').innerHTML = '';
   view.innerHTML = '<div class="loading">loading relay directory…</div>';
-  const data = await fetch(`/api/relays-directory?limit=2000${relaysState.online ? '&online=1' : ''}`).then((r) => r.json()).catch(() => null);
+  const data = await fetch(`/api/relays-directory?filter=${encodeURIComponent(relaysState.filter)}&limit=2000`).then((r) => r.json()).catch(() => null);
   if (!data || !Array.isArray(data.relays)) { view.innerHTML = '<div class="loading">Could not load the relay directory.</div>'; return; }
   relaysState.rows = data.relays; relaysState.meta = data;
   renderRelays();

src/db.js

@@ -116,24 +116,46 @@ const RELAY_FIELDS = {
   requiresAuth: 1, requiresPayment: 1, lastChecked: 1, checksOnline: 1, checksTotal: 1,
 };
 
+// Tab filters → the Mongo match for each. `all` is the whole directory.
+const RELAY_FILTERS = {
+  all: {},
+  online: { online: true },
+  writable: { acceptsEvents: true },
+  paid: { requiresPayment: true },
+  auth: { requiresAuth: true },
+};
+
 /**
- * Read the relay-health directory. Returns a summary (for the freshness caveat)
- * plus the matching rows. `online` filters to live relays; `sort` is one of
- * 'quality' (uptime desc, latency asc), 'latency', or 'recent' (last checked).
+ * Read the relay-health directory in one round-trip ($facet): per-tab `counts`
+ * (all/online/writable/paid/auth), the freshest `lastChecked` (freshness
+ * caveat), and the filtered+sorted page. `filter` is a tab key (default
+ * 'online'); `sort` is 'recent' (default), 'quality', or 'latency'.
  */
-export async function relaysDirectory({ online = false, sort = 'quality', limit = 300 } = {}) {
+export async function relaysDirectory({ filter = 'online', sort = 'recent', limit = 1000 } = {}) {
   const col = (await connect()).collection(RELAY_DIRECTORY);
-  const filter = online ? { online: true } : {};
-  const sortSpec = sort === 'recent' ? { lastChecked: -1 }
+  const match = RELAY_FILTERS[filter] || RELAY_FILTERS.online;
+  const sortSpec = sort === 'quality' ? { uptime: -1, responseTime: 1 }
     : sort === 'latency' ? { responseTime: 1 }
-    : { uptime: -1, responseTime: 1 }; // 'quality'
-  const [total, onlineCount, newest, relays] = await Promise.all([
-    col.estimatedDocumentCount(),
-    col.countDocuments({ online: true }),
-    col.find({}, { projection: { _id: 0, lastChecked: 1 } }).sort({ lastChecked: -1 }).limit(1).toArray(),
-    col.find(filter, { projection: RELAY_FIELDS }).sort(sortSpec).limit(Math.min(Number(limit) || 300, 2000)).toArray(),
-  ]);
-  return { total, online: onlineCount, lastChecked: newest[0]?.lastChecked || null, relays };
+    : { lastChecked: -1 }; // 'recent'
+  const lim = Math.min(Number(limit) || 1000, 2000);
+  const count = (m) => (m && Object.keys(m).length ? [{ $match: m }, { $count: 'n' }] : [{ $count: 'n' }]);
+  const [res] = await col.aggregate([{
+    $facet: {
+      all: count(RELAY_FILTERS.all),
+      online: count(RELAY_FILTERS.online),
+      writable: count(RELAY_FILTERS.writable),
+      paid: count(RELAY_FILTERS.paid),
+      auth: count(RELAY_FILTERS.auth),
+      newest: [{ $sort: { lastChecked: -1 } }, { $limit: 1 }, { $project: { _id: 0, lastChecked: 1 } }],
+      page: [{ $match: match }, { $sort: sortSpec }, { $limit: lim }, { $project: RELAY_FIELDS }],
+    },
+  }]).toArray();
+  const n = (k) => res?.[k]?.[0]?.n || 0;
+  return {
+    counts: { all: n('all'), online: n('online'), writable: n('writable'), paid: n('paid'), auth: n('auth') },
+    lastChecked: res?.newest?.[0]?.lastChecked || null,
+    relays: res?.page || [],
+  };
 }
 
 // ---- graph metrics ---------------------------------------------------------

src/server.js

@@ -127,11 +127,11 @@ export async function startServer(port = process.env.PORT || 3000) {
     try { res.json(await getRelays(req.params.pubkey)); } catch (e) { next(e); }
   });
 
-  // relay-health directory (firehose data): { total, online, lastChecked, relays }
+  // relay-health directory (firehose data): { counts, lastChecked, relays }
   app.get('/api/relays-directory', async (req, res, next) => {
     try {
       res.json(await relaysDirectory({
-        online: req.query.online === '1' || req.query.online === 'true',
+        filter: req.query.filter,
         sort: req.query.sort,
         limit: req.query.limit,
       }));