refactor: workflow monitor(aka inspect) node

ui/src/components/workflow/node/AddNode.tsx

@@ -3,11 +3,11 @@ import { useTranslation } from "react-i18next";
 import {
   CloudUploadOutlined as CloudUploadOutlinedIcon,
   DeploymentUnitOutlined as DeploymentUnitOutlinedIcon,
+  MonitorOutlined as MonitorOutlinedIcon,
   PlusOutlined as PlusOutlinedIcon,
   SendOutlined as SendOutlinedIcon,
   SisternodeOutlined as SisternodeOutlinedIcon,
   SolutionOutlined as SolutionOutlinedIcon,
-  MonitorOutlined as MonitorOutlinedIcon,
 } from "@ant-design/icons";
 import { Dropdown } from "antd";
 
@@ -28,7 +28,7 @@ const AddNode = ({ node, disabled }: AddNodeProps) => {
     return [
       [WorkflowNodeType.Apply, "workflow_node.apply.label", <SolutionOutlinedIcon />],
       [WorkflowNodeType.Upload, "workflow_node.upload.label", <CloudUploadOutlinedIcon />],
-      [WorkflowNodeType.Inspect, "workflow_node.inspect.label", <MonitorOutlinedIcon />],
+      [WorkflowNodeType.Monitor, "workflow_node.monitor.label", <MonitorOutlinedIcon />],
       [WorkflowNodeType.Deploy, "workflow_node.deploy.label", <DeploymentUnitOutlinedIcon />],
       [WorkflowNodeType.Notify, "workflow_node.notify.label", <SendOutlinedIcon />],
       [WorkflowNodeType.Branch, "workflow_node.branch.label", <SisternodeOutlinedIcon />],

ui/src/components/workflow/node/ConditionNode.tsx

@@ -1,14 +1,17 @@
 import { memo, useRef, useState } from "react";
 import { MoreOutlined as MoreOutlinedIcon } from "@ant-design/icons";
 import { Button, Card, Popover } from "antd";
+import { produce } from "immer";
+
+import type { Expr, WorkflowNodeIoValueType } from "@/domain/workflow";
+import { ExprType } from "@/domain/workflow";
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
 
 import SharedNode, { type SharedNodeProps } from "./_SharedNode";
 import AddNode from "./AddNode";
-import ConditionNodeConfigForm, { ConditionItem, ConditionNodeConfigFormFieldValues, ConditionNodeConfigFormInstance } from "./ConditionNodeConfigForm";
-import { Expr, WorkflowNodeIoValueType, ExprType } from "@/domain/workflow";
-import { produce } from "immer";
-import { useWorkflowStore } from "@/stores/workflow";
-import { useZustandShallowSelector } from "@/hooks";
+import type { ConditionItem, ConditionNodeConfigFormFieldValues, ConditionNodeConfigFormInstance } from "./ConditionNodeConfigForm";
+import ConditionNodeConfigForm from "./ConditionNodeConfigForm";
 
 export type ConditionNodeProps = SharedNodeProps & {
   branchId: string;

ui/src/components/workflow/node/DeployNode.tsx

@@ -46,7 +46,7 @@ const DeployNode = ({ node, disabled }: DeployNodeProps) => {
     const provider = deploymentProvidersMap.get(config.provider);
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="flex-1 truncate">{t(provider?.name ?? "")}</Typography.Text>
       </Flex>
     );

ui/src/components/workflow/node/InspectNodeConfigForm.tsx

@@ -1,97 +0,0 @@
-import { forwardRef, memo, useImperativeHandle } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, type FormInstance, Input } from "antd";
-import { createSchemaFieldRule } from "antd-zod";
-import { z } from "zod";
-
-import { type WorkflowNodeConfigForInspect } from "@/domain/workflow";
-import { useAntdForm } from "@/hooks";
-
-import { validDomainName, validIPv4Address, validPortNumber } from "@/utils/validators";
-
-type InspectNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForInspect>;
-
-export type InspectNodeConfigFormProps = {
-  className?: string;
-  style?: React.CSSProperties;
-  disabled?: boolean;
-  initialValues?: InspectNodeConfigFormFieldValues;
-  onValuesChange?: (values: InspectNodeConfigFormFieldValues) => void;
-};
-
-export type InspectNodeConfigFormInstance = {
-  getFieldsValue: () => ReturnType<FormInstance<InspectNodeConfigFormFieldValues>["getFieldsValue"]>;
-  resetFields: FormInstance<InspectNodeConfigFormFieldValues>["resetFields"];
-  validateFields: FormInstance<InspectNodeConfigFormFieldValues>["validateFields"];
-};
-
-const initFormModel = (): InspectNodeConfigFormFieldValues => {
-  return {
-    domain: "",
-    port: "443",
-    path: "",
-    host: "",
-  };
-};
-
-const InspectNodeConfigForm = forwardRef<InspectNodeConfigFormInstance, InspectNodeConfigFormProps>(
-  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
-    const { t } = useTranslation();
-
-    const formSchema = z.object({
-      host: z.string().refine((val) => validIPv4Address(val) || validDomainName(val), {
-        message: t("workflow_node.inspect.form.host.placeholder"),
-      }),
-      domain: z.string().optional(),
-      port: z.string().refine((val) => validPortNumber(val), {
-        message: t("workflow_node.inspect.form.port.placeholder"),
-      }),
-      path: z.string().optional(),
-    });
-    const formRule = createSchemaFieldRule(formSchema);
-    const { form: formInst, formProps } = useAntdForm({
-      name: "workflowNodeInspectConfigForm",
-      initialValues: initialValues ?? initFormModel(),
-    });
-
-    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
-      onValuesChange?.(values as InspectNodeConfigFormFieldValues);
-    };
-
-    useImperativeHandle(ref, () => {
-      return {
-        getFieldsValue: () => {
-          return formInst.getFieldsValue(true);
-        },
-        resetFields: (fields) => {
-          return formInst.resetFields(fields as (keyof InspectNodeConfigFormFieldValues)[]);
-        },
-        validateFields: (nameList, config) => {
-          return formInst.validateFields(nameList, config);
-        },
-      } as InspectNodeConfigFormInstance;
-    });
-
-    return (
-      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
-        <Form.Item name="host" label={t("workflow_node.inspect.form.host.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.host.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="port" label={t("workflow_node.inspect.form.port.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.port.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="domain" label={t("workflow_node.inspect.form.domain.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.domain.placeholder")} />
-        </Form.Item>
-
-        <Form.Item name="path" label={t("workflow_node.inspect.form.path.label")} rules={[formRule]}>
-          <Input variant="filled" placeholder={t("workflow_node.inspect.form.path.placeholder")} />
-        </Form.Item>
-      </Form>
-    );
-  }
-);
-
-export default memo(InspectNodeConfigForm);

ui/src/components/workflow/node/MonitorNode.tsx

@@ -3,43 +3,43 @@ import { useTranslation } from "react-i18next";
 import { Flex, Typography } from "antd";
 import { produce } from "immer";
 
-import { type WorkflowNodeConfigForInspect, WorkflowNodeType } from "@/domain/workflow";
+import { type WorkflowNodeConfigForMonitor, WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 
 import SharedNode, { type SharedNodeProps } from "./_SharedNode";
-import InspectNodeConfigForm, { type InspectNodeConfigFormInstance } from "./InspectNodeConfigForm";
+import MonitorNodeConfigForm, { type MonitorNodeConfigFormInstance } from "./MonitorNodeConfigForm";
 
-export type InspectNodeProps = SharedNodeProps;
+export type MonitorNodeProps = SharedNodeProps;
 
-const InspectNode = ({ node, disabled }: InspectNodeProps) => {
-  if (node.type !== WorkflowNodeType.Inspect) {
-    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Inspect}`);
+const MonitorNode = ({ node, disabled }: MonitorNodeProps) => {
+  if (node.type !== WorkflowNodeType.Monitor) {
+    console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Monitor}`);
   }
 
   const { t } = useTranslation();
 
   const { updateNode } = useWorkflowStore(useZustandShallowSelector(["updateNode"]));
 
-  const formRef = useRef<InspectNodeConfigFormInstance>(null);
+  const formRef = useRef<MonitorNodeConfigFormInstance>(null);
   const [formPending, setFormPending] = useState(false);
 
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForInspect;
+  const getFormValues = () => formRef.current!.getFieldsValue() as WorkflowNodeConfigForMonitor;
 
   const wrappedEl = useMemo(() => {
-    if (node.type !== WorkflowNodeType.Inspect) {
-      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Inspect}`);
+    if (node.type !== WorkflowNodeType.Monitor) {
+      console.warn(`[certimate] current workflow node type is not: ${WorkflowNodeType.Monitor}`);
     }
 
     if (!node.validated) {
       return <Typography.Link>{t("workflow_node.action.configure_node")}</Typography.Link>;
     }
 
-    const config = (node.config as WorkflowNodeConfigForInspect) ?? {};
+    const config = (node.config as WorkflowNodeConfigForMonitor) ?? {};
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Typography.Text className="truncate">{config.host ?? ""}</Typography.Text>
+        <Typography.Text className="truncate">{config.domain || config.host || ""}</Typography.Text>
       </Flex>
     );
   }, [node]);
@@ -81,10 +81,10 @@ const InspectNode = ({ node, disabled }: InspectNodeProps) => {
         onOpenChange={(open) => setDrawerOpen(open)}
         getFormValues={() => formRef.current!.getFieldsValue()}
       >
-        <InspectNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
+        <MonitorNodeConfigForm ref={formRef} disabled={disabled} initialValues={node.config} />
       </SharedNode.ConfigDrawer>
     </>
   );
 };
 
-export default memo(InspectNode);
+export default memo(MonitorNode);

ui/src/components/workflow/node/MonitorNodeConfigForm.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, memo, useImperativeHandle } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, Form, type FormInstance, Input, InputNumber } from "antd";
+import { createSchemaFieldRule } from "antd-zod";
+import { z } from "zod";
+
+import { type WorkflowNodeConfigForMonitor } from "@/domain/workflow";
+import { useAntdForm } from "@/hooks";
+import { validDomainName, validIPv4Address, validIPv6Address, validPortNumber } from "@/utils/validators";
+
+type MonitorNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForMonitor>;
+
+export type MonitorNodeConfigFormProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  initialValues?: MonitorNodeConfigFormFieldValues;
+  onValuesChange?: (values: MonitorNodeConfigFormFieldValues) => void;
+};
+
+export type MonitorNodeConfigFormInstance = {
+  getFieldsValue: () => ReturnType<FormInstance<MonitorNodeConfigFormFieldValues>["getFieldsValue"]>;
+  resetFields: FormInstance<MonitorNodeConfigFormFieldValues>["resetFields"];
+  validateFields: FormInstance<MonitorNodeConfigFormFieldValues>["validateFields"];
+};
+
+const initFormModel = (): MonitorNodeConfigFormFieldValues => {
+  return {
+    host: "",
+    port: 443,
+    requestPath: "/",
+  };
+};
+
+const MonitorNodeConfigForm = forwardRef<MonitorNodeConfigFormInstance, MonitorNodeConfigFormProps>(
+  ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
+    const { t } = useTranslation();
+
+    const formSchema = z.object({
+      host: z.string().refine((v) => {
+        return validDomainName(v) || validIPv4Address(v) || validIPv6Address(v);
+      }, t("common.errmsg.host_invalid")),
+      port: z.preprocess(
+        (v) => Number(v),
+        z
+          .number()
+          .int(t("workflow_node.monitor.form.port.placeholder"))
+          .refine((v) => validPortNumber(v), t("common.errmsg.port_invalid"))
+      ),
+      domain: z
+        .string()
+        .nullish()
+        .refine((v) => {
+          if (!v) return true;
+          return validDomainName(v);
+        }, t("common.errmsg.domain_invalid")),
+      requestPath: z.string().nullish(),
+    });
+    const formRule = createSchemaFieldRule(formSchema);
+    const { form: formInst, formProps } = useAntdForm({
+      name: "workflowNodeMonitorConfigForm",
+      initialValues: initialValues ?? initFormModel(),
+    });
+
+    const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
+      onValuesChange?.(values as MonitorNodeConfigFormFieldValues);
+    };
+
+    useImperativeHandle(ref, () => {
+      return {
+        getFieldsValue: () => {
+          return formInst.getFieldsValue(true);
+        },
+        resetFields: (fields) => {
+          return formInst.resetFields(fields as (keyof MonitorNodeConfigFormFieldValues)[]);
+        },
+        validateFields: (nameList, config) => {
+          return formInst.validateFields(nameList, config);
+        },
+      } as MonitorNodeConfigFormInstance;
+    });
+
+    return (
+      <Form className={className} style={style} {...formProps} disabled={disabled} layout="vertical" scrollToFirstError onValuesChange={handleFormChange}>
+        <Form.Item>
+          <Alert type="info" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_node.monitor.form.guide") }}></span>} />
+        </Form.Item>
+
+        <div className="flex space-x-2">
+          <div className="w-2/3">
+            <Form.Item name="host" label={t("workflow_node.monitor.form.host.label")} rules={[formRule]}>
+              <Input placeholder={t("workflow_node.monitor.form.host.placeholder")} />
+            </Form.Item>
+          </div>
+
+          <div className="w-1/3">
+            <Form.Item name="port" label={t("workflow_node.monitor.form.port.label")} rules={[formRule]}>
+              <InputNumber className="w-full" min={1} max={65535} placeholder={t("workflow_node.monitor.form.port.placeholder")} />
+            </Form.Item>
+          </div>
+        </div>
+
+        <Form.Item name="domain" label={t("workflow_node.monitor.form.domain.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.monitor.form.domain.placeholder")} />
+        </Form.Item>
+
+        <Form.Item name="requestPath" label={t("workflow_node.monitor.form.request_path.label")} rules={[formRule]}>
+          <Input placeholder={t("workflow_node.monitor.form.request_path.placeholder")} />
+        </Form.Item>
+      </Form>
+    );
+  }
+);
+
+export default memo(MonitorNodeConfigForm);

ui/src/components/workflow/node/NotifyNode.tsx

@@ -43,7 +43,7 @@ const NotifyNode = ({ node, disabled }: NotifyNodeProps) => {
     const provider = notificationProvidersMap.get(config.provider);
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Avatar src={provider?.icon} size="small" />
+        <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text className="flex-1 truncate">{t(channel?.name ?? provider?.name ?? "　")}</Typography.Text>
         <Typography.Text className="truncate" type="secondary">
           {config.subject ?? ""}

ui/src/components/workflow/node/UnknownNode.tsx

@@ -0,0 +1,45 @@
+import { memo } from "react";
+import { CloseCircleOutlined as CloseCircleOutlinedIcon } from "@ant-design/icons";
+import { Alert, Button, Card } from "antd";
+
+import { useZustandShallowSelector } from "@/hooks";
+import { useWorkflowStore } from "@/stores/workflow";
+
+import { type SharedNodeProps } from "./_SharedNode";
+import AddNode from "./AddNode";
+
+export type MonitorNodeProps = SharedNodeProps;
+
+const UnknownNode = ({ node, disabled }: MonitorNodeProps) => {
+  const { removeNode } = useWorkflowStore(useZustandShallowSelector(["removeNode"]));
+
+  const handleClickRemove = () => {
+    removeNode(node.id);
+  };
+
+  return (
+    <>
+      <Card className="relative w-[256px] overflow-hidden shadow-md" styles={{ body: { padding: 0 } }} hoverable variant="borderless">
+        <div className="cursor-pointer ">
+          <Alert
+            type="error"
+            message={
+              <div className="flex items-center justify-between gap-4 overflow-hidden">
+                <div className="flex-1 text-center text-xs">
+                  INVALID NODE
+                  <br />
+                  PLEASE REMOVE
+                </div>
+                <Button color="primary" icon={<CloseCircleOutlinedIcon />} variant="text" onClick={handleClickRemove} />
+              </div>
+            }
+          />
+        </div>
+      </Card>
+
+      <AddNode node={node} disabled={disabled} />
+    </>
+  );
+};
+
+export default memo(UnknownNode);