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'
export const runtime = 'experimental-edge'
const inter = Inter({ subsets: ['latin'] })
export default function Home({
state: stateStr,
monitors,
}: {
state: string
monitors: MonitorTarget[]
}) {
let state;
if (stateStr !== undefined) {
state = JSON.parse(stateStr) as MonitorState
}
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,
tooltip: monitor.tooltip,
statusPageLink: monitor.statusPageLink
}
})
return { props: { state, monitors } }
}