From ea5c237c29196a89fc0e5d90a3dfe4cce09af5d3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 5 Oct 2023 21:09:03 +0800
Subject: [PATCH] feat: add monitor editor

---
 src/client/components/MonitorInfoEditor.tsx   | 17 ----
 .../modals/NotificationInfo/index.tsx         |  1 -
 .../modals/monitor/MonitorInfoEditor.tsx      | 92 +++++++++++++++++++
 .../{ => modals/monitor}/MonitorList.tsx      |  8 +-
 .../modals/monitor/provider/index.ts          | 16 ++++
 .../modals/monitor/provider/ping.tsx          | 17 ++++
 src/client/pages/Layout.tsx                   |  2 +-
 src/client/pages/Monitor/Add.tsx              |  2 +-
 src/client/pages/Monitor/Edit.tsx             |  4 +-
 src/client/pages/Monitor/index.tsx            |  2 +-
 src/server/model/monitor/provider/index.ts    |  2 +-
 src/server/model/monitor/provider/ping.ts     |  6 +-
 src/server/model/monitor/provider/type.ts     |  5 +-
 src/types/index.ts                            |  1 +
 src/types/utils.ts                            |  1 +
 15 files changed, 144 insertions(+), 32 deletions(-)
 delete mode 100644 src/client/components/MonitorInfoEditor.tsx
 create mode 100644 src/client/components/modals/monitor/MonitorInfoEditor.tsx
 rename src/client/components/{ => modals/monitor}/MonitorList.tsx (90%)
 create mode 100644 src/client/components/modals/monitor/provider/index.ts
 create mode 100644 src/client/components/modals/monitor/provider/ping.tsx
 create mode 100644 src/types/utils.ts

diff --git a/src/client/components/MonitorInfoEditor.tsx b/src/client/components/MonitorInfoEditor.tsx
deleted file mode 100644
index 990ba40..0000000
--- a/src/client/components/MonitorInfoEditor.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import type { Monitor } from '@prisma/client';
-
-type MonitorInfoEditorValues = Omit<Monitor, 'id'> & {
-  id?: string;
-};
-
-interface MonitorInfoEditorProps {
-  initValue?: MonitorInfoEditorValues;
-  onSave: (value: MonitorInfoEditorValues) => void;
-}
-export const MonitorInfoEditor: React.FC<MonitorInfoEditorProps> = React.memo(
-  (props) => {
-    return <div>MonitorInfoEditor</div>;
-  }
-);
-MonitorInfoEditor.displayName = 'MonitorInfoEditor';
diff --git a/src/client/components/modals/NotificationInfo/index.tsx b/src/client/components/modals/NotificationInfo/index.tsx
index a8fd4a3..53554ea 100644
--- a/src/client/components/modals/NotificationInfo/index.tsx
+++ b/src/client/components/modals/NotificationInfo/index.tsx
@@ -3,7 +3,6 @@ import {
   Form,
   FormProps,
   Input,
-  message,
   Modal,
   ModalProps,
   Select,
diff --git a/src/client/components/modals/monitor/MonitorInfoEditor.tsx b/src/client/components/modals/monitor/MonitorInfoEditor.tsx
new file mode 100644
index 0000000..fb5e476
--- /dev/null
+++ b/src/client/components/modals/monitor/MonitorInfoEditor.tsx
@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import type { Monitor } from '@prisma/client';
+import { Button, Form, Input, InputNumber, Select } from 'antd';
+import { monitorProviders } from './provider';
+import { useEvent } from '../../../hooks/useEvent';
+
+type MonitorInfoEditorValues = Omit<
+  Monitor,
+  'id' | 'workspaceId' | 'createdAt'
+> & {
+  id?: string;
+};
+
+const defaultValues: Omit<MonitorInfoEditorValues, 'payload'> = {
+  name: 'New Monitor',
+  type: monitorProviders[0].name,
+  active: true,
+  interval: 60,
+};
+
+interface MonitorInfoEditorProps {
+  initialValues?: MonitorInfoEditorValues;
+  onSave: (value: MonitorInfoEditorValues) => void;
+}
+export const MonitorInfoEditor: React.FC<MonitorInfoEditorProps> = React.memo(
+  (props) => {
+    const [form] = Form.useForm();
+    const typeValue = Form.useWatch('type', form);
+
+    const formEl = useMemo(() => {
+      const provider = monitorProviders.find((s) => s.name === typeValue);
+
+      if (!provider) {
+        return null;
+      }
+
+      const Component = provider.form;
+
+      return <Component />;
+    }, [typeValue]);
+
+    const handleSubmit = useEvent((values) => {
+      props.onSave({
+        ...values,
+        active: true,
+      });
+    });
+
+    return (
+      <div className="px-4">
+        <Form
+          preserve={false}
+          form={form}
+          layout="vertical"
+          initialValues={props.initialValues ?? defaultValues}
+          onFinish={handleSubmit}
+        >
+          <Form.Item hidden name="id" />
+
+          <Form.Item label="Monitor Type" name="type">
+            <Select>
+              {monitorProviders.map((m) => (
+                <Select.Option key={m.name} value={m.name}>
+                  {m.label}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+
+          <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+            <Input />
+          </Form.Item>
+
+          <Form.Item
+            label="Check Interval"
+            name="interval"
+            rules={[{ required: true }]}
+          >
+            <InputNumber min={5} max={10000} step={10} />
+          </Form.Item>
+
+          {formEl}
+
+          <Button type="primary" htmlType="submit">
+            Save
+          </Button>
+        </Form>
+      </div>
+    );
+  }
+);
+MonitorInfoEditor.displayName = 'MonitorInfoEditor';
diff --git a/src/client/components/MonitorList.tsx b/src/client/components/modals/monitor/MonitorList.tsx
similarity index 90%
rename from src/client/components/MonitorList.tsx
rename to src/client/components/modals/monitor/MonitorList.tsx
index b438129..8bb560e 100644
--- a/src/client/components/MonitorList.tsx
+++ b/src/client/components/modals/monitor/MonitorList.tsx
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useState } from 'react';
-import { trpc } from '../api/trpc';
-import { useCurrentWorkspaceId } from '../store/user';
-import { HealthBar } from './HealthBar';
-import { NoWorkspaceTip } from './NoWorkspaceTip';
+import { trpc } from '../../../api/trpc';
+import { useCurrentWorkspaceId } from '../../../store/user';
+import { HealthBar } from '../../HealthBar';
+import { NoWorkspaceTip } from '../../NoWorkspaceTip';
 
 export const MonitorList: React.FC = React.memo(() => {
   const currentWorkspaceId = useCurrentWorkspaceId()!;
diff --git a/src/client/components/modals/monitor/provider/index.ts b/src/client/components/modals/monitor/provider/index.ts
new file mode 100644
index 0000000..a2cf80f
--- /dev/null
+++ b/src/client/components/modals/monitor/provider/index.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import { MonitorPing } from './ping';
+
+interface MonitorProvider {
+  label: string;
+  name: string;
+  form: React.ComponentType;
+}
+
+export const monitorProviders: MonitorProvider[] = [
+  {
+    label: 'Ping',
+    name: 'ping',
+    form: MonitorPing,
+  },
+];
diff --git a/src/client/components/modals/monitor/provider/ping.tsx b/src/client/components/modals/monitor/provider/ping.tsx
new file mode 100644
index 0000000..0bf3402
--- /dev/null
+++ b/src/client/components/modals/monitor/provider/ping.tsx
@@ -0,0 +1,17 @@
+import { Form, Input } from 'antd';
+import React from 'react';
+
+export const MonitorPing: React.FC = React.memo(() => {
+  return (
+    <>
+      <Form.Item
+        label="Host"
+        name={['payload', 'hostname']}
+        rules={[{ required: true }]}
+      >
+        <Input placeholder="example.com or 1.2.3.4" />
+      </Form.Item>
+    </>
+  );
+});
+MonitorPing.displayName = 'MonitorPing';
diff --git a/src/client/pages/Layout.tsx b/src/client/pages/Layout.tsx
index 9e8f5b4..53155b1 100644
--- a/src/client/pages/Layout.tsx
+++ b/src/client/pages/Layout.tsx
@@ -28,7 +28,7 @@ export const Layout: React.FC = React.memo(() => {
           <NavItem to="/dashboard" label="Dashboard" />
           <NavItem to="/monitor" label="Monitor" />
           <NavItem to="/website" label="Website" />
-          <NavItem to="/Servers" label="Servers" />
+          <NavItem to="/servers" label="Servers" />
           <NavItem to="/settings" label="Settings" />
         </div>
 
diff --git a/src/client/pages/Monitor/Add.tsx b/src/client/pages/Monitor/Add.tsx
index 7345535..cdc78fd 100644
--- a/src/client/pages/Monitor/Add.tsx
+++ b/src/client/pages/Monitor/Add.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MonitorInfoEditor } from '../../components/MonitorInfoEditor';
+import { MonitorInfoEditor } from '../../components/modals/monitor/MonitorInfoEditor';
 import { useCurrentWorkspaceId } from '../../store/user';
 
 export const MonitorAdd: React.FC = React.memo(() => {
diff --git a/src/client/pages/Monitor/Edit.tsx b/src/client/pages/Monitor/Edit.tsx
index b066356..b239509 100644
--- a/src/client/pages/Monitor/Edit.tsx
+++ b/src/client/pages/Monitor/Edit.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router';
 import { trpc } from '../../api/trpc';
 import { ErrorTip } from '../../components/ErrorTip';
 import { Loading } from '../../components/Loading';
-import { MonitorInfoEditor } from '../../components/MonitorInfoEditor';
+import { MonitorInfoEditor } from '../../components/modals/monitor/MonitorInfoEditor';
 import { useCurrentWorkspaceId } from '../../store/user';
 
 export const MonitorEdit: React.FC = React.memo(() => {
@@ -25,7 +25,7 @@ export const MonitorEdit: React.FC = React.memo(() => {
   return (
     <div>
       <MonitorInfoEditor
-        initValue={monitor}
+        initialValues={monitor}
         onSave={(value) => {
           console.log(value);
         }}
diff --git a/src/client/pages/Monitor/index.tsx b/src/client/pages/Monitor/index.tsx
index 7910c09..7223d34 100644
--- a/src/client/pages/Monitor/index.tsx
+++ b/src/client/pages/Monitor/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Routes, useNavigate } from 'react-router';
-import { MonitorList } from '../../components/MonitorList';
+import { MonitorList } from '../../components/modals/monitor/MonitorList';
 import { MonitorAdd } from './Add';
 import { MonitorDetail } from './Detail';
 import { MonitorEdit } from './Edit';
diff --git a/src/server/model/monitor/provider/index.ts b/src/server/model/monitor/provider/index.ts
index 21e4502..902e5f0 100644
--- a/src/server/model/monitor/provider/index.ts
+++ b/src/server/model/monitor/provider/index.ts
@@ -1,6 +1,6 @@
 import { ping } from './ping';
 import type { MonitorProvider } from './type';
 
-export const monitorProviders: Record<string, MonitorProvider> = {
+export const monitorProviders: Record<string, MonitorProvider<any>> = {
   ping,
 };
diff --git a/src/server/model/monitor/provider/ping.ts b/src/server/model/monitor/provider/ping.ts
index 571dcf8..2f7da5c 100644
--- a/src/server/model/monitor/provider/ping.ts
+++ b/src/server/model/monitor/provider/ping.ts
@@ -1,13 +1,15 @@
 import { MonitorProvider } from './type';
 import pingUtils from 'ping';
 
-export const ping: MonitorProvider = {
+export const ping: MonitorProvider<{
+  hostname: string;
+}> = {
   run: async (monitor) => {
     if (typeof monitor.payload !== 'object') {
       throw new Error('monitor.payload should be object');
     }
 
-    const { hostname } = monitor.payload as any;
+    const { hostname } = monitor.payload;
 
     const res = await pingAction(hostname);
 
diff --git a/src/server/model/monitor/provider/type.ts b/src/server/model/monitor/provider/type.ts
index 26af0fc..83b6a3e 100644
--- a/src/server/model/monitor/provider/type.ts
+++ b/src/server/model/monitor/provider/type.ts
@@ -1,5 +1,6 @@
 import { Monitor } from '@prisma/client';
+import type { ExactType } from '../../../../types';
 
-export interface MonitorProvider {
-  run: (monitor: Monitor) => Promise<number>;
+export interface MonitorProvider<Payload extends Record<string, any>> {
+  run: (monitor: ExactType<Monitor, { payload: Payload }>) => Promise<number>;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 0ce5251..42b042d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1 +1,2 @@
 export * from './server';
+export * from './utils';
diff --git a/src/types/utils.ts b/src/types/utils.ts
new file mode 100644
index 0000000..b10b829
--- /dev/null
+++ b/src/types/utils.ts
@@ -0,0 +1 @@
+export type ExactType<T, U extends Partial<T>> = Omit<T, keyof U> & U;