[Feature][UI] Interface settings add switches for experimental features. (#12537)

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

@@ -16,8 +16,9 @@
  */
 
 export default {
-    log: {
-      refresh_time: 'Log Auto Refresh Time',
-    }
-  }
+  refresh_time: 'Log Auto Refresh Time',
+  experimental_feature: 'Experimental Feature',
+  request_settings: 'Request Settings',
+  dynamic_task_component: 'Dynamic Task Component'
+}
   

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

@@ -16,8 +16,9 @@
  */
 
 export default {
-    log: {
-      refresh_time: '自动刷新时间',
-    }
-  }
+  refresh_time: '自动刷新时间',
+  experimental_feature: '实验性功能',
+  request_settings: '请求设置',
+  dynamic_task_component: '动态任务组件'
+}
   

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

@@ -14,8 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-interface LogTimerStore {
+interface UISettingStore {
   logTimer: number
 }
 
-export { LogTimerStore }
+export { UISettingStore }

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

@@ -16,11 +16,11 @@
  */
 
 import { defineStore } from 'pinia'
-import { LogTimerStore } from './types'
+import { UISettingStore } from './types'
 
-export const useLogTimerStore = defineStore({
-  id: 'logTimer',
-  state: (): LogTimerStore => ({
+export const useUISettingStore = defineStore({
+  id: 'ui-setting',
+  state: (): UISettingStore => ({
     logTimer: 0,
   }),
   persist: true,

dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

@@ -38,15 +38,15 @@ import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
 import { queryLog } from '@/service/modules/log'
 import { stateType } from '@/common/common'
-import { useLogTimerStore } from '@/store/logTimer/logTimer'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import LogModal from '@/components/log-modal'
 
 const BatchTaskInstance = defineComponent({
   name: 'task-instance',
   setup() {
-    const logTimerStore = useLogTimerStore()
-    const logTimer = logTimerStore.getLogTimer
+    const uiSettingStore = useUISettingStore()
+    const logTimer = uiSettingStore.getLogTimer
     const { t, variables, getTableData, createColumns } = useTable()
 
     const requestTableData = () => {

dolphinscheduler-ui/src/views/projects/task/instance/stream-task.tsx

@@ -39,7 +39,7 @@ import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
 import { queryLog } from '@/service/modules/log'
 import { streamStateType } from '@/common/common'
-import { useLogTimerStore } from '@/store/logTimer/logTimer'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 import LogModal from '@/components/log-modal'
 
@@ -47,8 +47,8 @@ const BatchTaskInstance = defineComponent({
   name: 'task-instance',
   setup() {
     let setIntervalP: number
-    const logTimerStore = useLogTimerStore()
-    const logTimer = logTimerStore.getLogTimer
+    const uiSettingStore = useUISettingStore()
+    const logTimer = uiSettingStore.getLogTimer
     const { t, variables, getTableData, createColumns } = useTable()
 
     const onUpdatePageSize = () => {

dolphinscheduler-ui/src/views/projects/workflow/components/dag/index.tsx

@@ -54,7 +54,7 @@ import './x6-style.scss'
 import { queryLog } from '@/service/modules/log'
 import { useAsyncState } from '@vueuse/core'
 import utils from '@/utils'
-import { useLogTimerStore } from '@/store/logTimer/logTimer'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 
 const props = {
   // If this prop is passed, it means from definition detail
@@ -85,8 +85,8 @@ export default defineComponent({
     const route = useRoute()
     const theme = useThemeStore()
 
-    const logTimerStore = useLogTimerStore()
-    const logTimer = logTimerStore.getLogTimer
+    const uiSettingStore = useUISettingStore()
+    const logTimer = uiSettingStore.getLogTimer
 
     // Whether the graph can be operated
     provide('readonly', toRef(props, 'readonly'))

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

@@ -16,22 +16,22 @@
  */
 
 import { useI18n } from 'vue-i18n'
-import { NSelect, NSpace } from 'naive-ui'
+import { NSelect, NSpace, NSwitch } from 'naive-ui'
 import { defineComponent } from 'vue'
-import { useLogTimerStore } from '@/store/logTimer/logTimer'
+import { useUISettingStore } from '@/store/ui-setting/ui-setting'
 import Card from '@/components/card'
 
 // Update LogTimer store when select value is updated
 const handleUpdateValue = (logTimer: number) => {
-  const logTimerStore = useLogTimerStore()
-  logTimerStore.setLogTimer(logTimer)
+  const uiSettingStore = useUISettingStore()
+  uiSettingStore.setLogTimer(logTimer)
 }
 
 const setting = defineComponent({
   name: 'ui-setting',
   setup() {
-    const logTimerStore = useLogTimerStore()
-    const defaultLogTimer = logTimerStore.getLogTimer
+    const uiSettingStore = useUISettingStore()
+    const defaultLogTimer = uiSettingStore.getLogTimer
 
     const logTimerMap = {
       0: 'Off',
@@ -75,8 +75,9 @@ const setting = defineComponent({
 
     return (
       <Card style={{ marginLeft: '25%', width: '50%' }} title={t('menu.ui_setting')}>
+        <h4>{t('ui_setting.request_settings')}</h4>
         <NSpace align='center' justify='space-between'>
-          <span>{t('ui_setting.log.refresh_time')}</span>
+          <span>{t('ui_setting.refresh_time')}</span>
           <NSelect
             style={{ width: '200px' }}
             default-value={this.logTimerMap[this.defaultLogTimer]}
@@ -84,6 +85,11 @@ const setting = defineComponent({
             onUpdateValue={handleUpdateValue}
           />
         </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}></NSwitch>
+        </NSpace>
       </Card>
     )
   }