From 89c08749835f8fc94de11c4fbc54cf8923dc04c0 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 2 Sep 2023 18:42:24 +0800
Subject: [PATCH] feat: add monitor base view

---
 src/client/index.css         |  4 ++
 src/client/pages/Layout.tsx  |  4 +-
 src/client/pages/Monitor.tsx | 87 +++++++++++++++++++++++++++++++++++-
 src/client/pages/Website.tsx |  2 +-
 4 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/src/client/index.css b/src/client/index.css
index 19e806e..e8b05f5 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -19,6 +19,10 @@ a {
   text-decoration: none;
 }
 
+#root, .App {
+  height: 100%;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/client/pages/Layout.tsx b/src/client/pages/Layout.tsx
index ceee33f..f9dc65d 100644
--- a/src/client/pages/Layout.tsx
+++ b/src/client/pages/Layout.tsx
@@ -6,7 +6,7 @@ import { Button, Dropdown } from 'antd';
 
 export const Layout: React.FC = React.memo(() => {
   return (
-    <div>
+    <div className="flex flex-col h-full">
       <div className="flex items-center bg-gray-100 px-4">
         <div className="px-2 mr-10 font-bold">Tianji</div>
         <div className="flex gap-8">
@@ -35,7 +35,7 @@ export const Layout: React.FC = React.memo(() => {
           </Dropdown>
         </div>
       </div>
-      <div className="max-w-7xl m-auto px-4">
+      <div className="flex-1 w-full max-w-7xl m-auto px-4 overflow-auto">
         <Outlet />
       </div>
     </div>
diff --git a/src/client/pages/Monitor.tsx b/src/client/pages/Monitor.tsx
index 21ce495..f275708 100644
--- a/src/client/pages/Monitor.tsx
+++ b/src/client/pages/Monitor.tsx
@@ -1,6 +1,91 @@
+import { Tag } from 'antd';
+import clsx from 'clsx';
 import React from 'react';
+import { HealthBar } from '../components/HealthBar';
+
+interface MonitorInfo {
+  name: string;
+  dayOnlineRate: number;
+  monthOnlineRate: number;
+  certificateExpiredTo: string;
+  detectFrequency: number; // second
+  response: number;
+  avgResponse: number; // 24hour
+  tags: { label: string; color: string }[];
+}
+
+const demoMonitors = [
+  {
+    name: 'Tianji',
+    dayOnlineRate: 1,
+    monthOnlineRate: 0.8,
+    certificateExpiredTo: '2023-9-2 15:49:56',
+    detectFrequency: 300,
+    response: 592,
+    avgResponse: 846,
+    tags: [{ label: 'Core', color: 'red' }],
+  },
+];
 
 export const Monitor: React.FC = React.memo(() => {
-  return <div>Monitor</div>;
+  return (
+    <div className="py-5 flex h-full">
+      <div className="w-5/12 bg-gray-50">
+        <MonitorList />
+      </div>
+      <div className="w-7/12">InfoInfo</div>
+    </div>
+  );
 });
 Monitor.displayName = 'Monitor';
+
+const MonitorList: React.FC = React.memo(() => {
+  const selectedMonitorName = 'Tianji1';
+
+  return (
+    <div>
+      {demoMonitors.map((monitor) => (
+        <div
+          key={monitor.name}
+          className={clsx('flex rounded-lg py-3 px-4 cursor-pointer', {
+            'bg-green-500 bg-opacity-20': selectedMonitorName === monitor.name,
+            'bg-green-500 bg-opacity-0 hover:bg-opacity-10':
+              selectedMonitorName !== monitor.name,
+          })}
+        >
+          <div>
+            <span
+              className={
+                'bg-green-400 min-w-[62px] p-0.5 rounded-full text-white inline-block text-center'
+              }
+            >
+              {monitor.monthOnlineRate * 100}%
+            </span>
+          </div>
+          <div className="flex-1 pl-2">
+            <div className="text-base mb-2">{monitor.name}</div>
+            <div>
+              {monitor.tags.map((tag) => (
+                <span
+                  className="py-0.5 px-1 rounded-full text-white text-sm"
+                  style={{ backgroundColor: tag.color }}
+                >
+                  {tag.label}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <HealthBar
+              beats={Array.from({ length: 13 }).map(() => ({
+                status: 'health',
+              }))}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
+MonitorList.displayName = 'MonitorList';
diff --git a/src/client/pages/Website.tsx b/src/client/pages/Website.tsx
index 9333afe..96d7f69 100644
--- a/src/client/pages/Website.tsx
+++ b/src/client/pages/Website.tsx
@@ -57,7 +57,7 @@ interface WebsiteInfoRecordType {
   domain: string;
 }
 
-export const WebsiteList: React.FC = React.memo(() => {
+const WebsiteList: React.FC = React.memo(() => {
   const dataSource: WebsiteInfoRecordType[] = [
     {
       name: 'tianji',