From 10dfc650ab9af001b1f2dc06c14c029620262715 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 6 May 2024 11:32:07 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=B8=8D=E5=90=8C=E6=AD=A5=E9=97=AE=E9=A2=98=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development            |   3 +-
 .../components/job-info/custom-progress.vue   | 106 ++++++++----------
 .../src/components/job-info/index.vue         |  21 ++--
 .../src/components/job-info/stage-info.vue    |  15 ++-
 bigtop-manager-ui/src/hooks/copy.ts           |   0
 5 files changed, 77 insertions(+), 68 deletions(-)
 create mode 100644 bigtop-manager-ui/src/hooks/copy.ts

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 4af78b52..44482818 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,7 +17,8 @@ NODE_ENV=development
 
 VITE_APP_BASE='/'
 #VITE_APP_BASE_URL='http://172.29.40.96:8080'
-VITE_APP_BASE_URL='http://localhost:8080'
+# VITE_APP_BASE_URL='http://localhost:8080'
+VITE_APP_BASE_URL='http://mkwbafep.v7.idcfengye.com'
 VITE_APP_BASE_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
diff --git a/bigtop-manager-ui/src/components/job-info/custom-progress.vue b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
index cd1f234d..bc47f51d 100644
--- a/bigtop-manager-ui/src/components/job-info/custom-progress.vue
+++ b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts" setup>
-  import { computed, ref, reactive, watch, toRefs } from 'vue'
+  import { computed } from 'vue'
   import { State } from '@/api/job/types'
   import {
     MinusCircleFilled as Canceled,
@@ -36,79 +36,69 @@
     progressData: ProgressItem[]
   }
 
-  interface ProgressConfig {
-    progress: number
-    status: string
-  }
-
   const props = withDefaults(defineProps<ProgressProps>(), {})
 
-  const progressConfig = reactive<ProgressConfig>({
-    progress: 0,
-    status: 'status'
-  })
-
-  const { progress, status } = toRefs(progressConfig)
-
-  const data = ref(computed(() => props.progressData))
-  const icon = ref(Canceled)
-
-  watch(
-    () => props.state,
-    (val) => {
-      if (val === 'Pending') {
-        Object.assign(progressConfig, {
-          progress: 0,
-          status: 'normal'
-        })
+  const progressConfig = computed(() => {
+    if (props.state === 'Pending') {
+      return {
+        progress: 0,
+        status: 'normal'
       }
-      if (val === 'Successful') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'success'
-        })
-        icon.value = Successful
+    }
+    if (props.state === 'Successful') {
+      return {
+        progress: 100,
+        status: 'success',
+        icon: Successful
       }
-      if (val === 'Processing') {
-        const proportion =
-          data.value.filter((v: ProgressItem) => v.state === 'Successful')
-            .length + 1
-        Object.assign(progressConfig, {
-          progress: (proportion / data.value.length) * 100,
-          status: 'active'
-        })
+    }
+    if (props.state === 'Processing') {
+      const proportion =
+        props.progressData.filter((v: ProgressItem) => v.state === 'Successful')
+          .length + 1
+      return {
+        progress: (proportion / props.progressData.length) * 100,
+        status: 'active'
       }
-      if (val === 'Canceled') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'normal'
-        })
-        icon.value = Canceled
+    }
+    if (props.state === 'Canceled') {
+      return {
+        progress: 100,
+        status: 'normal',
+        icon: Canceled
       }
-      if (val === 'Failed') {
-        Object.assign(progressConfig, {
-          progress: 100,
-          status: 'exception'
-        })
-        icon.value = Failed
+    }
+    if (props.state === 'Failed') {
+      return {
+        progress: 100,
+        status: 'exception',
+        icon: Failed
       }
-    },
-    {
-      immediate: true
     }
-  )
+
+    return {
+      progress: 0,
+      status: 'status'
+    }
+  })
 </script>
 
 <template>
   <div>
     <a-progress
-      :percent="progress"
-      :status="status"
+      :percent="progressConfig.progress"
+      :status="progressConfig.status"
       :stroke-color="State[props.state]"
     >
       <template #format="percent">
-        <span v-if="percent < 100">{{ percent }}</span>
-        <component :is="icon" :style="{ color: State[props.state] }" />
+        <span v-if="['Processing', 'Pending'].includes(props.state)">
+          {{ percent }} %
+        </span>
+        <component
+          :is="progressConfig.icon"
+          v-else-if="progressConfig.icon"
+          :style="{ color: State[props.state] }"
+        />
       </template>
     </a-progress>
   </div>
diff --git a/bigtop-manager-ui/src/components/job-info/index.vue b/bigtop-manager-ui/src/components/job-info/index.vue
index ff195352..d8f08461 100644
--- a/bigtop-manager-ui/src/components/job-info/index.vue
+++ b/bigtop-manager-ui/src/components/job-info/index.vue
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
   import { SettingOutlined } from '@ant-design/icons-vue'
-  import { ref, watch, computed, reactive, toRaw, shallowRef } from 'vue'
+  import { ref, watch, computed, reactive, toRaw } from 'vue'
   import { useClusterStore } from '@/store/cluster'
   import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import { storeToRefs } from 'pinia'
@@ -65,9 +65,9 @@
   const jobWindowOpened = ref(false)
   const stages = ref<StageVO[]>([])
   const tasks = ref<TaskVO[]>([])
-  const breadcrumbs = ref<string[]>(['Job Info'])
+  const breadcrumbs = ref<any[]>([{ name: 'Job Info' }])
   const currTaskInfo = ref<TaskVO>()
-  const jobs = shallowRef<JobVO[]>([])
+  const jobs = ref<JobVO[]>([])
   const intervalId = ref<Pausable | undefined>()
   const logTextOrigin = ref<string>('')
   const logsInfoRef = ref<HTMLElement | null>(null)
@@ -108,6 +108,12 @@
     }
   })
 
+  watch(jobs, (val) => {
+    const len = breadcrumbs.value.length
+    const idxId = breadcrumbs.value[len - 1].id
+    stages.value = val.find((v: JobVO) => v.id == idxId)?.stages || []
+  })
+
   intervalId.value = useIntervalFn(
     async () => {
       await getJobsList()
@@ -185,19 +191,19 @@
   }
 
   const clickTask = (record: TaskVO) => {
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
     currTaskInfo.value = record
     getLogsInfo(record.id)
   }
 
   const clickJob = (record: JobVO) => {
     stages.value = record.stages
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
   }
 
   const clickStage = (record: StageVO) => {
     tasks.value = record.tasks
-    breadcrumbs.value.push(record.name)
+    breadcrumbs.value.push(record)
   }
 
   const clickBreadCrumbs = (idx: number) => {
@@ -254,7 +260,7 @@
           :key="idx"
           @click="clickBreadCrumbs(idx)"
         >
-          <a href="#">{{ item }}</a>
+          <a href="#">{{ item.name }}</a>
         </a-breadcrumb-item>
       </a-breadcrumb>
     </div>
@@ -357,6 +363,7 @@
       border-radius: 4px;
       position: relative;
       pre {
+        height: 100%;
         margin: 0;
         padding: 16px 14px;
         box-sizing: border-box;
diff --git a/bigtop-manager-ui/src/components/job-info/stage-info.vue b/bigtop-manager-ui/src/components/job-info/stage-info.vue
index 0d15f874..7fa421f7 100644
--- a/bigtop-manager-ui/src/components/job-info/stage-info.vue
+++ b/bigtop-manager-ui/src/components/job-info/stage-info.vue
@@ -19,7 +19,7 @@
 
 <script lang="ts" setup>
   import { StageVO } from '@/api/job/types.ts'
-  import { computed, reactive, ref } from 'vue'
+  import { ref, reactive, watch } from 'vue'
   import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import CustomProgress from './custom-progress.vue'
 
@@ -30,7 +30,18 @@
 
   const props = withDefaults(defineProps<StageProps>(), {})
 
-  const pagedList = ref(computed(() => props.stages))
+  const pagedList = ref<StageVO[]>([])
+
+  watch(
+    () => props.stages,
+    (val) => {
+      pagedList.value = val || []
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 
   const handlePageChange = (page: number) => {
     paginationProps.current = page
diff --git a/bigtop-manager-ui/src/hooks/copy.ts b/bigtop-manager-ui/src/hooks/copy.ts
new file mode 100644
index 00000000..e69de29b
-- 
Gitee


From 2109114ccc4fd387a2c9adacc62706da1fa146d0 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 6 May 2024 11:38:14 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 44482818..d9d7115a 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,8 +17,8 @@ NODE_ENV=development
 
 VITE_APP_BASE='/'
 #VITE_APP_BASE_URL='http://172.29.40.96:8080'
-# VITE_APP_BASE_URL='http://localhost:8080'
-VITE_APP_BASE_URL='http://mkwbafep.v7.idcfengye.com'
+VITE_APP_BASE_URL='http://localhost:8080'
+# VITE_APP_BASE_URL='http://mkwbafep.v7.idcfengye.com'
 VITE_APP_BASE_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
-- 
Gitee


From a8a2867518b2a96e468f3f4ce7f9b5eef32fc0e3 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 6 May 2024 14:33:40 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A4=9A=E4=BD=99=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=8E=BB=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development  | 1 -
 bigtop-manager-ui/src/hooks/copy.ts | 0
 2 files changed, 1 deletion(-)
 delete mode 100644 bigtop-manager-ui/src/hooks/copy.ts

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index d9d7115a..4af78b52 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -18,7 +18,6 @@ NODE_ENV=development
 VITE_APP_BASE='/'
 #VITE_APP_BASE_URL='http://172.29.40.96:8080'
 VITE_APP_BASE_URL='http://localhost:8080'
-# VITE_APP_BASE_URL='http://mkwbafep.v7.idcfengye.com'
 VITE_APP_BASE_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
diff --git a/bigtop-manager-ui/src/hooks/copy.ts b/bigtop-manager-ui/src/hooks/copy.ts
deleted file mode 100644
index e69de29b..00000000
-- 
Gitee


From fa31b5562b6b732eb12ed5d2545384750bcc1460 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 6 May 2024 15:05:50 +0800
Subject: [PATCH 4/4] if replace of if-elseif-else

---
 .../components/job-info/custom-progress.vue   | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/bigtop-manager-ui/src/components/job-info/custom-progress.vue b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
index bc47f51d..d7d2f755 100644
--- a/bigtop-manager-ui/src/components/job-info/custom-progress.vue
+++ b/bigtop-manager-ui/src/components/job-info/custom-progress.vue
@@ -44,15 +44,13 @@
         progress: 0,
         status: 'normal'
       }
-    }
-    if (props.state === 'Successful') {
+    } else if (props.state === 'Successful') {
       return {
         progress: 100,
         status: 'success',
         icon: Successful
       }
-    }
-    if (props.state === 'Processing') {
+    } else if (props.state === 'Processing') {
       const proportion =
         props.progressData.filter((v: ProgressItem) => v.state === 'Successful')
           .length + 1
@@ -60,25 +58,23 @@
         progress: (proportion / props.progressData.length) * 100,
         status: 'active'
       }
-    }
-    if (props.state === 'Canceled') {
+    } else if (props.state === 'Canceled') {
       return {
         progress: 100,
         status: 'normal',
         icon: Canceled
       }
-    }
-    if (props.state === 'Failed') {
+    } else if (props.state === 'Failed') {
       return {
         progress: 100,
         status: 'exception',
         icon: Failed
       }
-    }
-
-    return {
-      progress: 0,
-      status: 'status'
+    } else {
+      return {
+        progress: 0,
+        status: 'status'
+      }
     }
   })
 </script>
-- 
Gitee