[Fix-8577][UI Next][V1.0.0-Alpha] Fix workflow instance view log bug. (#8578)

* fix query log params bug

* modify query log interval time

* query log throttle

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/dag-context-menu.tsx

@@ -35,6 +35,10 @@ const props = {
     type: Object as PropType<Cell>,
     require: true
   },
+  taskList: {
+    type: Array as PropType<Array<any>>,
+    default: []
+  },
   visible: {
     type: Boolean as PropType<boolean>,
     default: true
@@ -81,7 +85,13 @@ export default defineComponent({
     }
 
     const handleViewLog = () => {
-      ctx.emit('viewLog')
+      const taskCode = Number(props.cell?.id)
+      const taskInstance = props.taskList.find(
+        (task: any) => task.taskCode === taskCode
+      )
+      if (taskInstance) {
+        ctx.emit('viewLog', taskInstance.id, taskInstance.taskType)
+      }
     }
 
     const handleCopy = () => {
@@ -161,9 +171,11 @@ export default defineComponent({
           >
             {t('project.node.delete')}
           </div>
-          <div class={`${styles['menu-item']}`} onClick={this.handleViewLog}>
-            {t('project.node.view_log')}
-          </div>
+          {this.taskList.length > 0 && (
+            <div class={`${styles['menu-item']}`} onClick={this.handleViewLog}>
+              {t('project.node.view_log')}
+            </div>
+          )}
         </div>
       )
     )

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/index.tsx

@@ -115,6 +115,8 @@ export default defineComponent({
       menuVisible,
       startModalShow,
       logModalShow,
+      logViewTaskId,
+      logViewTaskType,
       menuHide,
       menuStart,
       viewLog,
@@ -124,7 +126,7 @@ export default defineComponent({
     })
 
     const statusTimerRef = ref()
-    const { refreshTaskStatus } = useNodeStatus({ graph })
+    const { taskList, refreshTaskStatus } = useNodeStatus({ graph })
 
     const { onDragStart, onDrop } = useDagDragAndDrop({
       graph,
@@ -183,7 +185,7 @@ export default defineComponent({
       () => {
         if (props.instance) {
           refreshTaskStatus()
-          statusTimerRef.value = setInterval(() => refreshTaskStatus(), 9000)
+          statusTimerRef.value = setInterval(() => refreshTaskStatus(), 90000)
         }
       }
     )
@@ -238,6 +240,7 @@ export default defineComponent({
           onCancel={taskCancel}
         />
         <ContextMenuItem
+          taskList={taskList.value}
           cell={menuCell.value}
           visible={menuVisible.value}
           left={pageX.value}
@@ -258,9 +261,8 @@ export default defineComponent({
         )}
         {!!props.instance && logModalShow.value && (
           <LogModal
-            v-model:show={logModalShow.value}
-            taskInstanceId={props.instance.id}
-            taskInstanceType={props.instance.taskType}
+            taskInstanceId={logViewTaskId.value}
+            taskInstanceType={logViewTaskType.value}
             onHideLog={hideLog}
           />
         )}

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-menu.ts

@@ -30,6 +30,8 @@ export function useNodeMenu(options: Options) {
   const { graph } = options
   const startModalShow = ref(false)
   const logModalShow = ref(false)
+  const logViewTaskId = ref()
+  const logViewTaskType = ref()
   const menuVisible = ref(false)
   const pageX = ref()
   const pageY = ref()
@@ -46,7 +48,9 @@ export function useNodeMenu(options: Options) {
     startModalShow.value = true
   }
 
-  const viewLog = () => {
+  const viewLog = (taskId: number, taskType: string) => {
+    logViewTaskId.value = taskId
+    logViewTaskType.value = taskType
     logModalShow.value = true
   }
 
@@ -77,6 +81,8 @@ export function useNodeMenu(options: Options) {
     pageY,
     startModalShow,
     logModalShow,
+    logViewTaskId,
+    logViewTaskType,
     menuVisible,
     menuCell,
     menuHide,

dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-node-status.ts

@@ -16,7 +16,7 @@
  */
 
 import type { Ref } from 'vue'
-import { render, h } from 'vue'
+import { render, h, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import type { Graph } from '@antv/x6'
@@ -35,6 +35,7 @@ interface Options {
 export function useNodeStatus(options: Options) {
   const { graph } = options
   const route = useRoute()
+  const taskList = ref<Array<Object>>([])
 
   const { t } = useI18n()
 
@@ -66,9 +67,9 @@ export function useNodeStatus(options: Options) {
 
     queryTaskListByProcessId(instanceId, projectCode).then((res: any) => {
       window.$message.success(t('project.workflow.refresh_status_succeeded'))
-      const { taskList } = res
-      if (taskList) {
-        taskList.forEach((taskInstance: any) => {
+      taskList.value = res.taskList
+      if (taskList.value) {
+        taskList.value.forEach((taskInstance: any) => {
           setNodeStatus(taskInstance.taskCode, taskInstance.state, taskInstance)
         })
       }
@@ -76,6 +77,7 @@ export function useNodeStatus(options: Options) {
   }
 
   return {
+    taskList,
     refreshTaskStatus
   }
 }

dolphinscheduler-ui-next/src/views/projects/workflow/instance/components/log-modal.tsx

@@ -28,7 +28,7 @@ import {
   renderSlot
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NButton, NIcon, NTooltip } from 'naive-ui'
+import { dateEnGB, NButton, NIcon, NTooltip } from 'naive-ui'
 import { queryLog } from '@/service/modules/log'
 import {
   DownloadOutlined,
@@ -68,6 +68,7 @@ export default defineComponent({
     const textareaHeight = computed(() =>
       logContentBox.value ? logContentBox.value.clientHeight : 0
     )
+    const contentRef = ref()
 
     const boxRef = reactive({
       width: '',
@@ -113,10 +114,13 @@ export default defineComponent({
             setTimeout(() => {
               window.$message.warning(t('project.workflow.no_more_log'))
             }, 1000)
-            textareaLog.value.innerHTML = t('project.workflow.no_log')
+            textareaLog.value.innerHTML =
+              contentRef.value || t('project.workflow.no_log')
           } else {
             isDataRef.value = true
-            textareaLog.value.innerHTML = res || t('project.workflow.no_log')
+            contentRef.value = res
+            textareaLog.value.innerHTML =
+              contentRef.value || t('project.workflow.no_log')
             setTimeout(() => {
               textareaLog.value.scrollTop = 2
             }, 800)
@@ -178,30 +182,28 @@ export default defineComponent({
     /**
      * up
      */
-    const onUp = _.debounce(
+    const onUp = _.throttle(
       function () {
         loadingIndex.value = loadingIndex.value - 1
         showLog()
       },
       1000,
       {
-        leading: false,
-        trailing: true
+        trailing: false
       }
     )
 
     /**
      * down
      */
-    const onDown = _.debounce(
+    const onDown = _.throttle(
       function () {
         loadingIndex.value = loadingIndex.value + 1
         showLog()
       },
       1000,
       {
-        leading: false,
-        trailing: true
+        trailing: false
       }
     )