Unverified Commit 320469df authored by 向偲彪's avatar 向偲彪 Committed by GitHub
Browse files

Optimize resource tree (#2400) 



* Fix the problem of data echo in script edit box

* Optimize resource tree

Co-authored-by: default avatardailidong <dailidong66@gmail.com>
parent 733acdfd

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

+2 −2
Original line number Diff line number Diff line
@@ -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

+2 −2
Original line number Diff line number Diff line
@@ -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

+9 −2
Original line number Diff line number Diff line
@@ -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

+29 −7
Original line number Diff line number Diff line
@@ -28,12 +28,15 @@ 
    <m-list-box>

      <div slot="text">{{$t('Resources')}}</div>

      <div slot="content">

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

        </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

+111 −8
Original line number Diff line number Diff line
@@ -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) {