From 320469df7a520e8dcde724573f11e04374d03597 Mon Sep 17 00:00:00 2001 From: break60 <790061044@qq.com> Date: Sat, 11 Apr 2020 18:00:38 +0800 Subject: [PATCH] Optimize resource tree (#2400) * Fix the problem of data echo in script edit box * Optimize resource tree Co-authored-by: dailidong --- .../js/conf/home/pages/dag/_source/dag.scss | 4 +- .../js/conf/home/pages/dag/_source/dag.vue | 4 +- .../dag/_source/formModel/tasks/flink.vue | 11 +- .../dag/_source/formModel/tasks/python.vue | 36 ++++-- .../dag/_source/formModel/tasks/shell.vue | 119 ++++++++++++++++-- .../dag/_source/formModel/tasks/spark.vue | 11 +- .../pages/dag/_source/jumpAffirm/index.js | 2 +- .../pages/dag/_source/plugIn/jsPlumbHandle.js | 2 +- .../security/pages/users/_source/list.vue | 26 ++++ .../module/components/transfer/resource.vue | 74 ++++++++++- .../src/js/module/i18n/locale/en_US.js | 4 +- .../src/js/module/i18n/locale/zh_CN.js | 2 + 12 files changed, 265 insertions(+), 30 deletions(-) diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss index 9973750d9..886ee692b 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss @@ -130,12 +130,12 @@ } .toolbar-btn { overflow: hidden; - padding: 11px 11px 0 11px; + padding: 8px 11px 0 11px; .bar-box { width: 36px; height: 36px; float: left; - margin-bottom: 8px; + margin-bottom: 3px; border-radius: 3px; .disabled { .icos { diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue index 8628fdb8e..6f630071c 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue @@ -177,7 +177,7 @@ Endpoint: [ 'Dot', { radius: 1, cssClass: 'dot-style' } ], - Connector: 'Straight', + Connector: 'Bezier', PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style ConnectionOverlays: [ [ @@ -606,7 +606,7 @@ Endpoint: [ 'Dot', { radius: 1, cssClass: 'dot-style' } ], - Connector: 'Straight', + Connector: 'Bezier', PaintStyle: { lineWidth: 2, stroke: '#456' }, // Connection style ConnectionOverlays: [ [ diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue index abf04571f..50866afc4 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue @@ -141,7 +141,7 @@
{{$t('Resources')}}
- +
{{ node.raw.fullName }}
@@ -173,6 +173,7 @@ name: 'flink', data () { return { + valueConsistsOf: 'LEAF_PRIORITY', // Main function class mainClass: '', // Master jar package @@ -329,9 +330,15 @@ diGuiTree(item) { // Recursive convenience tree structure item.forEach(item => { item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　 - delete item.children : this.diGuiTree(item.children); + this.operationTree(item) : this.diGuiTree(item.children); }) }, + operationTree(item) { + if(item.dirctory) { + item.isDisabled =true + } + delete item.children + }, }, watch: { // Listening type diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue index 28fded41d..67669b465 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue @@ -28,12 +28,15 @@
{{$t('Resources')}}
- - + +
{{ node.raw.fullName }}
+ +
@@ -56,6 +59,8 @@ import mListBox from './_source/listBox' import mResources from './_source/resources' import mLocalParams from './_source/localParams' + import Treeselect from '@riophae/vue-treeselect' + import '@riophae/vue-treeselect/dist/vue-treeselect.css' import disabledState from '@/module/mixin/disabledState' import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror' @@ -65,6 +70,7 @@ name: 'python', data () { return { + valueConsistsOf: 'LEAF_PRIORITY', // script rawScript: '', // Custom parameter @@ -72,7 +78,8 @@ // resource(list) resourceList: [], // Cache ResourceList - cacheResourceList: [] + cacheResourceList: [], + resourceOptions: [], } }, mixins: [disabledState], @@ -147,6 +154,18 @@ editor.setValue(this.rawScript) return editor + }, + diGuiTree(item) { // Recursive convenience tree structure + item.forEach(item => { + item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　 + this.operationTree(item) : this.diGuiTree(item.children); + }) + }, + operationTree(item) { + if(item.dirctory) { + item.isDisabled =true + } + delete item.children } }, watch: { @@ -166,6 +185,9 @@ } }, created () { + let item = this.store.state.dag.resourcesListS + this.diGuiTree(item) + this.options = item let o = this.backfillItem // Non-null objects represent backfill diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue index bee095acd..df315a14f 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue @@ -34,7 +34,7 @@
{{$t('Resources')}}
- +
{{ node.raw.fullName }}
@@ -81,6 +81,7 @@ name: 'shell', data () { return { + valueConsistsOf: 'LEAF_PRIORITY', // script rawScript: '', // Custom parameter @@ -95,7 +96,9 @@ return { label: node.name } - } + }, + allNoResources: [], + noRes: [] } }, mixins: [disabledState], @@ -164,6 +167,11 @@ if (!this.$refs.refLocalParams._verifProp()) { return false } + // noRes + if (this.noRes.length>0) { + this.$message.warning(`${i18n.$t('Please delete all non-existent resources')}`) + return false + } // Process resourcelist let dataProcessing= _.map(this.resourceList, v => { return { @@ -205,8 +213,75 @@ diGuiTree(item) { // Recursive convenience tree structure item.forEach(item => { item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　 - delete item.children : this.diGuiTree(item.children); + this.operationTree(item) : this.diGuiTree(item.children); }) + }, + operationTree(item) { + if(item.dirctory) { + item.isDisabled =true + } + delete item.children + }, + searchTree(element, id) { + // 根据id查找节点 + if (element.id == id) { + return element; + } else if (element.children != null) { + var i; + var result = null; + for (i = 0; result == null && i < element.children.length; i++) { + result = this.searchTree(element.children[i], id); + } + return result; + } + return null; + }, + dataProcess(backResource) { + let isResourceId = [] + let resourceIdArr = [] + if(this.resourceList.length>0) { + this.resourceList.forEach(v=>{ + this.options.forEach(v1=>{ + if(this.searchTree(v1,v)) { + isResourceId.push(this.searchTree(v1,v)) + } + }) + }) + resourceIdArr = isResourceId.map(item=>{ + return item.id + }) + Array.prototype.diff = function(a) { + return this.filter(function(i) {return a.indexOf(i) < 0;}); + }; + let diffSet = this.resourceList.diff(resourceIdArr); + let optionsCmp = [] + if(diffSet.length>0) { + diffSet.forEach(item=>{ + backResource.forEach(item1=>{ + if(item==item1.id || item==item1.res) { + optionsCmp.push(item1) + } + }) + }) + } + let noResources = [{ + id: -1, + name: $t('No resources'), + fullName: '/'+$t('No resources'), + children: [] + }] + if(optionsCmp.length>0) { + this.allNoResources = optionsCmp + optionsCmp = optionsCmp.map(item=>{ + return {id: item.id,name: item.name,fullName: item.res} + }) + optionsCmp.forEach(item=>{ + item.isNew = true + }) + noResources[0].children = optionsCmp + this.options = this.options.concat(noResources) + } + } } }, watch: { @@ -217,10 +292,32 @@ }, computed: { cacheParams () { + let isResourceId = [] + let resourceIdArr = [] + if(this.resourceList.length>0) { + this.resourceList.forEach(v=>{ + this.options.forEach(v1=>{ + if(this.searchTree(v1,v)) { + isResourceId.push(this.searchTree(v1,v)) + } + }) + }) + resourceIdArr = isResourceId.map(item=>{ + return {id: item.id,name: item.name,res: item.fullName} + }) + } + let result = [] + resourceIdArr.forEach(item=>{ + this.allNoResources.forEach(item1=>{ + if(item.id==item1.id) { + // resultBool = true + result.push(item1) + } + }) + }) + this.noRes = result return { - resourceList: _.map(this.resourceList, v => { - return {id: v} - }), + resourceList: resourceIdArr, localParams: this.localParams } } @@ -230,29 +327,35 @@ this.diGuiTree(item) this.options = item let o = this.backfillItem + // Non-null objects represent backfill if (!_.isEmpty(o)) { this.rawScript = o.params.rawScript || '' // backfill resourceList + let backResource = o.params.resourceList || [] let resourceList = o.params.resourceList || [] if (resourceList.length) { _.map(resourceList, v => { - if(v.res) { + if(!v.id) { this.store.dispatch('dag/getResourceId',{ type: 'FILE', fullName: '/'+v.res }).then(res => { this.resourceList.push(res.id) + this.dataProcess(backResource) }).catch(e => { - this.$message.error(e.msg || '') + this.resourceList.push(v.res) + this.dataProcess(backResource) }) } else { this.resourceList.push(v.id) + this.dataProcess(backResource) } }) this.cacheResourceList = resourceList } + // backfill localParams let localParams = o.params.localParams || [] if (localParams.length) { diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue index 61662d96b..7a0052814 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue @@ -169,7 +169,7 @@
{{$t('Resources')}}
- +
{{ node.raw.fullName }}
@@ -212,6 +212,7 @@ name: 'spark', data () { return { + valueConsistsOf: 'LEAF_PRIORITY', // Main function class mainClass: '', // Master jar package @@ -295,9 +296,15 @@ diGuiTree(item) { // Recursive convenience tree structure item.forEach(item => { item.children === '' || item.children === undefined || item.children === null || item.children.length === 0?　　　　　　　　 - delete item.children : this.diGuiTree(item.children); + this.operationTree(item) : this.diGuiTree(item.children); }) }, + operationTree(item) { + if(item.dirctory) { + item.isDisabled =true + } + delete item.children + }, /** * verification */ diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js index 6ac87b337..88a258c6f 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js @@ -100,7 +100,7 @@ Affirm.isPop = (fn) => { Vue.$modal.destroy() }) }, - close () { + close () { fn() Vue.$modal.destroy() } diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js index 6a17239e6..c77127d49 100755 --- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js +++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js @@ -332,7 +332,7 @@ JSP.prototype.tasksContextmenu = function (event) { }) }) } - if (!isTwo) { + if (!isTwo) { // edit node $(`#editNodes`).click(ev => { findComponentDownward(this.dag.$root, 'dag-chart')._createNodes({ diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue index d88d6e81d..ead385c10 100644 --- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue +++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue @@ -215,6 +215,23 @@ }) }) }, + /* + getAllLeaf + */ + getAllLeaf (data) { + let result = [] + let getLeaf = (data)=> { + data.forEach(item => { + if (item.children.length==0) { + result.push(item) + } else { + getLeaf(item.children) + } + }) + } + getLeaf(data) + return result + }, _authFile (item, i) { this.$refs[`poptip-auth-${i}`][0].doClose() this.getResourceList({ @@ -240,6 +257,15 @@ }) let fileTargetList = [] let udfTargetList = [] + + let pathId = [] + data[1].forEach(v=>{ + let arr = [] + arr[0] = v + if(this.getAllLeaf(arr).length>0) { + pathId.push(this.getAllLeaf(arr)[0]) + } + }) data[1].forEach((value,index,array)=>{ if(value.type =='FILE'){ fileTargetList.push(value) diff --git a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue index 97397c180..41964a086 100644 --- a/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue +++ b/dolphinscheduler-ui/src/js/module/components/transfer/resource.vue @@ -24,10 +24,10 @@ {{$t('UDF resources')}} - +
{{ node.raw.fullName }}
 - +
{{ node.raw.fullName }}