From 5ecd17faebf2512687ba9b853691b5662e87f68a Mon Sep 17 00:00:00 2001
From: Fdefined <55788435+FU-design@users.noreply.github.com>
Date: Thu, 25 Jul 2024 17:32:35 +0800
Subject: [PATCH] BIGTOP-4168: Add log progress messages on the task log page
 (#25)

---
 bigtop-manager-ui/src/api/sse/index.ts        |   3 +-
 bigtop-manager-ui/src/api/sse/types.ts        |  23 +++
 .../src/components/job-info/job.vue           | 163 +++++++++++-------
 .../src/components/job-info/stage.vue         |  46 ++---
 .../src/components/job-info/task-log.vue      |  34 +++-
 .../src/components/job-info/task.vue          |  39 ++---
 .../src/composables/use-base-table.ts         |  76 ++++++++
 bigtop-manager-ui/src/locales/en_US/index.ts  |   4 +-
 bigtop-manager-ui/src/locales/en_US/job.ts    |  23 +++
 bigtop-manager-ui/src/locales/zh_CN/index.ts  |   4 +-
 bigtop-manager-ui/src/locales/zh_CN/job.ts    |  23 +++
 bigtop-manager-ui/src/utils/tools.ts          |   5 +-
 12 files changed, 311 insertions(+), 132 deletions(-)
 create mode 100644 bigtop-manager-ui/src/api/sse/types.ts
 create mode 100644 bigtop-manager-ui/src/composables/use-base-table.ts
 create mode 100644 bigtop-manager-ui/src/locales/en_US/job.ts
 create mode 100644 bigtop-manager-ui/src/locales/zh_CN/job.ts

diff --git a/bigtop-manager-ui/src/api/sse/index.ts b/bigtop-manager-ui/src/api/sse/index.ts
index 52ee663e..22975e58 100644
--- a/bigtop-manager-ui/src/api/sse/index.ts
+++ b/bigtop-manager-ui/src/api/sse/index.ts
@@ -19,12 +19,13 @@
 
 import axios, { type AxiosProgressEvent, type CancelTokenSource } from 'axios'
 import request from '@/api/request.ts'
+import type { LogsRes } from './types'
 
 export const getLogs = (
   clusterId: number,
   id: number,
   func: Function
-): { promise: Promise<any>; cancel: () => void } => {
+): LogsRes => {
   const source: CancelTokenSource = axios.CancelToken.source()
 
   const promise = request({
diff --git a/bigtop-manager-ui/src/api/sse/types.ts b/bigtop-manager-ui/src/api/sse/types.ts
new file mode 100644
index 00000000..6f83d3e5
--- /dev/null
+++ b/bigtop-manager-ui/src/api/sse/types.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export interface LogsRes {
+  promise: Promise<any>
+  cancel: () => void
+}
diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index d2a2b34a..e645c60a 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -18,9 +18,8 @@
 -->
 
 <script setup lang="ts">
-  import { ref, watch, computed, reactive, toRaw, toRefs, nextTick } from 'vue'
+  import { ref, watch, computed, toRefs, nextTick } from 'vue'
   import { useClusterStore } from '@/store/cluster'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { storeToRefs } from 'pinia'
   import {
     JobVO,
@@ -36,8 +35,10 @@
   import Stage from './stage.vue'
   import Task from './task.vue'
   import TaskLog from './task-log.vue'
+  import useBaseTable from '@/composables/use-base-table'
+  import type { TableColumnType, TablePaginationConfig } from 'ant-design-vue'
 
-  const columns = [
+  const columns: TableColumnType[] = [
     {
       title: 'common.name',
       dataIndex: 'name',
@@ -77,14 +78,14 @@
 
   const emits = defineEmits(['update:visible', 'closed'])
 
-  const loading = ref(false)
+  const showLogAwaitMsg = ref(false)
+  const isComplete = ref(false)
   const stages = ref<StageVO[]>([])
   const tasks = ref<TaskVO[]>([])
   const breadcrumbs = ref<any[]>([{ name: 'Job Info' }])
   const currTaskInfo = ref<TaskVO>()
-  const jobs = ref<JobVO[]>([])
   const intervalId = ref<Pausable | undefined>()
-  const logRef = ref<InstanceType<typeof TaskLog> | null>()
+  const logRef = ref<InstanceType<typeof TaskLog> | null>(null)
   const currPage = ref<string[]>([
     'isJobTable',
     'isStageTable',
@@ -92,12 +93,14 @@
     'isTaskLogs'
   ])
 
-  const paginationProps = reactive<PaginationConfig>({})
-  const jobsPageState = reactive<Pagination>({
-    pageNum: 1,
-    pageSize: 10,
-    sort: 'desc'
-  })
+  const {
+    loading,
+    columnsProp,
+    dataSource: jobs,
+    paginationProps,
+    onChange,
+    resetState
+  } = useBaseTable<JobVO>(columns, [])
 
   const getCurrPage = computed(() => {
     return currPage.value[breadcrumbs.value.length - 1]
@@ -105,10 +108,9 @@
 
   watch(visible, (val) => {
     if (val) {
+      resetState()
       loading.value = true
-      Object.assign(paginationProps, initPagedProps())
-      checkMetaOrigin(outerData.value ? true : false)
-      loading.value = false
+      checkDataOrigin(outerData.value ? true : false)
     }
   })
 
@@ -127,12 +129,13 @@
     }
   })
 
-  const checkMetaOrigin = (isOuter = false) => {
+  const checkDataOrigin = (isOuter = false) => {
     if (isOuter) {
       const { meta, currItem } = outerData.value as OuterData
       jobs.value = meta
       clickJob(meta[0])
       clickStage(currItem as StageVO)
+      loading.value = false
       return
     }
     getJobsList()
@@ -155,16 +158,21 @@
 
   const getJobsList = async () => {
     try {
-      const params = { ...toRaw(jobsPageState) }
-      const { content, total } = await getJobs(clusterId.value, params)
+      const params = {
+        pageNum: paginationProps.value.current,
+        pageSize: paginationProps.value.pageSize,
+        sort: 'desc'
+      } as Pagination
+      const { content } = await getJobs(clusterId.value, params)
       jobs.value = content.map((v) => {
         return {
           ...v
         }
       })
-      paginationProps.total = total
       loading.value = false
     } catch (error) {
+      console.log('error :>> ', error)
+    } finally {
       loading.value = false
     }
   }
@@ -173,7 +181,7 @@
     breadcrumbs.value.push(record)
     currTaskInfo.value = record
     await nextTick()
-    logRef.value?.getLogsInfo(record.id)
+    logRef.value?.getLogInfo(record.id)
   }
 
   const clickJob = (record: JobVO) => {
@@ -191,52 +199,47 @@
     breadcrumbs.value.splice(idx + 1, len)
   }
 
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-    jobsPageState.pageNum = page
-    loading.value = true
-    getJobsList()
+  const handleClose = () => {
+    intervalId.value?.pause()
+    breadcrumbs.value = [{ name: 'Job Info' }]
+    resetState()
+    emits('update:visible', false)
   }
 
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-    jobsPageState.pageSize = size
-    loading.value = true
-    getJobsList()
+  const setShowLogAwaitMsg = (status: boolean) => {
+    showLogAwaitMsg.value = status
   }
 
-  const initPagedProps = () => {
-    return {
-      current: 1,
-      pageSize: 10,
-      size: 'small',
-      showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50'],
-      total: 0,
-      onChange: handlePageChange,
-      onShowSizeChange: handlePageSizeChange
-    }
+  const onLogComplete = (status: boolean) => {
+    isComplete.value = status
   }
 
-  const handleClose = () => {
-    intervalId.value?.pause()
-    breadcrumbs.value = [{ name: 'Job Info' }]
-    jobs.value = []
-    Object.assign(jobsPageState, {
-      pageNum: 1,
-      pageSize: 10,
-      sort: 'desc'
-    })
-    emits('update:visible', false)
+  const onTableChange = (pagination: TablePaginationConfig) => {
+    onChange(pagination)
+    loading.value = true
+    getJobsList()
   }
 </script>
 
 <template>
   <a-modal :open="props.visible" width="95%" @cancel="handleClose">
     <template #footer>
-      <a-button key="back" type="primary" @click="handleClose">
-        {{ $t('common.confirm') }}
-      </a-button>
+      <div :class="{ 'footer-btns': showLogAwaitMsg }">
+        <div
+          v-if="showLogAwaitMsg"
+          class="logs-wait-msg"
+          :class="{ 'loading-dot': !isComplete }"
+        >
+          {{
+            isComplete
+              ? $t('job.log_complete_message')
+              : $t('job.log_await_message')
+          }}
+        </div>
+        <a-button key="back" type="primary" @click="handleClose">
+          {{ $t('common.confirm') }}
+        </a-button>
+      </div>
     </template>
 
     <div class="breadcrumb">
@@ -250,15 +253,15 @@
         </a-breadcrumb-item>
       </a-breadcrumb>
     </div>
-
     <a-table
       v-show="getCurrPage == 'isJobTable'"
       :scroll="{ y: 500 }"
-      :pagination="paginationProps"
       :loading="loading"
       :data-source="jobs"
-      :columns="columns"
+      :columns="columnsProp"
+      :pagination="paginationProps"
       destroy-on-close
+      @change="onTableChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
@@ -285,12 +288,56 @@
       <task :columns="columns" :tasks="tasks" @click-task="clickTask" />
     </template>
     <template v-if="getCurrPage == 'isTaskLogs'">
-      <task-log ref="logRef" />
+      <task-log
+        ref="logRef"
+        @vue:before-unmount="setShowLogAwaitMsg"
+        @on-log-receive="setShowLogAwaitMsg"
+        @on-log-complete="onLogComplete"
+      />
     </template>
   </a-modal>
 </template>
 
 <style lang="scss" scoped>
+  .footer-btns {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .logs-wait-msg {
+    margin: 0;
+    padding: 0;
+  }
+
+  .loading-dot {
+    &::after {
+      content: '';
+      animation: wait 5s 0s infinite;
+    }
+  }
+
+  @keyframes wait {
+    16% {
+      content: '.';
+    }
+    32% {
+      content: '. .';
+    }
+    48% {
+      content: '. . .';
+    }
+    64% {
+      content: '. . . .';
+    }
+    80% {
+      content: '. . . . .';
+    }
+    96% {
+      content: '. . . . . .';
+    }
+  }
   .breadcrumb {
     :deep(.ant-breadcrumb) {
       margin-bottom: 16px !important;
diff --git a/bigtop-manager-ui/src/components/job-info/stage.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
index 80942e69..183bface 100644
--- a/bigtop-manager-ui/src/components/job-info/stage.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage.vue
@@ -19,21 +19,20 @@
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
-  import { ref, reactive, watch, computed } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { watch } from 'vue'
   import CustomProgress from './custom-progress.vue'
+  import useBaseTable from '@/composables/use-base-table'
+  import type { TableColumnType } from 'ant-design-vue'
 
   interface StageProps {
     stages: StageVO[]
-    columns: any
+    columns: TableColumnType[]
   }
 
-  const props = withDefaults(defineProps<StageProps>(), {})
-  const loading = ref(false)
-  const pagedList = computed(() => {
-    return props.stages
-  })
-
+  const props = defineProps<StageProps>()
+  const baseTable = useBaseTable<StageVO>(props.columns, props.stages)
+  const { dataSource, columnsProp, loading, paginationProps, onChange } =
+    baseTable
   watch(
     () => props.stages,
     (val) => {
@@ -48,26 +47,6 @@
       deep: true
     }
   )
-
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
-
   const emits = defineEmits(['clickStage'])
   const clickStage = (record: StageVO) => {
     emits('clickStage', record)
@@ -77,11 +56,12 @@
 <template>
   <div class="stage-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
-      :loading="loading"
       :scroll="{ y: 500 }"
+      :loading="loading"
+      :columns="columnsProp"
+      :data-source="dataSource"
+      :pagination="paginationProps"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/components/job-info/task-log.vue b/bigtop-manager-ui/src/components/job-info/task-log.vue
index 7665639c..36f1bfd9 100644
--- a/bigtop-manager-ui/src/components/job-info/task-log.vue
+++ b/bigtop-manager-ui/src/components/job-info/task-log.vue
@@ -36,6 +36,8 @@
   const logMeta = ref<string>('')
   const canceler = ref<Canceler>()
 
+  const emit = defineEmits(['onLogReceive', 'onLogComplete'])
+
   watch(logMeta, (val) => {
     logText.value = val
       .split('\n\n')
@@ -45,16 +47,23 @@
       .join('\n')
   })
 
-  const getLogsInfo = async (id: number) => {
-    const { cancel } = getLogs(clusterId.value, id, getLogProgress)
+  const getLogInfo = async (id: number) => {
+    const { cancel, promise } = getLogs(clusterId.value, id, onLogReceive)
     canceler.value = cancel
+    promise.then(onLogComplete)
+    emit('onLogReceive', true)
   }
 
-  const getLogProgress = ({ event }: AxiosProgressEvent) => {
+  const onLogReceive = ({ event }: AxiosProgressEvent) => {
     logMeta.value = event.target.responseText
     scrollToBottom(logsInfoRef.value)
   }
 
+  const onLogComplete = (res: string | undefined) => {
+    cancelSseConnect()
+    emit('onLogComplete', res != undefined)
+  }
+
   const cancelSseConnect = () => {
     if (!canceler.value) {
       return
@@ -78,10 +87,12 @@
 
   onBeforeUnmount(() => {
     cancelSseConnect()
+    emit('onLogReceive', false)
+    emit('onLogComplete', false)
   })
 
   defineExpose({
-    getLogsInfo
+    getLogInfo
   })
 </script>
 
@@ -98,8 +109,10 @@
         </a-button>
       </div>
     </div>
-    <div class="logs_info">
-      <pre id="logs" ref="logsInfoRef">{{ logText }}</pre>
+    <div ref="logsInfoRef" class="logs_info">
+      <div id="logs">
+        <pre>{{ logText }}</pre>
+      </div>
     </div>
   </div>
 </template>
@@ -127,14 +140,17 @@
       background-color: #f5f5f5;
       border-radius: 4px;
       position: relative;
-      pre {
+      & > div {
         height: 100%;
         margin: 0;
         padding: 16px 14px;
         box-sizing: border-box;
-        color: #444;
         border-color: #eee;
-        line-height: 16px;
+        box-sizing: border-box;
+        pre {
+          line-height: 20px;
+          color: #444;
+        }
       }
     }
   }
diff --git a/bigtop-manager-ui/src/components/job-info/task.vue b/bigtop-manager-ui/src/components/job-info/task.vue
index d5e5b88f..79d01a3a 100644
--- a/bigtop-manager-ui/src/components/job-info/task.vue
+++ b/bigtop-manager-ui/src/components/job-info/task.vue
@@ -18,9 +18,9 @@
 -->
 
 <script setup lang="ts">
-  import { computed, reactive, ref } from 'vue'
-  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { TaskVO, State } from '@/api/job/types.ts'
+  import useBaseTable from '@/composables/use-base-table'
+  import type { TableColumnType } from 'ant-design-vue'
 
   import {
     CheckCircleTwoTone,
@@ -31,30 +31,13 @@
 
   interface TaskProps {
     tasks: TaskVO[]
-    columns: any
+    columns: TableColumnType[]
   }
-  const props = withDefaults(defineProps<TaskProps>(), {})
 
-  const pagedList = ref(computed(() => props.tasks))
-
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-  }
-
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-  }
-
-  const paginationProps = reactive<PaginationConfig>({
-    current: 1,
-    pageSize: 10,
-    size: 'small',
-    showSizeChanger: true,
-    pageSizeOptions: ['10', '20', '30', '40', '50'],
-    total: pagedList.value.length,
-    onChange: handlePageChange,
-    onShowSizeChange: handlePageSizeChange
-  })
+  const props = defineProps<TaskProps>()
+  const baseTable = useBaseTable<TaskVO>(props.columns, props.tasks)
+  const { dataSource, columnsProp, loading, paginationProps, onChange } =
+    baseTable
 
   const emits = defineEmits(['clickTask'])
   const clickTask = (record: TaskVO) => {
@@ -65,10 +48,12 @@
 <template>
   <div class="task-info">
     <a-table
-      :pagination="paginationProps"
-      :data-source="pagedList"
-      :columns="props.columns"
       :scroll="{ y: 500 }"
+      :loading="loading"
+      :columns="columnsProp"
+      :data-source="dataSource"
+      :pagination="paginationProps"
+      @change="onChange"
     >
       <template #headerCell="{ column }">
         <span>{{ $t(column.title) }}</span>
diff --git a/bigtop-manager-ui/src/composables/use-base-table.ts b/bigtop-manager-ui/src/composables/use-base-table.ts
new file mode 100644
index 00000000..1efb742a
--- /dev/null
+++ b/bigtop-manager-ui/src/composables/use-base-table.ts
@@ -0,0 +1,76 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ref, onUnmounted } from 'vue'
+import type { TablePaginationConfig, TableColumnType } from 'ant-design-vue'
+
+const useBaseTable = <T>(
+  columns: TableColumnType[],
+  rows?: T[],
+  pagination?: TablePaginationConfig | false | undefined
+) => {
+  const loading = ref(false)
+  const dataSource = ref<T[]>(rows || [])
+  const columnsProp = ref<TableColumnType[]>(columns)
+  const paginationProps = ref<TablePaginationConfig>({
+    current: 1,
+    pageSize: 10,
+    total: dataSource.value.length,
+    size: 'small',
+    showSizeChanger: true,
+    pageSizeOptions: ['10', '20', '30', '40', '50']
+  })
+
+  // merge pagination config
+  if (pagination) {
+    paginationProps.value = Object.assign(paginationProps.value, pagination)
+  }
+
+  const onChange = (pagination: TablePaginationConfig) => {
+    paginationProps.value = Object.assign(paginationProps.value, pagination)
+  }
+
+  const resetState = () => {
+    loading.value = false
+    dataSource.value = []
+    paginationProps.value = {
+      current: 1,
+      pageSize: 10,
+      total: dataSource.value.length || 0,
+      size: 'small',
+      showSizeChanger: true,
+      pageSizeOptions: ['10', '20', '30', '40', '50']
+    }
+  }
+
+  onUnmounted(() => {
+    resetState()
+  })
+
+  return {
+    columnsProp,
+    dataSource,
+    loading,
+    paginationProps,
+    onChange,
+    resetState
+  }
+}
+
+export default useBaseTable
diff --git a/bigtop-manager-ui/src/locales/en_US/index.ts b/bigtop-manager-ui/src/locales/en_US/index.ts
index 1f8ed5f4..7fc6f126 100644
--- a/bigtop-manager-ui/src/locales/en_US/index.ts
+++ b/bigtop-manager-ui/src/locales/en_US/index.ts
@@ -23,6 +23,7 @@ import user from '@/locales/en_US/user.ts'
 import cluster from '@/locales/en_US/cluster.ts'
 import hosts from '@/locales/en_US/hosts.ts'
 import service from '@/locales/en_US/service.ts'
+import job from '@/locales/en_US/job.ts'
 
 export default {
   common,
@@ -30,5 +31,6 @@ export default {
   user,
   cluster,
   hosts,
-  service
+  service,
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/en_US/job.ts b/bigtop-manager-ui/src/locales/en_US/job.ts
new file mode 100644
index 00000000..52b7e992
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/en_US/job.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default {
+  log_await_message: 'Waiting for more logs',
+  log_complete_message: 'Done!'
+}
diff --git a/bigtop-manager-ui/src/locales/zh_CN/index.ts b/bigtop-manager-ui/src/locales/zh_CN/index.ts
index 75218222..7ebd07b8 100644
--- a/bigtop-manager-ui/src/locales/zh_CN/index.ts
+++ b/bigtop-manager-ui/src/locales/zh_CN/index.ts
@@ -23,6 +23,7 @@ import user from '@/locales/zh_CN/user.ts'
 import cluster from '@/locales/zh_CN/cluster.ts'
 import hosts from '@/locales/zh_CN/hosts.ts'
 import service from '@/locales/zh_CN/service.ts'
+import job from '@/locales/zh_CN/job.ts'
 
 export default {
   common,
@@ -30,5 +31,6 @@ export default {
   user,
   cluster,
   hosts,
-  service
+  service,
+  job
 }
diff --git a/bigtop-manager-ui/src/locales/zh_CN/job.ts b/bigtop-manager-ui/src/locales/zh_CN/job.ts
new file mode 100644
index 00000000..9dff2981
--- /dev/null
+++ b/bigtop-manager-ui/src/locales/zh_CN/job.ts
@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default {
+  log_await_message: '获取日志中 ',
+  log_complete_message: '完成 !'
+}
diff --git a/bigtop-manager-ui/src/utils/tools.ts b/bigtop-manager-ui/src/utils/tools.ts
index 033fc370..6dc36df9 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/bigtop-manager-ui/src/utils/tools.ts
@@ -52,6 +52,7 @@ export const scrollToBottom = (container: HTMLElement | null) => {
   if (!container) {
     return
   }
-  const { clientHeight, scrollHeight } = container
-  container.scrollTop = scrollHeight - clientHeight
+  requestAnimationFrame(() => {
+    container.scrollTop = container.scrollHeight
+  })
 }