From 01d774d3958abd5ee15631eb771e22d5771f405a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Mon, 2 Sep 2024 22:34:02 +0800
Subject: [PATCH] fix: fix health bar style problem in page

---
 src/client/components/HealthBar.tsx           | 14 +++++++----
 .../components/monitor/MonitorHealthBar.tsx   |  7 +++++-
 .../components/monitor/MonitorListItem.tsx    | 23 ++++++++++---------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/client/components/HealthBar.tsx b/src/client/components/HealthBar.tsx
index 46602b6..0485557 100644
--- a/src/client/components/HealthBar.tsx
+++ b/src/client/components/HealthBar.tsx
@@ -1,4 +1,5 @@
 import { useResizeObserver } from '@/hooks/useResizeObserver';
+import { cn } from '@/utils/style';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -10,6 +11,7 @@ export interface HealthBarBeat {
 }
 
 export interface HealthBarProps {
+  className?: string;
   size?: 'small' | 'large';
   beats: HealthBarBeat[];
 }
@@ -23,10 +25,14 @@ export const HealthBar: React.FC<HealthBarProps> = React.memo((props) => {
   return (
     <div
       ref={containerRef}
-      className={clsx('flex', {
-        'gap-[3px]': size === 'small',
-        'gap-1': size === 'large',
-      })}
+      className={cn(
+        'flex',
+        {
+          'gap-[3px] px-0.5 py-1.5': size === 'small',
+          'gap-1 px-0.5 py-2': size === 'large',
+        },
+        props.className
+      )}
     >
       {props.beats
         .slice(
diff --git a/src/client/components/monitor/MonitorHealthBar.tsx b/src/client/components/monitor/MonitorHealthBar.tsx
index 4a18045..0e47dab 100644
--- a/src/client/components/monitor/MonitorHealthBar.tsx
+++ b/src/client/components/monitor/MonitorHealthBar.tsx
@@ -16,6 +16,7 @@ interface MonitorHealthBarProps {
   monitorType?: string;
   count?: number;
   size?: HealthBarProps['size'];
+  healthBarClassName?: string;
   showCurrentStatus?: boolean;
   showPercent?: boolean;
   onBeatsItemUpdate?: (
@@ -121,7 +122,11 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
         )}
 
         <div className="flex-1 overflow-hidden">
-          <HealthBar size={size} beats={beats} />
+          <HealthBar
+            className={props.healthBarClassName}
+            size={size}
+            beats={beats}
+          />
         </div>
 
         {showCurrentStatus && (
diff --git a/src/client/components/monitor/MonitorListItem.tsx b/src/client/components/monitor/MonitorListItem.tsx
index 7bf019d..79502a1 100644
--- a/src/client/components/monitor/MonitorListItem.tsx
+++ b/src/client/components/monitor/MonitorListItem.tsx
@@ -70,7 +70,7 @@ export const MonitorListItem: React.FC<{
     <div
       className={clsx(
         className,
-        'mb-1 flex items-center rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
+        'mb-1 flex items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10',
         onClick && 'cursor-pointer'
       )}
       onClick={onClick}
@@ -86,7 +86,7 @@ export const MonitorListItem: React.FC<{
         </span>
       </div>
 
-      <div className="flex-1 pl-2">
+      <div className="pl-2">
         <div className="text-base">{monitorName}</div>
         {/* <div>
               {monitor.tags.map((tag) => (
@@ -100,6 +100,16 @@ export const MonitorListItem: React.FC<{
             </div> */}
       </div>
 
+      <div className="flex-1 flex-shrink items-center overflow-hidden px-1">
+        <MonitorHealthBar
+          healthBarClassName="justify-end"
+          workspaceId={workspaceId}
+          monitorId={monitorId}
+          monitorType={monitorType}
+          onBeatsItemUpdate={setBeats}
+        />
+      </div>
+
       {showCurrentResponse && latestResponse && (
         <Tooltip title={t('Current')}>
           <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
@@ -107,15 +117,6 @@ export const MonitorListItem: React.FC<{
           </div>
         </Tooltip>
       )}
-
-      <div className="flex items-center">
-        <MonitorHealthBar
-          workspaceId={workspaceId}
-          monitorId={monitorId}
-          monitorType={monitorType}
-          onBeatsItemUpdate={setBeats}
-        />
-      </div>
     </div>
   );
 });