121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
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 (
|
||
<Text fw={700}>
|
||
Monitor with id {monitorId} not found!
|
||
</Text>
|
||
)
|
||
}
|
||
return (
|
||
<div style={{ maxWidth: '810px' }}>
|
||
<MonitorDetail monitor={monitor} state={state} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Head>
|
||
<title>{pageConfig.title}</title>
|
||
<link rel="icon" href="/favicon.ico" />
|
||
</Head>
|
||
|
||
<main className={inter.className}>
|
||
<Header />
|
||
|
||
{state === undefined ? (
|
||
<Center>
|
||
<Text fw={700}>
|
||
Monitor State is not defined now, please check your worker's status and KV
|
||
binding!
|
||
</Text>
|
||
</Center>
|
||
) : (
|
||
<div>
|
||
<OverallStatus state={state} />
|
||
<MonitorList monitors={monitors} state={state} />
|
||
</div>
|
||
)}
|
||
|
||
<Divider mt="lg" />
|
||
<Text size="xs" mt="xs" mb="xs" style={{
|
||
textAlign: 'center'
|
||
}}>
|
||
由开源项目{' '}
|
||
<a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
|
||
Uptimeflare
|
||
</a>{' '}
|
||
和{' '}
|
||
<a href="https://www.cloudflare.com/" target="_blank">
|
||
Cloudflare
|
||
</a>
|
||
强力驱动，项目由{' '}
|
||
<a href="https://github.com/lyc8503" target="_blank">
|
||
lyc8503
|
||
</a>
|
||
制作，此副本由{' '}
|
||
<a href="https://github.com/wuyuhanzijin" target="_blank">
|
||
wuyuhanzijin
|
||
</a>
|
||
汉化
|
||
</Text>
|
||
</main>
|
||
</>
|
||
)
|
||
}
|
||
|
||
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
|
||
}
|
||
})
|
||
|
||
return { props: { state, monitors } }
|
||
}
|