From 4a1ea8557aa2620573806ec1bb33536a1c676ec8 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 31 Jan 2024 01:43:02 +0800
Subject: [PATCH] perf: improve monitor badge display, add title in copy text

---
 src/client/components/monitor/MonitorBadgeView.tsx | 13 ++++++++-----
 src/client/components/monitor/MonitorInfo.tsx      |  1 +
 src/server/model/monitor/provider/http.ts          |  1 -
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/client/components/monitor/MonitorBadgeView.tsx b/src/client/components/monitor/MonitorBadgeView.tsx
index 9116a99..b3d2f67 100644
--- a/src/client/components/monitor/MonitorBadgeView.tsx
+++ b/src/client/components/monitor/MonitorBadgeView.tsx
@@ -6,8 +6,9 @@ import copy from 'copy-to-clipboard';
 export const MonitorBadgeView: React.FC<{
   workspaceId: string;
   monitorId: string;
+  monitorName?: string;
 }> = React.memo((props) => {
-  const { workspaceId, monitorId } = props;
+  const { workspaceId, monitorId, monitorName = '' } = props;
 
   const [showDetail, setShowDetail] = useState(false);
 
@@ -48,11 +49,13 @@ export const MonitorBadgeView: React.FC<{
       <div className="flex flex-col gap-2">
         <Input
           addonBefore="HTML Embed"
-          value={`<img src="${url}" />`}
+          value={`<img src="${url}" title="${monitorName}" />`}
           addonAfter={
             <div
               className="cursor-pointer"
-              onClick={() => handleCopy(`<img src="${url}" />`)}
+              onClick={() =>
+                handleCopy(`<img src="${url}" title="${monitorName}" />`)
+              }
             >
               Copy
             </div>
@@ -61,11 +64,11 @@ export const MonitorBadgeView: React.FC<{
 
         <Input
           addonBefore="Markdown"
-          value={`![](${url})`}
+          value={`![${monitorName}](${url})`}
           addonAfter={
             <div
               className="cursor-pointer"
-              onClick={() => handleCopy(`![](${url})`)}
+              onClick={() => handleCopy(`![${monitorName}](${url})`)}
             >
               Copy
             </div>
diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx
index b58dac8..1174406 100644
--- a/src/client/components/monitor/MonitorInfo.tsx
+++ b/src/client/components/monitor/MonitorInfo.tsx
@@ -238,6 +238,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
               <MonitorBadgeView
                 workspaceId={workspaceId}
                 monitorId={monitorId}
+                monitorName={monitorInfo.name}
               />
             </Modal>
           </div>
diff --git a/src/server/model/monitor/provider/http.ts b/src/server/model/monitor/provider/http.ts
index 593f791..242c532 100644
--- a/src/server/model/monitor/provider/http.ts
+++ b/src/server/model/monitor/provider/http.ts
@@ -2,7 +2,6 @@ import { MonitorProvider } from './type';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { logger } from '../../../utils/logger';
 import dayjs from 'dayjs';
-import { prisma } from '../../_client';
 import https from 'https';
 import { saveMonitorStatus } from './_utils';