[Fix][UI Next][V1.0.0-Alpha] Fix the task instance logs are not automatically updated. (#8912)

dolphinscheduler-ui-next/src/components/modal/index.tsx

@@ -16,11 +16,11 @@
  */
 
 import { defineComponent, PropType, renderSlot, Ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { NModal, NCard, NButton, NSpace } from 'naive-ui'
 import ButtonLink from '@/components/button-link'
-import { useI18n } from 'vue-i18n'
 import styles from './index.module.scss'
-import { LinkOption } from '@/components/modal/types'
+import type { LinkOption } from '@/components/modal/types'
 
 const props = {
   show: {

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -555,7 +555,8 @@ const project = {
     delay_execution: 'Delay Execution',
     forced_success: 'Forced Success',
     view_log: 'View Log',
-    download_log: 'Download Log'
+    download_log: 'Download Log',
+    refresh: 'Refresh'
   },
   dag: {
     create: 'Create Workflow',

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -552,7 +552,8 @@ const project = {
     delay_execution: '延时执行',
     forced_success: '强制成功',
     view_log: '查看日志',
-    download_log: '下载日志'
+    download_log: '下载日志',
+    refresh: '刷新'
   },
   dag: {
     create: '创建工作流',

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

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, watch } from 'vue'
+import { defineComponent, h, PropType, ref, toRefs, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NLog } from 'naive-ui'
+import { NIcon, NLog } from 'naive-ui'
+import { SyncOutlined } from '@vicons/antd'
 import { useModal } from './use-modal'
 import Modal from '@/components/modal'
 
@@ -39,11 +40,23 @@ const LogModal = defineComponent({
   setup(props, ctx) {
     const { t } = useI18n()
     const { variables, getLogs } = useModal()
+    const renderIcon = (icon: any) => {
+      return () => h(NIcon, null, { default: () => h(icon) })
+    }
 
     const confirmModal = () => {
       ctx.emit('confirmModal', props.showModalRef)
     }
 
+    const refreshLogs = () => {
+      variables.logRef = ''
+      variables.loadingRef = true
+      variables.skipLineNum = 0
+      variables.limit = 1000
+
+      getLogs()
+    }
+
     watch(
       () => props.showModalRef,
       () => {
@@ -60,10 +73,10 @@ const LogModal = defineComponent({
       }
     )
 
-    return { t, ...toRefs(variables), confirmModal }
+    return { t, ...toRefs(variables), confirmModal, renderIcon, refreshLogs }
   },
   render() {
-    const { t } = this
+    const { t, renderIcon, refreshLogs } = this
 
     return (
       <Modal
@@ -72,6 +85,14 @@ const LogModal = defineComponent({
         cancelShow={false}
         onConfirm={this.confirmModal}
         style={{ width: '60%' }}
+        headerLinks={ref([
+          {
+            text: t('project.task.refresh'),
+            show: true,
+            action: refreshLogs,
+            icon: renderIcon(SyncOutlined)
+          }
+        ])}
       >
         <NLog rows={30} log={this.logRef} loading={this.loadingRef} />
       </Modal>