diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue index fd4109f413..037d2e23cf 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/canvas.vue @@ -28,16 +28,15 @@
- - - diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue index 1a7e5ababa..83e6a5366d 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/canvas/toolbar.vue @@ -73,13 +73,19 @@ + + + + {{$t('Version Info')}} + + + @@ -66,6 +76,7 @@ import mUdp from '../_source/udp/udp.vue' import mStart from '../../projects/pages/definition/pages/list/_source/start.vue' import edgeEditModel from './canvas/edgeEditModel.vue' + import mVersions from '../../projects/pages/definition/pages/list/_source/versions.vue' const DEFAULT_NODE_DATA = { id: null, @@ -84,46 +95,79 @@ mFormModel, mUdp, mStart, - edgeEditModel + edgeEditModel, + mVersions }, provide () { return { dagChart: this } }, + inject: ['definitionDetails'], props: { type: String, releaseState: String }, data () { return { + definitionCode: 0, + // full screen mode fullScreen: false, + // whether the task config drawer is visible taskDrawer: false, nodeData: { ...DEFAULT_NODE_DATA }, + // whether the save dialog is visible saveDialog: false, - isLoading: false, - definitionCode: 0, + // whether the start dialog is visible startDialog: false, - startTaskName: '' + startTaskName: '', + // whether the version drawer is visible + versionDrawer: false, + versionData: { + processDefinition: { + id: null, + version: '', + releaseState: '' + }, + processDefinitionVersions: [], + total: null, + pageNo: null, + pageSize: null + }, + // the task status refresh timer + statusTimer: null } }, mounted () { - // TODO window._debug = this if (this.type === 'instance') { - this.definitionCode = this.$route.query.id + this.definitionCode = this.$route.query.code } else if (this.type === 'definition') { this.definitionCode = this.$route.params.code } + // auto resize canvas this.resizeDebounceFunc = debounce(this.canvasResize, 200) window.addEventListener('resize', this.resizeDebounceFunc) + + // init graph this.$refs.canvas.graphInit(!this.isDetails) + // backfill graph with tasks, locations and connects this.backfill() + + // refresh task status + if (this.type === 'instance') { + this.refreshTaskStatus() + // status polling + this.statusTimer = setInterval(() => { + this.refreshTaskStatus() + }, 90000) + } }, - unmounted () { + beforeDestroy () { + clearInterval(this.statusTimer) window.removeEventListener('resize', this.resizeDebounceFunc) }, computed: { @@ -134,7 +178,8 @@ 'isEditDag', 'name', 'isDetails', - 'projectCode' + 'projectCode', + 'version' ]) }, methods: { @@ -196,12 +241,12 @@ }) this.toggleTaskDrawer(true) }, - addTaskInfo ({ item, fromThis }) { + addTaskInfo ({ item }) { this.addTask(item) this.$refs.canvas.setNodeName(item.code, item.name) this.taskDrawer = false }, - closeTaskDrawer ({ item, flag, fromThis }) { + closeTaskDrawer ({ flag }) { if (flag) { const canvas = this.$refs.canvas canvas.removeNode(this.nodeData.id) @@ -213,76 +258,69 @@ */ toggleSaveDialog (value) { this.saveDialog = value + if (value) { + this.$nextTick(() => { + this.$refs.mUdp.reloadParam() + }) + } }, onSave (sourceType) { this.toggleSaveDialog(false) return new Promise((resolve, reject) => { - this.isLoading = true - let tasks = this.tasks || [] const edges = this.$refs.canvas.getEdges() const nodes = this.$refs.canvas.getNodes() - const connects = this.buildConnects(edges, tasks) - this.setConnects(connects) - - const locations = nodes.map(node => { + const locations = nodes.map((node) => { return { taskCode: node.id, x: node.position.x, y: node.position.y } }) - this.setLocations(locations) - resolve({ connects: connects, tasks: tasks, locations: locations }) }).then((res) => { - if (this._verifConditions(res.tasks)) { + if (this.verifyConditions(res.tasks)) { + this.loading(true) const definitionCode = this.definitionCode if (definitionCode) { - /** - * Edit - * @param saveInstanceEditDAGChart => Process instance editing - * @param saveEditDAGChart => Process definition editing - */ + // Edit return this[ this.type === 'instance' ? 'updateInstance' : 'updateDefinition' ](definitionCode) .then((res) => { - // this.$message.success(res.msg) this.$message({ message: res.msg, type: 'success', offset: 80 }) - this.isLoading = false - // Jump process definition if (this.type === 'instance') { this.$router.push({ - path: `/projects/${this.projectCode}/instance/list/${definitionCode}` + path: `/projects/${this.projectCode}/instance/list` }) } else { this.$router.push({ - path: `/projects/${this.projectCode}/definition/list/${definitionCode}` + path: `/projects/${this.projectCode}/definition/list` }) } }) .catch((e) => { this.$message.error(e.msg || '') - this.isLoading = false + }) + .finally((e) => { + this.loading(false) }) } else { - // New + // Create return this.saveDAGchart() .then((res) => { this.$message.success(res.msg) - this.isLoading = false // source @/conf/home/pages/dag/_source/editAffirmModel/index.js if (sourceType !== 'affirm') { // Jump process definition @@ -290,15 +328,17 @@ } }) .catch((e) => { - this.$message.error(e.msg || '') this.setName('') - this.isLoading = false + this.$message.error(e.msg || '') + }) + .finally((e) => { + this.loading(false) }) } } }) }, - _verifConditions (value) { + verifyConditions (value) { let tasks = value let bool = true tasks.map((v) => { @@ -319,7 +359,6 @@ 'Successful branch flow and failed branch flow are required' )}` ) - this.isLoading = false return false } return true @@ -334,7 +373,7 @@ const nodes = [] const edges = [] tasks.forEach((task) => { - const location = locations.find(l => l.taskCode === task.code) || {} + const location = locations.find((l) => l.taskCode === task.code) || {} const node = this.$refs.canvas.genNodeJSON( task.code, task.taskType, @@ -346,14 +385,16 @@ ) nodes.push(node) }) - connects.filter(r => !!r.preTaskCode).forEach((c) => { - const edge = this.$refs.canvas.genEdgeJSON( - c.preTaskCode, - c.postTaskCode, - c.name - ) - edges.push(edge) - }) + connects + .filter((r) => !!r.preTaskCode) + .forEach((c) => { + const edge = this.$refs.canvas.genEdgeJSON( + c.preTaskCode, + c.postTaskCode, + c.name + ) + edges.push(edge) + }) return { nodes, edges @@ -375,11 +416,11 @@ edgeLabel: edge.label || '' } }) - tasks.forEach(task => { + tasks.forEach((task) => { tasksMap[task.code] = task }) - return tasks.map(task => { + return tasks.map((task) => { const preTask = preTaskMap[task.code] return { name: preTask ? preTask.edgeLabel : '', @@ -461,31 +502,137 @@ */ edgeIsValid (edge) { const { sourceId } = edge - const sourceTask = this.tasks.find(task => task.code === sourceId) + 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 edges.filter((e) => e.sourceId === sourceTask.code).length <= 2 } return true + }, + /** + * Task status + */ + refreshTaskStatus () { + const instanceId = this.$route.params.id + this.loading(true) + this.getTaskState(instanceId) + .then((res) => { + this.$message(this.$t('Refresh status succeeded')) + const { taskList } = res.data + if (taskList) { + taskList.forEach((taskInstance) => { + this.$refs.canvas.setNodeStatus({ + code: taskInstance.taskCode, + state: taskInstance.state, + taskInstance + }) + }) + } + }) + .finally(() => { + this.loading(false) + }) + }, + /** + * Loading + * @param {boolean} visible + */ + loading (visible) { + if (visible) { + this.spinner = this.$loading({ + lock: true, + text: this.$t('Loading...'), + spinner: 'el-icon-loading', + background: 'rgba(0, 0, 0, 0.4)', + customClass: 'dag-fullscreen-loading' + }) + } else { + this.spinner && this.spinner.close() + } + }, + /** + * change process definition version + */ + showVersions () { + this.getProcessDefinitionVersionsPage({ + pageNo: 1, + pageSize: 10, + code: this.definitionCode + }) + .then((res) => { + let processDefinitionVersions = res.data.totalList + let total = res.data.total + let pageSize = res.data.pageSize + let pageNo = res.data.currentPage + // this.versionData.processDefinition.id = this.urlParam.id + this.versionData.processDefinition.code = this.definitionCode + this.versionData.processDefinition.version = this.version + this.versionData.processDefinition.releaseState = this.releaseState + this.versionData.processDefinitionVersions = + processDefinitionVersions + this.versionData.total = total + this.versionData.pageNo = pageNo + this.versionData.pageSize = pageSize + this.versionDrawer = true + }) + .catch((e) => { + this.$message.error(e.msg || '') + }) + }, + closeVersion () { + this.versionDrawer = false + }, + switchProcessVersion ({ version, processDefinitionCode }) { + // this.$store.state.dag.isSwitchVersion = true + this.switchProcessDefinitionVersion({ + version: version, + code: processDefinitionCode + }).then(res => { + this.$message.success($t('Switch Version Successfully')) + this.closeVersion() + this.definitionDetails._reset() + }).catch(e => { + // this.$store.state.dag.isSwitchVersion = false + this.$message.error(e.msg || '') + }) + }, + getProcessVersions ({ pageNo, pageSize, processDefinitionCode }) { + this.getProcessDefinitionVersionsPage({ + pageNo: pageNo, + pageSize: pageSize, + code: processDefinitionCode + }).then(res => { + this.versionData.processDefinitionVersions = res.data.totalList + this.versionData.total = res.data.total + this.versionData.pageSize = res.data.pageSize + this.versionData.pageNo = res.data.currentPage + }).catch(e => { + this.$message.error(e.msg || '') + }) + }, + deleteProcessVersion ({ version, processDefinitionCode }) { + this.deleteProcessDefinitionVersion({ + version: version, + code: processDefinitionCode + }).then(res => { + this.$message.success(res.msg || '') + this.getProcessVersions({ + pageNo: 1, + pageSize: 10, + processDefinitionCode: processDefinitionCode + }) + }).catch(e => { + this.$message.error(e.msg || '') + }) } } } - &.full-screen { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 9999; - } -} + diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue index 20f5187048..68e97fe496 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue @@ -20,7 +20,7 @@ {{$t('Current node settings')}} - + @@ -459,12 +459,11 @@ return } if (this.router.history.current.name === 'projects-instance-details') { - let stateId = $(`#${this.nodeData.id}`).attr('data-state-id') || null - if (!stateId) { + if (!this.taskInstance) { this.$message.warning(`${i18n.$t('The task has not been executed and cannot enter the sub-Process')}`) return } - this.store.dispatch('dag/getSubProcessId', { taskId: stateId }).then(res => { + this.store.dispatch('dag/getSubProcessId', { taskId: this.taskInstance.id }).then(res => { this.$emit('onSubProcess', { subProcessId: res.data.subProcessInstanceId, fromThis: this @@ -701,13 +700,22 @@ }, computed: { ...mapState('dag', [ - 'processListS' + 'processListS', + 'taskInstances' ]), /** * Child workflow entry show/hide */ _isGoSubProcess () { return this.nodeData.taskType === 'SUB_PROCESS' && this.name + }, + taskInstance () { + if (this.taskInstances.length > 0) { + return this.taskInstances.find( + (instance) => instance.taskCode === this.nodeData.id + ) + } + return null } }, components: { diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue index 4a0cf69e3e..b022dfd421 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue @@ -16,7 +16,7 @@ */ @@ -482,7 +482,7 @@ mounted () { }, computed: { - ...mapState('dag', ['projectId']) + ...mapState('dag', ['projectCode']) }, components: { } } diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js index fc183c27bd..12437bc975 100644 --- a/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js +++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js @@ -17,7 +17,6 @@ import _ from 'lodash' import io from '@/module/io' -import { tasksState } from '@/conf/home/pages/dag/_source/config' export default { /** @@ -25,19 +24,11 @@ export default { */ getTaskState ({ state }, payload) { return new Promise((resolve, reject) => { - io.get(`projects/${state.projectCode}/process-instances/${payload}/tasks`, payload, res => { - const arr = _.map(res.data.taskList, v => { - return _.cloneDeep(_.assign(tasksState[v.state], { - name: v.name, - stateId: v.id, - dependentResult: v.dependentResult - })) - }) - resolve({ - list: arr, - processInstanceState: res.data.processInstanceState, - taskList: res.data.taskList - }) + io.get(`projects/${state.projectCode}/process-instances/${payload}/tasks`, { + processInstanceId: payload + }, res => { + state.taskInstances = res.data.taskList + resolve(res) }).catch(e => { reject(e) }) diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js index b04c54f4c5..6750300430 100644 --- a/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js +++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/state.js @@ -35,8 +35,6 @@ export default { globalParams: [], // Node information tasks: [], - // Node cache information, cache the previous input - cacheTasks: {}, // Timeout alarm timeout: 0, // tenant code @@ -121,7 +119,6 @@ export default { instanceListS: [], // Operating state isDetails: false, - startup: { - - } + startup: {}, + taskInstances: [] } diff --git a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue index 2514049eff..eb135d0127 100644 --- a/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue +++ b/dolphinscheduler-ui/src/js/module/components/secondaryMenu/secondaryMenu.vue @@ -56,6 +56,7 @@