From 387220ab6cad1331f9efb8bf50a2a33638e231a5 Mon Sep 17 00:00:00 2001 From: QuackieMackie Date: Thu, 18 Sep 2025 01:28:08 +0100 Subject: [PATCH] Updated MaintenanceAlert layout for better responsiveness --- components/MaintenanceAlert.tsx | 95 ++++++++++++---------- uptime.config.ts | 140 ++++++++++---------------------- 2 files changed, 98 insertions(+), 137 deletions(-) diff --git a/components/MaintenanceAlert.tsx b/components/MaintenanceAlert.tsx index e4c1882..6a21795 100644 --- a/components/MaintenanceAlert.tsx +++ b/components/MaintenanceAlert.tsx @@ -1,4 +1,4 @@ -import { Alert, List, Text } from '@mantine/core' +import { Alert, List, Text, Group, Box } from '@mantine/core' import { IconAlertTriangle } from '@tabler/icons-react' import { MaintenanceConfig, MonitorTarget } from '@/types/config' @@ -21,53 +21,64 @@ export default function MaintenanceAlert({ } color={upcoming ? 'gray' : maintenance.color || '#f29030'} withCloseButton={false} - style={{ position: 'relative', margin: '16px auto 0 auto', ...style }} + style={{ margin: '16px auto', ...style }} > - {/* Date range in top right */} -
- {upcoming ? ( - <> - Scheduled for: {new Date(maintenance.start).toLocaleString()} -
- Expected end:{' '} - {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'} - - ) : ( - <> - From: {new Date(maintenance.start).toLocaleString()} -
- To:{' '} - {maintenance.end ? new Date(maintenance.end).toLocaleString() : 'Until further notice'} - - )} -
+ {/* Maintenance description and affected components */} + + {maintenance.body} - {/* Maintenance description */} - {maintenance.body} + {maintenance.monitors && maintenance.monitors.length > 0 && ( + <> + Affected components: + + {maintenance.monitors.map((comp, idx) => ( + {comp.name} + ))} + + + )} + - {/* Affected components */} - {maintenance.monitors && maintenance.monitors.length > 0 && ( - <> - - Affected components: - - - {maintenance.monitors.map((comp, compIdx) => ( - {comp.name} - ))} - - - )} + {/* Date range */} + + {upcoming ? ( + <> + Scheduled for: {new Date(maintenance.start).toLocaleString()} +
+ Expected end:{' '} + {maintenance.end + ? new Date(maintenance.end).toLocaleString() + : 'Until further notice'} + + ) : ( + <> + From: {new Date(maintenance.start).toLocaleString()} +
+ To:{' '} + {maintenance.end + ? new Date(maintenance.end).toLocaleString() + : 'Until further notice'} + + )} + + ) } diff --git a/uptime.config.ts b/uptime.config.ts index 65e9356..b1fa08c 100644 --- a/uptime.config.ts +++ b/uptime.config.ts @@ -1,96 +1,35 @@ import { MaintenanceConfig, PageConfig, WorkerConfig } from './types/config' const pageConfig: PageConfig = { - // Title for your status page - title: "lyc8503's Status Page", - // Links shown at the header of your status page, could set `highlight` to `true` + title: "Sylphian's Uptime", links: [ - { link: 'https://github.com/lyc8503', label: 'GitHub' }, - { link: 'https://blog.lyc8503.net/', label: 'Blog' }, - { link: 'mailto:me@lyc8503.net', label: 'Email Me', highlight: true }, + { link: 'https://github.com/Sylphian-Network/', label: 'GitHub' }, ], - // [OPTIONAL] Group your monitors - // If not specified, all monitors will be shown in a single list - // If specified, monitors will be grouped and ordered, not-listed monitors will be invisble (but still monitored) group: { - '🌐 Public (example group name)': ['foo_monitor', 'bar_monitor', 'more monitor ids...'], - '🔐 Private': ['test_tcp_monitor'], + 'Website': ['monitor'], }, } const workerConfig: WorkerConfig = { - // Write KV at most every 3 minutes unless the status changed kvWriteCooldownMinutes: 3, - // Enable HTTP Basic auth for status page & API by uncommenting the line below, format `:` - // passwordProtection: 'username:password', - // Define all your monitors here monitors: [ - // Example HTTP Monitor { - // `id` should be unique, history will be kept if the `id` remains constant - id: 'foo_monitor', - // `name` is used at status page and callback message - name: 'My API Monitor', - // `method` should be a valid HTTP Method - method: 'POST', - // `target` is a valid URL - target: 'https://example.com', - // [OPTIONAL] `tooltip` is ONLY used at status page to show a tooltip - tooltip: 'This is a tooltip for this monitor', - // [OPTIONAL] `statusPageLink` is ONLY used for clickable link at status page - statusPageLink: 'https://example.com', - // [OPTIONAL] `hideLatencyChart` will hide status page latency chart if set to true + id: 'monitor', + name: 'Sylphian.net', + method: 'GET', + target: 'https://sylphian.net', + statusPageLink: 'https://sylphian.net', hideLatencyChart: false, - // [OPTIONAL] `expectedCodes` is an array of acceptable HTTP response codes, if not specified, default to 2xx expectedCodes: [200], - // [OPTIONAL] `timeout` in millisecond, if not specified, default to 10000 - timeout: 10000, - // [OPTIONAL] headers to be sent - headers: { - 'User-Agent': 'Uptimeflare', - Authorization: 'Bearer YOUR_TOKEN_HERE', - }, - // [OPTIONAL] body to be sent - body: 'Hello, world!', - // [OPTIONAL] if specified, the response must contains the keyword to be considered as operational. - responseKeyword: 'success', - // [OPTIONAL] if specified, the response must NOT contains the keyword to be considered as operational. - responseForbiddenKeyword: 'bad gateway', - // [OPTIONAL] if specified, will call the check proxy to check the monitor, mainly for geo-specific checks - // refer to docs https://github.com/lyc8503/UptimeFlare/wiki/Check-proxy-setup before setting this value - // currently supports `worker://` and `http(s)://` proxies - checkProxy: 'https://xxx.example.com OR worker://weur', - // [OPTIONAL] if true, the check will fallback to local if the specified proxy is down - checkProxyFallback: true, - }, - // Example TCP Monitor - { - id: 'test_tcp_monitor', - name: 'Example TCP Monitor', - // `method` should be `TCP_PING` for tcp monitors - method: 'TCP_PING', - // `target` should be `host:port` for tcp monitors - target: '1.2.3.4:22', - tooltip: 'My production server SSH', - statusPageLink: 'https://example.com', timeout: 5000, - }, + headers: { + 'User-Agent': 'Sylphian-Uptimeflare', + }, + responseKeyword: 'Community platform by XenForo', + responseForbiddenKeyword: 'bad gateway', + } ], notification: { - // [Optional] apprise API server URL - // if not specified, no notification will be sent - appriseApiServer: 'https://apprise.example.com/notify', - // [Optional] recipient URL for apprise, refer to https://github.com/caronc/apprise - // if not specified, no notification will be sent - recipientUrl: 'tgram://bottoken/ChatID', - // [Optional] timezone used in notification messages, default to "Etc/GMT" - timeZone: 'Asia/Shanghai', - // [Optional] grace period in minutes before sending a notification - // notification will be sent only if the monitor is down for N continuous checks after the initial failure - // if not specified, notification will be sent immediately - gracePeriod: 5, - // [Optional] disable notification for monitors with specified ids - skipNotificationIds: ['foo_monitor', 'bar_monitor'], }, callbacks: { onStatusChange: async ( @@ -119,28 +58,39 @@ const workerConfig: WorkerConfig = { }, } -// You can define multiple maintenances here -// During maintenance, an alert will be shown at status page -// Also, related downtime notifications will be skipped (if any) -// Of course, you can leave it empty if you don't need this feature -// const maintenances: MaintenanceConfig[] = [] const maintenances: MaintenanceConfig[] = [ { - // [Optional] Monitor IDs to be affected by this maintenance - monitors: ['foo_monitor', 'bar_monitor'], - // [Optional] default to "Scheduled Maintenance" if not specified - title: 'Test Maintenance', - // Description of the maintenance, will be shown at status page - body: 'This is a test maintenance, server software upgrade', - // Start time of the maintenance, in UNIX timestamp or ISO 8601 format - start: '2025-04-27T00:00:00+08:00', - // [Optional] end time of the maintenance, in UNIX timestamp or ISO 8601 format - // if not specified, the maintenance will be considered as on-going - end: '2025-04-30T00:00:00+08:00', - // [Optional] color of the maintenance alert at status page, default to "yellow" - color: 'blue', + monitors: ['monitor'], + title: 'Scheduled Maintenance', + body: 'The server will be undergoing regular maintenance.', + start: '2025-09-27T11:00:00.000Z', + end: '2025-09-27T12:00:00.000Z', + color: 'yellow', }, + { + monitors: ['monitor'], + title: 'Scheduled Maintenance', + body: 'The server will be undergoing regular maintenance.', + start: '2025-09-27T11:00:00.000Z', + end: '2025-09-27T12:00:00.000Z', + color: 'white', + }, + { + monitors: ['monitor'], + title: 'Active Scheduled Maintenance', + body: 'The server will be undergoing regular maintenance.', + start: '2025-09-12T11:00:00.000Z', + end: '2025-09-27T12:00:00.000Z', + color: 'green', + }, + { + monitors: ['monitor'], + title: 'Active Scheduled Maintenance', + body: 'The server will be undergoing regular maintenance.', + start: '2025-09-12T11:00:00.000Z', + end: '2025-09-27T12:00:00.000Z', + color: 'blue', + } ] -// Don't forget this, otherwise compilation fails. -export { pageConfig, workerConfig, maintenances } +export { pageConfig, workerConfig, maintenances } \ No newline at end of file