feat: add more dashboard item

src/client/components/dashboard/AddButton.tsx

@@ -40,10 +40,14 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
               },
             },
             {
-              key: `website#${website.id}#event`,
+              key: `website#${website.id}#events`,
               label: 'Events',
               onClick: () => {
-                addItem('websiteEvent', website.id, `${website.name}'s Event`);
+                addItem(
+                  'websiteEvents',
+                  website.id,
+                  `${website.name}'s Events`
+                );
               },
             },
           ],
@@ -67,6 +71,35 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
                 );
               },
             },
+            {
+              key: `monitor#${monitor.id}#metrics`,
+              label: 'Metrics',
+              onClick: () => {
+                addItem(
+                  'monitorMetrics',
+                  monitor.id,
+                  `${monitor.name}'s Metrics`
+                );
+              },
+            },
+            {
+              key: `monitor#${monitor.id}#chart`,
+              label: 'Chart',
+              onClick: () => {
+                addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`);
+              },
+            },
+            {
+              key: `monitor#${monitor.id}#events`,
+              label: 'Events',
+              onClick: () => {
+                addItem(
+                  'monitorEvents',
+                  monitor.id,
+                  `${monitor.name}'s Events`
+                );
+              },
+            },
           ],
         })),
       },

src/client/components/dashboard/items/MonitorChartItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MonitorDataChart } from '../../monitor/MonitorDataChart';
+
+export const MonitorChartItem: React.FC<{
+  monitorId: string;
+}> = React.memo((props) => {
+  return <MonitorDataChart monitorId={props.monitorId} />;
+});
+MonitorChartItem.displayName = 'MonitorChartItem';

src/client/components/dashboard/items/MonitorEventsItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MonitorEventList } from '../../monitor/MonitorEventList';
+
+export const MonitorEventsItem: React.FC<{
+  monitorId: string;
+}> = React.memo((props) => {
+  return <MonitorEventList monitorId={props.monitorId} />;
+});
+MonitorEventsItem.displayName = 'MonitorEventsItem';

src/client/components/dashboard/items/MonitorMetricsItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { trpc } from '../../../api/trpc';
+import { NotFoundTip } from '../../NotFoundTip';
+import { useCurrentWorkspaceId } from '../../../store/user';
+import { Loading } from '../../Loading';
+import { MonitorDataMetrics } from '../../monitor/MonitorDataMetrics';
+
+export const MonitorMetricsItem: React.FC<{
+  monitorId: string;
+}> = React.memo((props) => {
+  const workspaceId = useCurrentWorkspaceId();
+
+  const { data: monitorInfo, isLoading } = trpc.monitor.get.useQuery({
+    workspaceId,
+    monitorId: props.monitorId,
+  });
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (!monitorInfo) {
+    return <NotFoundTip />;
+  }
+
+  return (
+    <MonitorDataMetrics
+      monitorId={monitorInfo.id}
+      monitorType={monitorInfo.type}
+    />
+  );
+});
+MonitorMetricsItem.displayName = 'MonitorMetricsItem';

src/client/components/dashboard/items/index.tsx

@@ -8,6 +8,9 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { useEvent } from '../../../hooks/useEvent';
 import { WebsiteEventItem } from './WebsiteEventItem';
 import { MonitorHealthBarItem } from './MonitorHealthBarItem';
+import { MonitorMetricsItem } from './MonitorMetricsItem';
+import { MonitorChartItem } from './MonitorChartItem';
+import { MonitorEventsItem } from './MonitorEventsItem';
 
 interface DashboardGridItemProps {
   item: DashboardItem;
@@ -20,10 +23,16 @@ export const DashboardGridItem: React.FC<DashboardGridItemProps> = React.memo(
     const inner = useMemo(() => {
       if (type === 'websiteOverview') {
         return <WebsiteOverviewItem websiteId={id} />;
-      } else if (type === 'websiteEvent') {
+      } else if (type === 'websiteEvents') {
         return <WebsiteEventItem websiteId={id} />;
       } else if (type === 'monitorHealthBar') {
         return <MonitorHealthBarItem monitorId={id} />;
+      } else if (type === 'monitorMetrics') {
+        return <MonitorMetricsItem monitorId={id} />;
+      } else if (type === 'monitorChart') {
+        return <MonitorChartItem monitorId={id} />;
+      } else if (type === 'monitorEvents') {
+        return <MonitorEventsItem monitorId={id} />;
       } else {
         return <NotFoundTip />;
       }

src/client/store/dashboard.ts

@@ -5,12 +5,11 @@ import { v1 as uuid } from 'uuid';
 
 export type DashboardItemType =
   | 'websiteOverview'
-  | 'websiteEvent'
+  | 'websiteEvents'
   | 'monitorHealthBar'
-  | 'monitorStatus'
+  | 'monitorMetrics'
   | 'monitorChart'
-  | 'monitorEvent'
+  | 'monitorEvents';
-  | 'serverStatus';
 
 export interface DashboardItem {
   key: string; // match with layout, not equal
@@ -73,11 +72,10 @@ export const useDashboardStore = create<DashboardState>((set, get) => ({
 }));
 
 export const defaultItemLayout: Record<DashboardItemType, Omit<Layout, 'i'>> = {
-  websiteOverview: { x: Infinity, y: Infinity, w: 4, h: 12 },
+  websiteOverview: { x: 0, y: Infinity, w: 4, h: 12 },
-  websiteEvent: { x: Infinity, y: Infinity, w: 2, h: 5 },
+  websiteEvents: { x: 0, y: Infinity, w: 2, h: 5 },
-  monitorHealthBar: { x: Infinity, y: Infinity, w: 2, h: 2 },
+  monitorHealthBar: { x: 0, y: Infinity, w: 2, h: 2 },
-  monitorStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorMetrics: { x: 0, y: Infinity, w: 2, h: 3 },
-  monitorChart: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorChart: { x: 0, y: Infinity, w: 2, h: 6 },
-  monitorEvent: { x: Infinity, y: Infinity, w: 4, h: 2 },
+  monitorEvents: { x: 0, y: Infinity, w: 2, h: 10 },
-  serverStatus: { x: Infinity, y: Infinity, w: 4, h: 2 },
 };