{pageConfig.title}

import Head from 'next/head' import { Inter } from 'next/font/google' import { MaintenanceConfig, MonitorTarget } from '@/types/config' import { maintenances, pageConfig } from '@/uptime.config' import Header from '@/components/Header' import { Box, Button, Center, Container, Group, Select } from '@mantine/core' import Footer from '@/components/Footer' import { useEffect, useState } from 'react' import MaintenanceAlert from '@/components/MaintenanceAlert' import NoIncidentsAlert from '@/components/NoIncidents' import { useTranslation } from 'react-i18next' 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.split('-').splice(0, 2).join('-') } function filterIncidentsByMonth( incidents: MaintenanceConfig[], monthStr: string, monitors: MonitorTarget[] ): (Omit & { 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) => monitors.find((mon) => mon.id === e)!), })) .sort((a, b) => (new Date(a.start) > new Date(b.start) ? -1 : 1)) } 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({ monitors }: { monitors: MonitorTarget[] }) { const { t } = useTranslation('common') const [selectedMonitor, setSelectedMonitor] = useState('') const [selectedMonth, setSelectedMonth] = useState(getSelectedMonth()) useEffect(() => { const onHashChange = () => setSelectedMonth(getSelectedMonth()) window.addEventListener('hashchange', onHashChange) return () => window.removeEventListener('hashchange', onHashChange) }, []) const filteredIncidents = filterIncidentsByMonth(maintenances, selectedMonth, monitors) const monitorFilteredIncidents = selectedMonitor ? filteredIncidents.filter((i) => i.monitors.find((e) => e.id === selectedMonitor)) : filteredIncidents const { prev, next } = getPrevNextMonth(selectedMonth) const monitorOptions = [ { value: '', label: t('All') }, ...monitors.map((monitor) => ({ value: monitor.id, label: monitor.name, })), ] return ( <> {pageConfig.title}