Fix DAG add dependent project value exception # 1816 and keep requesting task interface (#1827)

* merge dev branch front-end code

* fix udfs assignment

* Fix task instance page jump

* fix udfs assignment and task instance page jump #1789

* Fixed space and icon display issues before and after the input box

* add license

* add license

* Fix data echo, style and popup cannot be closed

* Fix page number loading issue and dag not getting value

* Fix DAG add dependent project value exception # 1816 and keep requesting task interface

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

@@ -159,6 +159,9 @@
       border-radius: 0 3px 0 0;
       .ans-btn-text {
         color: #337ab7;
+        .ans-icon {
+          font-size: 16px;
+        }
       }
       .assist-btn {
         position: absolute;
@@ -206,7 +209,7 @@
               color: #333;
             }
             &.active {
-              background: #e1e2e3;
+              // background: #e1e2e3;
               i {
                 color: #2d8cf0;
               }
@@ -234,7 +237,9 @@
     border-radius: 3px 3px 0px 0px;
   }
 }
-
+#screen {
+  margin-right: 5px;
+}
 .v-modal-custom-log {
   z-index: 101;
 }

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

@@ -61,20 +61,28 @@
           <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
         </div>
         <div class="save-btn">
-          <div class="operation" style="vertical-align: middle;">
+          <div class="operation" style="vertical-align: middle;"> 
             <a href="javascript:"
                v-for="(item,$index) in toolOperList"
                :class="_operationClass(item)"
                :id="item.code"
                :key="$index"
                @click="_ckOperation(item,$event)">
-              <em :class="item.icon" data-toggle="tooltip" :title="item.description" ></em>
+              <x-button type="text" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></x-button>
             </a>
           </div>
-          <x-button type="text" icon="ans-icon-triangle-solid-right" @click="dagAutomaticLayout"></x-button>
+          <x-button 
+                  type="primary" 
+                  v-tooltip.light="$t('Format DAG')"
+                  icon="ans-icon-triangle-solid-right" 
+                  size="xsmall" 
+                  data-container="body"
+                  v-if="type === 'instance'"
+                  style="vertical-align: middle;" 
+                  @click="dagAutomaticLayout">
+          </x-button>
           <x-button
-                  data-toggle="tooltip"
-                  :title="$t('Refresh DAG status')"
+                  v-tooltip.light="$t('Refresh DAG status')"
                   data-container="body"
                   style="vertical-align: middle;"
                   icon="ans-icon-refresh"
@@ -189,10 +197,6 @@
           Dag.backfill(true)
           if (this.type === 'instance') {
             this._getTaskState(false).then(res => {})
-            // Round robin acquisition status
-            this.setIntervalP = setInterval(() => {
-              this._getTaskState(true).then(res => {})
-            }, 90000)
           }
         } else {
           Dag.create()

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

@@ -22,7 +22,7 @@
         </x-option>
       </x-select>
       <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @on-change="_onChangeDefinitionId">
-        <x-option v-for="item in definitionList" :key="item.value" :value="item.value" :label="item.label">
+        <x-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
         </x-option>
       </x-select>
       <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks">
@@ -64,7 +64,6 @@
     data () {
       return {
         list: [],
-        definitionList: [],
         projectList: [],
         cycleList: cycleList,
         isInstance: false,
@@ -88,16 +87,19 @@
       _add () {
         // btn loading
         this.isLoading = true
-        // dependItemList index
-        let is = (value) => _.some(this.dependItemList, { definitionId: value })
-        let noArr = _.filter(this.definitionList, v => !is(v.value))
-        let value = noArr[0] && noArr[0].value || null
-        let val = value || this.definitionList[0].value
+        // // dependItemList index
+        // let is = (value) => _.some(this.dependItemList, { definitionId: value })
+        // let noArr = _.filter(this.definitionList, v => !is(v.value))
+        // let value = noArr[0] && noArr[0].value || null
+        // let val = value || this.definitionList[0].value
         // add task list
         let projectId = this.projectList[0].value
-        this._getDependItemList(val).then(depTasksList => {
-          this.$nextTick(() => {
-            this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(val, depTasksList,projectId)))
+        this._getProcessByProjectId(projectId).then(definitionList => {
+          let val = definitionList[0].value
+          this._getDependItemList(val).then(depTasksList => {
+            this.$nextTick(() => {
+              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(val, definitionList, depTasksList, projectId)))
+            })
           })
         })
         // remove tooltip
@@ -143,13 +145,13 @@
       _getProcessByProjectId (id) {
         return new Promise((resolve, reject) => {
           this.store.dispatch('dag/getProcessByProjectId', { projectId: id }).then(res => {
-            this.definitionList = _.map(_.cloneDeep(res), v => {
+            let definitionList = _.map(_.cloneDeep(res), v => {
               return {
                 value: v.id,
                 label: v.name
               }
             })
-            resolve(res)
+            resolve(definitionList)
           })
         })
       },
@@ -175,7 +177,7 @@
       _onChangeProjectId ({ value }) {
         this._getProcessByProjectId(value).then(definitionList => {
           /*this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item))*/
-          let definitionId = definitionList[0].id
+          let definitionId = definitionList[0].value
           this._getDependItemList(definitionId).then(depTasksList => {
             let item = this.dependItemList[this.itemIndex]
             // init set depTasks All
@@ -191,8 +193,6 @@
           let item = this.dependItemList[this.itemIndex]
           // init set depTasks All
           item.depTasks = 'ALL'
-          // set dependItemList item data
-          this.$set(this.dependItemList, this.itemIndex, this._rtOldParams(value, depTasksList, item))
         })
       },
       _onChangeCycle ({ value }) {
@@ -200,10 +200,11 @@
         this.$set(this.dependItemList[this.itemIndex], 'dateValue', list[0].value)
         this.$set(this.dependItemList[this.itemIndex], 'dateValueList', list)
       },
-      _rtNewParams (value, depTasksList,projectId) {
+      _rtNewParams (value, definitionList, depTasksList, projectId) {
         return {
           projectId: projectId,
           definitionId: value,
+          definitionList: definitionList,
           depTasks: 'ALL',
           depTasksList: depTasksList,
           cycle: 'day',
@@ -212,10 +213,11 @@
           state: ''
         }
       },
-      _rtOldParams (value,depTasksList, item) {
+      _rtOldParams (value, definitionList, depTasksList, item) {
         return {
           projectId: item.projectId,
           definitionId: value,
+          definitionList: definitionList,
           depTasks: item.depTasks || 'ALL',
           depTasksList: depTasksList,
           cycle: item.cycle,
@@ -257,9 +259,9 @@
         let projectId = this.projectList[0].value
         if (!this.dependItemList.length) {
           this._getProcessByProjectId(projectId).then(definitionList => {
-            let value = this.definitionList[0].value
+            let value = definitionList[0].value
             this._getDependItemList(value).then(depTasksList => {
-              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(value, depTasksList,projectId)))
+              this.$emit('dependItemListEvent', _.concat(this.dependItemList, this._rtNewParams(value, definitionList, depTasksList, projectId)))
             })
           })
         } else {
@@ -269,7 +271,7 @@
           this._getDependItemList(ids, false).then(res => {
             _.map(this.dependItemList, (v, i) => {
               this._getProcessByProjectId(v.projectId).then(definitionList => {
-                this.$set(this.dependItemList, i, this._rtOldParams(v.definitionId, ['ALL'].concat(_.map(res[v.definitionId] || [], v => v.name)), v))
+                this.$set(this.dependItemList, i, this._rtOldParams(v.definitionId, definitionList, ['ALL'].concat(_.map(res[v.definitionId] || [], v => v.name)), v))
               })
             })
           })

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

@@ -374,6 +374,7 @@ export default {
   'All_1': 'All',
   'Toolbar': 'Toolbar',
   'View variables': 'View variables',
+  'Format DAG': 'Format DAG',
   'Refresh DAG status': 'Refresh DAG status',
   'Return_1': 'Return',
   'Please enter format': 'Please enter format',

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

@@ -369,6 +369,7 @@ export default {
   'All_1': '成功或失败都发',
   'Toolbar': '工具栏',
   'View variables': '查看变量',
+  'Format DAG': '格式化DAG',
   'Refresh DAG status': '刷新DAG状态',
   'Return_1': '返回上一节点',
   'Please enter format': '请输入格式为',