From 0ba0f4a080a08029f222a1dcd89bcf0deac01f1d Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 14 Oct 2023 00:26:31 +0800
Subject: [PATCH] feat: monitor list add upPercent

---
 src/client/components/monitor/MonitorList.tsx | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/client/components/monitor/MonitorList.tsx b/src/client/components/monitor/MonitorList.tsx
index 6127fe7..8e110fe 100644
--- a/src/client/components/monitor/MonitorList.tsx
+++ b/src/client/components/monitor/MonitorList.tsx
@@ -27,11 +27,28 @@ export const MonitorList: React.FC = React.memo(() => {
 
     return null;
   }, []);
+  const [beats, setBeats] = useState<
+    {
+      value: number;
+      createdAt: string;
+    }[]
+  >([]);
 
   const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(
     initMonitorId
   );
 
+  const upPercent = useMemo(() => {
+    let up = 0;
+    beats.forEach((b) => {
+      if (b.value >= 0) {
+        up++;
+      }
+    });
+
+    return parseFloat(((up / beats.length) * 100).toFixed(1));
+  }, [beats]);
+
   if (!currentWorkspaceId) {
     return <NoWorkspaceTip />;
   }
@@ -59,11 +76,11 @@ export const MonitorList: React.FC = React.memo(() => {
               }
             >
               {/* {monitor.monthOnlineRate * 100}% */}
-              80%
+              {upPercent}%
             </span>
           </div>
           <div className="flex-1 pl-2">
-            <div className="text-base mb-2">{monitor.name}</div>
+            <div className="text-base">{monitor.name}</div>
             {/* <div>
               {monitor.tags.map((tag) => (
                 <span
@@ -77,7 +94,10 @@ export const MonitorList: React.FC = React.memo(() => {
           </div>
 
           <div className="flex items-center">
-            <MonitorHealthBar monitorId={monitor.id} />
+            <MonitorHealthBar
+              monitorId={monitor.id}
+              onBeatsItemUpdate={setBeats}
+            />
           </div>
         </div>
       ))}