[Fix-5825][BUG][WEB] the resource tree in the process definition of latest dev branch can't display correctly (#5826)

* resoures-shows-error

* fix codestyle error

* add license header for new js

* fix codesmell

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

@@ -0,0 +1,44 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+export function diGuiTree (items) { // Recursive convenience tree structure
+  items.forEach(item => {
+    item.children === '' || item.children === undefined || item.children === null || item.children.length === 0
+      ? operationTree(item) : diGuiTree(item.children)
+  })
+}
+
+export function operationTree (item) {
+  if (item.dirctory) {
+    item.isDisabled = true
+  }
+  delete item.children
+}
+
+export function searchTree (element, id) {
+  // 根据id查找节点
+  if (element.id === id) {
+    return element
+  } else if (element.children) {
+    let i
+    let result = null
+    for (i = 0; result === null && i < element.children.length; i++) {
+      result = searchTree(element.children[i], id)
+    }
+    return result
+  }
+  return null
+}

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

@@ -204,6 +204,7 @@
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
 
   export default {
     name: 'flink',
@@ -398,40 +399,14 @@
         })
         return true
       },
-      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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -503,8 +478,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -538,8 +513,8 @@
     created () {
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
-      this.diGuiTree(item)
-      this.diGuiTree(items)
+      diGuiTree(item)
+      diGuiTree(items)
       this.mainJarList = item
       this.mainJarLists = items
       let o = this.backfillItem

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

@@ -117,6 +117,7 @@
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
 
   export default {
     name: 'mr',
@@ -210,40 +211,14 @@
       _onCacheResourcesData (a) {
         this.cacheResourceList = a
       },
-      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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -359,8 +334,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -388,8 +363,8 @@
     created () {
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
-      this.diGuiTree(item)
-      this.diGuiTree(items)
+      diGuiTree(item)
+      diGuiTree(items)
       this.mainJarList = item
       this.mainJarLists = items
       let o = this.backfillItem

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

@@ -66,6 +66,8 @@
   import disabledState from '@/module/mixin/disabledState'
   import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
   import Clipboard from 'clipboard'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
+
   let editor
 
   export default {
@@ -198,40 +200,14 @@
 
         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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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.resourceOptions.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -297,8 +273,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.resourceOptions.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -317,7 +293,7 @@
     },
     created () {
       let item = this.store.state.dag.resourcesListS
-      this.diGuiTree(item)
+      diGuiTree(item)
       this.resourceOptions = item
       let o = this.backfillItem
 

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

@@ -69,6 +69,8 @@
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import codemirror from '@/conf/home/pages/resource/pages/file/pages/_source/codemirror'
   import Clipboard from 'clipboard'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
+
   let editor
 
   export default {
@@ -208,40 +210,14 @@
 
         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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -307,8 +283,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.options.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -327,7 +303,7 @@
     },
     created () {
       let item = this.store.state.dag.resourcesListS
-      this.diGuiTree(item)
+      diGuiTree(item)
       this.options = item
       let o = this.backfillItem
 

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

@@ -205,6 +205,8 @@
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
   import disabledState from '@/module/mixin/disabledState'
   import Clipboard from 'clipboard'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
+
   export default {
     name: 'spark',
     data () {
@@ -313,40 +315,14 @@
       _onCacheResourcesData (a) {
         this.cacheResourceList = a
       },
-      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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -521,8 +497,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.mainJarList.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -557,8 +533,8 @@
     created () {
       let item = this.store.state.dag.resourcesListS
       let items = this.store.state.dag.resourcesListJar
-      this.diGuiTree(item)
-      this.diGuiTree(items)
+      diGuiTree(item)
+      diGuiTree(items)
       this.mainJarList = item
       this.mainJarLists = items
       let o = this.backfillItem

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

@@ -99,6 +99,7 @@
   import disabledState from '@/module/mixin/disabledState'
   import Treeselect from '@riophae/vue-treeselect'
   import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+  import { diGuiTree, searchTree } from './_source/resourceTree'
 
   export default {
     name: 'waterdrop',
@@ -228,40 +229,14 @@
 
         return true
       },
-      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
-      },
-      searchTree (element, id) {
-        // 根据id查找节点
-        if (element.id === id) {
-          return element
-        } else if (element.children !== null) {
-          let i
-          let 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))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -340,8 +315,8 @@
         if (this.resourceList.length > 0) {
           this.resourceList.forEach(v => {
             this.options.forEach(v1 => {
-              if (this.searchTree(v1, v)) {
-                isResourceId.push(this.searchTree(v1, v))
+              if (searchTree(v1, v)) {
+                isResourceId.push(searchTree(v1, v))
               }
             })
           })
@@ -364,7 +339,7 @@
     },
     created () {
       let item = this.store.state.dag.resourcesListS
-      this.diGuiTree(item)
+      diGuiTree(item)
       this.options = item
       let o = this.backfillItem