From 2964c3a2e3e97acf619ba8af750efb15f95c2408 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 17 Dec 2023 18:46:07 +0800
Subject: [PATCH] refactor: add monitor list

---
 .../components/monitor/MonitorPicker.tsx      |  2 +-
 .../monitor/StatusPage/EditForm.tsx           | 46 +++++++++++++++++++
 .../components/monitor/StatusPage/index.tsx   | 10 ++--
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/client/components/monitor/MonitorPicker.tsx b/src/client/components/monitor/MonitorPicker.tsx
index 23b9b88..610be6e 100644
--- a/src/client/components/monitor/MonitorPicker.tsx
+++ b/src/client/components/monitor/MonitorPicker.tsx
@@ -13,7 +13,7 @@ export const MonitorPicker: React.FC<MonitorPickerProps> = React.memo(
     });
 
     return (
-      <Select {...props}>
+      <Select placeholder="Select monitor" {...props}>
         {allMonitor.map((m) => (
           <Select.Option key={m.id} value={m.id}>
             <ColorTag label={m.type} />
diff --git a/src/client/components/monitor/StatusPage/EditForm.tsx b/src/client/components/monitor/StatusPage/EditForm.tsx
index 1ff014c..11b0708 100644
--- a/src/client/components/monitor/StatusPage/EditForm.tsx
+++ b/src/client/components/monitor/StatusPage/EditForm.tsx
@@ -2,6 +2,8 @@ import { Button, Form, Input, Typography } from 'antd';
 import React from 'react';
 import { slugRegex } from '../../../../shared';
 import { z } from 'zod';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { MonitorPicker } from '../MonitorPicker';
 
 const { Text } = Typography;
 
@@ -26,6 +28,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
           layout="vertical"
           initialValues={props.initialValues}
           onFinish={props.onFinish}
+          onValuesChange={console.log}
         >
           <Form.Item
             label="Title"
@@ -72,6 +75,49 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             <Input addonBefore={`${window.origin}/status/`} />
           </Form.Item>
 
+          <Form.List name="monitorList">
+            {(fields, { add, remove }, { errors }) => {
+              return (
+                <>
+                  <Form.Item label="Monitors">
+                    {fields.map((field, index) => (
+                      <div key={field.key} className="flex gap-2 items-start">
+                        <Form.Item
+                          name={[field.name, 'id']}
+                          className="flex-1"
+                          rules={[
+                            {
+                              required: true,
+                              message: 'Please select monitor',
+                            },
+                          ]}
+                        >
+                          <MonitorPicker />
+                        </Form.Item>
+
+                        <MinusCircleOutlined
+                          className="text-lg mt-1.5"
+                          onClick={() => remove(field.name)}
+                        />
+                      </div>
+                    ))}
+
+                    <Button
+                      type="dashed"
+                      onClick={() => add()}
+                      style={{ width: '60%' }}
+                      icon={<PlusOutlined />}
+                    >
+                      Add Monitor
+                    </Button>
+
+                    <Form.ErrorList errors={errors} />
+                  </Form.Item>
+                </>
+              );
+            }}
+          </Form.List>
+
           <div className="flex gap-4">
             <Button type="primary" htmlType="submit" loading={props.isLoading}>
               {props.saveButtonLabel ?? 'Save'}
diff --git a/src/client/components/monitor/StatusPage/index.tsx b/src/client/components/monitor/StatusPage/index.tsx
index be7d4bf..d84691d 100644
--- a/src/client/components/monitor/StatusPage/index.tsx
+++ b/src/client/components/monitor/StatusPage/index.tsx
@@ -83,18 +83,18 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
             <ColorSchemeSwitcher />
           </div>
 
-          <div>
-            {allowEdit && !editMode && (
+          {allowEdit && !editMode && (
+            <div className="mb-4">
               <Button type="primary" onClick={() => setEditMode(true)}>
                 Edit
               </Button>
-            )}
-          </div>
+            </div>
+          )}
 
           <div className="text-lg mb-2">Services</div>
 
           {info && (
-            <div className="shadow-2xl p-2.5">
+            <div className="shadow-2xl p-2.5 flex flex-col gap-4">
               {monitorList.length > 0 ? (
                 monitorList.map((item) => (
                   <div