fix: imports

components/MonitorDetail.tsx

@@ -1,5 +1,5 @@
 import { Text, Tooltip } from '@mantine/core'
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react'
 import DetailChart from './DetailChart'
 import DetailBar from './DetailBar'
@@ -44,7 +44,11 @@ export default function MonitorDetail({
   const monitorNameElement = (
     <Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
       {monitor.statusPageLink ? (
-        <a href={monitor.statusPageLink} target="_blank" style={{ display: 'inline-flex', alignItems: 'center', color: 'inherit' }}>
+        <a
+          href={monitor.statusPageLink}
+          target="_blank"
+          style={{ display: 'inline-flex', alignItems: 'center', color: 'inherit' }}
+        >
           {statusIcon} {monitor.name}
         </a>
       ) : (

components/MonitorList.tsx

@@ -1,7 +1,7 @@
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { Accordion, Card, Center, Text } from '@mantine/core'
 import MonitorDetail from './MonitorDetail'
-import { pageConfig } from '@/uptime.config';
+import { pageConfig } from '@/uptime.config'
 
 function countDownCount(state: MonitorState, ids: string[]) {
   let downCount = 0
@@ -28,7 +28,13 @@ function getStatusTextColor(state: MonitorState, ids: string[]) {
   }
 }
 
-export default function MonitorList({ monitors, state }: { monitors: MonitorTarget[]; state: MonitorState }) {
+export default function MonitorList({
+  monitors,
+  state,
+}: {
+  monitors: MonitorTarget[]
+  state: MonitorState
+}) {
   // @ts-ignore
   let group: any = pageConfig.group
   let groupedMonitor = group && Object.keys(group).length > 0
@@ -37,36 +43,46 @@ export default function MonitorList({ monitors, state }: { monitors: MonitorTarg
   if (groupedMonitor) {
     // Grouped monitors
     content = (
-      <Accordion multiple defaultValue={Object.keys(group)} variant='contained'>
+      <Accordion multiple defaultValue={Object.keys(group)} variant="contained">
-        {
+        {Object.keys(group).map((groupName) => (
-          Object.keys(group).map(groupName => (
           <Accordion.Item key={groupName} value={groupName}>
             <Accordion.Control>
-                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  alignItems: 'center',
+                }}
+              >
                 <div>{groupName}</div>
-                  <Text fw={500} style={{ display: 'inline', paddingRight: '5px', color: getStatusTextColor(state, group[groupName])}}>
+                <Text
-                    {group[groupName].length - countDownCount(state, group[groupName])}
+                  fw={500}
-                    /{group[groupName].length} Operational
+                  style={{
+                    display: 'inline',
+                    paddingRight: '5px',
+                    color: getStatusTextColor(state, group[groupName]),
+                  }}
+                >
+                  {group[groupName].length - countDownCount(state, group[groupName])}/
+                  {group[groupName].length} Operational
                 </Text>
               </div>
             </Accordion.Control>
             <Accordion.Panel>
-                {
+              {monitors
-                  monitors
+                .filter((monitor) => group[groupName].includes(monitor.id))
-                  .filter(monitor => group[groupName].includes(monitor.id))
                 .sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id))
-                  .map(monitor => (
+                .map((monitor) => (
                   <div key={monitor.id}>
                     <Card.Section ml="xs" mr="xs">
                       <MonitorDetail monitor={monitor} state={state} />
                     </Card.Section>
                   </div>
-                  ))
+                ))}
-                }
             </Accordion.Panel>
           </Accordion.Item>
-          ))
+        ))}
-        }
       </Accordion>
     )
   } else {

pages/index.tsx

@@ -1,9 +1,9 @@
 import Head from 'next/head'
 
 import { Inter } from 'next/font/google'
-import { MonitorState, MonitorTarget } from '@/uptime.types'
+import { MonitorState, MonitorTarget } from '@/types/uptime.types'
 import { KVNamespace } from '@cloudflare/workers-types'
-import { pageConfig, workerConfig } from '@/uptime.config'
+import { maintenances, pageConfig, workerConfig } from '@/uptime.config'
 import OverallStatus from '@/components/OverallStatus'
 import Header from '@/components/Header'
 import MonitorList from '@/components/MonitorList'
@@ -22,21 +22,17 @@ export default function Home({
   tooltip?: string
   statusPageLink?: string
 }) {
-  let state;
+  let state
   if (stateStr !== undefined) {
     state = JSON.parse(stateStr) as MonitorState
   }
 
   // Specify monitorId in URL hash to view a specific monitor (can be used in iframe)
-  const monitorId = window.location.hash.substring(1);
+  const monitorId = window.location.hash.substring(1)
   if (monitorId) {
-    const monitor = monitors.find((monitor) => monitor.id === monitorId);
+    const monitor = monitors.find((monitor) => monitor.id === monitorId)
     if (!monitor || !state) {
-      return (
+      return <Text fw={700}>Monitor with id {monitorId} not found!</Text>
-        <Text fw={700}>
-          Monitor with id {monitorId} not found!
-        </Text>
-      )
     }
     return (
       <div style={{ maxWidth: '810px' }}>
@@ -64,15 +60,20 @@ export default function Home({
           </Center>
         ) : (
           <div>
-            <OverallStatus state={state} />
+            <OverallStatus state={state} maintenances={maintenances} />
             <MonitorList monitors={monitors} state={state} />
           </div>
         )}
 
         <Divider mt="lg" />
-        <Text size="xs" mt="xs" mb="xs" style={{
+        <Text
-          textAlign: 'center'
+          size="xs"
-        }}>
+          mt="xs"
+          mb="xs"
+          style={{
+            textAlign: 'center',
+          }}
+        >
           Open-source monitoring and status page powered by{' '}
           <a href="https://github.com/lyc8503/UptimeFlare" target="_blank">
             Uptimeflare

types/config.ts

@@ -2,7 +2,6 @@ export type PageConfig = {
   title?: string
   links?: PageConfigLink[]
   group?: PageConfigGroup
-  maintenances?: Maintenances[]
 }
 
 export type Maintenances = {

uptime.config.ts

@@ -1,4 +1,4 @@
-import { PageConfig, WorkerConfig } from './types/config'
+import { Maintenances, PageConfig, WorkerConfig } from './types/config'
 
 const pageConfig: PageConfig = {
   // Title for your status page
@@ -119,5 +119,7 @@ const workerConfig: WorkerConfig = {
   },
 }
 
+const maintenances: Maintenances[] = []
+
 // Don't forget this, otherwise compilation fails.
-export { pageConfig, workerConfig }
+export { pageConfig, workerConfig, maintenances }