refactor: update monitor layout

src/client/pages/Layout.tsx

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

src/client/pages/Monitor.tsx

@@ -1,9 +1,11 @@
-import { Tag } from 'antd';
 import clsx from 'clsx';
 import React from 'react';
+import { RouterOutput, trpc } from '../api/trpc';
 import { HealthBar } from '../components/HealthBar';
+import { useEvent } from '../hooks/useEvent';
+import { useCurrentWorkspaceId } from '../store/user';
 
-interface MonitorInfo {
+interface MonitorHeartbeatInfo {
   name: string;
   dayOnlineRate: number;
   monthOnlineRate: number;
@@ -28,23 +30,46 @@ const demoMonitors = [
 ];
 
 export const Monitor: React.FC = React.memo(() => {
+  const currentWorkspaceId = useCurrentWorkspaceId()!;
+  const { data: monitors = [] } = trpc.monitor.all.useQuery({
+    workspaceId: currentWorkspaceId,
+  });
+
+  const handleCreateMonitor = useEvent(() => {
+    // TODO
+  });
+
   return (
-    <div className="py-5 flex h-full">
-      <div className="w-5/12 bg-gray-50">
-        <MonitorList />
+    <div className="h-full flex flex-col">
+      <div className="flex-1">
+        <div className="p-4">
+          <div
+            className="px-3 py-2 rounded-full bg-green-400 hover:bg-green-500 text-white inline-block cursor-pointer"
+            onClick={handleCreateMonitor}
+          >
+            Add new Montior
+          </div>
+        </div>
+      </div>
+      <div className="py-5 flex h-full">
+        <div className="w-5/12 bg-gray-50">
+          <MonitorList monitors={monitors} />
+        </div>
+        <div className="w-7/12">Info</div>
       </div>
-      <div className="w-7/12">InfoInfo</div>
     </div>
   );
 });
 Monitor.displayName = 'Monitor';
 
-const MonitorList: React.FC = React.memo(() => {
+const MonitorList: React.FC<{
+  monitors: RouterOutput['monitor']['all'];
+}> = React.memo((props) => {
   const selectedMonitorName = 'Tianji1';
 
   return (
     <div>
-      {demoMonitors.map((monitor) => (
+      {props.monitors.map((monitor) => (
         <div
           key={monitor.name}
           className={clsx('flex rounded-lg py-3 px-4 cursor-pointer', {
@@ -59,12 +84,13 @@ const MonitorList: React.FC = React.memo(() => {
                 'bg-green-400 min-w-[62px] p-0.5 rounded-full text-white inline-block text-center'
               }
             >
-              {monitor.monthOnlineRate * 100}%
+              {/* {monitor.monthOnlineRate * 100}% */}
+              80%
             </span>
           </div>
           <div className="flex-1 pl-2">
             <div className="text-base mb-2">{monitor.name}</div>
-            <div>
+            {/* <div>
               {monitor.tags.map((tag) => (
                 <span
                   className="py-0.5 px-1 rounded-full text-white text-sm"
@@ -73,7 +99,7 @@ const MonitorList: React.FC = React.memo(() => {
                   {tag.label}
                 </span>
               ))}
-            </div>
+            </div> */}
           </div>
 
           <div className="flex items-center">