From f2ce1fb10c92a2e2583ec3b36866308954958e1e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 24 Sep 2024 00:11:47 +0800
Subject: [PATCH] perf: improve monitor detail style, enhance style difference

---
 src/client/components/CommonList.tsx          |  5 +++--
 .../components/monitor/MonitorHealthBar.tsx   | 20 +++++++++++++++++--
 src/client/components/monitor/MonitorInfo.tsx |  2 +-
 src/client/routes/monitor.tsx                 |  1 +
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/client/components/CommonList.tsx b/src/client/components/CommonList.tsx
index a9f4457..7743680 100644
--- a/src/client/components/CommonList.tsx
+++ b/src/client/components/CommonList.tsx
@@ -89,8 +89,9 @@ export const CommonList: React.FC<CommonListProps> = React.memo((props) => {
               <button
                 key={item.id}
                 className={cn(
-                  'hover:bg-accent flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
-                  isSelected && 'bg-muted'
+                  'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
+                  'hover:bg-gray-50 dark:hover:bg-gray-900',
+                  isSelected && 'bg-gray-50 dark:bg-gray-900'
                 )}
                 onClick={() => {
                   globalEventBus.emit('commonListSelected');
diff --git a/src/client/components/monitor/MonitorHealthBar.tsx b/src/client/components/monitor/MonitorHealthBar.tsx
index 0e47dab..330a446 100644
--- a/src/client/components/monitor/MonitorHealthBar.tsx
+++ b/src/client/components/monitor/MonitorHealthBar.tsx
@@ -9,11 +9,13 @@ import { getMonitorProvider, getProviderDisplay } from './provider';
 import { MonitorProvider } from './provider/types';
 import { useTranslation } from '@i18next-toolkit/react';
 import clsx from 'clsx';
+import { cn } from '@/utils/style';
 
 interface MonitorHealthBarProps {
   workspaceId: string;
   monitorId: string;
   monitorType?: string;
+  active?: boolean;
   count?: number;
   size?: HealthBarProps['size'];
   healthBarClassName?: string;
@@ -29,6 +31,7 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     const {
       workspaceId,
       monitorId,
+      active = true,
       size = 'small',
       count = 20,
       showCurrentStatus = false,
@@ -106,7 +109,9 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
     });
 
     return (
-      <div className="flex items-center">
+      <div
+        className={cn('flex items-center', active === false && 'opacity-50')}
+      >
         {showPercent && (
           <span
             className={clsx(
@@ -131,7 +136,18 @@ export const MonitorHealthBar: React.FC<MonitorHealthBarProps> = React.memo(
 
         {showCurrentStatus && (
           <>
-            {last(beats)?.status === 'health' ? (
+            {active === false ? (
+              <div
+                className={clsx(
+                  'ml-2 rounded-full bg-gray-400 px-4 py-1 text-lg font-bold text-white',
+                  {
+                    'text-sm': size === 'small',
+                  }
+                )}
+              >
+                {t('Stopped')}
+              </div>
+            ) : last(beats)?.status === 'health' ? (
               <div
                 className={clsx(
                   'ml-2 rounded-full bg-green-500 px-4 py-1 text-lg font-bold text-white',
diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx
index d5c68ff..f9158ce 100644
--- a/src/client/components/monitor/MonitorInfo.tsx
+++ b/src/client/components/monitor/MonitorInfo.tsx
@@ -261,7 +261,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
               )}
             </Space>
 
-            <div className="text-black text-opacity-75 dark:text-gray-200">
+            <div className="text-right text-black text-opacity-75 dark:text-gray-200">
               <div>
                 {t('Monitored for {{dayNum}} days', {
                   dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
diff --git a/src/client/routes/monitor.tsx b/src/client/routes/monitor.tsx
index 28c80dd..a998acb 100644
--- a/src/client/routes/monitor.tsx
+++ b/src/client/routes/monitor.tsx
@@ -43,6 +43,7 @@ function MonitorComponent() {
       <MonitorHealthBar
         workspaceId={workspaceId}
         monitorId={item.id}
+        active={item.active}
         showPercent={true}
         showCurrentStatus={true}
       />