[Feature][UI] Allows the user to choose a timeout for interface requests. (#12564)

* [Feature][UI] Allows the user to choose a timeout for interface requests.

* [Feature][UI] Allows the user to choose a timeout for interface requests.

dolphinscheduler-ui/src/locales/en_US/ui_setting.ts

@@ -19,6 +19,7 @@ export default {
   refresh_time: 'Log Auto Refresh Time',
   experimental_feature: 'Experimental Feature',
   request_settings: 'Request Settings',
-  dynamic_task_component: 'Dynamic Task Component'
+  dynamic_task_component: 'Dynamic Task Component',
+  api_timeout: 'API Timeout',
+  millisecond: 'Millisecond'
 }
-  

dolphinscheduler-ui/src/locales/zh_CN/ui_setting.ts

@@ -19,6 +19,7 @@ export default {
   refresh_time: '自动刷新时间',
   experimental_feature: '实验性功能',
   request_settings: '请求设置',
-  dynamic_task_component: '动态任务组件'
+  dynamic_task_component: '动态任务组件',
+  api_timeout: '接口超时时间',
+  millisecond: '毫秒'
 }
-  

dolphinscheduler-ui/src/service/service.ts

@@ -17,6 +17,7 @@
 
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
 import { useUserStore } from '@/store/user/user'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import qs from 'qs'
 import _ from 'lodash'
 import cookies from 'js-cookie'
@@ -24,6 +25,7 @@ import router from '@/router'
 import utils from '@/utils'
 
 const userStore = useUserStore()
+const uiSettingStore = useUISettingStore()
 
 /**
  * @description Log and display errors
@@ -43,7 +45,7 @@ const baseRequestConfig: AxiosRequestConfig = {
     import.meta.env.MODE === 'development'
       ? '/dolphinscheduler'
       : import.meta.env.VITE_APP_PROD_WEB_URL + '/dolphinscheduler',
-  timeout: 15000,
+  timeout: uiSettingStore.getApiTimer ? uiSettingStore.getApiTimer : 20000,
   transformRequest: (params) => {
     if (_.isPlainObject(params)) {
       return qs.stringify(params, { arrayFormat: 'repeat' })

dolphinscheduler-ui/src/store/ui-setting/types.ts

@@ -17,6 +17,7 @@
 interface UISettingStore {
   logTimer: number
   dynamicTask: boolean
+  apiTimer: number
 }
 
-export { UISettingStore }
+export { UISettingStore }

dolphinscheduler-ui/src/store/ui-setting/ui-setting.ts

@@ -22,7 +22,8 @@ export const useUISettingStore = defineStore({
   id: 'ui-setting',
   state: (): UISettingStore => ({
     logTimer: 0,
-    dynamicTask: false
+    dynamicTask: false,
+    apiTimer: 10000
   }),
   persist: true,
   getters: {
@@ -31,6 +32,9 @@ export const useUISettingStore = defineStore({
     },
     getDynamicTask(): boolean {
       return this.dynamicTask
+    },
+    getApiTimer(): number {
+      return this.apiTimer
     }
   },
   actions: {
@@ -39,7 +43,9 @@ export const useUISettingStore = defineStore({
     },
     setDynamicTask(): void {
       this.dynamicTask = !this.dynamicTask
+    },
+    setApiTimer(timer: number): void {
+      this.apiTimer = timer
     }
   }
 })
-

dolphinscheduler-ui/src/views/ui-setting/index.tsx

@@ -73,21 +73,46 @@ const setting = defineComponent({
     const { t } = useI18n()
 
     return (
-      <Card style={{ marginLeft: '25%', width: '50%' }} title={t('menu.ui_setting')}>
+      <Card
+        style={{ marginLeft: '25%', width: '50%' }}
+        title={t('menu.ui_setting')}
+      >
         <h4>{t('ui_setting.request_settings')}</h4>
-        <NSpace align='center' justify='space-between'>
+        <NSpace vertical>
-          <span>{t('ui_setting.refresh_time')}</span>
+          <NSpace align='center' justify='space-between'>
-          <NSelect
+            <span>{t('ui_setting.api_timeout')}</span>
-            style={{ width: '200px' }}
+            <NSelect
-            default-value={this.logTimerMap[this.uiSettingStore.getLogTimer]}
+              style={{ width: '200px' }}
-            options={this.logTimerOptions}
+              default-value={this.uiSettingStore.getApiTimer}
-            onUpdateValue={handleUpdateValue}
+              options={[
-          />
+                { label: '10000 ' + t('ui_setting.millisecond'), value: 10000 },
+                { label: '20000 ' + t('ui_setting.millisecond'), value: 20000 },
+                { label: '30000 ' + t('ui_setting.millisecond'), value: 30000 },
+                { label: '40000 ' + t('ui_setting.millisecond'), value: 40000 },
+                { label: '50000 ' + t('ui_setting.millisecond'), value: 50000 },
+                { label: '60000 ' + t('ui_setting.millisecond'), value: 60000 }
+              ]}
+              onUpdateValue={(t) => this.uiSettingStore.setApiTimer(t)}
+            />
+          </NSpace>
+          <NSpace align='center' justify='space-between'>
+            <span>{t('ui_setting.refresh_time')}</span>
+            <NSelect
+              style={{ width: '200px' }}
+              default-value={this.logTimerMap[this.uiSettingStore.getLogTimer]}
+              options={this.logTimerOptions}
+              onUpdateValue={handleUpdateValue}
+            />
+          </NSpace>
         </NSpace>
         <h4>{t('ui_setting.experimental_feature')}</h4>
         <NSpace align='center' justify='space-between'>
           <span>{t('ui_setting.dynamic_task_component')}</span>
-          <NSwitch round={false} defaultValue={this.uiSettingStore.getDynamicTask} onUpdateValue={() => this.uiSettingStore.setDynamicTask()}></NSwitch>
+          <NSwitch
+            round={false}
+            defaultValue={this.uiSettingStore.getDynamicTask}
+            onUpdateValue={() => this.uiSettingStore.setDynamicTask()}
+          ></NSwitch>
         </NSpace>
       </Card>
     )