Initial commit

2026-08-14 07:52:34 +08:00 · 2026-07-29 11:35:11 +08:00
commit a158df3216
72 changed files with 24626 additions and 0 deletions
@@ -0,0 +1,91 @@
+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 } }
+}