[Feature][UI] Joint debugging of the interface of the mvp version of the dynamic task component. (#12859)

* [Feature][UI] Joint debugging of the interface of the mvp version of the dynamic task component.

* [Feature][UI] Joint debugging of the interface of the mvp version of the dynamic task component.

* [Feature][UI] Joint debugging of the interface of the mvp version of the dynamic task component.

dolphinscheduler-ui/src/service/modules/dynamic-dag/index.ts

@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { axios } from '@/service/service'
+
+export function queryDynamicTaskCategories(): any {
+  return axios({
+    url: '/dynamic/taskCategories',
+    method: 'get'
+  })
+}
+
+export function queryDynamicTaskResourceList(categories: string): any {
+  return axios({
+    url: `/dynamic/${categories}/taskTypes`,
+    method: 'get'
+  })
+}
+
+export function queryDynamicTaskResource(url: string): any {
+  return axios({
+    url,
+    method: 'get'
+  })
+}

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

@@ -42,10 +42,10 @@ const DagSidebar = defineComponent({
     return (
       <div>
         {
-          this.taskList.map(task => {
+          this.taskList.map((task: any) => {
             return (
               <div class={styles['task-item']} draggable='true' onDragstart={() => this.handleDragstart(task)}>
-                {task}
+                {task.name}
               </div>
             )
           })

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

@@ -21,16 +21,22 @@ import { DagCanvas } from './dag-canvas'
 import { useDagStore } from '@/store/project/dynamic/dag'
 import { NodeShape, NodeHeight, NodeWidth } from './dag-setting'
 import { TaskForm } from './task'
+import { queryDynamicTaskResource } from '@/service/modules/dynamic-dag'
 import styles from './index.module.scss'
 
 const DynamicDag = defineComponent({
   name: 'DynamicDag',
   setup() {
-    const draggedTask = ref('')
+    const draggedTask = ref()
+    const formData = ref()
     const showModal = ref(false)
 
-    const handelDragstart = (task: string) => {
-      draggedTask.value = task
+    const handelDragstart = (task: any) => {
+      draggedTask.value = task.name
+
+      queryDynamicTaskResource(task.json).then((res: any) => {
+        formData.value = res
+      })
     }
 
     const handelDrop = (e: DragEvent) => {
@@ -45,9 +51,9 @@ const DynamicDag = defineComponent({
         width: NodeWidth,
         height: NodeHeight,
         shape: NodeShape,
-        label: draggedTask.value + String(shapes.length + 1),
+        label: draggedTask.value.name + String(shapes.length + 1),
         zIndex: 1,
-        task: draggedTask.value
+        task: draggedTask.value.name
       })
 
       useDagStore().setDagTasks(shapes)
@@ -57,6 +63,7 @@ const DynamicDag = defineComponent({
 
     return {
       draggedTask,
+      formData,
       handelDragstart,
       handelDrop,
       showModal
@@ -70,8 +77,9 @@ const DynamicDag = defineComponent({
           <DagCanvas onDrop={this.handelDrop}/>
         </div>
         {
-          this.draggedTask && <TaskForm
+          this.draggedTask && this.formData && <TaskForm
             task={this.draggedTask}
+            formData={this.formData}
             showModal={this.showModal}
             onCancelModal={() => this.showModal = false}
             onConfirmModal={() => this.showModal = false}

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

@@ -30,6 +30,9 @@ const props = {
   },
   task: {
     type: String as PropType<string>
+  },
+  formData: {
+    type: Object as PropType<object>
   }
 }
 
@@ -39,7 +42,7 @@ const TaskForm = defineComponent({
   emits: ['cancelModal', 'confirmModal'],
   setup(props, ctx) {
     const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
-    const { variables } = useTaskForm()
+    const { variables, handleValidate } = useTaskForm(props.formData)
     const { t } = useI18n()
 
     const cancelModal = () => {
@@ -47,6 +50,7 @@ const TaskForm = defineComponent({
     }
 
     const confirmModal = () => {
+      handleValidate()
       ctx.emit('confirmModal')
     }
 
@@ -80,7 +84,7 @@ const TaskForm = defineComponent({
     return (
       <Modal
         title={this.task}
-        show={(this.showModal && this.task) as boolean}
+        show={this.showModal}
         onCancel={this.cancelModal}
         onConfirm={this.confirmModal}>
         <NForm

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts

@@ -15,114 +15,16 @@
  * limitations under the License.
  */
 
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import { useDynamicLocales } from './use-dynamic-locales'
 import { useFormField } from './use-form-field'
 import { useFormValidate } from './use-form-validate'
 import { useFormStructure } from './use-form-structure'
 import { useFormRequest } from './use-form-request'
 
-const data = {
-  task: 'shell',
-  locales: {
-    zh_CN: {
-      node_name: '节点名称',
-      node_name_tips: '请输入节点名称',
-      node_name_validate_message: '节点名称不能为空',
-      script_validate_message: '脚本内容不能为空',
-      task_priority: '任务优先级',
-      highest: '最高',
-      high: '高',
-      medium: '中',
-      low: '低',
-      lowest: '最低',
-      worker_group: 'Worker 分组',
-      script: '脚本'
-    },
-    en_US: {
-      node_name: 'Node Name',
-      node_name_tips: 'Please entry node name',
-      node_name_validate_message: 'Node name cannot be empty',
-      script_validate_message: 'Script content cannot be empty',
-      task_priority: 'Task Priority',
-      highest: 'Highest',
-      high: 'High',
-      medium: 'Medium',
-      low: 'Low',
-      lowest: 'Lowest',
-      worker_group: 'Worker Group',
-      script: 'Script'
-    }
-  },
-  apis: {
-    getWorkerGroupList: {
-      url: '/worker-groups/all',
-      method: 'get'
-    }
-  },
-  forms: [
-    {
-      label: 'task_components.node_name',
-      type: 'input',
-      field: 'name',
-      defaultValue: '',
-      clearable: true,
-      placeholder: 'task_components.node_name_tips',
-      validate: {
-        required: true,
-        trigger: ['input', 'blur'],
-        type: 'non-empty',
-        message: 'task_components.node_name_validate_message'
-      }
-    },
-    {
-      label: 'task_components.task_priority',
-      type: 'select',
-      field: 'taskPriority',
-      options: [
-        { label: 'task_components.highest', value: 'HIGHEST' },
-        { label: 'task_components.high', value: 'HIGH' },
-        { label: 'task_components.medium', value: 'MEDIUM' },
-        { label: 'task_components.low', value: 'LOW' },
-        { label: 'task_components.lowest', value: 'LOWEST' }
-      ],
-      optionsLocale: true,
-      defaultValue: 'MEDIUM',
-      validate: {
-        required: true,
-        trigger: ['input', 'blur']
-      }
-    },
-    {
-      label: 'task_components.worker_group',
-      type: 'select',
-      field: 'workerGroup',
-      options: [],
-      optionsLocale: false,
-      defaultValue: 'default',
-      api: 'getWorkerGroupList',
-      validate: {
-        required: true,
-        trigger: ['input', 'blur']
-      }
-    },
-    {
-      label: 'task_components.script',
-      type: 'studio',
-      field: 'taskParams.rawScript',
-      defaultValue: '',
-      validate: {
-        required: true,
-        trigger: ['input', 'blur'],
-        type: 'non-empty',
-        message: 'task_components.script_validate_message'
-      }
-    }
-  ]
-}
-
-export function useTaskForm() {
+export function useTaskForm(data: any) {
   const variables = reactive({
+    taskForm: ref(),
     formStructure: {},
     model: {},
     rules: {}
@@ -133,7 +35,14 @@ export function useTaskForm() {
   variables.rules = useFormValidate(data.forms, variables.model)
   variables.formStructure = useFormStructure(useFormRequest(data.apis, data.forms))
 
+  const handleValidate = () => {
+    variables.taskForm.validate((err: any) => {
+      if (err) return
+    })
+  }
+
   return {
-    variables
+    variables,
+    handleValidate
   }
 }

dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts

@@ -16,6 +16,7 @@
  */
 
 import { reactive } from 'vue'
+import { queryDynamicTaskCategories, queryDynamicTaskResourceList } from '@/service/modules/dynamic-dag'
 
 export function useSidebar() {
   const variables = reactive({
@@ -23,8 +24,15 @@ export function useSidebar() {
   })
 
   const getTaskList = () => {
-    variables.taskList = ['shell'] as any
+    queryDynamicTaskCategories().then((resC: any) => {
+      queryDynamicTaskResourceList(resC[0]).then((res: any) => {
+        variables.taskList = res
+      })
+    })
   }
 
-  return { variables, getTaskList }
-}
+  return {
+    variables,
+    getTaskList
+  }
+}