From 8e3a81e42f54cfdbc5765dea55952171a7639999 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 15 Nov 2023 22:05:48 +0800
Subject: [PATCH] feat: dashboard add monitor health bar

---
 src/client/components/dashboard/AddButton.tsx | 34 +++++++++++++++++--
 .../dashboard/items/MonitorHealthBarItem.tsx  |  9 +++++
 .../components/dashboard/items/index.tsx      |  3 ++
 src/client/store/dashboard.ts                 |  2 +-
 4 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 src/client/components/dashboard/items/MonitorHealthBarItem.tsx

diff --git a/src/client/components/dashboard/AddButton.tsx b/src/client/components/dashboard/AddButton.tsx
index ecf3191..c8bf7ae 100644
--- a/src/client/components/dashboard/AddButton.tsx
+++ b/src/client/components/dashboard/AddButton.tsx
@@ -7,11 +7,18 @@ import { DownOutlined } from '@ant-design/icons';
 
 export const DashboardItemAddButton: React.FC = React.memo(() => {
   const workspaceId = useCurrentWorkspaceId();
-  const { data: websites = [], isLoading } = trpc.website.all.useQuery({
-    workspaceId,
-  });
+  const { data: websites = [], isLoading: isWebsiteLoading } =
+    trpc.website.all.useQuery({
+      workspaceId,
+    });
+  const { data: monitors = [], isLoading: isMonitorLoading } =
+    trpc.monitor.all.useQuery({
+      workspaceId,
+    });
   const { addItem } = useDashboardStore();
 
+  const isLoading = isWebsiteLoading || isMonitorLoading;
+
   const menu: MenuProps = {
     items: [
       {
@@ -42,6 +49,27 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
           ],
         })),
       },
+      {
+        key: 'monitor',
+        label: 'Monitor',
+        children: monitors.map((monitor) => ({
+          key: `monitor#${monitor.id}`,
+          label: monitor.name,
+          children: [
+            {
+              key: `monitor#${monitor.id}#healthBar`,
+              label: 'Health Bar',
+              onClick: () => {
+                addItem(
+                  'monitorHealthBar',
+                  monitor.id,
+                  `${monitor.name}'s Health`
+                );
+              },
+            },
+          ],
+        })),
+      },
     ],
   };
 
diff --git a/src/client/components/dashboard/items/MonitorHealthBarItem.tsx b/src/client/components/dashboard/items/MonitorHealthBarItem.tsx
new file mode 100644
index 0000000..4cd9740
--- /dev/null
+++ b/src/client/components/dashboard/items/MonitorHealthBarItem.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { MonitorHealthBar } from '../../monitor/MonitorHealthBar';
+
+export const MonitorHealthBarItem: React.FC<{
+  monitorId: string;
+}> = React.memo((props) => {
+  return <MonitorHealthBar monitorId={props.monitorId} />;
+});
+MonitorHealthBarItem.displayName = 'MonitorHealthBarItem';
diff --git a/src/client/components/dashboard/items/index.tsx b/src/client/components/dashboard/items/index.tsx
index e7546d6..adbac01 100644
--- a/src/client/components/dashboard/items/index.tsx
+++ b/src/client/components/dashboard/items/index.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { useEvent } from '../../../hooks/useEvent';
 import { WebsiteEventItem } from './WebsiteEventItem';
+import { MonitorHealthBarItem } from './MonitorHealthBarItem';
 
 interface DashboardGridItemProps {
   item: DashboardItem;
@@ -21,6 +22,8 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
         return <WebsiteOverviewItem websiteId={id} />;
       } else if (type === 'websiteEvent') {
         return <WebsiteEventItem websiteId={id} />;
+      } else if (type === 'monitorHealthBar') {
+        return <MonitorHealthBarItem monitorId={id} />;
       } else {
         return <NotFoundTip />;
       }
diff --git a/src/client/store/dashboard.ts b/src/client/store/dashboard.ts
index f749627..9e61828 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: 4, h: 2 },
+  monitorHealthBar: { x: Infinity, y: Infinity, w: 1, 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 },