diff --git a/components/MonitorDetail.tsx b/components/MonitorDetail.tsx index da78228..2869866 100644 --- a/components/MonitorDetail.tsx +++ b/components/MonitorDetail.tsx @@ -1,4 +1,4 @@ -import { Text } from '@mantine/core' +import { Text, Tooltip } from '@mantine/core' import { MonitorState, MonitorTarget } from '@/uptime.types' import { IconAlertCircle, IconCircleCheck } from '@tabler/icons-react' import DetailChart from './DetailChart' @@ -40,12 +40,21 @@ export default function MonitorDetail({ const uptimePercent = (((totalTime - downTime) / totalTime) * 100).toPrecision(4) + const monitorNameElement = ( + + {statusIcon} {monitor.name} + + ) + return ( <>
- - {statusIcon} {monitor.name} - + {monitor.tooltip ? ( + {monitorNameElement} + ) : ( + monitorNameElement + )} + Overall: {uptimePercent}% diff --git a/uptime.config.ts b/uptime.config.ts index 7cd1996..507a175 100644 --- a/uptime.config.ts +++ b/uptime.config.ts @@ -33,6 +33,8 @@ const config = { 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] `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 @@ -55,6 +57,7 @@ const config = { method: 'TCP_PING', // `target` should be `host:port` for tcp monitors target: '1.2.3.4:22', + tooltip: 'My production server SSH', timeout: 5000, }, ], diff --git a/uptime.types.ts b/uptime.types.ts index 8c967d7..ced046d 100644 --- a/uptime.types.ts +++ b/uptime.types.ts @@ -33,6 +33,7 @@ type MonitorTarget = { name: string method: string // "TCP_PING" or Http Method (e.g. GET, POST, OPTIONS, etc.) target: string // url for http, hostname:port for tcp + tooltip?: string // HTTP Code expectedCodes?: number[]