spb/internetpressure

1import type { Metadata } from 'next';2import Link from 'next/link';3import { LevelBadge, PNum, Section } from '@/components/ui/primitives';4import { apiGet } from '@/lib/api';5import { fmt, fmtInt } from '@/lib/format';6import { pressureColor } from '@/lib/pressure';7import { Time } from '@/lib/time';8import type { AsnRow } from '@/lib/types';910export const dynamic = 'force-dynamic';11export const metadata: Metadata = { title: 'Autonomous systems', description: 'Pressure observed per autonomous system: routing churn, latency and availability toward the networks we measure.' };1213export default async function AsnsPage() {14  const { asns, ts } = await apiGet<{ ts: string; asns: AsnRow[] }>('/api/v1/asns');15  const sorted = [...asns].sort((a, b) => b.pressure - a.pressure);16  return (17    <div className="pb-8">18      <header className="pt-6 pb-4">19        <p className="label">Index</p>20        <h1 className="mt-1 text-[26px] font-medium tracking-tight sm:text-[32px]">Autonomous systems</h1>21        <p className="mt-1 text-[13px] text-ink-2">22          {fmtInt(asns.length)} networks with anchored targets or BGP attribution · engine <Time ts={ts} style="time" className="num" />23        </p>24      </header>25      <Section>26        <div className="scroll-x -mx-3 px-3">27          <table className="tbl">28            <thead>29              <tr>30                <th>ASN</th>31                <th>Name</th>32                <th className="hidden sm:table-cell">CC</th>33                <th className="r">Pressure</th>34                <th className="hidden md:table-cell">Level</th>35                <th className="r hidden sm:table-cell">Routing</th>36                <th className="r hidden sm:table-cell">Latency</th>37                <th className="r hidden md:table-cell">Avail.</th>38                <th className="r hidden md:table-cell">Targets</th>39                <th className="r hidden lg:table-cell">Prefixes</th>40                <th className="r hidden lg:table-cell">Imp.</th>41              </tr>42            </thead>43            <tbody>44              {sorted.map((a) => (45                <tr key={a.asn}>46                  <td className="num">47                    <Link href={`/asn/${a.asn}`} className="text-ink hover:text-accent">48                      AS{a.asn}49                    </Link>50                  </td>51                  <td>52                    <Link href={`/asn/${a.asn}`} className="text-ink hover:text-accent">53                      {a.name}54                    </Link>55                  </td>56                  <td className="hidden text-ink-2 sm:table-cell">{a.country}</td>57                  <td className="r">58                    <PNum value={a.pressure} className="text-[14px]" />59                  </td>60                  <td className="hidden md:table-cell">61                    <LevelBadge level={a.level} size="xs" />62                  </td>63                  <td className="num r hidden sm:table-cell" style={{ color: pressureColor(a.routing) }}>64                    {fmt(a.routing, 0)}65                  </td>66                  <td className="num r hidden sm:table-cell" style={{ color: pressureColor(a.latency) }}>67                    {fmt(a.latency, 0)}68                  </td>69                  <td className="num r hidden md:table-cell" style={{ color: pressureColor(a.availability) }}>70                    {fmt(a.availability, 0)}71                  </td>72                  <td className="num r hidden text-ink-2 md:table-cell">{fmtInt(a.targets)}</td>73                  <td className="num r hidden text-ink-2 lg:table-cell">{fmtInt(a.prefixes_observed)}</td>74                  <td className="num r hidden text-ink-2 lg:table-cell">{a.importance}</td>75                </tr>76              ))}77            </tbody>78          </table>79        </div>80      </Section>81    </div>82  );83}84