feat: add monitor validator

src/client/components/monitor/provider/http.tsx

@@ -6,6 +6,7 @@ import { MonitorStatsBlock } from '../MonitorStatsBlock';
 import dayjs from 'dayjs';
 import { isEmpty } from 'lodash-es';
 import { useCurrentWorkspaceId } from '../../../store/user';
+import { z } from 'zod';
 
 const MonitorHttp: React.FC = React.memo(() => {
   return (
@@ -13,7 +14,19 @@ const MonitorHttp: React.FC = React.memo(() => {
       <Form.Item
         label="Url"
         name={['payload', 'url']}
-        rules={[{ required: true }]}
+        rules={[
+          { required: true },
+          {
+            validator(rule, value, callback) {
+              try {
+                z.string().url().parse(value);
+                callback();
+              } catch (err) {
+                callback('Not valid http url');
+              }
+            },
+          },
+        ]}
       >
         <Input placeholder="https://example.com" />
       </Form.Item>

src/client/components/monitor/provider/ping.tsx

@@ -1,6 +1,8 @@
 import { Form, Input } from 'antd';
 import React from 'react';
 import { MonitorProvider } from './types';
+import { z } from 'zod';
+import { hostnameRegex } from '../../../../shared';
 
 export const MonitorPing: React.FC = React.memo(() => {
   return (
@@ -8,7 +10,22 @@ export const MonitorPing: React.FC = React.memo(() => {
       <Form.Item
         label="Host"
         name={['payload', 'hostname']}
-        rules={[{ required: true }]}
+        rules={[
+          { required: true },
+          {
+            validator(rule, value, callback) {
+              try {
+                z.union([
+                  z.string().ip(),
+                  z.string().regex(hostnameRegex),
+                ]).parse(value);
+                callback();
+              } catch (err) {
+                callback('Not valid host, it should be ip or hostname');
+              }
+            },
+          },
+        ]}
       >
         <Input placeholder="example.com or 1.2.3.4" />
       </Form.Item>

src/server/trpc/routers/website.ts

@@ -12,12 +12,12 @@ import {
   FILTER_COLUMNS,
   OPENAPI_TAG,
   SESSION_COLUMNS,
-  hostnameRegex,
 } from '../../utils/const';
 import { parseDateRange } from '../../utils/common';
 import { getSessionMetrics, getPageviewMetrics } from '../../model/website';
 import { websiteInfoSchema } from '../../model/_schema';
 import { OpenApiMeta } from 'trpc-openapi';
+import { hostnameRegex } from '../../../shared';
 
 export const websiteRouter = router({
   onlineCount: workspaceProcedure

src/server/utils/const.ts

@@ -120,6 +120,3 @@ export enum OPENAPI_TAG {
   WEBSITE = 'Website',
   MONITOR = 'Monitor',
 }
-
-export const hostnameRegex =
-  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/gim;

src/shared/index.ts

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './server';
+export * from './regex';

src/shared/regex.ts

@@ -0,0 +1,2 @@
+export const hostnameRegex =
+  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/;