This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new bf74b4280f [Feature][UI] Joint debugging of the interface of the mvp
version of the dynamic task component. (#12859)
bf74b4280f is described below
commit bf74b4280fa7c98ea3ec5c5c995bfe0d2f3710d1
Author: songjianet <[email protected]>
AuthorDate: Thu Nov 10 17:28:20 2022 +0800
[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.
---
.../modules/dynamic-dag/index.ts} | 25 +++--
.../components/dynamic-dag/dag-sidebar.tsx | 4 +-
.../workflow/components/dynamic-dag/index.tsx | 20 ++--
.../workflow/components/dynamic-dag/task/index.tsx | 8 +-
.../components/dynamic-dag/task/use-task-form.ts | 113 ++-------------------
.../workflow/components/dynamic-dag/use-sidebar.ts | 14 ++-
6 files changed, 61 insertions(+), 123 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
b/dolphinscheduler-ui/src/service/modules/dynamic-dag/index.ts
similarity index 64%
copy from
dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
copy to dolphinscheduler-ui/src/service/modules/dynamic-dag/index.ts
index a5d2c5ce60..c52e763d79 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
+++ b/dolphinscheduler-ui/src/service/modules/dynamic-dag/index.ts
@@ -15,16 +15,25 @@
* limitations under the License.
*/
-import { reactive } from 'vue'
+import { axios } from '@/service/service'
-export function useSidebar() {
- const variables = reactive({
- taskList: []
+export function queryDynamicTaskCategories(): any {
+ return axios({
+ url: '/dynamic/taskCategories',
+ method: 'get'
})
+}
- const getTaskList = () => {
- variables.taskList = ['shell'] as any
- }
+export function queryDynamicTaskResourceList(categories: string): any {
+ return axios({
+ url: `/dynamic/${categories}/taskTypes`,
+ method: 'get'
+ })
+}
- return { variables, getTaskList }
+export function queryDynamicTaskResource(url: string): any {
+ return axios({
+ url,
+ method: 'get'
+ })
}
\ No newline at end of file
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
index cf933a1bd8..b44da1d183 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/dag-sidebar.tsx
+++
b/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>
)
})
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
index becf9a38af..db2fa0bf5e 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/index.tsx
+++
b/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}
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
index fad2c65bf5..79a4ee9a30 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/index.tsx
+++
b/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
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
index e7e8120c71..7178eac585 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/task/use-task-form.ts
+++
b/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
}
}
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
b/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
index a5d2c5ce60..ce5ac51584 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dynamic-dag/use-sidebar.ts
+++
b/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 }
-}
\ No newline at end of file
+ return {
+ variables,
+ getTaskList
+ }
+}
