/** @jsxImportSource https://esm.sh/react */ import { sqlite } from "https://esm.town/v/std/sqlite?v=6"; import { html } from "https://esm.town/v/stevekrouse/html"; import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact"; import { renderToString } from "npm:react-dom/server"; function StatusRow({ rows }: { rows: any[] }) { return (

{rows.map(row => (

))}

Response times

row[2])} height={70} width={800} fill="white" stroke="rgba(0, 10, 150, 0.5)" // blue />

); } function StatusSection({ url, rows }) { const sectionRows = rows.filter(row => row[0] === url); const percentUp = Math.round((sectionRows.filter(row => row[1]).length / sectionRows.length) * 100); return (

{url.replace(/\/$/, "").replace(/^https?:\/\//, "")}

{percentUp}% uptime

); } export default async function(req: Request): Promise { const { rows } = await sqlite.execute( "select url, ok, duration, timestamp from uptime order by timestamp desc limit 200", ); const urls = [...new Set(rows.map(r => r[0]))]; return html(renderToString( Uptime Status

Uptime Status

view code

{urls.map(url => )}

, )); }