feat: dashboard add monitor health bar

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({
+  const { data: websites = [], isLoading: isWebsiteLoading } =
-    workspaceId,
+    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`
+                );
+              },
+            },
+          ],
+        })),
+      },
     ],
   };
 

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';

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 />;
       }

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 },