feat: Implement progress status display for job list

apache · Feb 19, 2025 · 9f803f0 · 9f803f0
1 parent 736da23
commit 9f803f0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
@@ -16,7 +16,6 @@
 NODE_ENV=development
 
 VITE_APP_BASE='/'
-# VITE_APP_BASE_URL='http://localhost:8080'
-VITE_APP_BASE_URL='http://bmdebug.s7.tunnelfrp.com'
+VITE_APP_BASE_URL='http://localhost:8080'
 VITE_APP_BASE_API='/api'
 VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'
diff --git a/bigtop-manager-ui/src/components/job/custom-progress.vue b/bigtop-manager-ui/src/components/job/custom-progress.vue
@@ -26,14 +26,9 @@
     CloseCircleFilled as Failed
   } from '@ant-design/icons-vue'
 
-  interface ProgressItem {
-    state: keyof typeof JobState
-    [property: string]: any
-  }
-
   interface ProgressProps {
     state: keyof typeof JobState
-    progressData: ProgressItem[]
+    progressData: number
   }
 
   const props = withDefaults(defineProps<ProgressProps>(), {})
@@ -51,9 +46,8 @@
         icon: Successful
       }
     } else if (props.state === 'Processing') {
-      const proportion = props.progressData.filter((v: ProgressItem) => v.state === 'Successful').length + 1
       return {
-        progress: Math.round((proportion / props.progressData.length) * 100),
+        progress: props.progressData,
         status: 'active'
       }
     } else if (props.state === 'Canceled') {

diff --git a/bigtop-manager-ui/src/components/job/index.vue b/bigtop-manager-ui/src/components/job/index.vue
@@ -25,7 +25,8 @@
   import { getJobList, getStageList, getTaskList } from '@/api/job'
   import useBaseTable from '@/composables/use-base-table'
   import LogsView, { type LogViewProps } from '@/components/log-view/index.vue'
-  import type { JobVO, StageVO, TaskListParams, TaskVO } from '@/api/job/types'
+  import CustomProgress from './custom-progress.vue'
+  import type { JobVO, StageVO, StateType, TaskListParams, TaskVO } from '@/api/job/types'
 
   interface BreadcrumbItem {
     id: string
@@ -41,6 +42,13 @@
       id: `clusterId-${route.params.id}`
     }
   ])
+  const status = shallowRef<Record<StateType, string>>({
+    Pending: 'installing',
+    Processing: 'processing',
+    Failed: 'failed',
+    Canceled: 'canceled',
+    Successful: 'success'
+  })
   const apiMap = shallowRef([
     {
       key: 'clusterId',
@@ -206,15 +214,15 @@
       :pagination="paginationProps"
       @change="tableChange"
     >
-      <template #bodyCell="{ record, column }">
+      <template #bodyCell="{ record, text, column }">
         <template v-if="column.key === 'name'">
           <a-typography-link underline @click="updateBreadcrumbs(record)">
             <span :title="record.name">{{ record.name }}</span>
           </a-typography-link>
         </template>
         <template v-if="column.key === 'state'">
-          {{ record.state }}
-          <!-- <custom-progress :key="record.id" :state="text" :progress-data="record.stages" /> -->
+          <custom-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>
         </template>
       </template>
     </a-table>

diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
@@ -356,6 +356,7 @@
       @include flexbox($gap: $space-md);
       padding: $space-md;
       :deep(.ant-tag) {
+        width: fit-content;
         @include flexbox($align: center, $gap: 4px);
       }
     }