92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
import Head from 'next/head'
|
|
|
|
import { Inter } from 'next/font/google'
|
|
import { MonitorTarget } from '@/types/config'
|
|
import { maintenances, pageConfig } 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 <Text fw={700}>{t('Monitor not found', { id: monitorId })}</Text>
|
|
}
|
|
return (
|
|
<div style={{ maxWidth: '810px' }}>
|
|
<MonitorDetail monitor={monitor} state={state} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{pageConfig.title}</title>
|
|
<link rel="icon" href={pageConfig.favicon ?? '/favicon.png'} />
|
|
</Head>
|
|
|
|
<main className={inter.className}>
|
|
<Header />
|
|
|
|
{state.lastUpdate === 0 ? (
|
|
<Center>
|
|
<Text fw={700}>{t('Monitor State not defined')}</Text>
|
|
</Center>
|
|
) : (
|
|
<div>
|
|
<OverallStatus state={state} monitors={monitors} maintenances={maintenances} />
|
|
<MonitorList monitors={monitors} state={state} />
|
|
</div>
|
|
)}
|
|
|
|
<Footer />
|
|
</main>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export async function getServerSideProps() {
|
|
const { workerConfig } = await import('@/uptime.config')
|
|
// 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 } }
|
|
}
|