Optimize resource tree (#2400)

* Fix the problem of data echo in script edit box

* Optimize resource tree
Co-authored-by: Ndailidong <dailidong66@gmail.com>

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 {

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: [
             [

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

@@ -141,7 +141,7 @@
     <m-list-box>
       <div slot="text">{{$t('Resources')}}</div>
       <div slot="content">
-        <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :placeholder="$t('Please select resources')">
+        <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -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

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

@@ -28,12 +28,15 @@
     <m-list-box>
       <div slot="text">{{$t('Resources')}}</div>
       <div slot="content">
-        <m-resources
-                ref="refResources"
-                @on-resourcesData="_onResourcesData"
-                @on-cache-resourcesData="_onCacheResourcesData"
-                :resource-list="resourceList">
-        </m-resources>
+        <treeselect v-model="resourceList" :multiple="true" :options="resourceOptions" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
+          <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
+        </treeselect>
+        <!-- <m-resources
+            ref="refResources"
+            @on-resourcesData="_onResourcesData"
+            @on-cache-resourcesData="_onCacheResourcesData"
+            :resource-list="resourceList">
+        </m-resources> -->
       </div>
     </m-list-box>
 
@@ -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

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

@@ -34,7 +34,7 @@
     <m-list-box>
       <div slot="text">{{$t('Resources')}}</div>
       <div slot="content">
-        <treeselect v-model="resourceList" :multiple="true" :options="options" :normalizer="normalizer" :placeholder="$t('Please select resources')">
+        <treeselect v-model="resourceList" :multiple="true" :options="options" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -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) {

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

@@ -169,7 +169,7 @@
     <m-list-box>
       <div slot="text">{{$t('Resources')}}</div>
       <div slot="content">
-        <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :placeholder="$t('Please select resources')">
+        <treeselect v-model="resourceList" :multiple="true" :options="mainJarList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
       </div>
@@ -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
        */

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()
           }

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({

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)

dolphinscheduler-ui/src/js/module/components/transfer/resource.vue

@@ -24,10 +24,10 @@
                 <x-button type="ghost" value="udfResource" @click="_ckUDf">{{$t('UDF resources')}}</x-button>
             </x-button-group>
         </div>
-        <treeselect v-show="checkedValue=='fileResource'" v-model="selectFileSource" :multiple="true" :options="fileList" :normalizer="normalizer" :placeholder="$t('Please select resources')">
+        <treeselect v-show="checkedValue=='fileResource'" v-model="selectFileSource" :multiple="true" :options="fileList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
-        <treeselect v-show="checkedValue=='udfResource'" v-model="selectUdfSource" :multiple="true" :options="udfList" :normalizer="normalizer" :placeholder="$t('Please select resources')">
+        <treeselect v-show="checkedValue=='udfResource'" v-model="selectUdfSource" :multiple="true" :options="udfList" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :placeholder="$t('Please select resources')">
           <div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
         </treeselect>
         <!-- <div class="select-list-box">
@@ -72,6 +72,7 @@
     name: 'transfer',
     data () {
       return {
+        valueConsistsOf: 'LEAF_PRIORITY',
         checkedValue: 'fileResource',
         sourceList: this.fileSourceList,
         targetList: this.fileTargetList,
@@ -115,11 +116,70 @@
       this.selectUdfSource = this.udfTargetList
     },
     methods: {
+      /*
+        getParent
+      */
+      getParent(data2, nodeId2) {
+        var arrRes = [];
+        if (data2.length == 0) {
+            if (!!nodeId2) {
+                arrRes.unshift(data2)
+            }
+            return arrRes;
+        }
+        let rev = (data, nodeId) => {
+            for (var i = 0, length = data.length; i < length; i++) {
+                let node = data[i];
+                if (node.id == nodeId) {
+                    arrRes.unshift(node)
+                    rev(data2, node.pid);
+                    break;
+                }
+                else {
+                    if (!!node.children) {
+                        rev(node.children, nodeId);
+                    }
+                }
+            }
+            return arrRes;
+        };
+        arrRes = rev(data2, nodeId2);
+        return arrRes;
+      },
       _ok () {
+        let fullPathId = []
+        let pathId = []
+        this.selectFileSource.forEach(v=>{
+          this.fileList.forEach(v1=>{
+            let arr = []
+            arr[0] = v1
+            if(this.getParent(arr, v).length>0) {
+              fullPathId = this.getParent(arr, v).map(v2=>{
+                return v2.id
+              })
+              pathId.push(fullPathId.join('-'))
+            }
+          })
+        })
+        let fullUdfPathId = []
+        let pathUdfId = []
+        this.selectUdfSource.forEach(v=>{
+          this.udfList.forEach(v1=>{
+            let arr = []
+            arr[0] = v1
+            if(this.getParent(arr, v).length>0) {
+              fullUdfPathId = this.getParent(arr, v).map(v2=>{
+                return v2.id
+              })
+              pathUdfId.push(fullUdfPathId.join('-'))
+            }
+          })
+        })
+        let selAllSource = pathId.concat(pathUdfId)
         this.$refs['popup'].spinnerLoading = true
         setTimeout(() => {
           this.$refs['popup'].spinnerLoading = false
-          this.$emit('onUpdate', _.map(this.selectFileSource.concat(this.selectUdfSource), v => v).join(','))
+          this.$emit('onUpdate', _.map(selAllSource, v => v).join(','))
         }, 800)
       },
       _ckFile() {
@@ -181,8 +241,14 @@
       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: {

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -587,5 +587,7 @@ export default {
   'Some Columns': 'Some Columns',
   'Branch flow': 'Branch flow',
   'Cannot select the same node for successful branch flow and failed branch flow': 'Cannot select the same node for successful branch flow and failed branch flow',
-  'Successful branch flow and failed branch flow are required': 'Successful branch flow and failed branch flow are required'
+  'Successful branch flow and failed branch flow are required': 'Successful branch flow and failed branch flow are required',
+  'No resources': 'No resources',
+  'Please delete all non-existent resources': 'Please delete all non-existent resources',
 }

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -588,4 +588,6 @@ export default {
   'Branch flow': '分支流转',
   'Cannot select the same node for successful branch flow and failed branch flow': '成功分支流转和失败分支流转不能选择同一个节点',
   'Successful branch flow and failed branch flow are required': '成功分支流转和失败分支流转必填',
+  'No resources': '未授权或已删除资源',
+  'Please delete all non-existent resources': '请删除所有未授权或已删除资源',
 }