spb/internetpressure

1import type { Metadata } from 'next';2import { ProbesTable } from '@/components/detail/Tables';3import { MapIsland } from '@/components/map/MapIsland';4import { Section, Stat } from '@/components/ui/primitives';5import { apiGet, apiTry } from '@/lib/api';6import { fmtInt, fmtPct } from '@/lib/format';7import type { Latency, Probe, Region } from '@/lib/types';89export const dynamic = 'force-dynamic';10export const metadata: Metadata = { title: 'Probe network', description: 'The InternetPressure Observability Network: our own measurement probes, where they sit, who hosts them, and whether they are fresh.' };1112export default async function ProbesPage() {13  const [{ probes }, regions, latency] = await Promise.all([apiGet<{ probes: Probe[] }>('/api/v1/probes'), apiTry<{ regions: Region[] }>('/api/v1/pressure/regions'), apiTry<Latency>('/api/v1/latency')]);14  const online = probes.filter((p) => p.status === 'online').length;15  const regionsCovered = new Set(probes.map((p) => p.region)).size;16  const countries = new Set(probes.map((p) => p.country)).size;17  const meas = probes.reduce((a, p) => a + p.measurements_1h, 0);18  const uptime = probes.length ? probes.reduce((a, p) => a + p.uptime_24h, 0) / probes.length : null;19  const byProbe = new Map((latency?.by_probe ?? []).map((b) => [b.probe_id, b]));20  return (21    <div className="pb-8">22      <header className="pt-6 pb-4">23        <p className="label">Observability network</p>24        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Probes</h1>25        <p className="mt-1 max-w-[760px] text-[13px] text-ink-2">Lightweight Go agents running as ordinary clients from MacLustr (Québec), OVHcloud (Québec, France) and rented hosts abroad. They never scan, never bypass anything and never send more traffic than a normal user would. Positions are approximate on purpose.</p>26        <div className="mt-4 grid grid-cols-3 gap-4 sm:grid-cols-6">27          <Stat label="online" value={<span style={{ color: online < probes.length ? 'var(--warn)' : undefined }}>{`${online}/${probes.length}`}</span>} />28          <Stat label="regions" value={fmtInt(regionsCovered)} />29          <Stat label="countries" value={fmtInt(countries)} />30          <Stat label="measurements / h" value={fmtInt(meas)} />31          <Stat label="avg uptime 24h" value={fmtPct(uptime, 2)} />32          <Stat label="capabilities" value="http · dns · ping · tr" />33        </div>34      </header>35      <Section label="Map">36        <MapIsland initial={{ regions: regions?.regions ?? null, countries: null, probes, fronts: null, incidents: null, matrix: latency?.matrix ?? null }} initialMode="probes" height="h-[280px] sm:h-[380px]" />37      </Section>38      <Section label="Network" right={<span>{fmtInt(probes.length)} probes</span>}>39        <ProbesTable probes={probes} />40      </Section>41      {latency && (42        <Section label="Per-probe latency view" right={<span>medians over the current window · z vs each probe&apos;s own baseline</span>}>43          <div className="scroll-x -mx-3 px-3">44            <table className="tbl">45              <thead>46                <tr>47                  <th>Probe</th>48                  <th className="r">RTT p50</th>49                  <th className="r">TTFB p50</th>50                  <th className="r">Loss</th>51                  <th className="r">z</th>52                </tr>53              </thead>54              <tbody>55                {probes.map((p) => {56                  const b = byProbe.get(p.probe_id);57                  return (58                    <tr key={p.probe_id}>59                      <td className="num text-ink">{p.probe_id}</td>60                      <td className="num r">{b ? `${b.rtt_ms_median.toFixed(1)} ms` : '—'}</td>61                      <td className="num r">{b ? `${b.ttfb_ms_median.toFixed(1)} ms` : '—'}</td>62                      <td className="num r" style={{ color: b && b.loss_pct >= 1 ? 'var(--p-high)' : undefined }}>63                        {b ? `${b.loss_pct.toFixed(1)} %` : '—'}64                      </td>65                      <td className="num r" style={{ color: b && Math.abs(b.z) >= 3 ? 'var(--p-high)' : undefined }}>66                        {b ? b.z.toFixed(1) : '—'}67                      </td>68                    </tr>69                  );70                })}71              </tbody>72            </table>73          </div>74        </Section>75      )}76    </div>77  );78}79