diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx index 2ddfa14..d752905 100644 --- a/components/MonitorDetail.tsx +++ b/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 = ( {monitor.statusPageLink ? ( - + {statusIcon} {monitor.name} ) : ( diff --git a/components/MonitorList.tsx b/components/MonitorList.tsx index ac33ea5..4cbfb52 100644 --- a/components/MonitorList.tsx +++ b/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,45 +28,61 @@ 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 let content - + if (groupedMonitor) { // Grouped monitors content = ( - - { - Object.keys(group).map(groupName => ( - - -
-
{groupName}
- - {group[groupName].length - countDownCount(state, group[groupName])} - /{group[groupName].length} Operational - -
-
- - { - monitors - .filter(monitor => group[groupName].includes(monitor.id)) - .sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id)) - .map(monitor => ( -
- - - -
- )) - } -
-
- )) - } + + {Object.keys(group).map((groupName) => ( + + +
+
{groupName}
+ + {group[groupName].length - countDownCount(state, group[groupName])}/ + {group[groupName].length} Operational + +
+
+ + {monitors + .filter((monitor) => group[groupName].includes(monitor.id)) + .sort((a, b) => group[groupName].indexOf(a.id) - group[groupName].indexOf(b.id)) + .map((monitor) => ( +
+ + + +
+ ))} +
+
+ ))}
) } else { diff --git a/pages/index.tsx b/pages/index.tsx index afc9ec6..85fff8e 100644 --- a/pages/index.tsx +++ b/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 ( - - Monitor with id {monitorId} not found! - - ) + return Monitor with id {monitorId} not found! } return (
@@ -64,15 +60,20 @@ export default function Home({ ) : (
- +
)} - + Open-source monitoring and status page powered by{' '} Uptimeflare diff --git a/types/config.ts b/types/config.ts index 01644ea..9893628 100644 --- a/types/config.ts +++ b/types/config.ts @@ -2,7 +2,6 @@ export type PageConfig = { title?: string links?: PageConfigLink[] group?: PageConfigGroup - maintenances?: Maintenances[] } export type Maintenances = { diff --git a/uptime.config.ts b/uptime.config.ts index 2ccaeb7..70f0e7b 100644 --- a/uptime.config.ts +++ b/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 }