BIGTOP-4509: Fix query wrong components for a service

bigtop-manager-ui/src/features/create-cluster/components/check-workflow.vue

@@ -20,6 +20,7 @@
 <script setup lang="ts">
   import { Empty } from 'ant-design-vue'
   import { getJobDetails, retryJob } from '@/api/job'
+  import { JOB_STATUS } from '@/utils/constant'
 
   import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
@@ -39,14 +40,6 @@
     open: false
   })
 
-  const status = shallowRef<Record<StateType, string>>({
-    Pending: 'installing',
-    Processing: 'processing',
-    Failed: 'failed',
-    Canceled: 'canceled',
-    Successful: 'success'
-  })
-
   const stages = computed(() => {
     if (jobDetail.value.stages) {
       return [...jobDetail.value.stages].sort((a, b) => a.order! - b.order!)
@@ -144,14 +137,14 @@
             <div class="stage-item">
               <span>{{ stage.name }}</span>
               <div style="min-width: 100px">
-                <svg-icon :name="stage.state && status[stage.state]"></svg-icon>
+                <svg-icon :name="stage.state && JOB_STATUS[stage.state]"></svg-icon>
               </div>
             </div>
           </template>
           <div v-for="task in stage.tasks" :key="task.id" class="task-item">
             <span>{{ task.name }}</span>
             <a-space :size="16">
-              <svg-icon :name="task.state && status[task.state]"></svg-icon>
+              <svg-icon :name="task.state && JOB_STATUS[task.state]"></svg-icon>
               <div style="min-width: 62px">
                 <a-button
                   v-if="task.state && !['Canceled', 'Pending'].includes(task.state)"

bigtop-manager-ui/src/features/create-service/components/component-installer.vue

@@ -21,6 +21,8 @@
   import { Empty } from 'ant-design-vue'
   import { getJobDetails, retryJob } from '@/api/job'
   import { CommandVO } from '@/api/command/types'
+
+  import { JOB_STATUS } from '@/utils/constant'
   import { useCreateServiceStore } from '@/store/create-service'
 
   import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
@@ -31,20 +33,14 @@
 
   const { t } = useI18n()
   const createStore = useCreateServiceStore()
+
   const activeKey = ref<number[]>([])
   const jobDetail = ref<JobVO>({})
   const spinning = ref(false)
 
   const logsViewState = reactive<LogViewProps>({
     open: false
   })
-  const status = shallowRef<Record<StateType, string>>({
-    Pending: 'installing',
-    Processing: 'processing',
-    Failed: 'failed',
-    Canceled: 'canceled',
-    Successful: 'success'
-  })
 
   const stages = computed(() => {
     if (jobDetail.value.stages) {
@@ -144,14 +140,14 @@
             <div class="stage-item">
               <span>{{ stage.name }}</span>
               <div style="min-width: 100px">
-                <svg-icon :name="stage.state && status[stage.state]"></svg-icon>
+                <svg-icon :name="stage.state && JOB_STATUS[stage.state]"></svg-icon>
               </div>
             </div>
           </template>
           <div v-for="task in stage.tasks" :key="task.id" class="task-item">
             <span>{{ task.name }}</span>
             <a-space :size="16">
-              <svg-icon :name="task.state && status[task.state]"></svg-icon>
+              <svg-icon :name="task.state && JOB_STATUS[task.state]"></svg-icon>
               <div style="min-width: 62px">
                 <a-button
                   v-if="task.state && !['Canceled', 'Pending'].includes(task.state)"

bigtop-manager-ui/src/features/job-modal/index.vue

@@ -20,6 +20,7 @@
 <script setup lang="ts">
   import { TableColumnType, TableProps } from 'ant-design-vue'
   import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
+  import { JOB_STATUS } from '@/utils/constant'
 
   import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
   import type { CommandRes, JobStageProgressItem } from '@/store/job-progress'
@@ -43,13 +44,6 @@
 
   const { t } = useI18n()
   const breadcrumbs = ref<BreadcrumbItem[]>([])
-  const status = shallowRef<Record<StateType, string>>({
-    Pending: 'installing',
-    Processing: 'processing',
-    Failed: 'failed',
-    Canceled: 'canceled',
-    Successful: 'success'
-  })
   const apiMap = shallowRef([{ key: 'jobId' }, { key: 'stageId' }])
 
   const logsViewState = reactive<LogViewProps>({ open: false })
@@ -212,7 +206,7 @@
         </template>
         <template v-if="column.key === 'state'">
           <job-progress v-if="breadcrumbLen === 1" :key="record.id" :state="text" :progress-data="record.progress" />
-          <svg-icon v-else :name="status[record.state as StateType]"></svg-icon>
+          <svg-icon v-else :name="JOB_STATUS[record.state as StateType]"></svg-icon>
         </template>
       </template>
     </a-table>

bigtop-manager-ui/src/features/job/index.vue

@@ -20,11 +20,11 @@
 <script setup lang="ts">
   import { TableColumnType, TableProps } from 'ant-design-vue'
   import { getJobList, getStageList, getTaskList, retryJob } from '@/api/job'
+  import { POLLING_INTERVAL } from '@/utils/constant'
 
   import LogsView, { type LogViewProps } from '@/features/log-view/index.vue'
 
   import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
-  import type { ClusterVO } from '@/api/cluster/types'
   import type { ListParams } from '@/api/types'
 
   interface BreadcrumbItem {
@@ -33,16 +33,16 @@
     pagination: ListParams
   }
 
-  const POLLING_INTERVAL = 3000
   const { t } = useI18n()
+  const route = useRoute()
   const { confirmModal } = useModal()
 
-  const clusterInfo = useAttrs() as ClusterVO
+  const clusterId = ref(Number(route.params.id ?? 0))
   const pollingIntervalId = ref<any>(null)
   const breadcrumbs = ref<BreadcrumbItem[]>([
     {
       name: computed(() => t('job.job_list')),
-      id: `clusterId-${clusterInfo.id}`,
+      id: `clusterId-${clusterId.value}`,
       pagination: {
         pageNum: 1,
         pageSize: 10,
@@ -51,29 +51,23 @@
     }
   ])
   const apiMap = ref([
-    {
-      key: 'clusterId',
-      api: getJobList
-    },
-    {
-      key: 'jobId',
-      api: getStageList
-    },
-    {
-      key: 'stageId',
-      api: getTaskList
-    }
+    { key: 'clusterId', api: getJobList },
+    { key: 'jobId', api: getStageList },
+    { key: 'stageId', api: getTaskList }
   ])
+
+  const logsViewState = reactive<LogViewProps>({
+    open: false
+  })
+
   const status = shallowRef<Record<StateType, string>>({
     Pending: 'installing',
     Processing: 'processing',
     Failed: 'failed',
     Canceled: 'canceled',
     Successful: 'success'
   })
-  const logsViewState = reactive<LogViewProps>({
-    open: false
-  })
+
   const breadcrumbLen = computed(() => breadcrumbs.value.length)
   const currBreadcrumb = computed(() => breadcrumbs.value.at(-1))
   const columns = computed((): TableColumnType[] => [
@@ -217,7 +211,7 @@
     getListData(true)
     pollingIntervalId.value = setInterval(() => {
       getListData()
-    }, POLLING_INTERVAL)
+    }, POLLING_INTERVAL / 10)
   }
 
   const stopPolling = () => {
@@ -232,7 +226,7 @@
       tipText: t('job.retry'),
       async onOk() {
         try {
-          const state = await retryJob({ jobId: row.id!, clusterId: clusterInfo.id! })
+          const state = await retryJob({ jobId: row.id!, clusterId: clusterId.value! })
           row.state = state.state
         } catch (error) {
           console.log('error :>> ', error)

bigtop-manager-ui/src/features/metric/category-chart.vue

@@ -155,25 +155,26 @@
     }))
   }
 
-  onMounted(() => {
-    const selector = document.getElementById(`${chartId.value}`)
-    if (selector) {
-      initChart(selector!, option.value)
-    }
-  })
+  const renderChart = () => {
+    const el = document.getElementById(chartId.value)
+    if (el) initChart(el, option.value)
+  }
+
+  onMounted(renderChart)
+  onActivated(renderChart)
 
   watchEffect(() => {
     let series = [] as any,
       legend = { data: [] } as any
 
-    const { series: temp_series = [] } = data.value
+    const { series: temp_series = [], valueType } = data.value
     const xAxis = xAxisData.value?.map((v) => dayjs(Number(v) * 1000).format('HH:mm')) ?? []
 
     if (legendMap.value) {
       legend = new Map(legendMap.value).values()
       series = generateChartSeries(data.value, legendMap.value)
     } else {
-      if (temp_series.length > 1) {
+      if (valueType) {
         legend.data = temp_series.map((s) => s.name)
         series = [...temp_series]
       } else {

bigtop-manager-ui/src/features/metric/gauge-chart.vue

@@ -90,12 +90,13 @@
     ]
   })
 
-  onMounted(() => {
-    const selector = document.getElementById(`${chartId.value}`)
-    if (selector) {
-      initChart(document.getElementById(`${chartId.value}`)!, option.value)
-    }
-  })
+  const renderChart = () => {
+    const el = document.getElementById(chartId.value)
+    if (el) initChart(el, option.value)
+  }
+
+  onMounted(renderChart)
+  onActivated(renderChart)
 
   watchEffect(() => {
     setOptions({ series: [{ data: [{ value: percent.value }] }] })