BIGTOP-4168: Add log progress messages on the task log page (#25)

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({

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
+}

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,38 +78,39 @@
 
   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',
     'isTaskTable',
     '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]
   })
 
   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;

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>