feat: add support for request timeout settings in the HTTP request node. (#3854)

Co-authored-by: Yeuoly <admin@srmxy.cn>

web/app/components/workflow/nodes/http/components/timeout/index.tsx

@@ -0,0 +1,101 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import type { Timeout as TimeoutPayloadType } from '../../types'
+import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+
+type Props = {
+  readonly: boolean
+  nodeId: string
+  payload: TimeoutPayloadType
+  onChange: (payload: TimeoutPayloadType) => void
+}
+
+const i18nPrefix = 'workflow.nodes.http'
+
+const InputField: FC<{
+  title: string
+  description: string
+  placeholder: string
+  value?: number
+  onChange: (value: number) => void
+  readOnly?: boolean
+  min: number
+  max: number
+}> = ({ title, description, placeholder, value, onChange, readOnly, min, max }) => {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center h-[18px] space-x-2">
+        <span className="text-[13px] font-medium text-gray-900">{title}</span>
+        <span className="text-xs font-normal text-gray-500">{description}</span>
+      </div>
+      <input className="w-full px-3 text-sm leading-9 text-gray-900 border-0 rounded-lg grow h-9 bg-gray-100 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" value={value} onChange={(e) => {
+        const value = Math.max(min, Math.min(max, parseInt(e.target.value, 10)))
+        onChange(value)
+      }} placeholder={placeholder} type='number' readOnly={readOnly} min={min} max={max} />
+    </div>
+  )
+}
+
+const Timeout: FC<Props> = ({ readonly, payload, onChange }) => {
+  const { t } = useTranslation()
+  const { connect, read, write, max_connect_timeout, max_read_timeout, max_write_timeout } = payload ?? {}
+
+  const [isFold, {
+    toggle: toggleFold,
+  }] = useBoolean(true)
+
+  return (
+    <>
+      <div>
+        <div
+          onClick={toggleFold}
+          className={cn('flex justify-between leading-[18px] text-[13px] font-semibold text-gray-700 uppercase cursor-pointer')}>
+          <div>{t(`${i18nPrefix}.timeout.title`)}</div>
+          <ChevronRight className='w-4 h-4 text-gray-500 transform transition-transform' style={{ transform: isFold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
+        </div>
+        {!isFold && (
+          <div className='mt-2 space-y-1'>
+            <div className="space-y-3">
+              <InputField
+                title={t('workflow.nodes.http.timeout.connectLabel')!}
+                description={t('workflow.nodes.http.timeout.connectPlaceholder')!}
+                placeholder={t('workflow.nodes.http.timeout.connectPlaceholder')!}
+                readOnly={readonly}
+                value={connect}
+                onChange={v => onChange?.({ ...payload, connect: v })}
+                min={1}
+                max={max_connect_timeout ?? 300}
+              />
+              <InputField
+                title={t('workflow.nodes.http.timeout.readLabel')!}
+                description={t('workflow.nodes.http.timeout.readPlaceholder')!}
+                placeholder={t('workflow.nodes.http.timeout.readPlaceholder')!}
+                readOnly={readonly}
+                value={read}
+                onChange={v => onChange?.({ ...payload, read: v })}
+                min={1}
+                max={max_read_timeout ?? 600}
+              />
+              <InputField
+                title={t('workflow.nodes.http.timeout.writeLabel')!}
+                description={t('workflow.nodes.http.timeout.writePlaceholder')!}
+                placeholder={t('workflow.nodes.http.timeout.writePlaceholder')!}
+                readOnly={readonly}
+                value={write}
+                onChange={v => onChange?.({ ...payload, write: v })}
+                min={1}
+                max={max_write_timeout ?? 600}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+    </>
+  )
+}
+export default React.memo(Timeout)

web/app/components/workflow/nodes/http/default.ts

@@ -18,6 +18,11 @@ const nodeDefault: NodeDefault<HttpNodeType> = {
       type: BodyType.none,
       data: '',
     },
+    timeout: {
+      max_connect_timeout: 0,
+      max_read_timeout: 0,
+      max_write_timeout: 0,
+    },
   },
   getAvailablePrevNodes(isChatMode: boolean) {
     const nodes = isChatMode

web/app/components/workflow/nodes/http/panel.tsx

@@ -8,6 +8,7 @@ import KeyValue from './components/key-value'
 import EditBody from './components/edit-body'
 import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
+import Timeout from './components/timeout'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
@@ -40,6 +41,7 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
     showAuthorization,
     hideAuthorization,
     setAuthorization,
+    setTimeout,
     // single run
     isShowSingleRun,
     hideSingleRun,
@@ -112,6 +114,15 @@ const Panel: FC<NodePanelProps<HttpNodeType>> = ({
           />
         </Field>
       </div>
+      <Split />
+      <div className='px-4 pt-4 pb-4'>
+        <Timeout
+          nodeId={id}
+          readonly={readOnly}
+          payload={inputs.timeout}
+          onChange={setTimeout}
+        />
+      </div>
       {(isShowAuthorization && !readOnly) && (
         <AuthorizationModal
           isShow

web/app/components/workflow/nodes/http/types.ts

@@ -48,6 +48,15 @@ export type Authorization = {
   } | null
 }
 
+export type Timeout = {
+  connect?: number
+  read?: number
+  write?: number
+  max_connect_timeout?: number
+  max_read_timeout?: number
+  max_write_timeout?: number
+}
+
 export type HttpNodeType = CommonNodeType & {
   variables: Variable[]
   method: Method
@@ -56,4 +65,5 @@ export type HttpNodeType = CommonNodeType & {
   params: string
   body: Body
   authorization: Authorization
+  timeout: Timeout
 }

web/app/components/workflow/nodes/http/use-config.ts

@@ -1,10 +1,11 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import produce from 'immer'
 import { useBoolean } from 'ahooks'
 import useVarList from '../_base/hooks/use-var-list'
 import { VarType } from '../../types'
 import type { Var } from '../../types'
-import type { Authorization, Body, HttpNodeType, Method } from './types'
+import { useStore } from '../../store'
+import type { Authorization, Body, HttpNodeType, Method, Timeout } from './types'
 import useKeyValueList from './hooks/use-key-value-list'
 import useNodeCrud from '@/app/components/workflow/nodes/_base/hooks/use-node-crud'
 import useOneStepRun from '@/app/components/workflow/nodes/_base/hooks/use-one-step-run'
@@ -14,6 +15,9 @@ import {
 
 const useConfig = (id: string, payload: HttpNodeType) => {
   const { nodesReadOnly: readOnly } = useNodesReadOnly()
+
+  const defaultConfig = useStore(s => s.nodesDefaultConfigs)[payload.type]
+
   const { inputs, setInputs } = useNodeCrud<HttpNodeType>(id, payload)
 
   const { handleVarListChange, handleAddVariable } = useVarList<HttpNodeType>({
@@ -21,6 +25,17 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs,
   })
 
+  useEffect(() => {
+    const isReady = defaultConfig && Object.keys(defaultConfig).length > 0
+    if (isReady) {
+      setInputs({
+        ...inputs,
+        ...defaultConfig,
+      })
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultConfig])
+
   const handleMethodChange = useCallback((method: Method) => {
     const newInputs = produce(inputs, (draft: HttpNodeType) => {
       draft.method = method
@@ -80,6 +95,13 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const setTimeout = useCallback((timeout: Timeout) => {
+    const newInputs = produce(inputs, (draft: HttpNodeType) => {
+      draft.timeout = timeout
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   const filterVar = useCallback((varPayload: Var) => {
     return [VarType.string, VarType.number].includes(varPayload.type)
   }, [])
@@ -148,6 +170,7 @@ const useConfig = (id: string, payload: HttpNodeType) => {
     showAuthorization,
     hideAuthorization,
     setAuthorization,
+    setTimeout,
     // single run
     isShowSingleRun,
     hideSingleRun,