feat: add monitor event list into monitor info page

src/client/components/monitor/MonitorInfo.tsx

@@ -15,6 +15,7 @@ import { ErrorTip } from '../ErrorTip';
 import { ColorTag } from '../ColorTag';
 import { useNavigate } from 'react-router';
 import { MonitorStatsBlock } from './MonitorStatsBlock';
+import { MonitorEventList } from './MonitorEventList';
 
 interface MonitorInfoProps {
   monitorId: string;
@@ -43,62 +44,66 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   }
 
   return (
-    <Spin spinning={isLoading}>
-      <Space className="w-full" direction="vertical">
-        <div className="flex justify-between">
-          <Space direction="vertical">
-            <div className="text-2xl">{monitorInfo.name}</div>
+    <div className="w-full h-full overflow-auto">
+      <Spin spinning={isLoading}>
+        <Space direction="vertical">
+          <div className="flex justify-between">
+            <Space direction="vertical">
+              <div className="text-2xl">{monitorInfo.name}</div>
 
-            <div>
-              <ColorTag label={monitorInfo.type} />
-              <span>
-                {getMonitorLink(monitorInfo as any as MonitorInfoType)}
-              </span>
+              <div>
+                <ColorTag label={monitorInfo.type} />
+                <span>
+                  {getMonitorLink(monitorInfo as any as MonitorInfoType)}
+                </span>
+              </div>
+            </Space>
+
+            <div className="text-black text-opacity-75">
+              Monitored for {dayjs().diff(dayjs(monitorInfo.createdAt), 'days')}{' '}
+              days
             </div>
-          </Space>
-
-          <div className="text-black text-opacity-75">
-            Monitored for {dayjs().diff(dayjs(monitorInfo.createdAt), 'days')}{' '}
-            days
           </div>
-        </div>
 
-        <div>
-          <Button
-            type="primary"
-            onClick={() => {
-              navigate(`/monitor/${monitorInfo.id}/edit`);
-            }}
-          >
-            Edit
-          </Button>
-        </div>
+          <div>
+            <Button
+              type="primary"
+              onClick={() => {
+                navigate(`/monitor/${monitorInfo.id}/edit`);
+              }}
+            >
+              Edit
+            </Button>
+          </div>
 
-        <Card>
-          <MonitorHealthBar
-            monitorId={monitorId}
-            count={40}
-            size="large"
-            showCurrentStatus={true}
-            onBeatsItemUpdate={(items) => {
-              setCurrentResponse(last(items)?.value ?? 0);
-            }}
-          />
-        </Card>
+          <Card>
+            <MonitorHealthBar
+              monitorId={monitorId}
+              count={40}
+              size="large"
+              showCurrentStatus={true}
+              onBeatsItemUpdate={(items) => {
+                setCurrentResponse(last(items)?.value ?? 0);
+              }}
+            />
+          </Card>
 
-        <Card>
-          <MonitorDataMetrics
-            monitorId={monitorId}
-            monitorType={monitorInfo.type}
-            currectResponse={currectResponse}
-          />
-        </Card>
+          <Card>
+            <MonitorDataMetrics
+              monitorId={monitorId}
+              monitorType={monitorInfo.type}
+              currectResponse={currectResponse}
+            />
+          </Card>
 
-        <Card>
-          <MonitorDataChart monitorId={monitorId} />
-        </Card>
-      </Space>
-    </Spin>
+          <Card>
+            <MonitorDataChart monitorId={monitorId} />
+          </Card>
+
+          <MonitorEventList monitorId={monitorId} />
+        </Space>
+      </Spin>
+    </div>
   );
 });
 MonitorInfo.displayName = 'MonitorInfo';

src/client/pages/Layout.tsx

@@ -71,8 +71,8 @@ export const Layout: React.FC = React.memo(() => {
           </div>
         </div>
       )}
-      <div className="flex-1 w-full px-4">
-        <div className="max-w-7xl m-auto h-full">
+      <div className="flex-1 w-full px-4 overflow-hidden">
+        <div className="max-w-7xl m-auto h-full overflow-auto">
           <Outlet />
         </div>
       </div>

src/client/pages/Monitor/Detail.tsx

@@ -11,7 +11,7 @@ export const MonitorDetail: React.FC = React.memo(() => {
   }
 
   return (
-    <div className="px-2">
+    <div className="px-2 h-full">
       <MonitorInfo monitorId={monitorId} />
     </div>
   );

src/client/pages/Monitor/index.tsx

@@ -11,7 +11,7 @@ export const MonitorPage: React.FC = React.memo(() => {
 
   return (
     <div className="h-full flex flex-col">
-      <div className="flex-1">
+      <div>
         <div className="px-4 pt-4">
           <div
             className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer"
@@ -21,7 +21,7 @@ export const MonitorPage: React.FC = React.memo(() => {
           </div>
         </div>
       </div>
-      <div className="py-5 flex h-full">
+      <div className="py-5 flex flex-1 overflow-hidden">
         <div className="w-5/12 bg-gray-50">
           <MonitorList />
         </div>

src/server/model/monitor/index.ts

@@ -156,7 +156,7 @@ class MonitorRunner {
       if (value < 0 && currentStatus === 'UP') {
         await prisma.monitorEvent.create({
           data: {
-            message: `Monitor ${monitor.name} has been down`,
+            message: `Monitor [${monitor.name}] has been down`,
             monitorId: monitor.id,
             type: 'DOWN',
           },
@@ -170,7 +170,7 @@ class MonitorRunner {
       } else if (value > 0 && currentStatus === 'DOWN') {
         await prisma.monitorEvent.create({
           data: {
-            message: `Monitor ${monitor.name} has been up`,
+            message: `Monitor [${monitor.name}] has been up`,
             monitorId: monitor.id,
             type: 'UP',
           },