From 22ed19e1b2137dd004b7e2c6728092289417bc68 Mon Sep 17 00:00:00 2001
From: lyc8503 <admin@lyc8503.site>
Date: Mon, 20 Nov 2023 02:12:49 +0800
Subject: [PATCH] feat: tooltip for monitor

---
 components/MonitorDetail.tsx | 17 +++++++++++++----
 uptime.config.ts             |  3 +++
 uptime.types.ts              |  1 +
 3 files changed, 17 insertions(+), 4 deletions(-)

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 = (
+    <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>
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[]