Monitor websites uptime using Cloudflare Workers
Something went wrong. Try again.
TSX
at optimization
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159import { useState } from 'react';import type { EndpointSignal, Observation } from '@uptime/contracts';
const providerNames = { cloudflare: 'Cloudflare', cloudfront: 'CloudFront', fastly: 'Fastly', vercel: 'Vercel',} as const;
const continentNames = { africa: 'Africa', asia: 'Asia', europe: 'Europe', north_america: 'North America', oceania: 'Oceania', south_america: 'South America',} as const;
export interface EndpointEvidenceSummary { finalUrl: string | null; finalHostname: string | null; provider: string | null; reportedEdge: string | null; inferredContinent: string | null; evidenceHeader: string | null; parserVersion: string | null; signals: EndpointSignal[];}
export function summarizeEndpointEvidence(item: Observation): EndpointEvidenceSummary { const evidence = item.endpointEvidence; const primary = evidence?.primaryCdn; let fallbackHostname: string | null = null; if (item.finalUrl) { try { fallbackHostname = new URL(item.finalUrl).hostname; } catch { // The API contract validates this URL. Keep the UI resilient to old data anyway. } } return { finalUrl: item.finalUrl, finalHostname: evidence?.finalHostname ?? fallbackHostname, provider: primary ? providerNames[primary.provider] : null, reportedEdge: primary?.reportedEdge ?? null, inferredContinent: primary?.inferredContinent ? continentNames[primary.inferredContinent] : null, evidenceHeader: primary?.evidenceHeader ?? null, parserVersion: primary?.parserVersion ?? null, signals: evidence?.signals ?? [], };}
export function truncateEndpointValue(value: string, maxLength = 120): string { if (value.length <= maxLength) return value; return `${value.slice(0, Math.max(0, maxLength - 1))}…`;}
export function EndpointEvidence({ item }: { item: Observation }) { const summary = summarizeEndpointEvidence(item); return ( <div className="endpoint-evidence"> <div className="endpoint-evidence__target"> <span className="endpoint-evidence__label">Final URL</span> <span className="endpoint-evidence__value endpoint-evidence__value--url" title={summary.finalUrl ?? undefined} aria-label={summary.finalUrl ?? 'Final URL unknown'} > {summary.finalUrl ? truncateEndpointValue(summary.finalUrl) : 'Unknown'} </span> <span className="endpoint-evidence__hostname"> <span className="endpoint-evidence__label">Normalized hostname</span> <span className="endpoint-evidence__value" title={summary.finalHostname ?? undefined}> {summary.finalHostname ?? 'Unknown'} </span> </span> </div> <div className="endpoint-evidence__cdn"> <span className="endpoint-evidence__label">CDN response evidence</span> {summary.provider ? ( <> <span className="endpoint-evidence__value"> {summary.provider} · {summary.reportedEdge} </span> <span className="endpoint-evidence__meta"> {summary.inferredContinent ? `Inferred continent: ${summary.inferredContinent}` : 'Inferred continent: Unknown'}{' '} · Provider-reported </span> <span className="endpoint-evidence__meta"> Header: {summary.evidenceHeader} · Parser {summary.parserVersion} </span> </> ) : ( <span className="endpoint-evidence__meta">No CDN evidence reported</span> )} </div> <RawSignals signals={summary.signals} /> </div> );}
function RawSignals({ signals }: { signals: EndpointSignal[] }) { return ( <details className="endpoint-evidence__signals"> <summary>Response signals ({signals.length})</summary> {signals.length === 0 ? ( <p className="endpoint-evidence__empty">No allowlisted response signals.</p> ) : ( <ul> {signals.map((signal) => ( <SignalRow key={signal.name} signal={signal} /> ))} </ul> )} </details> );}
function SignalRow({ signal }: { signal: EndpointSignal }) { const [copyState, setCopyState] = useState<'idle' | 'copied' | 'unavailable'>('idle'); async function copyValue() { if (!navigator.clipboard?.writeText) { setCopyState('unavailable'); return; } try { await navigator.clipboard.writeText(signal.value); setCopyState('copied'); } catch { setCopyState('unavailable'); } } return ( <li> <span className="endpoint-evidence__signal-name">{signal.name}</span> <span className="endpoint-evidence__signal-value" title={signal.value} aria-label={`${signal.name} value: ${signal.value}`} > {truncateEndpointValue(signal.value)} </span> <button type="button" className="endpoint-evidence__copy" onClick={() => void copyValue()} aria-label={`Copy ${signal.name} response value`} > {copyState === 'copied' ? 'Copied' : copyState === 'unavailable' ? 'Unavailable' : 'Copy'} </button> </li> );}