spb/internetpressure

1import Link from 'next/link';2import { ConfBar, StatusDot } from '@/components/ui/primitives';3import { fmt, fmtDuration, fmtInt } from '@/lib/format';4import { pressureColor } from '@/lib/pressure';5import { Time } from '@/lib/time';6import type { Incident } from '@/lib/types';78export const TYPE_LABEL: Record<string, string> = {9  regional_latency: 'Latency anomaly',10  dns_disruption: 'DNS disruption',11  routing_instability: 'Routing instability',12  service_degradation: 'Service degradation',13  availability_loss: 'Availability loss',14  path_instability: 'Path instability',15  global_pressure: 'Global pressure',16};1718export function IncidentRow({ inc, compact = false }: { inc: Incident; compact?: boolean }) {19  return (20    <li className="grid gap-x-5 gap-y-1.5 py-3 md:grid-cols-[auto_1fr_auto]">21      <div className="num flex items-baseline gap-3 md:w-20 md:flex-col md:items-end md:gap-0">22        <span className="text-[24px] leading-none" style={{ color: pressureColor(inc.current_pressure) }}>23          {fmt(inc.current_pressure)}24        </span>25        <span className="text-[10.5px] text-ink-3">peak {fmt(inc.peak_pressure)}</span>26      </div>27      <div className="min-w-0">28        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">29          <Link href={`/event/${inc.slug}`} className="text-[14px] font-medium text-ink hover:text-accent">30            {inc.title}31          </Link>32          <StatusDot status={inc.status} />33          <span className="label">{TYPE_LABEL[inc.type] ?? inc.type}</span>34        </div>35        {!compact && <p className="mt-1 text-[12.5px] text-ink-2">{inc.summary}</p>}36        <p className="num mt-1 text-[11px] text-ink-3">37          {inc.scope_label} · started <Time ts={inc.started_at} /> · {fmtDuration(inc.duration_s)} · {fmtInt(inc.affected_probes)} probes · {fmtInt(inc.affected_targets)} targets38          {inc.affected_asns.length ? ` · AS${inc.affected_asns.slice(0, 3).join(', AS')}` : ''}39        </p>40      </div>41      <div className="md:text-right">42        <ConfBar value={inc.confidence} />43      </div>44    </li>45  );46}47