[DS-6417][feat] add ‘view log' in the task instance context menu (#6421)

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

@@ -35,6 +35,9 @@
     <menu-item :disabled="readOnly" @on-click="onDelete">
       {{ $t("Delete") }}
     </menu-item>
+    <menu-item v-if="dagChart.type === 'instance'" :disabled="!logMenuVisible" @on-click="showLog">
+      {{ $t('View log') }}
+    </menu-item>
   </div>
 </template>
 
@@ -72,6 +75,12 @@
       },
       readOnly () {
         return this.isDetails
+      },
+      logMenuVisible () {
+        if (this.dagChart.taskInstances.length > 0) {
+          return !!this.dagChart.taskInstances.find(taskInstance => taskInstance.taskCode === this.currentTask.code)
+        }
+        return true
       }
     },
     mounted () {
@@ -136,6 +145,9 @@
       onDelete () {
         this.dagCanvas.removeNode(this.currentTask.code)
       },
+      showLog () {
+        this.dagChart.showLogDialog(this.currentTask.code)
+      },
       show (x = 0, y = 0) {
         this.dagCanvas.lockScroller()
         this.visible = true

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

@@ -25,7 +25,7 @@
       :wrapperClosable="false"
     >
       <!-- fix the bug that Element-ui(2.13.2) auto focus on the first input -->
-      <div style="width:0px;height:0px;overflow:hidden;">
+      <div style="width: 0px; height: 0px; overflow: hidden">
         <el-input type="text" />
       </div>
       <m-form-model
@@ -69,6 +69,13 @@
         @closeVersion="closeVersion"
       ></m-versions>
     </el-drawer>
+    <m-log
+        v-if="type === 'instance' && logDialog"
+        :item="logTaskInstance"
+        source='dag'
+        :task-instance-id="logTaskInstance.id"
+        @close="closeLogDialog"
+    ></m-log>
   </div>
 </template>
 
@@ -82,6 +89,7 @@
   import mStart from '../../projects/pages/definition/pages/list/_source/start.vue'
   import edgeEditModel from './canvas/edgeEditModel.vue'
   import mVersions from '../../projects/pages/definition/pages/list/_source/versions.vue'
+  import mLog from './formModel/log.vue'
 
   const DEFAULT_NODE_DATA = {
     id: null,
@@ -99,7 +107,8 @@
       mUdp,
       mStart,
       edgeEditModel,
-      mVersions
+      mVersions,
+      mLog
     },
     provide () {
       return {
@@ -140,7 +149,11 @@
         // the task status refresh timer
         statusTimer: null,
         // the process instance id
-        instanceId: -1
+        instanceId: -1,
+        // log dialog
+        logDialog: false,
+        logTaskInstance: null,
+        taskInstances: []
       }
     },
     mounted () {
@@ -294,61 +307,63 @@
             tasks: tasks,
             locations: locations
           })
-        }).then((res) => {
-          if (this.verifyConditions(res.tasks)) {
-            this.loading(true)
-            const definitionCode = this.definitionCode
-            if (definitionCode) {
-              // Edit
-              return this[
-                this.type === 'instance' ? 'updateInstance' : 'updateDefinition'
-              ](definitionCode)
-                .then((res) => {
-                  this.$message({
-                    message: res.msg,
-                    type: 'success',
-                    offset: 80
-                  })
-                  if (this.type === 'instance') {
-                    this.$router.push({
-                      path: `/projects/${this.projectCode}/instance/list`
-                    })
-                  } else {
-                    this.$router.push({
-                      path: `/projects/${this.projectCode}/definition/list`
+        })
+          .then((res) => {
+            if (this.verifyConditions(res.tasks)) {
+              this.loading(true)
+              const definitionCode = this.definitionCode
+              if (definitionCode) {
+                // Edit
+                return this[
+                  this.type === 'instance' ? 'updateInstance' : 'updateDefinition'
+                ](definitionCode)
+                  .then((res) => {
+                    this.$message({
+                      message: res.msg,
+                      type: 'success',
+                      offset: 80
                     })
-                  }
-                })
-                .catch((e) => {
-                  this.$message.error(e.msg || '')
-                })
-                .finally((e) => {
-                  this.loading(false)
-                })
-            } else {
-              // Create
-              return this.saveDAGchart()
-                .then((res) => {
-                  this.$message.success(res.msg)
-                  // source @/conf/home/pages/dag/_source/editAffirmModel/index.js
-                  if (sourceType !== 'affirm') {
-                    // Jump process definition
-                    this.$router.push({ name: 'projects-definition-list' })
-                  }
-                })
-                .catch((e) => {
-                  this.setName('')
-                  this.$message.error(e.msg || '')
-                })
-                .finally((e) => {
-                  this.loading(false)
-                })
+                    if (this.type === 'instance') {
+                      this.$router.push({
+                        path: `/projects/${this.projectCode}/instance/list`
+                      })
+                    } else {
+                      this.$router.push({
+                        path: `/projects/${this.projectCode}/definition/list`
+                      })
+                    }
+                  })
+                  .catch((e) => {
+                    this.$message.error(e.msg || '')
+                  })
+                  .finally((e) => {
+                    this.loading(false)
+                  })
+              } else {
+                // Create
+                return this.saveDAGchart()
+                  .then((res) => {
+                    this.$message.success(res.msg)
+                    // source @/conf/home/pages/dag/_source/editAffirmModel/index.js
+                    if (sourceType !== 'affirm') {
+                      // Jump process definition
+                      this.$router.push({ name: 'projects-definition-list' })
+                    }
+                  })
+                  .catch((e) => {
+                    this.setName('')
+                    this.$message.error(e.msg || '')
+                  })
+                  .finally((e) => {
+                    this.loading(false)
+                  })
+              }
             }
-          }
-        }).catch((err) => {
-          let msg = typeof err === 'string' ? err : (err.msg || '')
-          this.$message.error(msg)
-        })
+          })
+          .catch((err) => {
+            let msg = typeof err === 'string' ? err : err.msg || ''
+            this.$message.error(msg)
+          })
       },
       verifyConditions (value) {
         let tasks = value
@@ -432,31 +447,35 @@
           tasksMap[task.code] = task
         })
 
-        const headEdges = tasks.filter(task => !preTaskMap[task.code]).map((task) => {
-          return {
-            name: '',
-            preTaskCode: 0,
-            preTaskVersion: 0,
-            postTaskCode: task.code,
-            postTaskVersion: task.version || 0,
-            // conditionType and conditionParams are reserved
-            conditionType: 0,
-            conditionParams: {}
-          }
-        })
+        const headEdges = tasks
+          .filter((task) => !preTaskMap[task.code])
+          .map((task) => {
+            return {
+              name: '',
+              preTaskCode: 0,
+              preTaskVersion: 0,
+              postTaskCode: task.code,
+              postTaskVersion: task.version || 0,
+              // conditionType and conditionParams are reserved
+              conditionType: 0,
+              conditionParams: {}
+            }
+          })
 
-        return edges.map(edge => {
-          return {
-            name: edge.label,
-            preTaskCode: edge.sourceId,
-            preTaskVersion: tasksMap[edge.sourceId].version || 0,
-            postTaskCode: edge.targetId,
-            postTaskVersion: tasksMap[edge.targetId].version || 0,
-            // conditionType and conditionParams are reserved
-            conditionType: 0,
-            conditionParams: {}
-          }
-        }).concat(headEdges)
+        return edges
+          .map((edge) => {
+            return {
+              name: edge.label,
+              preTaskCode: edge.sourceId,
+              preTaskVersion: tasksMap[edge.sourceId].version || 0,
+              postTaskCode: edge.targetId,
+              postTaskVersion: tasksMap[edge.targetId].version || 0,
+              // conditionType and conditionParams are reserved
+              conditionType: 0,
+              conditionParams: {}
+            }
+          })
+          .concat(headEdges)
       },
       backfill () {
         const tasks = this.tasks
@@ -479,8 +498,10 @@
         })
       },
       toSubProcess ({ subProcessCode, subInstanceId }) {
-        const tarIdentifier = this.type === 'instance' ? subInstanceId : subProcessCode
-        const curIdentifier = this.type === 'instance' ? this.instanceId : this.definitionCode
+        const tarIdentifier =
+          this.type === 'instance' ? subInstanceId : subProcessCode
+        const curIdentifier =
+          this.type === 'instance' ? this.instanceId : this.definitionCode
         let subs = []
         let olds = this.$route.query.subs
         if (olds) {
@@ -532,6 +553,7 @@
             this.$message(this.$t('Refresh status succeeded'))
             const { taskList } = res.data
             if (taskList) {
+              this.taskInstances = taskList
               taskList.forEach((taskInstance) => {
                 this.$refs.canvas.setNodeStatus({
                   code: taskInstance.taskCode,
@@ -598,42 +620,67 @@
         this.switchProcessDefinitionVersion({
           version: version,
           code: processDefinitionCode
-        }).then(res => {
-          this.$message.success($t('Switch Version Successfully'))
-          this.closeVersion()
-          this.definitionDetails.init()
-        }).catch(e => {
-          this.$message.error(e.msg || '')
         })
+          .then((res) => {
+            this.$message.success($t('Switch Version Successfully'))
+            this.closeVersion()
+            this.definitionDetails.init()
+          })
+          .catch((e) => {
+            this.$message.error(e.msg || '')
+          })
       },
       getProcessVersions ({ pageNo, pageSize, processDefinitionCode }) {
         this.getProcessDefinitionVersionsPage({
           pageNo: pageNo,
           pageSize: pageSize,
           code: processDefinitionCode
-        }).then(res => {
-          this.versionData.processDefinitionVersions = res.data.totalList
-          this.versionData.total = res.data.total
-          this.versionData.pageSize = res.data.pageSize
-          this.versionData.pageNo = res.data.currentPage
-        }).catch(e => {
-          this.$message.error(e.msg || '')
         })
+          .then((res) => {
+            this.versionData.processDefinitionVersions = res.data.totalList
+            this.versionData.total = res.data.total
+            this.versionData.pageSize = res.data.pageSize
+            this.versionData.pageNo = res.data.currentPage
+          })
+          .catch((e) => {
+            this.$message.error(e.msg || '')
+          })
       },
       deleteProcessVersion ({ version, processDefinitionCode }) {
         this.deleteProcessDefinitionVersion({
           version: version,
           code: processDefinitionCode
-        }).then(res => {
-          this.$message.success(res.msg || '')
-          this.getProcessVersions({
-            pageNo: 1,
-            pageSize: 10,
-            processDefinitionCode: processDefinitionCode
+        })
+          .then((res) => {
+            this.$message.success(res.msg || '')
+            this.getProcessVersions({
+              pageNo: 1,
+              pageSize: 10,
+              processDefinitionCode: processDefinitionCode
+            })
+          })
+          .catch((e) => {
+            this.$message.error(e.msg || '')
           })
-        }).catch(e => {
-          this.$message.error(e.msg || '')
+      },
+      /**
+       * Log dialog
+       */
+      closeLogDialog () {
+        this.logDialog = false
+        this.logTaskInstance = null
+      },
+      showLogDialog (taskDefinitionCode) {
+        const taskInstance = this.taskInstances.find(taskInstance => {
+          return taskInstance.taskCode === taskDefinitionCode
         })
+        if (taskInstance) {
+          this.logTaskInstance = {
+            id: taskInstance.id,
+            type: taskInstance.taskType
+          }
+          this.logDialog = true
+        }
       }
     }
   }

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

@@ -94,7 +94,6 @@
         type: String,
         default: 'from'
       },
-      logId: Number,
       taskInstanceId: {
         type: Number,
         default: 0
@@ -172,7 +171,7 @@
        */
       _downloadLog () {
         downloadFile('log/download-log', {
-          taskInstanceId: this.taskInstanceId || this.logId
+          taskInstanceId: this.taskInstanceId
         })
       },
       /**
@@ -233,7 +232,7 @@
     watch: {},
     created () {
       // Source is a task instance
-      if (this.source === 'list') {
+      if (this.source === 'list' || this.source === 'dag') {
         this.$message.info(`${i18n.$t('Loading Log...')}`)
         this._ckLog()
       }
@@ -246,7 +245,7 @@
     computed: {
       _rtParam () {
         return {
-          taskInstanceId: this.taskInstanceId || this.logId,
+          taskInstanceId: this.taskInstanceId,
           skipLineNum: parseInt(`${this.loadingIndex ? this.loadingIndex + '000' : 0}`),
           limit: parseInt(`${this.loadingIndex ? this.loadingIndex + 1 : 1}000`)
         }

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

@@ -90,7 +90,7 @@
       :show-close="false"
       :visible.sync="logDialog"
       width="auto">
-      <m-log :key="logId" :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>
+      <m-log :key="taskInstanceId" :item="item" :source="source" :taskInstanceId="taskInstanceId" @close="close"></m-log>
     </el-dialog>
   </div>
 </template>
@@ -110,7 +110,7 @@
         logDialog: false,
         item: {},
         source: '',
-        logId: null
+        taskInstanceId: null
       }
     },
     props: {
@@ -127,10 +127,9 @@
       _refreshLog (item) {
         this.item = item
         this.source = 'list'
-        this.logId = item.id
+        this.taskInstanceId = item.id
         this.logDialog = true
       },
-      ok () {},
       close () {
         this.logDialog = false
       },