import Head from 'next/head' import { Inter } from 'next/font/google' import { MonitorTarget } from '@/types/config' 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' import { CompactedMonitorStateWrapper, getFromStore } from '@/worker/src/store' export const runtime = 'experimental-edge' const inter = Inter({ subsets: ['latin'] }) export default function Home({ compactedStateStr, monitors, }: { compactedStateStr: string monitors: MonitorTarget[] tooltip?: string statusPageLink?: string }) { const { t } = useTranslation('common') let state = new CompactedMonitorStateWrapper(compactedStateStr).uncompact() // 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.lastUpdate === 0 ? (
{t('Monitor State not defined')}
) : (
)}
) } export async function getServerSideProps() { // Read state as string from storage, to avoid hitting server-side cpu time limit const compactedStateStr = await getFromStore(process.env as any, 'state') // 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: { compactedStateStr, monitors } } }