Browse Source

[Feature][JsonSplit-api] Improve some dag/formModel features (#6144)

* Add the prev tasks selector

* fix CONDITIONS node bugs

* fix code smells
2.0.7-release
Wangyizhi1 3 years ago committed by GitHub
parent
commit
cca48d0a92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 143
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue
  2. 41
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
  3. 134
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
  4. 4
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
  5. 6
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
  6. 102
      dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue

143
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue

@ -16,14 +16,14 @@
*/ */
<template> <template>
<div class="dag-canvas"> <div class="dag-canvas">
<dag-taskbar @on-drag-start="_onDragStart" /> <dag-taskbar @on-drag-start="onDragStart" />
<div <div
class="dag-container" class="dag-container"
ref="container" ref="container"
@dragenter.prevent @dragenter.prevent
@dragover.prevent @dragover.prevent
@dragleave.prevent @dragleave.prevent
@drop.stop.prevent="_onDrop" @drop.stop.prevent="onDrop"
> >
<div ref="paper" class="paper"></div> <div ref="paper" class="paper"></div>
<div ref="minimap" class="minimap"></div> <div ref="minimap" class="minimap"></div>
@ -52,7 +52,7 @@
} from './x6-helper' } from './x6-helper'
import { DagreLayout } from '@antv/layout' import { DagreLayout } from '@antv/layout'
import { tasksType, tasksState } from '../config' import { tasksType, tasksState } from '../config'
import { mapActions, mapMutations } from 'vuex' import { mapActions, mapMutations, mapState } from 'vuex'
import nodeStatus from './nodeStatus' import nodeStatus from './nodeStatus'
export default { export default {
@ -84,6 +84,11 @@
dagTaskbar, dagTaskbar,
contextMenu contextMenu
}, },
computed: {
...mapState('dag', [
'tasks'
])
},
methods: { methods: {
...mapActions('dag', ['genTaskCodeList']), ...mapActions('dag', ['genTaskCodeList']),
...mapMutations('dag', ['removeTask']), ...mapMutations('dag', ['removeTask']),
@ -182,7 +187,7 @@
sourceId: Number(sourceCell.id), sourceId: Number(sourceCell.id),
targetId: Number(targetCell.id) targetId: Number(targetCell.id)
} }
if (!self.dagChart.edgeIsValid(edgeData)) { if (!self.edgeIsValid(edgeData)) {
return false return false
} }
} }
@ -211,8 +216,6 @@
} }
} }
})) }))
// TODO will be deleted
window._graph = graph
this.registerX6Shape() this.registerX6Shape()
this.bindGraphEvent() this.bindGraphEvent()
this.originalScrollPosition = graph.getScrollbarPosition() this.originalScrollPosition = graph.getScrollbarPosition()
@ -476,6 +479,7 @@
* @return {Edge[]} Edge is inherited from the Cell * @return {Edge[]} Edge is inherited from the Cell
*/ */
// interface Edge { // interface Edge {
// id: string;
// label: string; // label: string;
// sourceId: number; // sourceId: number;
// targetId: number; // targetId: number;
@ -485,6 +489,7 @@
return edges.map((edge) => { return edges.map((edge) => {
const labelData = edge.getLabelAt(0) const labelData = edge.getLabelAt(0)
return { return {
id: edge.id,
label: _.get(labelData, ['attrs', 'label', 'text'], ''), label: _.get(labelData, ['attrs', 'label', 'text'], ''),
sourceId: Number(edge.getSourceCellId()), sourceId: Number(edge.getSourceCellId()),
targetId: Number(edge.getTargetCellId()) targetId: Number(edge.getTargetCellId())
@ -626,10 +631,9 @@
}, },
/** /**
* remove an edge * remove an edge
* @param {string|number} id EdgeId * @param {string} id EdgeId
*/ */
removeEdge (id) { removeEdge (id) {
id += ''
this.graph.removeEdge(id) this.graph.removeEdge(id)
}, },
/** /**
@ -644,6 +648,19 @@
} }
}) })
}, },
/**
* Verify whether edge is valid
* The number of edges start with CONDITIONS task cannot be greater than 2
*/
edgeIsValid (edge) {
const { sourceId } = edge
const sourceTask = this.tasks.find((task) => task.code === sourceId)
if (sourceTask.taskType === 'CONDITIONS') {
const edges = this.getEdges()
return edges.filter((e) => e.sourceId === sourceTask.code).length <= 2
}
return true
},
/** /**
* Gets the current selections * Gets the current selections
* @return {Cell[]} * @return {Cell[]}
@ -687,7 +704,7 @@
/** /**
* Drag && Drop Event * Drag && Drop Event
*/ */
_onDragStart (e, taskType) { onDragStart (e, taskType) {
if (!this.editable) { if (!this.editable) {
e.preventDefault() e.preventDefault()
return return
@ -698,6 +715,21 @@
type: taskType.name type: taskType.name
} }
}, },
onDrop (e) {
const { type } = this.dragging
const { x, y } = this.calcGraphCoordinate(e.clientX, e.clientY)
this.genTaskCodeList({
genNum: 1
})
.then((res) => {
const [code] = res
this.addNode(code, type, { x, y })
this.dagChart.openFormModel(code, type)
})
.catch((err) => {
console.error(err)
})
},
calcGraphCoordinate (mClientX, mClientY) { calcGraphCoordinate (mClientX, mClientY) {
// Distance from the mouse to the top-left corner of the container; // Distance from the mouse to the top-left corner of the container;
const { left: cX, top: cY } = const { left: cX, top: cY } =
@ -719,20 +751,87 @@
y: mouseY + scrollY - eY y: mouseY + scrollY - eY
} }
}, },
_onDrop (e) { /**
const { type } = this.dragging * Get prev nodes by code
const { x, y } = this.calcGraphCoordinate(e.clientX, e.clientY) * @param {number} code
this.genTaskCodeList({ * node1 -> node2 -> node3
genNum: 1 * getPrevNodes(node2.code) => [node1]
*/
getPrevNodes (code) {
const nodes = this.getNodes()
const edges = this.getEdges()
const nodesMap = {}
nodes.forEach(node => {
nodesMap[node.id] = node
})
return edges
.filter(edge => edge.targetId === code)
.map(edge => nodesMap[edge.sourceId])
},
/**
* set prev nodes
* @param {number} code
* @param {number[]} preNodeCodes
* @param {boolean} override If set to true, setPreNodes will delete all edges that end with the node and rebuild
*/
setPreNodes (code, preNodeCodes, override) {
const edges = this.getEdges()
const currPreCodes = []
edges.forEach((edge) => {
if (edge.targetId === code) {
if (override) {
this.removeEdge(edge.id)
} else {
currPreCodes.push(edge.sourceId)
}
}
})
preNodeCodes.forEach(preCode => {
if (currPreCodes.includes(preCode) || preCode === code) return
const edge = this.genEdgeJSON(preCode, code)
this.graph.addEdge(edge)
})
},
/**
* Get post nodes by code
* @param {number} code
* node1 -> node2 -> node3
* getPostNodes(node2.code) => [node3]
*/
getPostNodes (code) {
const nodes = this.getNodes()
const edges = this.getEdges()
const nodesMap = {}
nodes.forEach(node => {
nodesMap[node.id] = node
})
return edges
.filter(edge => edge.sourceId === code)
.map(edge => nodesMap[edge.targetId])
},
/**
* set post nodes
* @param {number} code
* @param {number[]} postNodeCodes
* @param {boolean} override If set to true, setPreNodes will delete all edges that end with the node and rebuild
*/
setPostNodes (code, postNodeCodes, override) {
const edges = this.getEdges()
const currPostCodes = []
edges.forEach((edge) => {
if (edge.sourceId === code) {
if (override) {
this.removeEdge(edge.id)
} else {
currPostCodes.push(edge.targetId)
}
}
})
postNodeCodes.forEach(postCode => {
if (currPostCodes.includes(postCode) || postCode === code) return
const edge = this.genEdgeJSON(code, postCode)
this.graph.addEdge(edge)
}) })
.then((res) => {
const [code] = res
this.addNode(code, type, { x, y })
this.dagChart.openFormModel(code, type)
})
.catch((err) => {
console.error(err)
})
} }
} }
} }

41
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@ -82,8 +82,6 @@
id: null, id: null,
taskType: '', taskType: '',
self: {}, self: {},
preNode: [],
rearList: [],
instanceId: null instanceId: null
} }
@ -139,8 +137,6 @@
} }
}, },
mounted () { mounted () {
window._debug = this
if (this.type === 'instance') { if (this.type === 'instance') {
this.definitionCode = this.$route.query.code this.definitionCode = this.$route.query.code
} else if (this.type === 'definition') { } else if (this.type === 'definition') {
@ -420,19 +416,31 @@
tasksMap[task.code] = task tasksMap[task.code] = task
}) })
return tasks.map((task) => { const headEdges = tasks.filter(task => !preTaskMap[task.code]).map((task) => {
const preTask = preTaskMap[task.code]
return { return {
name: preTask ? preTask.edgeLabel : '', name: '',
preTaskCode: preTask ? preTask.sourceId : 0, preTaskCode: 0,
preTaskVersion: preTask ? tasksMap[preTask.sourceId].version : 0, preTaskVersion: 0,
postTaskCode: task.code, postTaskCode: task.code,
postTaskVersion: tasksMap[task.code].version || 0, postTaskVersion: task.version || 0,
// conditionType and conditionParams are reserved // conditionType and conditionParams are reserved
conditionType: 0, conditionType: 0,
conditionParams: {} conditionParams: {}
} }
}) })
return edges.map(edge => {
return {
name: edge.label,
preTaskCode: edge.sourceId,
preTaskVersion: tasksMap[edge.sourceId].version || 0,
postTaskCode: edge.targetId,
postTaskVersion: tasksMap[edge.targetId].version || 0,
// conditionType and conditionParams are reserved
conditionType: 0,
conditionParams: {}
}
}).concat(headEdges)
}, },
backfill () { backfill () {
const tasks = this.tasks const tasks = this.tasks
@ -496,19 +504,6 @@
closeStart () { closeStart () {
this.startDialog = false this.startDialog = false
}, },
/**
* Verify whether edge is valid
* The number of edges start with CONDITIONS task cannot be greater than 2
*/
edgeIsValid (edge) {
const { sourceId } = edge
const sourceTask = this.tasks.find((task) => task.code === sourceId)
if (sourceTask.taskType === 'CONDITIONS') {
const edges = this.$refs.canvas.getEdges()
return edges.filter((e) => e.sourceId === sourceTask.code).length <= 2
}
return true
},
/** /**
* Task status * Task status
*/ */

134
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue

@ -123,8 +123,8 @@
</el-select> </el-select>
</span> </span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span> <span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
<el-select style="width: 157px;" size="small" v-model="successBranch" clearable> <el-select style="width: 157px;" size="small" v-model="successBranch" clearable :disabled="isDetails">
<el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option> <el-option v-for="item in postTasks" :key="item.code" :value="item.name" :label="item.name"></el-option>
</el-select> </el-select>
</div> </div>
</m-list-box> </m-list-box>
@ -137,8 +137,8 @@
</el-select> </el-select>
</span> </span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span> <span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
<el-select style="width: 157px;" size="small" v-model="failedBranch" clearable> <el-select style="width: 157px;" size="small" v-model="failedBranch" clearable :disabled="isDetails">
<el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option> <el-option v-for="item in postTasks" :key="item.code" :value="item.name" :label="item.name"></el-option>
</el-select> </el-select>
</div> </div>
</m-list-box> </m-list-box>
@ -266,7 +266,7 @@
@on-dependent="_onDependent" @on-dependent="_onDependent"
@on-cache-dependent="_onCacheDependent" @on-cache-dependent="_onCacheDependent"
:backfill-item="backfillItem" :backfill-item="backfillItem"
:pre-node="nodeData.preNode"> :prev-tasks="prevTasks">
</m-conditions> </m-conditions>
<m-switch <m-switch
v-if="nodeData.taskType === 'SWITCH'" v-if="nodeData.taskType === 'SWITCH'"
@ -276,12 +276,7 @@
:nodeData="nodeData" :nodeData="nodeData"
></m-switch> ></m-switch>
<!-- Pre-tasks in workflow --> <!-- Pre-tasks in workflow -->
<!-- TODO --> <m-pre-tasks ref="preTasks" v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1" :code="code"/>
<!-- <m-pre-tasks
v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1"
@on-pre-tasks="_onPreTasks"
ref="PRE_TASK"
:backfill-item="backfillItem"></m-pre-tasks> -->
</div> </div>
</div> </div>
<div class="bottom-box"> <div class="bottom-box">
@ -317,11 +312,12 @@
import mTimeoutAlarm from './_source/timeoutAlarm' import mTimeoutAlarm from './_source/timeoutAlarm'
import mDependentTimeout from './_source/dependentTimeout' import mDependentTimeout from './_source/dependentTimeout'
import mWorkerGroups from './_source/workerGroups' import mWorkerGroups from './_source/workerGroups'
// import mPreTasks from './tasks/pre_tasks'
import mRelatedEnvironment from './_source/relatedEnvironment' import mRelatedEnvironment from './_source/relatedEnvironment'
import mPreTasks from './tasks/pre_tasks'
import clickoutside from '@/module/util/clickoutside' import clickoutside from '@/module/util/clickoutside'
import disabledState from '@/module/mixin/disabledState' import disabledState from '@/module/mixin/disabledState'
import mPriority from '@/module/components/priority/priority' import mPriority from '@/module/components/priority/priority'
import { findComponentDownward } from '@/module/util/'
export default { export default {
name: 'form-model', name: 'form-model',
@ -352,7 +348,7 @@
// cache dependence // cache dependence
cacheDependence: {}, cacheDependence: {},
// task code // task code
code: '', code: 0,
// Current node params data // Current node params data
params: {}, params: {},
// Running sign // Running sign
@ -386,10 +382,9 @@
label: `${i18n.$t('Failed')}` label: `${i18n.$t('Failed')}`
} }
], ],
// preTasks // for CONDITIONS
preTaskIdsInWorkflow: [], postTasks: [],
preTasksToAdd: [], // pre-taskIds to add, used in jsplumb connects prevTasks: []
preTasksToDelete: [] // pre-taskIds to delete, used in jsplumb connects
} }
}, },
/** /**
@ -400,6 +395,7 @@
props: { props: {
nodeData: Object nodeData: Object
}, },
inject: ['dagChart'],
methods: { methods: {
...mapActions('dag', ['getTaskInstanceList']), ...mapActions('dag', ['getTaskInstanceList']),
taskToBackfillItem (task) { taskToBackfillItem (task) {
@ -413,7 +409,6 @@
maxRetryTimes: task.failRetryTimes, maxRetryTimes: task.failRetryTimes,
name: task.name, name: task.name,
params: _.omit(task.taskParams, ['conditionResult', 'dependence']), params: _.omit(task.taskParams, ['conditionResult', 'dependence']),
preTasks: [],
retryInterval: task.failRetryInterval, retryInterval: task.failRetryInterval,
runFlag: task.flag, runFlag: task.flag,
taskInstancePriority: task.taskPriority, taskInstancePriority: task.taskPriority,
@ -423,7 +418,7 @@
enable: task.timeoutFlag === 'OPEN' enable: task.timeoutFlag === 'OPEN'
}, },
type: task.taskType, type: task.taskType,
waitStartTimeout: task.waitStartTimeout, waitStartTimeout: task.taskParams.waitStartTimeout,
workerGroup: task.workerGroup workerGroup: task.workerGroup
} }
}, },
@ -436,14 +431,6 @@
_onSwitchResult (o) { _onSwitchResult (o) {
this.switchResult = o this.switchResult = o
}, },
/**
* Pre-tasks in workflow
*/
_onPreTasks (o) {
this.preTaskIdsInWorkflow = o.preTasks
this.preTasksToAdd = o.preTasksToAdd
this.preTasksToDelete = o.preTasksToDelete
},
/** /**
* cache dependent * cache dependent
*/ */
@ -515,41 +502,14 @@
_onParams (o) { _onParams (o) {
this.params = Object.assign({}, o) this.params = Object.assign({}, o)
}, },
_onCacheParams (o) {
this.params = Object.assign(this.params, {}, o)
this._cacheItem()
},
_onUpdateEnvironmentCode (o) { _onUpdateEnvironmentCode (o) {
this.environmentCode = o this.environmentCode = o
}, },
_cacheItem () { /**
this.conditionResult.successNode[0] = this.successBranch * _onCacheParams is reserved
this.conditionResult.failedNode[0] = this.failedBranch */
this.$emit('cacheTaskInfo', { _onCacheParams (o) {
item: { this.params = Object.assign(this.params, {}, o)
type: this.nodeData.taskType,
id: this.nodeData.id,
name: this.name,
code: this.code,
params: this.params,
desc: this.desc,
runFlag: this.runFlag,
conditionResult: this.conditionResult,
switchResult: this.switchResult,
dependence: this.cacheDependence,
maxRetryTimes: this.maxRetryTimes,
retryInterval: this.retryInterval,
delayTime: this.delayTime,
timeout: this.timeout,
waitStartTimeout: this.waitStartTimeout,
taskInstancePriority: this.taskInstancePriority,
workerGroup: this.workerGroup,
environmentCode: this.environmentCode,
status: this.status,
branch: this.branch
},
fromThis: this
})
}, },
/** /**
* verification name * verification name
@ -607,19 +567,13 @@
return return
} }
} }
// Verify node parameters // Verify node parameters
if (!this.$refs[this.nodeData.taskType]._verification()) { if (!this.$refs[this.nodeData.taskType]._verification()) {
return return
} }
// Verify preTasks and update dag-things // set preTask
if (this.$refs.PRE_TASK) { if (this.$refs.preTasks) {
if (!this.$refs.PRE_TASK._verification()) { this.$refs.preTasks.setPreNodes()
return
} else {
// TODO sync preTasks to graph
}
} }
this.conditionResult.successNode[0] = this.successBranch this.conditionResult.successNode[0] = this.successBranch
this.conditionResult.failedNode[0] = this.failedBranch this.conditionResult.failedNode[0] = this.failedBranch
@ -632,7 +586,8 @@
taskParams: { taskParams: {
...this.params, ...this.params,
dependence: this.cacheDependence, dependence: this.cacheDependence,
conditionResult: this.conditionResult conditionResult: this.conditionResult,
waitStartTimeout: this.waitStartTimeout
}, },
flag: this.runFlag, flag: this.runFlag,
taskPriority: this.taskInstancePriority, taskPriority: this.taskInstancePriority,
@ -651,6 +606,8 @@
}) })
// set run flag // set run flag
this._setRunFlag() this._setRunFlag()
// set edge label
this._setEdgeLabel()
}, },
/** /**
* Sub-workflow selected node echo name * Sub-workflow selected node echo name
@ -664,6 +621,21 @@
*/ */
_setRunFlag () { _setRunFlag () {
},
/**
*
*/
_setEdgeLabel () {
if (this.successBranch || this.failedBranch) {
const canvas = findComponentDownward(this.dagChart, 'dag-canvas')
const edges = canvas.getEdges()
const successTask = this.postTasks.find(t => t.name === this.successBranch)
const failedTask = this.postTasks.find(t => t.name === this.failedBranch)
const sEdge = edges.find(edge => successTask && edge.sourceId === this.code && edge.targetId === successTask.code)
const fEdge = edges.find(edge => failedTask && edge.sourceId === this.code && edge.targetId === failedTask.code)
sEdge && canvas.setEdgeLabel(sEdge.id, this.$t('Success'))
fEdge && canvas.setEdgeLabel(fEdge.id, this.$t('Failed'))
}
}, },
/** /**
* Submit verification * Submit verification
@ -702,6 +674,7 @@
} }
}) })
} }
this.code = this.nodeData.id
// Non-null objects represent backfill // Non-null objects represent backfill
if (!_.isEmpty(o)) { if (!_.isEmpty(o)) {
this.code = o.code this.code = o.code
@ -743,14 +716,17 @@
this.cacheBackfillItem = JSON.parse(JSON.stringify(o)) this.cacheBackfillItem = JSON.parse(JSON.stringify(o))
this.isContentBox = true this.isContentBox = true
// Init value of preTask selector if (this.dagChart) {
let preTaskIds = $(`#${this.nodeData.id}`).attr('data-targetarr') const canvas = findComponentDownward(this.dagChart, 'dag-canvas')
if (!_.isEmpty(this.backfillItem)) { const postNodes = canvas.getPostNodes(this.code)
if (preTaskIds && preTaskIds.length) { const prevNodes = canvas.getPrevNodes(this.code)
this.backfillItem.preTasks = preTaskIds.split(',') const buildTask = (node) => ({
} else { code: node.id,
this.backfillItem.preTasks = [] name: node.data.taskName,
} type: node.data.taskType
})
this.postTasks = postNodes.map(buildTask)
this.prevTasks = prevNodes.map(buildTask)
} }
}, },
mounted () { mounted () {
@ -809,8 +785,8 @@
mDependentTimeout, mDependentTimeout,
mPriority, mPriority,
mWorkerGroups, mWorkerGroups,
// mPreTasks mRelatedEnvironment,
mRelatedEnvironment mPreTasks
} }
} }
</script> </script>

4
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue

@ -18,7 +18,7 @@
<div class="dep-list-model"> <div class="dep-list-model">
<div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index"> <div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
<el-select style="width: 150px;" size="small" v-model="el.depTasks" :disabled="isDetails"> <el-select style="width: 150px;" size="small" v-model="el.depTasks" :disabled="isDetails">
<el-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label"> <el-option v-for="item in prevTasks" :key="item.code" :value="item.name" :label="item.name">
</el-option> </el-option>
</el-select> </el-select>
<el-select style="width: 116px;" size="small" v-model="el.status" :disabled="isDetails"> <el-select style="width: 116px;" size="small" v-model="el.status" :disabled="isDetails">
@ -65,7 +65,7 @@
dependItemList: Array, dependItemList: Array,
index: Number, index: Number,
dependTaskList: Array, dependTaskList: Array,
preNode: Array prevTasks: Array
}, },
model: { model: {
prop: 'dependItemList', prop: 'dependItemList',

6
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue

@ -53,8 +53,7 @@
@on-delete-all="_onDeleteAll" @on-delete-all="_onDeleteAll"
@getDependTaskList="getDependTaskList" @getDependTaskList="getDependTaskList"
:index="$index" :index="$index"
:rear-list = "rearList" :prev-tasks="prevTasks">
:pre-node = "preNode">
</m-node-status> </m-node-status>
</div> </div>
</div> </div>
@ -79,8 +78,7 @@
mixins: [disabledState], mixins: [disabledState],
props: { props: {
backfillItem: Object, backfillItem: Object,
preNode: Array, prevTasks: Array
rearList: Array
}, },
methods: { methods: {
_addDep () { _addDep () {

102
dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue

@ -17,22 +17,22 @@
<template> <template>
<div class="pre_tasks-model"> <div class="pre_tasks-model">
<m-list-box> <m-list-box>
<div slot="text">{{$t('Pre tasks')}}</div> <div slot="text">{{ $t("Pre tasks") }}</div>
<div slot="content"> <div slot="content">
<el-select <el-select
ref="preTasksSelector" style="width: 100%"
style="width: 100%;" filterable
filterable multiple
multiple size="small"
size="small" v-model="preTasks"
v-model="preTasks" :disabled="isDetails"
:disabled="isDetails" >
:id="preTasksSelectorId">
<el-option <el-option
v-for="task in preTaskList" v-for="task in options"
:key="task.id" :key="task.code"
:value="task.id" :value="task.code"
:label="task.name"> :label="task.name"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
@ -42,65 +42,55 @@
<script> <script>
import disabledState from '@/module/mixin/disabledState' import disabledState from '@/module/mixin/disabledState'
import mListBox from './_source/listBox' import mListBox from './_source/listBox'
import { mapState } from 'vuex'
import { findComponentDownward } from '@/module/util/'
export default { export default {
name: 'pre_tasks', name: 'pre_tasks',
mixins: [disabledState], mixins: [disabledState],
inject: ['dagChart'],
props: { props: {
backfillItem: Object code: {
type: Number,
default: 0
}
}, },
data () { data () {
return { return {
preTasksSelectorId: '_preTasksSelectorId', // Refresh target vue-component by changing id options: [],
preTasks: [], preTasks: []
preTasksOld: []
} }
}, },
mounted () { mounted () {
this.preTasks = this.backfillItem.preTasks || this.preTasks const canvas = this.getDagCanvasRef()
this.preTasksOld = this.preTasks const edges = canvas.getEdges()
this.options = this.tasks.filter((task) => {
// Refresh target vue-component by changing id // The current node cannot be used as the prev node
this.$nextTick(() => { if (task.code === this.code) return false
this.preTasksSelectorId = 'preTasksSelectorId' // The number of edges start with CONDITIONS task cannot be greater than 2
if (task.taskType === 'CONDITIONS') {
return edges.filter((e) => e.sourceId === task.code).length < 2
}
return true
}) })
this.preTasks = canvas.getPrevNodes(this.code).map(node => node.id)
}, },
computed: { computed: {
preTaskList: function () { ...mapState('dag', ['tasks'])
let currentTaskId = this.backfillItem.id || this.id
let cacheTasks = Object.assign({}, this.store.state.dag.tasks)
let keys = Object.keys(cacheTasks)
for (let i = 0; i < keys.length; i++) {
let key = keys[i]
if ((!cacheTasks[key].id || !cacheTasks[key].name) || (currentTaskId && cacheTasks[key].id === currentTaskId)) {
// Clean undefined and current task data
delete cacheTasks[key]
}
}
return cacheTasks
},
// preTaskIds used to create new connection
preTasksToAdd: function () {
let toAddTasks = this.preTasks.filter(taskId => {
return (this.preTasksOld.indexOf(taskId) === -1)
})
return toAddTasks
},
// preTaskIds used to delete connection
preTasksToDelete: function () {
return this.preTasksOld.filter(taskId => this.preTasks.indexOf(taskId) === -1)
}
}, },
methods: { methods: {
// Pass data to parent-level to process dag getDagCanvasRef () {
_verification () { if (this.canvasRef) {
this.$emit('on-pre-tasks', { return this.canvasRef
preTasks: this.preTasks, } else {
preTasksToAdd: this.preTasksToAdd, const canvas = findComponentDownward(this.dagChart, 'dag-canvas')
preTasksToDelete: this.preTasksToDelete this.canvasRef = canvas
}) return canvas
return true }
},
setPreNodes () {
const canvas = this.getDagCanvasRef()
canvas.setPreNodes(this.code, this.preTasks, true)
} }
}, },
components: { mListBox } components: { mListBox }

Loading…
Cancel
Save