import Head from 'next/head' import { Inter } from 'next/font/google' import { MonitorState, MonitorTarget } from '@/uptime.types' import { KVNamespace } from '@cloudflare/workers-types' import { pageConfig, workerConfig } from '@/uptime.config' import OverallStatus from '@/components/OverallStatus' import Header from '@/components/Header' import MonitorList from '@/components/MonitorList' import { Center, Divider, Text } from '@mantine/core' import MonitorDetail from '@/components/MonitorDetail' export const runtime = 'experimental-edge' const inter = Inter({ subsets: ['latin'] }) export default function Home({ state: stateStr, monitors, }: { state: string monitors: MonitorTarget[] tooltip?: string statusPageLink?: string }) { let state if (stateStr !== undefined) { state = JSON.parse(stateStr) as MonitorState } // Specify monitorId in URL hash to view a specific monitor (can be used in iframe) const monitorId = window.location.hash.substring(1) if (monitorId) { const monitor = monitors.find((monitor) => monitor.id === monitorId) if (!monitor || !state) { return Monitor with id {monitorId} not found! } return (
) } return ( <> {pageConfig.title}
{state === undefined ? (
Monitor State is not defined now, please check your worker's status and KV binding!
) : (
)} Open-source monitoring and status page powered by{' '} Uptimeflare {' '} and{' '} Cloudflare , made with ❤ by{' '} lyc8503 .
) } export async function getServerSideProps() { const { UPTIMEFLARE_STATE } = process.env as unknown as { UPTIMEFLARE_STATE: KVNamespace } // Read state as string from KV, to avoid hitting server-side cpu time limit const state = (await UPTIMEFLARE_STATE?.get('state')) as unknown as MonitorState // Only present these values to client const monitors = workerConfig.monitors.map((monitor) => { return { id: monitor.id, name: monitor.name, // @ts-ignore tooltip: monitor?.tooltip, // @ts-ignore statusPageLink: monitor?.statusPageLink, // @ts-ignore hideLatencyChart: monitor?.hideLatencyChart, } }) return { props: { state, monitors } } }