feat: add incidents history page

2025-05-25 11:57:28 +02:00 · 2025-05-25 11:57:28 +02:00 · 777366b3fa
parent 8b635e5d20
commit 777366b3fa
1 changed files with 130 additions and 0 deletions
--- a/pages/incidents.tsx
+++ b/pages/incidents.tsx
@ -0,0 +1,130 @@
+import Head from 'next/head'
+
+import { Inter } from 'next/font/google'
+import { MaintenanceConfig, MonitorState, MonitorTarget } from '@/types/config'
+import { KVNamespace } from '@cloudflare/workers-types'
+import { maintenances, pageConfig, workerConfig } from '@/uptime.config'
+import OverallStatus from '@/components/OverallStatus'
+import Header from '@/components/Header'
+import MonitorList from '@/components/MonitorList'
+import { Box, Button, Center, Container, Divider, Group, Select, Text } from '@mantine/core'
+import MonitorDetail from '@/components/MonitorDetail'
+import Footer from '@/components/Footer'
+import { useEffect, useState } from 'react'
+import MaintenanceAlert from '@/components/MaintenanceAlert'
+import NoIncidentsAlert from '@/components/NoIncidents'
+
+export const runtime = 'experimental-edge'
+const inter = Inter({ subsets: ['latin'] })
+
+function getSelectedMonth() {
+  const hash = window.location.hash.replace('#', '')
+  if (!hash) {
+    const now = new Date()
+    return now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0')
+  }
+  return hash
+}
+
+function filterIncidentsByMonth(
+  incidents: MaintenanceConfig[],
+  monthStr: string
+): (Omit<MaintenanceConfig, 'monitors'> & { monitors: MonitorTarget[] })[] {
+  return incidents
+    .filter((incident) => {
+      const d = new Date(incident.start)
+      const incidentMonth = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0')
+      return incidentMonth === monthStr
+    })
+    .map((e) => ({
+      ...e,
+      monitors: (e.monitors || []).map((e) => workerConfig.monitors.find((mon) => mon.id === e)!),
+    }))
+}
+
+function getPrevNextMonth(monthStr: string) {
+  const [year, month] = monthStr.split('-').map(Number)
+  const date = new Date(year, month - 1)
+  const prev = new Date(date)
+  prev.setMonth(prev.getMonth() - 1)
+  const next = new Date(date)
+  next.setMonth(next.getMonth() + 1)
+  return {
+    prev: prev.getFullYear() + '-' + String(prev.getMonth() + 1).padStart(2, '0'),
+    next: next.getFullYear() + '-' + String(next.getMonth() + 1).padStart(2, '0'),
+  }
+}
+
+export default function IncidentsPage() {
+  const [selectedMonitor, setSelectedMonitor] = useState<string | null>('')
+  const [selectedMonth, setSelectedMonth] = useState(getSelectedMonth())
+
+  useEffect(() => {
+    const onHashChange = () => setSelectedMonth(getSelectedMonth())
+    window.addEventListener('hashchange', onHashChange)
+    return () => window.removeEventListener('hashchange', onHashChange)
+  }, [])
+
+  const filteredIncidents = filterIncidentsByMonth(maintenances, selectedMonth)
+  const monitorFilteredIncidents = selectedMonitor
+    ? filteredIncidents.filter((i) => i.monitors.find((e) => e.id === selectedMonitor))
+    : filteredIncidents
+
+  const { prev, next } = getPrevNextMonth(selectedMonth)
+
+  const monitorOptions = [
+    { value: '', label: 'All' },
+    ...workerConfig.monitors.map((monitor) => ({
+      value: monitor.id,
+      label: monitor.name,
+    })),
+  ]
+
+  return (
+    <>
+      <Head>
+        <title>{pageConfig.title}</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={inter.className}>
+        <Header />
+        <Center>
+          <Container size="md" style={{ width: '100%' }}>
+            <Group justify="end" mb="md">
+              <Select
+                placeholder="Select monitor"
+                data={monitorOptions}
+                value={selectedMonitor}
+                onChange={setSelectedMonitor}
+                clearable
+                style={{ maxWidth: 300, float: 'right' }}
+              />
+            </Group>
+            <Box>
+              {monitorFilteredIncidents.length === 0 ? (
+                <NoIncidentsAlert />
+              ) : (
+                monitorFilteredIncidents.map((incident, i) => (
+                  <MaintenanceAlert key={i} maintenance={incident} />
+                ))
+              )}
+            </Box>
+            <Group justify="space-between" mt="md">
+              <Button variant="default" onClick={() => (window.location.hash = prev)}>
+                ← Backwards
+              </Button>
+              <Box style={{ alignSelf: 'center', fontWeight: 500, fontSize: 18 }}>
+                {selectedMonth}
+              </Box>
+              <Button variant="default" onClick={() => (window.location.hash = next)}>
+                Forward →
+              </Button>
+            </Group>
+          </Container>
+        </Center>
+        <Footer />
+      </main>
+    </>
+  )
+}