[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,7 +307,8 @@
             tasks: tasks,
             locations: locations
           })
-        }).then((res) => {
+        })
+          .then((res) => {
             if (this.verifyConditions(res.tasks)) {
               this.loading(true)
               const definitionCode = this.definitionCode
@@ -345,8 +359,9 @@
                   })
               }
             }
-        }).catch((err) => {
-          let msg = typeof err === 'string' ? err : (err.msg || '')
+          })
+          .catch((err) => {
+            let msg = typeof err === 'string' ? err : err.msg || ''
             this.$message.error(msg)
           })
       },
@@ -432,7 +447,9 @@
           tasksMap[task.code] = task
         })
 
-        const headEdges = tasks.filter(task => !preTaskMap[task.code]).map((task) => {
+        const headEdges = tasks
+          .filter((task) => !preTaskMap[task.code])
+          .map((task) => {
             return {
               name: '',
               preTaskCode: 0,
@@ -445,7 +462,8 @@
             }
           })
 
-        return edges.map(edge => {
+        return edges
+          .map((edge) => {
             return {
               name: edge.label,
               preTaskCode: edge.sourceId,
@@ -456,7 +474,8 @@
               conditionType: 0,
               conditionParams: {}
             }
-        }).concat(headEdges)
+          })
+          .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,11 +620,13 @@
         this.switchProcessDefinitionVersion({
           version: version,
           code: processDefinitionCode
-        }).then(res => {
+        })
+          .then((res) => {
             this.$message.success($t('Switch Version Successfully'))
             this.closeVersion()
             this.definitionDetails.init()
-        }).catch(e => {
+          })
+          .catch((e) => {
             this.$message.error(e.msg || '')
           })
       },
@@ -611,12 +635,14 @@
           pageNo: pageNo,
           pageSize: pageSize,
           code: processDefinitionCode
-        }).then(res => {
+        })
+          .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 => {
+          })
+          .catch((e) => {
             this.$message.error(e.msg || '')
           })
       },
@@ -624,16 +650,37 @@
         this.deleteProcessDefinitionVersion({
           version: version,
           code: processDefinitionCode
-        }).then(res => {
+        })
+          .then((res) => {
             this.$message.success(res.msg || '')
             this.getProcessVersions({
               pageNo: 1,
               pageSize: 10,
               processDefinitionCode: processDefinitionCode
             })
-        }).catch(e => {
+          })
+          .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
       },