From f9e8a1df0b92646bc9992d2829a7b6f374f4975b Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 15 Nov 2023 22:15:06 +0800
Subject: [PATCH] refactor: improve dashboard monitor health bar size

---
 .../components/dashboard/items/MonitorHealthBarItem.tsx  | 9 ++++++++-
 src/client/components/dashboard/items/index.tsx          | 2 +-
 src/client/store/dashboard.ts                            | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/client/components/dashboard/items/MonitorHealthBarItem.tsx b/src/client/components/dashboard/items/MonitorHealthBarItem.tsx
index 4cd9740..4e1912e 100644
--- a/src/client/components/dashboard/items/MonitorHealthBarItem.tsx
+++ b/src/client/components/dashboard/items/MonitorHealthBarItem.tsx
@@ -4,6 +4,13 @@ import { MonitorHealthBar } from '../../monitor/MonitorHealthBar';
 export const MonitorHealthBarItem: React.FC<{
   monitorId: string;
 }> = React.memo((props) => {
-  return <MonitorHealthBar monitorId={props.monitorId} />;
+  return (
+    <MonitorHealthBar
+      monitorId={props.monitorId}
+      count={40}
+      size="large"
+      showCurrentStatus={true}
+    />
+  );
 });
 MonitorHealthBarItem.displayName = 'MonitorHealthBarItem';
diff --git a/src/client/components/dashboard/items/index.tsx b/src/client/components/dashboard/items/index.tsx
index adbac01..8b15288 100644
--- a/src/client/components/dashboard/items/index.tsx
+++ b/src/client/components/dashboard/items/index.tsx
@@ -41,7 +41,7 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
       <Card
         className="h-full w-full overflow-auto"
         title={title}
-        headStyle={{ padding: 10 }}
+        headStyle={{ padding: 10, minHeight: 40 }}
         bodyStyle={{ padding: 10 }}
         extra={
           isEditMode && (
diff --git a/src/client/store/dashboard.ts b/src/client/store/dashboard.ts
index 9e61828..ccc3997 100644
--- a/src/client/store/dashboard.ts
+++ b/src/client/store/dashboard.ts
@@ -75,7 +75,7 @@ export const useDashboardStore = create<DashboardState>((set, get) => ({
 export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
   websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 },
   websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 },
-  monitorHealthBar: { x: Infinity, y: Infinity, w: 1, h: 2 },
+  monitorHealthBar: { x: Infinity, y: Infinity, w: 2, h: 2 },
   monitorStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
   monitorChart: { x: Infinity, y: Infinity, w: 4, h: 2 },
   monitorEvent: { x: Infinity, y: Infinity, w: 4, h: 2 },