Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.4 kB · 84 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485import fs from "node:fs";
import { type Region, regionDict } from "@openstatus/regions";
import type { RegionMetricsChartTable } from "../data/content";import { SimpleChart } from "./simple-chart";
export interface LatencyChartTableProps { staticFile: string; caption?: string;}
interface LatencyChartTableData { regions: Region[]; data: { regions: Region[]; data: (Partial<Record<Region, number>> & { timestamp: string })[]; }; metricsByRegion: RegionMetricsChartTable[];}
export function LatencyChartTable({ staticFile, caption = "A list of all the selected regions.",}: LatencyChartTableProps) { const data = JSON.parse( fs.readFileSync(`${process.cwd()}/public${staticFile}`, "utf8"), ) as LatencyChartTableData; const { regions, data: chartData, metricsByRegion } = data;
return ( <div className="table-wrapper"> <table> <caption>{caption}</caption> <thead> <tr> <th className="w-[100px]">Region</th> <th>Trend</th> <th className="w-[50px]">P75</th> <th className="w-[50px]">P95</th> <th className="w-[50px]">P99</th> </tr> </thead> <tbody> {regions .filter((region) => regions.includes(region)) .map((region) => { const regionConfig = regionDict[region as Region]; const flag = regionConfig.flag; const code = regionConfig.code; const metrics = metricsByRegion.find((m) => m.region === region); return ( <tr key={region}> <td> {flag} {code} </td> <td> <SimpleChart data={chartData.data.map((d) => ({ timestamp: d.timestamp, latency: d[region], }))} /> </td> <td> {metrics?.p75Latency} ms </td> <td> {metrics?.p95Latency} ms </td> <td> {metrics?.p99Latency} ms </td> </tr> ); })} </tbody> </table> </div> );}