Merge remote-tracking branch 'upstream/main' into webhook

README.md

@@ -61,3 +61,7 @@ Please refer to [Wiki](https://github.com/lyc8503/UptimeFlare/wiki)
 - [ ] Update wiki/README and add docs for dev
 - [ ] Migration to Terraform Cloudflare provider version 5.x
 - [ ] Cloudflare D1 database
+- [x] Scheduled maintenances (via IIFE)
+- [ ] Simpler config example
+- [ ] Upcoming maintenances
+- [ ] Universal Webhook upgrade

components/MaintenanceAlert.tsx

@@ -2,13 +2,16 @@ import { Alert, List, Text, useMantineTheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 import { IconAlertTriangle } from '@tabler/icons-react'
 import { MaintenanceConfig, MonitorTarget } from '@/types/config'
+import { pageConfig } from '@/uptime.config'
 
 export default function MaintenanceAlert({
   maintenance,
   style,
+  upcoming = false,
 }: {
   maintenance: Omit<MaintenanceConfig, 'monitors'> & { monitors?: MonitorTarget[] }
   style?: React.CSSProperties
+  upcoming?: boolean
 }) {
   const theme = useMantineTheme()
   const isDesktop = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`)
@@ -23,12 +26,14 @@ export default function MaintenanceAlert({
             fontWeight: 700,
           }}
         >
-          {maintenance.title || 'Scheduled Maintenance'}
+          {(upcoming ? '[Upcoming] ' : '') + (maintenance.title || 'Scheduled Maintenance')}
         </span>
       }
-      color={maintenance.color || 'yellow'}
+      color={
+        upcoming ? pageConfig.maintenances?.upcomingColor ?? 'gray' : maintenance.color || 'yellow'
+      }
       withCloseButton={false}
-      style={{ position: 'relative', margin: '16px auto 0 auto', ...style }}
+      style={{ margin: '16px auto 0 auto', ...style }}
     >
       {/* Date range in top right (desktop) or inline (mobile) */}
       <div
@@ -45,16 +50,30 @@ export default function MaintenanceAlert({
                 padding: '2px 8px',
                 textAlign: 'right',
               }
-            : {}),
+            : { marginBottom: 4 }),
         }}
       >
-        <b>From:</b> {new Date(maintenance.start).toLocaleString()}
-        <br />
-        <b>To:</b>{' '}
-        {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gridColumnGap: '3px',
+          }}
+        >
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            {upcoming ? 'Scheduled for:' : 'From:'}
+          </div>
+          <div>{new Date(maintenance.start).toLocaleString()}</div>
+          <div style={{ textAlign: 'right', fontWeight: 'bold' }}>
+            {upcoming ? 'Expected end:' : 'To:'}
+          </div>
+          <div>
+            {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'}
+          </div>
+        </div>
       </div>
 
-      <Text style={{ paddingTop: '3px' }}>{maintenance.body}</Text>
+      <Text style={{ paddingTop: '3px', whiteSpace: 'pre-line' }}>{maintenance.body}</Text>
       {maintenance.monitors && maintenance.monitors.length > 0 && (
         <>
           <Text mt="xs">

components/OverallStatus.tsx

@@ -1,6 +1,6 @@
 import { MaintenanceConfig, MonitorTarget } from '@/types/config'
-import { Center, Container, Title } from '@mantine/core'
-import { IconCircleCheck, IconAlertCircle } from '@tabler/icons-react'
+import { Center, Container, Title, Collapse, Button, Box } from '@mantine/core'
+import { IconCircleCheck, IconAlertCircle, IconPlus, IconMinus } from '@tabler/icons-react'
 import { useEffect, useState } from 'react'
 import MaintenanceAlert from './MaintenanceAlert'
 import { pageConfig } from '@/uptime.config'
@@ -45,6 +45,7 @@ export default function OverallStatus({
   const [openTime] = useState(Math.round(Date.now() / 1000))
   const [currentTime, setCurrentTime] = useState(Math.round(Date.now() / 1000))
   const isWindowVisible = useWindowVisibility()
+  const [expandUpcoming, setExpandUpcoming] = useState(false)
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -58,7 +59,8 @@ export default function OverallStatus({
   })
 
   const now = new Date()
-  let filteredMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
+
+  const activeMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
     monitors?: MonitorTarget[]
   })[] = maintenances
     .filter((m) => now >= new Date(m.start) && (!m.end || now <= new Date(m.end)))
@@ -69,6 +71,17 @@ export default function OverallStatus({
       ),
     }))
 
+  const upcomingMaintenances: (Omit<MaintenanceConfig, 'monitors'> & {
+    monitors?: MonitorTarget[]
+  })[] = maintenances
+    .filter((m) => now < new Date(m.start))
+    .map((maintenance) => ({
+      ...maintenance,
+      monitors: maintenance.monitors?.map(
+        (monitorId) => monitors.find((mon) => monitorId === mon.id)!
+      ),
+    }))
+
   return (
     <Container size="md" mt="xl">
       <Center>{icon}</Center>
@@ -82,9 +95,36 @@ export default function OverallStatus({
         } sec ago)`}
       </Title>
 
-      {filteredMaintenances.map((maintenance, idx) => (
+      {/* Upcoming Maintenance */}
+      {upcomingMaintenances.length > 0 && (
+        <>
+          <Title mt="4px" style={{ textAlign: 'center', color: '#70778c' }} order={5}>
+            {`${upcomingMaintenances.length} upcoming maintenances`}{' '}
+            <span
+              style={{ textDecoration: 'underline' }}
+              onClick={() => setExpandUpcoming(!expandUpcoming)}
+            >
+              {expandUpcoming ? '[HIDE]' : '[SHOW]'}
+            </span>
+          </Title>
+
+          <Collapse in={expandUpcoming}>
+            {upcomingMaintenances.map((maintenance, idx) => (
+              <MaintenanceAlert
+                key={`upcoming-${idx}`}
+                maintenance={maintenance}
+                style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
+                upcoming
+              />
+            ))}
+          </Collapse>
+        </>
+      )}
+
+      {/* Active Maintenance */}
+      {activeMaintenances.map((maintenance, idx) => (
         <MaintenanceAlert
-          key={idx}
+          key={`active-${idx}`}
           maintenance={maintenance}
           style={{ maxWidth: groupedMonitor ? '897px' : '865px' }}
         />

pages/incidents.tsx

@@ -81,7 +81,7 @@ export default function IncidentsPage() {
     <>
       <Head>
         <title>{pageConfig.title}</title>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href={pageConfig.favicon ?? '/favicon.ico'} />
       </Head>
 
       <main className={inter.className}>

pages/index.tsx

@@ -46,7 +46,7 @@ export default function Home({
     <>
       <Head>
         <title>{pageConfig.title}</title>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href={pageConfig.favicon ?? '/favicon.ico'} />
       </Head>
 
       <main className={inter.className}>

types/config.ts

@@ -4,6 +4,10 @@ export type PageConfig = {
   title?: string
   links?: PageConfigLink[]
   group?: PageConfigGroup
+  favicon?: string
+  maintenances?: {
+    upcomingColor?: string
+  }
 }
 
 export type MaintenanceConfig = {

uptime.config.ts

@@ -16,6 +16,14 @@ const pageConfig: PageConfig = {
     '🌐 Public (example group name)': ['foo_monitor', 'bar_monitor', 'more monitor ids...'],
     '🔐 Private': ['test_tcp_monitor'],
   },
+  // [OPTIONAL] Set the path to your favicon, default to '/favicon.ico' if not specified
+  favicon: '/favicon.ico',
+  // [OPTIONAL] Maintenance related settings
+  maintenances: {
+    // [OPTIONAL] The color of upcoming maintenance alerts, default to 'gray'
+    // Active alerts will always use the color specified in the MaintenanceConfig
+    upcomingColor: 'gray',
+  },
 }
 
 const workerConfig: WorkerConfig = {
@@ -130,7 +138,7 @@ const workerConfig: WorkerConfig = {
       reason: string
     ) => {
       // This callback will be called when there's a status change for any monitor
-      // Write any Typescript code here
+      // Write any TypeScript code here
       // This will not follow the grace period settings and will be called immediately when the status changes
       // You need to handle the grace period manually if you want to implement it
     },
@@ -142,7 +150,7 @@ const workerConfig: WorkerConfig = {
       reason: string
     ) => {
       // This callback will be called EVERY 1 MINTUE if there's an on-going incident for any monitor
-      // Write any Typescript code here
+      // Write any TypeScript code here
     },
   },
 }
@@ -168,6 +176,31 @@ const maintenances: MaintenanceConfig[] = [
     // [Optional] color of the maintenance alert at status page, default to "yellow"
     color: 'blue',
   },
+  // As this config file is a TypeScript file, you can even use IIFE to generate scheduled maintenances
+  // The following example shows a scheduled maintenance from 2 AM to 4 AM on the 15th of every month (UTC+8)
+  // This COULD BE DANGEROUS, as generating too many maintenance entries can lead to performance problems
+  // Undeterministic outputs may also lead to bugs or unexpected behavior
+  // If you don't know how to DEBUG, use this approach WITH CAUTION
+  ...(function (){
+    const schedules = [];
+    const today = new Date();
+
+    for (let i = -1; i <= 1; i++) {
+      // JavaScript's Date object will automatically handle year rollovers
+      const date = new Date(today.getFullYear(), today.getMonth() + i, 15); 
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+
+      schedules.push({
+        title: `${year}/${parseInt(month)} - Test scheduled maintenance`,
+        monitors: ['foo_monitor'],
+        body: 'Monthly scheduled maintenance',
+        start: `${year}-${month}-15T02:00:00.000+08:00`,
+        end: `${year}-${month}-15T04:00:00.000+08:00`,
+      });
+    }
+    return schedules;
+  })()
 ]
 
 // Don't forget this, otherwise compilation fails.