import Head from 'next/head' import { Inter } from 'next/font/google' import { MonitorState, MonitorTarget } from '@/types/config' import { KVNamespace } from '@cloudflare/workers-types' import { maintenances, pageConfig, workerConfig } from '@/uptime.config' import OverallStatus from '@/components/OverallStatus' import Header from '@/components/Header' import MonitorList from '@/components/MonitorList' import { Center, Text } from '@mantine/core' import MonitorDetail from '@/components/MonitorDetail' import Footer from '@/components/Footer' import { useTranslation } from 'react-i18next' 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 }) { const { t } = useTranslation('common') 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 {t('Monitor not found', { id: monitorId })} } return (
) } return ( <> {pageConfig.title}
{state == undefined ? (
{t('Monitor State not defined')}
) : (
)}
) } 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 } } }