BIGTOP-4179: Fix wrong total number of pagination values ​​in job table

bigtop-manager-ui/src/components/job-info/job.vue

@@ -138,7 +138,6 @@
       loading.value = false
       return
     }
-    getJobsList()
     initInterval()
   }
 
@@ -147,13 +146,10 @@
       intervalId.value?.resume()
       return
     }
-    intervalId.value = useIntervalFn(
-      async () => {
-        await getJobsList()
-      },
-      MONITOR_SCHEDULE_INTERVAL,
-      { immediate: false, immediateCallback: true }
-    )
+    intervalId.value = useIntervalFn(getJobsList, MONITOR_SCHEDULE_INTERVAL, {
+      immediate: true,
+      immediateCallback: true
+    })
   }
 
   const getJobsList = async () => {
@@ -163,12 +159,9 @@
         pageSize: paginationProps.value.pageSize,
         sort: 'desc'
       } as Pagination
-      const { content } = await getJobs(clusterId.value, params)
-      jobs.value = content.map((v) => {
-        return {
-          ...v
-        }
-      })
+      const { content, total } = await getJobs(clusterId.value, params)
+      jobs.value = content.map((v) => ({ ...v }))
+      paginationProps.value.total = total
       loading.value = false
     } catch (error) {
       console.log('error :>> ', error)
@@ -255,7 +248,7 @@
     </div>
     <a-table
       v-show="getCurrPage == 'isJobTable'"
-      :scroll="{ y: 500 }"
+      :scroll="{ y: 400 }"
       :loading="loading"
       :data-source="jobs"
       :columns="columnsProp"

bigtop-manager-ui/src/components/service-add/index.vue

@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { ref, h, watch, reactive } from 'vue'
+  import { ref, h, watch, reactive, onUnmounted, onMounted } from 'vue'
   import { Modal } from 'ant-design-vue'
   import { ExclamationCircleFilled } from '@ant-design/icons-vue'
   import { useI18n } from 'vue-i18n'
@@ -187,6 +187,14 @@
       }
     })
   }
+
+  onMounted(() => {
+    componentStore.resumeIntervalFn()
+  })
+
+  onUnmounted(() => {
+    componentStore.pauseIntervalFn()
+  })
 </script>
 
 <template>

bigtop-manager-ui/src/components/svg-icon/svg-icon.vue

@@ -21,15 +21,16 @@
   import { computed } from 'vue'
 
   interface SvgIconProps {
-    prefix: string
+    prefix?: string
     name: string
-    color: string
-    className: string
+    color?: string
+    className?: string
   }
 
   const props = withDefaults(defineProps<SvgIconProps>(), {
     prefix: 'icon',
-    color: '#000'
+    color: '#000',
+    className: ''
   })
 
   const symbolId = computed(() => `#${props.prefix}-${props.name}`)

bigtop-manager-ui/src/layouts/index.vue

@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { onMounted } from 'vue'
+  import { onMounted, onUnmounted } from 'vue'
   import LayoutFooter from '@/layouts/footer.vue'
   import LayoutContent from '@/layouts/content.vue'
   import LayoutHeader from '@/layouts/header.vue'
@@ -37,14 +37,15 @@
 
   onMounted(() => {
     userStore.getUserInfo()
-
     clusterStore.loadClusters()
-
-    console.log('loading...')
     serviceStore.loadServices()
-    componentStore.loadHostComponents()
+    componentStore.resumeIntervalFn()
     configStore.loadLatestConfigs()
   })
+
+  onUnmounted(() => {
+    componentStore.pauseIntervalFn()
+  })
 </script>
 
 <template>

bigtop-manager-ui/src/pages/service/index.vue

@@ -20,7 +20,14 @@
 <script setup lang="ts">
   import { storeToRefs } from 'pinia'
   import { useRoute } from 'vue-router'
-  import { computed, onMounted, ref, watch, createVNode } from 'vue'
+  import {
+    computed,
+    onMounted,
+    ref,
+    watch,
+    createVNode,
+    onUnmounted
+  } from 'vue'
 
   import { useI18n } from 'vue-i18n'
   import { type SelectProps, type MenuProps, Modal } from 'ant-design-vue'
@@ -200,13 +207,16 @@
     activeSelect.value = serviceConfigDesc.value?.[0]
     currentConfigVersion.value = serviceConfigDesc.value?.[0].value as number
     initConfigVersion.value = serviceConfigDesc.value?.[0].value as number
-    await componentStore.loadHostComponents()
   }
 
   onMounted(() => {
     initServiceMeta()
     componentStore.resumeIntervalFn()
   })
+
+  onUnmounted(() => {
+    componentStore.pauseIntervalFn()
+  })
 </script>
 
 <template>