From 539f24244a2b76d395cdca3ee19d29b7a26896d1 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 31 Mar 2024 20:27:00 +0800
Subject: [PATCH] feat(v2): add monitor health bar in list

---
 src/client/components/CommonList.tsx          |  2 +-
 .../components/monitor/MonitorHealthBar.tsx   | 67 +++++++++++++++++--
 .../components/monitor/MonitorListItem.tsx    |  1 +
 src/client/routes/monitor.tsx                 |  9 +++
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/src/client/components/CommonList.tsx b/src/client/components/CommonList.tsx
index b8edf09..05b01ca 100644
--- a/src/client/components/CommonList.tsx
+++ b/src/client/components/CommonList.tsx
@@ -88,7 +88,7 @@ export const CommonList: React.FC<CommonListProps> = React.memo((props) => {
                     </div>
                   </div>
                 </div>
-                <div className="text-muted-foreground line-clamp-2 text-xs">
+                <div className="text-muted-foreground line-clamp-2 w-full text-xs">
                   {item.content}
                 </div>
                 {Array.isArray(item.tags) && item.tags.length > 0 ? (
diff --git a/src/client/components/monitor/MonitorHealthBar.tsx b/src/client/components/monitor/MonitorHealthBar.tsx
index bc489ec..d993220 100644
--- a/src/client/components/monitor/MonitorHealthBar.tsx
+++ b/src/client/components/monitor/MonitorHealthBar.tsx
@@ -8,6 +8,7 @@ import { useWatch } from '../../hooks/useWatch';
 import { getMonitorProvider, getProviderDisplay } from './provider';
 import { MonitorProvider } from './provider/types';
 import { useTranslation } from '@i18next-toolkit/react';
+import clsx from 'clsx';
 
 interface MonitorHealthBarProps {
   workspaceId: string;
@@ -16,6 +17,7 @@ interface MonitorHealthBarProps {
   count?: number;
   size?: HealthBarProps['size'];
   showCurrentStatus?: boolean;
+  showPercent?: boolean;
   onBeatsItemUpdate?: (
     items: ({ value: number; createdAt: string | Date } | null)[]
   ) => void;
@@ -26,9 +28,10 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     const {
       workspaceId,
       monitorId,
-      size,
+      size = 'small',
       count = 20,
       showCurrentStatus = false,
+      showPercent = false,
     } = props;
     const { data: recent = [] } = trpc.monitor.recentData.useQuery({
       workspaceId,
@@ -82,26 +85,78 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
       });
     }, [items, provider]);
 
+    const upPercent = useMemo(() => {
+      let up = 0;
+      beats.forEach((b) => {
+        if (!b) {
+          return;
+        }
+
+        if (b.status === 'health') {
+          up++;
+        }
+      });
+
+      return parseFloat(((up / beats.length) * 100).toFixed(1));
+    }, [beats]);
+
     useWatch([items], () => {
       props.onBeatsItemUpdate?.(items);
     });
 
     return (
-      <div className="flex items-center justify-between">
-        <HealthBar size={size} beats={beats} />
+      <div className="flex items-center">
+        {showPercent && (
+          <span
+            className={clsx(
+              'mr-2 inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
+              upPercent === 100 ? 'bg-green-400' : 'bg-amber-400',
+              {
+                'min-w-[50px] text-sm': size === 'small',
+              }
+            )}
+          >
+            {upPercent}%
+          </span>
+        )}
+
+        <div className="flex-1">
+          <HealthBar size={size} beats={beats} />
+        </div>
 
         {showCurrentStatus && (
           <>
             {last(beats)?.status === 'health' ? (
-              <div className="rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white">
+              <div
+                className={clsx(
+                  'rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white',
+                  {
+                    'text-sm': size === 'small',
+                  }
+                )}
+              >
                 {t('UP')}
               </div>
             ) : last(beats)?.status === 'error' ? (
-              <div className="rounded-full bg-red-600 px-4 py-1 text-lg font-bold text-white">
+              <div
+                className={clsx(
+                  'rounded-full bg-red-600 px-4 py-1 text-lg font-bold text-white',
+                  {
+                    'text-sm': size === 'small',
+                  }
+                )}
+              >
                 {t('DOWN')}
               </div>
             ) : (
-              <div className="rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white">
+              <div
+                className={clsx(
+                  'rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white',
+                  {
+                    'text-sm': size === 'small',
+                  }
+                )}
+              >
                 {t('NONE')}
               </div>
             )}
diff --git a/src/client/components/monitor/MonitorListItem.tsx b/src/client/components/monitor/MonitorListItem.tsx
index bcdb12d..7bf019d 100644
--- a/src/client/components/monitor/MonitorListItem.tsx
+++ b/src/client/components/monitor/MonitorListItem.tsx
@@ -85,6 +85,7 @@ export const MonitorListItem: React.FC<{
           {upPercent}%
         </span>
       </div>
+
       <div className="flex-1 pl-2">
         <div className="text-base">{monitorName}</div>
         {/* <div>
diff --git a/src/client/routes/monitor.tsx b/src/client/routes/monitor.tsx
index d4a7f49..c408018 100644
--- a/src/client/routes/monitor.tsx
+++ b/src/client/routes/monitor.tsx
@@ -2,6 +2,7 @@ import { trpc } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
 import { CommonList } from '@/components/CommonList';
 import { CommonWrapper } from '@/components/CommonWrapper';
+import { MonitorHealthBar } from '@/components/monitor/MonitorHealthBar';
 import { Button } from '@/components/ui/button';
 import { useDataReady } from '@/hooks/useDataReady';
 import { useEvent } from '@/hooks/useEvent';
@@ -35,6 +36,14 @@ function MonitorComponent() {
   const items = data.map((item) => ({
     id: item.id,
     title: item.name,
+    content: (
+      <MonitorHealthBar
+        workspaceId={workspaceId}
+        monitorId={item.id}
+        showPercent={true}
+        showCurrentStatus={true}
+      />
+    ),
     tags: [item.type],
     href: `/monitor/${item.id}`,
   }));