feat: tooltip for monitor

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 = (
+    <Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
+      {statusIcon} {monitor.name}
+    </Text>
+  )
+
   return (
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <Text mt="sm" fw={700} style={{ display: 'inline-flex', alignItems: 'center' }}>
-          {statusIcon} {monitor.name}
-        </Text>
+        {monitor.tooltip ? (
+          <Tooltip label={monitor.tooltip}>{monitorNameElement}</Tooltip>
+        ) : (
+          monitorNameElement
+        )}
+
         <Text mt="sm" fw={700} style={{ display: 'inline', color: getColor(uptimePercent, true) }}>
           Overall: {uptimePercent}%
         </Text>

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,
     },
   ],

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[]