feat: add create api for monitor

src/client/api/model/monitor.ts

@@ -0,0 +1,17 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { getQueryKey } from '@trpc/react-query';
+import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../trpc';
+
+export function useMonitorUpsert() {
+  const queryClient = useQueryClient();
+  const mutation = trpc.monitor.upsert.useMutation({
+    onSuccess: (data) => {
+      queryClient.resetQueries(getQueryKey(trpc.monitor.all));
+
+      defaultSuccessHandler();
+    },
+    onError: defaultErrorHandler,
+  });
+
+  return mutation;
+}

src/client/api/trpc.ts

@@ -29,7 +29,7 @@ export const trpcClient = trpc.createClient({
  *   onSuccess: defaultSuccessHandler,
  * });
  */
-export function defaultSuccessHandler(data: any) {
+export function defaultSuccessHandler() {
   message.success('Operate Success');
 }
 

src/client/components/modals/NotificationInfo/strategies/smtp.tsx

@@ -28,7 +28,7 @@ export const NotificationSMTP: React.FC = React.memo(() => {
           <Select.Option value={true}>TLS (465)</Select.Option>
         </Select>
       </Form.Item>
-      <Form.Item name={['payload', 'ignoreTLS']}>
+      <Form.Item name={['payload', 'ignoreTLS']} valuePropName="checked">
         <Checkbox>Ignore TLS Error</Checkbox>
       </Form.Item>
       <Form.Item

src/client/components/modals/monitor/MonitorInfoEditor.tsx

@@ -4,11 +4,12 @@ import { Button, Form, Input, InputNumber, Select } from 'antd';
 import { monitorProviders } from './provider';
 import { useEvent } from '../../../hooks/useEvent';
 
-type MonitorInfoEditorValues = Omit<
+export type MonitorInfoEditorValues = Omit<
   Monitor,
   'id' | 'workspaceId' | 'createdAt'
 > & {
   id?: string;
+  payload: Record<string, any>;
 };
 
 const defaultValues: Omit<MonitorInfoEditorValues, 'payload'> = {

src/client/pages/Monitor/Add.tsx

@@ -1,15 +1,23 @@
 import React from 'react';
+import { useNavigate } from 'react-router';
+import { useMonitorUpsert } from '../../api/model/monitor';
 import { MonitorInfoEditor } from '../../components/modals/monitor/MonitorInfoEditor';
 import { useCurrentWorkspaceId } from '../../store/user';
 
 export const MonitorAdd: React.FC = React.memo(() => {
-  const currentWorkspaceId = useCurrentWorkspaceId();
+  const currentWorkspaceId = useCurrentWorkspaceId()!;
+  const mutation = useMonitorUpsert();
+  const navigate = useNavigate();
 
   return (
     <div>
       <MonitorInfoEditor
-        onSave={(value) => {
-          // console.log(value);
+        onSave={async (value) => {
+          await mutation.mutateAsync({
+            ...value,
+            workspaceId: currentWorkspaceId,
+          });
+          navigate('/monitor', { replace: true });
         }}
       />
     </div>

src/client/pages/Monitor/Edit.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import { useParams } from 'react-router';
+import { useNavigate, useParams } from 'react-router';
+import { useMonitorUpsert } from '../../api/model/monitor';
 import { trpc } from '../../api/trpc';
 import { ErrorTip } from '../../components/ErrorTip';
 import { Loading } from '../../components/Loading';
-import { MonitorInfoEditor } from '../../components/modals/monitor/MonitorInfoEditor';
+import {
+  MonitorInfoEditor,
+  MonitorInfoEditorValues,
+} from '../../components/modals/monitor/MonitorInfoEditor';
 import { useCurrentWorkspaceId } from '../../store/user';
 
 export const MonitorEdit: React.FC = React.memo(() => {
@@ -11,8 +15,10 @@ export const MonitorEdit: React.FC = React.memo(() => {
   const currentWorkspaceId = useCurrentWorkspaceId();
   const { data: monitor, isLoading } = trpc.monitor.get.useQuery({
     id: monitorId!,
-    workspaceId: currentWorkspaceId!,
+    workspaceId: currentWorkspaceId,
   });
+  const mutation = useMonitorUpsert();
+  const navigate = useNavigate();
 
   if (isLoading) {
     return <Loading />;
@@ -25,9 +31,13 @@ export const MonitorEdit: React.FC = React.memo(() => {
   return (
     <div>
       <MonitorInfoEditor
-        initialValues={monitor}
-        onSave={(value) => {
-          console.log(value);
+        initialValues={monitor as MonitorInfoEditorValues}
+        onSave={async (value) => {
+          await mutation.mutateAsync({
+            ...value,
+            workspaceId: currentWorkspaceId,
+          });
+          navigate('/monitor', { replace: true });
         }}
       />
     </div>

src/client/store/user.ts

@@ -32,5 +32,9 @@ export function useCurrentWorkspaceId() {
     (state) => state.info?.currentWorkspace?.id
   );
 
+  if (!currentWorkspaceId) {
+    throw new Error('No Workspace Id');
+  }
+
   return currentWorkspaceId;
 }

src/server/model/monitor/index.ts

@@ -107,11 +107,17 @@ class MonitorRunner {
 
       this.timer = setTimeout(() => {
         run();
-      }, interval);
+      }, interval * 1000);
     };
 
     async function run() {
-      const value = await provider.run(monitor);
+      let value = 0;
+      try {
+        value = await provider.run(monitor);
+      } catch (err) {
+        console.error(err);
+        value = -1;
+      }
 
       // check event update
       if (value < 0 && currentStatus === 'UP') {

src/server/model/monitor/provider/ping.ts

@@ -1,5 +1,6 @@
 import { MonitorProvider } from './type';
 import pingUtils from 'ping';
+import os from 'os';
 
 export const ping: MonitorProvider<{
   hostname: string;
@@ -22,13 +23,14 @@ export const ping: MonitorProvider<{
 };
 
 const isWindows = /^win/.test(process.platform);
+const deadline = ['linux', 'darwin'].includes(os.platform()) ? 10 : undefined;
 
 function pingAction(hostname: string, packetSize = 56) {
   return new Promise<number | 'unknown'>((resolve, reject) => {
     pingUtils.promise
       .probe(hostname, {
         min_reply: 1,
-        deadline: 10,
+        deadline,
         packetSize,
       })
       .then((res) => {