feat: add monitor overview

src/client/components/monitor/MonitorEventList.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { trpc } from '../../api/trpc';
+import { useCurrentWorkspaceId } from '../../store/user';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import { Card, Empty } from 'antd';
+import { useNavigate } from 'react-router';
+
+interface MonitorEventListProps {
+  monitorId?: string;
+}
+export const MonitorEventList: React.FC<MonitorEventListProps> = React.memo(
+  (props) => {
+    const workspaceId = useCurrentWorkspaceId();
+    const { data = [], isLoading } = trpc.monitor.events.useQuery({
+      workspaceId,
+      monitorId: props.monitorId,
+    });
+    const navigate = useNavigate();
+
+    if (isLoading === false && data.length === 0) {
+      return <Empty />;
+    }
+
+    return (
+      <div className="space-y-4 py-2">
+        {data.map((item) => (
+          <Card
+            key={item.id}
+            className="min-h-[60px]"
+            hoverable={true}
+            onClick={() => {
+              navigate(`/monitor/${item.monitorId}`);
+            }}
+          >
+            <div className="flex items-center w-full gap-2">
+              <div
+                className={clsx(
+                  'min-w-[62px] py-1 px-2 rounded-full text-white inline-block text-center',
+                  item.type === 'UP'
+                    ? 'bg-green-400'
+                    : item.type === 'DOWN'
+                    ? 'bg-red-500'
+                    : 'bg-amber-400'
+                )}
+              >
+                {item.type}
+              </div>
+
+              <div className="text-black text-opacity-60">
+                {dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+              </div>
+
+              <div>{item.message}</div>
+            </div>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+);
+MonitorEventList.displayName = 'MonitorEventList';

src/client/components/monitor/MonitorList.tsx

@@ -1,10 +1,8 @@
-import { Card } from 'antd';
 import clsx from 'clsx';
 import React, { useMemo, useState } from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router';
+import { useNavigate } from 'react-router';
 import { trpc } from '../../api/trpc';
 import { useCurrentWorkspaceId } from '../../store/user';
-import { HealthBar } from '../HealthBar';
 import { NoWorkspaceTip } from '../NoWorkspaceTip';
 import { MonitorHealthBar } from './MonitorHealthBar';
 
@@ -80,7 +78,6 @@ export const MonitorList: React.FC = React.memo(() => {
                 upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
               )}
             >
-              {/* {monitor.monthOnlineRate * 100}% */}
               {upPercent}%
             </span>
           </div>

src/client/pages/Monitor/Overview.tsx

@@ -1,6 +1,33 @@
 import React from 'react';
+import { useCurrentWorkspaceId } from '../../store/user';
+import { trpc } from '../../api/trpc';
+import { Card } from 'antd';
+import { MonitorEventList } from '../../components/monitor/MonitorEventList';
 
 export const MonitorOverview: React.FC = React.memo(() => {
-  return <div>Overview</div>;
+  const currentWorkspaceId = useCurrentWorkspaceId()!;
+  const { data: monitors = [] } = trpc.monitor.all.useQuery({
+    workspaceId: currentWorkspaceId,
+  });
+
+  return (
+    <div className="px-2">
+      <div className="grid gap-4 grid-cols-2">
+        <Card hoverable={true}>
+          <div>Monitors</div>
+          <div className="text-2xl font-semibold">{monitors.length}</div>
+        </Card>
+        <Card hoverable={true}>
+          <div>Available</div>
+          <div className="text-2xl font-semibold">
+            {monitors.filter((m) => m.active).length}
+          </div>
+        </Card>
+      </div>
+      <div>
+        <MonitorEventList />
+      </div>
+    </div>
+  );
 });
 MonitorOverview.displayName = 'MonitorOverview';

src/server/trpc/routers/monitor.ts

@@ -193,4 +193,25 @@ export const monitorRouter = router({
         recent30DayOfflineCount,
       };
     }),
+  events: workspaceProcedure
+    .input(
+      z.object({
+        monitorId: z.string().cuid2().optional(),
+      })
+    )
+    .query(async ({ input }) => {
+      const { monitorId } = input;
+
+      const list = await prisma.monitorEvent.findMany({
+        where: {
+          monitorId,
+        },
+        orderBy: {
+          createdAt: 'desc',
+        },
+        take: 20,
+      });
+
+      return list;
+    }),
 });