[Fix-6139][UI] fix some bugs in UI (#6163)

* Disable delete button when the process is online

* the jump affirm

* process tree code

* put the processInstanceId of Gantt

* fix kinship bugs

* modify lineage id to code

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

@@ -85,9 +85,7 @@
       contextMenu
     },
     computed: {
-      ...mapState('dag', [
-        'tasks'
-      ])
+      ...mapState('dag', ['tasks'])
     },
     methods: {
       ...mapActions('dag', ['genTaskCodeList']),
@@ -237,7 +235,9 @@
         this.graph.on('cell:mouseenter', (data) => {
           const { cell, e } = data
           const isStatusIcon = (tagName) =>
-            tagName && (tagName.toLocaleLowerCase() === 'em' || tagName.toLocaleLowerCase() === 'body')
+            tagName &&
+            (tagName.toLocaleLowerCase() === 'em' ||
+              tagName.toLocaleLowerCase() === 'body')
           if (!isStatusIcon(e.target.tagName)) {
             this.setHighlight(cell)
           }
@@ -381,42 +381,38 @@
        * @param {Edge} edge
        */
       setEdgeHighlight (edge) {
-        edge.setAttrs(EDGE_HIGHLIGHT_PROPS.attrs)
         const labelName = this.getEdgeLabelName(edge)
-        if (labelName) {
-          edge.setLabels([
-            _.merge(EDGE_HIGHLIGHT_PROPS.defaultLabel, {
-              attrs: {
-                label: {
-                  text: labelName
-                }
-              }
-            })
-          ])
-        }
+        edge.setAttrs(EDGE_HIGHLIGHT_PROPS.attrs)
+        edge.setLabels([
+          _.merge(
+            {
+              attrs: _.cloneDeep(EDGE_HIGHLIGHT_PROPS.defaultLabel.attrs)
+            },
+            {
+              attrs: { label: { text: labelName } }
+            }
+          )
+        ])
       },
       /**
        * Reset edge style
        * @param {Edge} edge
        */
       resetEdgeStyle (edge) {
-        edge.setAttrs(EDGE_PROPS.attrs)
         const labelName = this.getEdgeLabelName(edge)
-        if (labelName) {
-          edge.setLabels([
-            {
-              attrs: {
-                label: {
-                  fill: EDGE_PROPS.defaultLabel.attrs.label.fill,
-                  text: labelName
-                },
-                body: {
-                  stroke: EDGE_PROPS.defaultLabel.attrs.body.stroke
-                }
+        edge.setAttrs(EDGE_PROPS.attrs)
+        edge.setLabels([
+          {
+            ..._.merge(
+              {
+                attrs: _.cloneDeep(EDGE_PROPS.defaultLabel.attrs)
+              },
+              {
+                attrs: { label: { text: labelName } }
               }
-            }
-          ])
-        }
+            )
+          }
+        ])
       },
       /**
        * Set cell highlight
@@ -644,7 +640,7 @@
         this.graph.removeCells(cells)
         cells.forEach((cell) => {
           if (cell.isNode()) {
-            this.removeTask(cell.id)
+            this.removeTask(+cell.id)
           }
         })
       },
@@ -761,12 +757,12 @@
         const nodes = this.getNodes()
         const edges = this.getEdges()
         const nodesMap = {}
-        nodes.forEach(node => {
+        nodes.forEach((node) => {
           nodesMap[node.id] = node
         })
         return edges
-          .filter(edge => edge.targetId === code)
-          .map(edge => nodesMap[edge.sourceId])
+          .filter((edge) => edge.targetId === code)
+          .map((edge) => nodesMap[edge.sourceId])
       },
       /**
        * set prev nodes
@@ -786,7 +782,7 @@
             }
           }
         })
-        preNodeCodes.forEach(preCode => {
+        preNodeCodes.forEach((preCode) => {
           if (currPreCodes.includes(preCode) || preCode === code) return
           const edge = this.genEdgeJSON(preCode, code)
           this.graph.addEdge(edge)
@@ -802,12 +798,12 @@
         const nodes = this.getNodes()
         const edges = this.getEdges()
         const nodesMap = {}
-        nodes.forEach(node => {
+        nodes.forEach((node) => {
           nodesMap[node.id] = node
         })
         return edges
-          .filter(edge => edge.sourceId === code)
-          .map(edge => nodesMap[edge.targetId])
+          .filter((edge) => edge.sourceId === code)
+          .map((edge) => nodesMap[edge.targetId])
       },
       /**
        * set post nodes
@@ -827,7 +823,7 @@
             }
           }
         })
-        postNodeCodes.forEach(postCode => {
+        postNodeCodes.forEach((postCode) => {
           if (currPostCodes.includes(postCode) || postCode === code) return
           const edge = this.genEdgeJSON(code, postCode)
           this.graph.addEdge(edge)

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

@@ -55,6 +55,7 @@
         class="toolbar-operation"
         :content="$t('Delete selected lines or nodes')"
         placement="bottom"
+        v-if="!isDetails"
       >
         <i class="el-icon-delete" @click="removeCells"></i>
       </el-tooltip>
@@ -135,6 +136,7 @@
 
 <script>
   import { findComponentDownward } from '@/module/util/'
+  import { mapState } from 'vuex'
 
   export default {
     name: 'dag-toolbar',
@@ -144,6 +146,11 @@
         canvasRef: null
       }
     },
+    computed: {
+      ...mapState('dag', [
+        'isDetails'
+      ])
+    },
     methods: {
       getDagCanvasRef () {
         if (this.canvasRef) {

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

@@ -137,6 +137,8 @@
       }
     },
     mounted () {
+      this.setIsEditDag(false)
+
       if (this.type === 'instance') {
         this.definitionCode = this.$route.query.code
       } else if (this.type === 'definition') {
@@ -163,6 +165,8 @@
       }
     },
     beforeDestroy () {
+      this.resetParams()
+
       clearInterval(this.statusTimer)
       window.removeEventListener('resize', this.resizeDebounceFunc)
     },
@@ -171,7 +175,6 @@
         'tasks',
         'locations',
         'connects',
-        'isEditDag',
         'name',
         'isDetails',
         'projectCode',
@@ -192,7 +195,6 @@
       ]),
       ...mapMutations('dag', [
         'addTask',
-        'setTasks',
         'setConnects',
         'resetParams',
         'setIsEditDag',
@@ -266,6 +268,9 @@
           let tasks = this.tasks || []
           const edges = this.$refs.canvas.getEdges()
           const nodes = this.$refs.canvas.getNodes()
+          if (!nodes.length) {
+            reject(this.$t('Failed to create node to save'))
+          }
           const connects = this.buildConnects(edges, tasks)
           this.setConnects(connects)
           const locations = nodes.map((node) => {
@@ -332,6 +337,9 @@
                 })
             }
           }
+        }).catch((err) => {
+          let msg = typeof err === 'string' ? err : (err.msg || '')
+          this.$message.error(msg)
         })
       },
       verifyConditions (value) {
@@ -578,16 +586,14 @@
         this.versionDrawer = false
       },
       switchProcessVersion ({ version, processDefinitionCode }) {
-        // this.$store.state.dag.isSwitchVersion = true
         this.switchProcessDefinitionVersion({
           version: version,
           code: processDefinitionCode
         }).then(res => {
           this.$message.success($t('Switch Version Successfully'))
           this.closeVersion()
-          this.definitionDetails._reset()
+          this.definitionDetails.init()
         }).catch(e => {
-          // this.$store.state.dag.isSwitchVersion = false
           this.$message.error(e.msg || '')
         })
       },

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

@@ -71,7 +71,7 @@ Affirm.paramVerification = (name) => {
     }
   } else {
     // View history direct jump
-    flag = name === 'projects-instance-details' ? true : (dagStore.isSwitchVersion || !dagStore.isEditDag)
+    flag = name === 'projects-instance-details' ? true : !dagStore.isEditDag
   }
   return flag
 }
@@ -85,7 +85,7 @@ Affirm.isPop = (fn) => {
     cancelButtonText: `${i18n.$t('Cancel')}`,
     type: 'warning'
   }).then(() => {
-    findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
+    findComponentDownward($root, 'dag-chart').onSave('affirm').then(() => {
       fn()
     }).catch(() => {
       fn()

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue

@@ -203,7 +203,7 @@
         return _.filter(publishStatus, v => v.code === code)[0].desc
       },
       _treeView (item) {
-        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${item.code}` })
       },
       /**
        * Start

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue

@@ -35,7 +35,7 @@
           </el-select>
           <el-button
                   @click="_rtTasksDag"
-                  v-if="$route.query.subProcessIds"
+                  v-if="$route.query.subProcessCodes"
                   type="primary"
                   size="small"
                   icon="el-icon-d-arrow-left">
@@ -117,7 +117,7 @@
         Tree.reset()
 
         this.getViewTree({
-          processId: this.$route.params.id,
+          code: this.$route.params.code,
           limit: this.limit
         }).then(res => {
           let data = _.cloneDeep(res)
@@ -160,32 +160,32 @@
        * Return to the previous child node
        */
       _rtTasksDag () {
-        let getIds = this.$route.query.subProcessIds
-        let idsArr = getIds.split(',')
-        let ids = idsArr.slice(0, idsArr.length - 1)
-        let id = idsArr[idsArr.length - 1]
+        let subProcessCodes = this.$route.query.subProcessCodes
+        let codeList = subProcessCodes.split(',')
+        let codes = codeList.slice(0, codeList.length - 1)
+        let code = codeList[codeList.length - 1]
         let query = {}
 
-        if (id !== idsArr[0]) {
-          query = { subProcessIds: ids.join(',') }
+        if (code !== codeList[0]) {
+          query = { subProcessCodes: codes.join(',') }
         }
-        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${id}`, query: query })
+        this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${code}`, query: query })
       },
       /**
        * Subprocess processing
-       * @param subProcessId 子流程Id
+       * @param subProcessCode 子流程Code
        */
-      _subProcessHandle (subProcessId) {
-        let subProcessIds = []
-        let getIds = this.$route.query.subProcessIds
-        if (getIds) {
-          let newId = getIds.split(',')
-          newId.push(this.$route.params.id)
-          subProcessIds = newId
+      _subProcessHandle (subProcessCode) {
+        let subProcessCodes = []
+        let codes = this.$route.query.subProcessCodes
+        if (codes) {
+          let newCode = codes.split(',')
+          newCode.push(this.$route.params.code)
+          subProcessCodes = newCode
         } else {
-          subProcessIds.push(this.$route.params.id)
+          subProcessCodes.push(this.$route.params.code)
         }
-        this.$router.push({ path: `/projects/${this.projectId}/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
+        this.$router.push({ path: `/projects/${this.projectCode}/definition/tree/${subProcessCode}`, query: { subProcessCodes: subProcessCodes.join(',') } })
       },
       _onChangeSelect (o) {
         this.limit = o
@@ -193,7 +193,7 @@
       }
     },
     watch: {
-      '$route.params.id' () {
+      '$route.params.code' () {
         this._getViewTree()
       }
     },
@@ -203,7 +203,7 @@
     mounted () {
     },
     computed: {
-      ...mapState('dag', ['projectId'])
+      ...mapState('dag', ['projectCode'])
     },
     components: { mSpin, mListConstruction, mNoData }
   }

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -292,7 +292,7 @@
        * edit
        */
       _reEdit (item) {
-        this.$router.push({ path: `/projects/${this.projectId}/instance/list/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectCode}/instance/list/${item.id}` })
       },
       /**
        * Rerun
@@ -433,7 +433,7 @@
         }
       },
       _gantt (item) {
-        this.$router.push({ path: `/projects/${this.projectId}/instance/gantt/${item.id}` })
+        this.$router.push({ path: `/projects/${this.projectCode}/instance/gantt/${item.id}` })
       },
       _topCheckBoxClick (v) {
         this.list.forEach((item, i) => {

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGrid.vue

@@ -28,9 +28,6 @@
       return {}
     },
     props: {
-      id: String,
-      locations: Array,
-      connects: Array,
       isShowLabel: Boolean
     },
     methods: {
@@ -41,16 +38,16 @@
     },
     mounted () {
       const graphGrid = echarts.init(this.$refs['graph-grid'])
-      graphGrid.setOption(graphGridOption(this.locations, this.connects, this.sourceWorkFlowId, this.isShowLabel), true)
+      graphGrid.setOption(graphGridOption(this.locations, this.connects, this.sourceWorkFlowCode, this.isShowLabel), true)
       graphGrid.on('click', (params) => {
         // Jump to the definition page
-        this.$router.push({ path: `/projects/${this.projectId}/definition/list/${params.data.id}` })
+        this.$router.push({ path: `/projects/${this.projectCode}/definition/list/${params.data.code}` })
       })
     },
     components: {},
     computed: {
-      ...mapState('dag', ['projectId']),
-      ...mapState('kinship', ['locations', 'connects', 'sourceWorkFlowId'])
+      ...mapState('dag', ['projectCode']),
+      ...mapState('kinship', ['locations', 'connects', 'sourceWorkFlowCode'])
     }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js

@@ -17,8 +17,8 @@
 import _ from 'lodash'
 import i18n from '@/module/i18n/index.js'
 
-const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, id }, sourceWorkFlowId) => {
-  if (id === sourceWorkFlowId) return categoryDic.active
+const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, code }, sourceWorkFlowCode) => {
+  if (code === sourceWorkFlowCode) return categoryDic.active
   switch (true) {
     case workFlowPublishStatus === '0':
       return categoryDic['0']
@@ -30,7 +30,7 @@ const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus
   }
 }
 
-export default function (locations, links, sourceWorkFlowId, isShowLabel) {
+export default function (locations, links, sourceWorkFlowCode, isShowLabel) {
   const categoryDic = {
     active: { color: '#2D8DF0', category: i18n.$t('KinshipStateActive') },
     1: { color: '#00C800', category: i18n.$t('KinshipState1') },
@@ -38,7 +38,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
     10: { color: '#FF8F05', category: i18n.$t('KinshipState10') }
   }
   const newData = _.map(locations, (item) => {
-    const { color, category } = getCategory(categoryDic, item, sourceWorkFlowId)
+    const { color, category } = getCategory(categoryDic, item, sourceWorkFlowCode)
     return {
       ...item,
       emphasis: {

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue

@@ -22,12 +22,13 @@
                   :placeholder="$t('Process Name')"
                   @change="onChange"
                   :style="inputFocusStyle"
+                  v-model="currentItemName"
                   v-tooltip="tooltipOption(currentItemName)"
                   size="small">
           <el-option
             v-for="work in workList"
-            :key="work.id"
-            :value="work.id"
+            :key="work.code"
+            :value="work.code"
             :label="work.name"
             v-tooltip="tooltipOption(work.name)"
             >

dolphinscheduler-ui/src/js/conf/home/router/index.js

@@ -139,7 +139,7 @@ const router = new Router({
               }
             },
             {
-              path: '/projects/:projectCode/definition/tree/:id',
+              path: '/projects/:projectCode/definition/tree/:code',
               name: 'definition-tree-view-index',
               component: resolve => require(['../pages/projects/pages/definition/pages/tree/index'], resolve),
               meta: {

dolphinscheduler-ui/src/js/conf/home/store/dag/actions.js

@@ -144,7 +144,7 @@ export default {
         // timeout
         state.timeout = res.data.processDefinition.timeout
         // tenantId
-        state.tenantCode = res.data.processDefinition.tenantCode
+        state.tenantCode = res.data.processDefinition.tenantCode || 'default'
         // tasks info
         state.tasks = res.data.taskDefinitionList.map(task => _.pick(task, [
           'code',
@@ -240,7 +240,7 @@ export default {
         // timeout
         state.timeout = processDefinition.timeout
         // tenantCode
-        state.tenantCode = res.data.tenantCode
+        state.tenantCode = res.data.tenantCode || 'default'
         // tasks info
         state.tasks = taskDefinitionList.map(task => _.pick(task, [
           'code',
@@ -760,7 +760,7 @@ export default {
    */
   getViewTree ({ state }, payload) {
     return new Promise((resolve, reject) => {
-      io.get(`projects/${state.projectCode}/process-definition/${payload.code}/view-tree`, payload, res => {
+      io.get(`projects/${state.projectCode}/process-definition/${payload.code}/view-tree`, { limit: payload.limit }, res => {
         resolve(res.data)
       }).catch(e => {
         reject(e)
@@ -772,7 +772,7 @@ export default {
    */
   getViewGantt ({ state }, payload) {
     return new Promise((resolve, reject) => {
-      io.get(`projects/${state.projectCode}/process-instances/${payload.code}/view-gantt`, payload, res => {
+      io.get(`projects/${state.projectCode}/process-instances/${payload.processInstanceId}/view-gantt`, payload, res => {
         resolve(res.data)
       }).catch(e => {
         reject(e)

dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js

@@ -113,7 +113,7 @@ export default {
     state.name = (payload && payload.name) || ''
     state.description = (payload && payload.description) || ''
     state.timeout = (payload && payload.timeout) || 0
-    state.tenantCode = (payload && payload.tenantCode) || ''
+    state.tenantCode = (payload && payload.tenantCode) || 'default'
     state.processListS = (payload && payload.processListS) || []
     state.resourcesListS = (payload && payload.resourcesListS) || []
     state.resourcesListJar = (payload && payload.resourcesListJar) || []
@@ -128,6 +128,7 @@ export default {
    * @param {Task} task
    */
   addTask (state, task) {
+    state.isEditDag = true
     const i = _.findIndex(state.tasks, v => v.code === task.code)
     if (i !== -1) {
       state.tasks[i] = Object.assign(state.tasks[i], {}, task)
@@ -141,6 +142,7 @@ export default {
    * @param {string} code
    */
   removeTask (state, code) {
+    state.isEditDag = true
     state.tasks = state.tasks.filter(task => task.code !== code)
   },
   resetLocalParam (state, payload) {

dolphinscheduler-ui/src/js/conf/home/store/dag/state.js

@@ -38,7 +38,7 @@ export default {
   // Timeout alarm
   timeout: 0,
   // tenant code
-  tenantCode: '',
+  tenantCode: 'default',
   // Node location information
   locations: {},
   // Node relations

dolphinscheduler-ui/src/js/conf/home/store/kinship/actions.js

@@ -26,7 +26,7 @@ export default {
   getWorkFlowList ({ state }, payload) {
     const projectCode = localStore.getItem('projectCode')
     return new Promise((resolve, reject) => {
-      const url = `lineages/${projectCode}/list-name`
+      const url = `projects/${projectCode}/lineages/query-by-name`
       io.get(url, {
         searchVal: payload
       }, res => {
@@ -34,7 +34,7 @@ export default {
         if (res.data) {
           _.map(res.data, (item) => {
             workList.push({
-              id: `${item.workFlowId}`,
+              code: `${item.workFlowCode}`,
               name: item.workFlowName
             })
           })
@@ -52,15 +52,13 @@ export default {
   getWorkFlowDAG ({ state }, payload) {
     const projectCode = localStore.getItem('projectCode')
     return new Promise((resolve, reject) => {
-      const url = `lineages/${projectCode}/list-ids`
-      io.get(url, {
-        ids: payload
-      }, res => {
+      const url = `projects/${projectCode}/lineages/list`
+      io.get(url, { code: payload }, res => {
         let locations = []
         let connects = []
         if (res.data.workFlowList) {
-          locations = _.uniqBy(res.data.workFlowList, 'workFlowId').map((item) => ({
-            id: `${item.workFlowId}`,
+          locations = _.uniqBy(res.data.workFlowList, 'workFlowCode').map((item) => ({
+            code: `${item.workFlowCode}`,
             name: item.workFlowName,
             workFlowPublishStatus: item.workFlowPublishStatus,
             scheduleStartTime: item.scheduleStartTime,
@@ -71,11 +69,11 @@ export default {
         }
         if (res.data.workFlowRelationList) {
           connects = _.map(res.data.workFlowRelationList, (item) => ({
-            source: `${item.sourceWorkFlowId}`, // should be string, or connects will not show by echarts
-            target: `${item.targetWorkFlowId}` // should be string, or connects will not show by echarts
+            source: `${item.sourceWorkFlowCode}`, // should be string, or connects will not show by echarts
+            target: `${item.targetWorkFlowCode}` // should be string, or connects will not show by echarts
           }))
         }
-        state.sourceWorkFlowId = payload || ''
+        state.sourceWorkFlowCode = payload || ''
         // locations
         state.locations = locations /* JSON.parse(locations) */
         // connects

dolphinscheduler-ui/src/js/conf/home/store/kinship/state.js

@@ -16,7 +16,7 @@
  */
 
 export default {
-  sourceWorkFlowId: '',
+  sourceWorkFlowCode: '',
   workList: [],
   locations: [],
   connects: []