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,8 +44,9 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   }
 
   return (
+    <div className="w-full h-full overflow-auto">
       <Spin spinning={isLoading}>
-      <Space className="w-full" direction="vertical">
+        <Space direction="vertical">
           <div className="flex justify-between">
             <Space direction="vertical">
               <div className="text-2xl">{monitorInfo.name}</div>
@@ -97,8 +99,11 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
           <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="flex-1 w-full px-4 overflow-hidden">
-        <div className="max-w-7xl m-auto h-full">
+        <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',
           },