From 3a9ca10c797d9f166edb21a91a3c9c1628dee22f Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 9 May 2024 17:56:50 +0800
Subject: [PATCH 1/6] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E9=9B=86=E7=BE=A4-?=
 =?UTF-8?q?=E9=98=B6=E6=AE=B5=E5=8A=A0=E8=BD=BD=E5=8F=AF=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BBstageName=E8=A7=A6=E5=8F=91=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/.env.development            |   3 +-
 bigtop-manager-ui/src/api/job/types.ts        |   5 +
 .../src/components/cluster-create/install.vue | 115 +++--
 .../components/cluster-create/set-hosts.vue   |   3 +-
 .../src/components/job-info/index.vue         | 333 +--------------
 .../src/components/job-info/job-info.vue      | 398 ++++++++++++++++++
 .../src/components/job-info/stage-info.vue    |  15 +-
 7 files changed, 472 insertions(+), 400 deletions(-)
 create mode 100644 bigtop-manager-ui/src/components/job-info/job-info.vue

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/api/job/types.ts b/bigtop-manager-ui/src/api/job/types.ts
index 79428ae7..0674e9a3 100644
--- a/bigtop-manager-ui/src/api/job/types.ts
+++ b/bigtop-manager-ui/src/api/job/types.ts
@@ -55,3 +55,8 @@ export interface Pagination {
   sort?: 'asc' | 'desc'
   orderBy?: string
 }
+
+export interface OuterData {
+  meta: JobVO[]
+  currItem: StageVO | TaskVO | undefined
+}
diff --git a/bigtop-manager-ui/src/components/cluster-create/install.vue b/bigtop-manager-ui/src/components/cluster-create/install.vue
index 816cd319..1ed14fb7 100644
--- a/bigtop-manager-ui/src/components/cluster-create/install.vue
+++ b/bigtop-manager-ui/src/components/cluster-create/install.vue
@@ -25,6 +25,9 @@
   import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
   import { useClusterStore } from '@/store/cluster'
   import { storeToRefs } from 'pinia'
+  import CustomProgress from '@/components/job-info/custom-progress.vue'
+  import JobInfo from '@/components/job-info/job-info.vue'
+  import { JobVO, StageVO } from '@/api/job/types'
 
   const clusterInfo = defineModel<any>('clusterInfo')
   const disableButton = defineModel<boolean>('disableButton')
@@ -33,85 +36,52 @@
   const { clusterId } = storeToRefs(clusterStore)
 
   const { t } = useI18n()
-  const installData = reactive([])
   const loading = ref(true)
-  const jobState = ref('')
-
-  const initData = async () => {
-    const res = await getJob(clusterInfo.value.jobId, clusterId.value)
-    console.log(res)
-    jobState.value = res.state
-
-    if (jobState.value !== 'Pending' && jobState.value !== 'Processing') {
-      disableButton.value = false
-      clusterInfo.value.success = jobState.value === 'Successful'
-    }
-
-    const arr: any[] = []
-    res.stages
-      .sort((a, b) => a.order - b.order)
-      .forEach((stage) => {
-        const data = {
-          key: stage.id,
-          stage: stage.name,
-          progress: 0,
-          status: '',
-          color: ''
-        }
-
-        if (stage.state === 'Pending') {
-          data.progress = 0
-          data.status = 'normal'
-          data.color = '#1677ff'
-        } else if (stage.state === 'Processing') {
-          data.progress = Math.round(
-            ((stage.tasks.filter((task) => task.state === 'Successful').length +
-              1) /
-              stage.tasks.length) *
-              100
-          )
-          data.status = 'active'
-          data.color = '#1677ff'
-        } else if (stage.state === 'Successful') {
-          data.progress = 100
-          data.status = 'success'
-          data.color = '#52c41a'
-        } else if (stage.state === 'Canceled') {
-          data.progress = 0
-          data.status = 'normal'
-          data.color = '#8c908b'
-        } else {
-          data.progress = 100
-          data.status = 'exception'
-          data.color = '#ff4d4f'
-        }
-
-        arr.push(data)
-      })
-
-    return arr
-  }
+  const jobWindowOpened = ref(false)
+  const jobState = ref<string>('')
+  const jobs = ref<JobVO[]>([])
+  const currStage = ref<StageVO>()
+  const installData = reactive([])
 
   const installColumns = [
     {
       title: t('common.stage'),
-      dataIndex: 'stage',
+      dataIndex: 'name',
       align: 'center'
     },
     {
       title: t('common.progress'),
-      dataIndex: 'progress',
+      dataIndex: 'state',
       align: 'center'
     }
   ]
 
+  const initData = async () => {
+    const res = await getJob(clusterInfo.value.jobId, clusterId.value)
+    // const res: any = await getFetch()
+    jobs.value = [res] as any
+    // console.log(res)
+    jobState.value = res.state
+
+    if (!['Pending', 'Processing'].includes(jobState.value)) {
+      disableButton.value = false
+      clusterInfo.value.success = jobState.value === 'Successful'
+    }
+    return res.stages.sort((a: StageVO, b: StageVO) => a.order - b.order)
+  }
+
+  const clickStage = (record: StageVO) => {
+    jobWindowOpened.value = true
+    currStage.value = record
+  }
+
   onBeforeMount(async () => {
     disableButton.value = true
     const { pause } = useIntervalFn(
       async () => {
         Object.assign(installData, await initData())
         loading.value = false
-        if (jobState.value !== 'Pending' && jobState.value !== 'Processing') {
+        if (!['Pending', 'Processing'].includes(jobState.value)) {
           pause()
         }
       },
@@ -143,16 +113,25 @@
       :data-source="installData"
       :loading="loading"
     >
-      <template #bodyCell="{ record, column }">
-        <a-progress
-          v-if="column.dataIndex === 'progress'"
-          class="progress"
-          :percent="record.progress"
-          :status="record.status"
-          :stroke-color="record.color"
-        />
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a @click="clickStage(record)">
+            {{ text }}
+          </a>
+        </template>
+        <template v-if="column.dataIndex === 'state'">
+          <custom-progress
+            :key="record.id"
+            :state="text"
+            :progress-data="record.tasks"
+          />
+        </template>
       </template>
     </a-table>
+    <job-info
+      v-model:visible="jobWindowOpened"
+      :outer-data="{ meta: jobs, currItem: currStage }"
+    />
   </div>
 </template>
 
diff --git a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
index 8ee9481c..5d48c32e 100644
--- a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
+++ b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
@@ -49,7 +49,8 @@
       }
     } catch (e) {
       console.log(e)
-      return Promise.resolve(false)
+      return Promise.resolve(true)
+      // return Promise.resolve(false)
     }
   }
 
diff --git a/bigtop-manager-ui/src/components/job-info/index.vue b/bigtop-manager-ui/src/components/job-info/index.vue
index d8f08461..ec42ead7 100644
--- a/bigtop-manager-ui/src/components/job-info/index.vue
+++ b/bigtop-manager-ui/src/components/job-info/index.vue
@@ -19,318 +19,27 @@
 
 <script setup lang="ts">
   import { SettingOutlined } from '@ant-design/icons-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'
-  import ClipboardJS from 'clipboard'
-  import { message } from 'ant-design-vue'
-  import { JobVO, StageVO, TaskVO, Pagination } from '@/api/job/types.ts'
-  import { getLogs } from '@/api/sse/index'
-  import { getJobs } from '@/api/job'
-  import { Pausable, useIntervalFn } from '@vueuse/core'
-  import { AxiosProgressEvent } from 'axios'
-  import { MONITOR_SCHEDULE_INTERVAL } from '@/utils/constant.ts'
-  import CustomProgress from './custom-progress.vue'
-  import StageInfo from './stage-info.vue'
-  import TaskInfo from './task-info.vue'
-  const columns = [
-    {
-      title: 'common.name',
-      dataIndex: 'name',
-      align: 'center'
-    },
-    {
-      title: 'common.status',
-      dataIndex: 'state',
-      align: 'center'
-    },
-    {
-      title: 'common.create_time',
-      dataIndex: 'createTime',
-      align: 'center'
-    },
-    {
-      title: 'common.update_time',
-      dataIndex: 'updateTime',
-      align: 'center'
-    }
-  ]
-
-  const clusterStore = useClusterStore()
-  const { clusterId } = storeToRefs(clusterStore)
+  import JobInfo from './job-info.vue'
+  import { ref } from 'vue'
 
-  const processJobNum = ref(0)
-  const loading = ref(false)
   const jobWindowOpened = 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 logTextOrigin = ref<string>('')
-  const logsInfoRef = ref<HTMLElement | null>(null)
-  const paginationProps = reactive<PaginationConfig>({})
-  const jobsPageState = reactive<Pagination>({
-    pageNum: 1,
-    pageSize: 10,
-    sort: 'desc'
-  })
-  const currPage = ref<string[]>([
-    'isJobTable',
-    'isStageTable',
-    'isTaskTable',
-    'isTaskLogs'
-  ])
-
-  const logText = computed(() => {
-    return logTextOrigin.value
-      .split('\n\n')
-      .map((s) => {
-        return s.substring(5)
-      })
-      .join('\n')
-  })
-
-  const getCurrPage = computed(() => {
-    return currPage.value[breadcrumbs.value.length - 1]
-  })
-
-  watch(jobWindowOpened, (val) => {
-    if (!val) {
-      jobWindowClose()
-    } else {
-      loading.value = true
-      Object.assign(paginationProps, initPagedProps())
-      getJobsList()
-      intervalId.value?.resume()
-    }
-  })
-
-  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()
-    },
-    MONITOR_SCHEDULE_INTERVAL,
-    { immediate: false, immediateCallback: true }
-  )
-
-  const jobWindowClose = () => {
-    intervalId.value?.pause()
-    breadcrumbs.value = ['Job Info']
-    jobs.value = []
-    Object.assign(jobsPageState, {
-      pageNum: 1,
-      pageSize: 10,
-      sort: 'desc'
-    })
-  }
-
-  const getJobsList = async () => {
-    try {
-      const { content, total } = await getJobs(
-        clusterId.value,
-        toRaw(jobsPageState)
-      )
-      jobs.value = content.map((v) => {
-        return {
-          ...v,
-          progress: 0
-        }
-      })
-      paginationProps.total = total
-      loading.value = false
-    } catch (error) {
-      loading.value = false
-    }
-  }
-
-  const getLogsInfo = (id: number) => {
-    getLogs(clusterId.value, id, ({ event }: AxiosProgressEvent) => {
-      logTextOrigin.value = event.target.responseText
-      logsInfoRef.value = document.querySelector('.logsInfoRef')
-      if (!logsInfoRef.value) {
-        return
-      }
-      ;(function smoothscroll() {
-        const { scrollTop, offsetHeight, scrollHeight } = logsInfoRef.value
-        if (scrollHeight - 10 > scrollTop + offsetHeight) {
-          window.requestAnimationFrame(smoothscroll)
-          logsInfoRef.value.scrollTo(
-            0,
-            scrollTop + (scrollHeight - scrollTop - offsetHeight) / 2
-          )
-        }
-      })()
-    })
-  }
-
-  const copyLogTextContent = () => {
-    const clipboard = new ClipboardJS('.copyBtn', {
-      text: () => logText.value
-    })
-    if (!logText.value) {
-      console.error('No text to copy')
-      return
-    }
-    clipboard.on('success', () => {
-      message.success('Copy success!')
-      clipboard.destroy()
-    })
-    clipboard.on('error', () => {
-      message.success('Copy failed!')
-      clipboard.destroy()
-    })
-  }
-
-  const clickTask = (record: TaskVO) => {
-    breadcrumbs.value.push(record)
-    currTaskInfo.value = record
-    getLogsInfo(record.id)
-  }
-
-  const clickJob = (record: JobVO) => {
-    stages.value = record.stages
-    breadcrumbs.value.push(record)
-  }
-
-  const clickStage = (record: StageVO) => {
-    tasks.value = record.tasks
-    breadcrumbs.value.push(record)
-  }
-
-  const clickBreadCrumbs = (idx: number) => {
-    const len = breadcrumbs.value.length
-    breadcrumbs.value.splice(idx + 1, len)
-  }
-
-  const handlePageChange = (page: number) => {
-    paginationProps.current = page
-    jobsPageState.pageNum = page
-    loading.value = true
-    getJobsList()
-  }
+  const processJobNum = ref(0)
 
-  const handlePageSizeChange = (_current: number, size: number) => {
-    paginationProps.pageSize = size
-    jobsPageState.pageSize = size
-    loading.value = true
-    getJobsList()
-  }
-
-  const initPagedProps = () => {
-    return {
-      current: 1,
-      pageSize: 10,
-      size: 'small',
-      showSizeChanger: true,
-      pageSizeOptions: ['10', '20', '30', '40', '50'],
-      total: 0,
-      onChange: handlePageChange,
-      onShowSizeChange: handlePageSizeChange
-    }
+  const handleJobOpen = () => {
+    jobWindowOpened.value = true
   }
 </script>
 
 <template>
-  <div class="icon" @click="() => (jobWindowOpened = true)">
+  <div class="icon" @click="handleJobOpen">
     <a-badge size="small" color="blue" :count="processJobNum">
       <setting-outlined />
     </a-badge>
   </div>
-
-  <a-modal v-model:open="jobWindowOpened" width="95%">
-    <template #footer>
-      <a-button key="back" type="primary" @click="jobWindowOpened = false">
-        {{ $t('common.confirm') }}
-      </a-button>
-    </template>
-
-    <div class="breadcrumb">
-      <a-breadcrumb>
-        <a-breadcrumb-item
-          v-for="(item, idx) in breadcrumbs"
-          :key="idx"
-          @click="clickBreadCrumbs(idx)"
-        >
-          <a href="#">{{ item.name }}</a>
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-    </div>
-
-    <a-table
-      v-show="getCurrPage == 'isJobTable'"
-      :scroll="{ y: 500 }"
-      :pagination="paginationProps"
-      :loading="loading"
-      :data-source="jobs"
-      :columns="columns"
-      destroy-on-close
-    >
-      <template #headerCell="{ column }">
-        <span>{{ $t(column.title) }}</span>
-      </template>
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.dataIndex === 'name'">
-          <a @click="clickJob(record)">
-            {{ text }}
-          </a>
-        </template>
-        <template v-if="column.dataIndex === 'state'">
-          <custom-progress
-            :key="record.id"
-            :state="text"
-            :progress-data="record.stages"
-          />
-        </template>
-      </template>
-    </a-table>
-    <template v-if="getCurrPage == 'isStageTable'">
-      <stage-info
-        :columns="columns"
-        :stages="stages"
-        @click-stage="clickStage"
-      />
-    </template>
-    <template v-if="getCurrPage == 'isTaskTable'">
-      <task-info :columns="columns" :tasks="tasks" @click-task="clickTask" />
-    </template>
-    <template v-if="getCurrPage == 'isTaskLogs'">
-      <div class="logs">
-        <div class="logs_header">
-          <span>Task Logs</span>
-          <div class="logs_header-ops">
-            <a-button
-              class="copyBtn"
-              size="small"
-              type="primary"
-              @click="copyLogTextContent"
-            >
-              copy
-            </a-button>
-          </div>
-        </div>
-        <div ref="logsInfoRef" class="logs_info">
-          <pre id="logs">{{ logText }}</pre>
-        </div>
-      </div>
-    </template>
-  </a-modal>
+  <job-info v-model:visible="jobWindowOpened" />
 </template>
 
 <style lang="scss" scoped>
-  .breadcrumb {
-    :deep(.ant-breadcrumb) {
-      margin-bottom: 16px !important;
-    }
-  }
   .icon {
     display: flex;
     justify-content: center;
@@ -345,32 +54,4 @@
       background-color: var(--hover-color);
     }
   }
-  .logs {
-    height: 50vh;
-    display: flex;
-    flex-direction: column;
-    &_header {
-      font-size: 16px;
-      font-weight: 600;
-      margin: 0 0 10px 0;
-      display: flex;
-      justify-content: space-between;
-    }
-    &_info {
-      height: 100%;
-      overflow: auto;
-      background-color: #f5f5f5;
-      border-radius: 4px;
-      position: relative;
-      pre {
-        height: 100%;
-        margin: 0;
-        padding: 16px 14px;
-        box-sizing: border-box;
-        color: #444;
-        border-color: #eee;
-        line-height: 16px;
-      }
-    }
-  }
 </style>
diff --git a/bigtop-manager-ui/src/components/job-info/job-info.vue b/bigtop-manager-ui/src/components/job-info/job-info.vue
new file mode 100644
index 00000000..d4d15aaa
--- /dev/null
+++ b/bigtop-manager-ui/src/components/job-info/job-info.vue
@@ -0,0 +1,398 @@
+<!--
+  - 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.
+  -->
+
+<script setup lang="ts">
+  import { ref, watch, computed, reactive, toRaw, toRefs } from 'vue'
+  import { useClusterStore } from '@/store/cluster'
+  import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
+  import { storeToRefs } from 'pinia'
+  import ClipboardJS from 'clipboard'
+  import { message } from 'ant-design-vue'
+  import {
+    JobVO,
+    StageVO,
+    TaskVO,
+    OuterData,
+    Pagination
+  } from '@/api/job/types.ts'
+  import { getLogs } from '@/api/sse/index'
+  import { getJobs } from '@/api/job'
+  import { Pausable, useIntervalFn } from '@vueuse/core'
+  import { AxiosProgressEvent } from 'axios'
+  import { MONITOR_SCHEDULE_INTERVAL } from '@/utils/constant.ts'
+  import CustomProgress from './custom-progress.vue'
+  import StageInfo from './stage-info.vue'
+  import TaskInfo from './task-info.vue'
+
+  const columns = [
+    {
+      title: 'common.name',
+      dataIndex: 'name',
+      align: 'center'
+    },
+    {
+      title: 'common.status',
+      dataIndex: 'state',
+      align: 'center'
+    },
+    {
+      title: 'common.create_time',
+      dataIndex: 'createTime',
+      align: 'center'
+    },
+    {
+      title: 'common.update_time',
+      dataIndex: 'updateTime',
+      align: 'center'
+    }
+  ]
+
+  const clusterStore = useClusterStore()
+  const { clusterId } = storeToRefs(clusterStore)
+
+  const props = withDefaults(
+    defineProps<{
+      visible: boolean
+      outerData?: OuterData
+    }>(),
+    {
+      visible: false,
+      outerData: undefined
+    }
+  )
+  const { visible, outerData } = toRefs(props)
+
+  const emits = defineEmits(['update:visible', 'closed'])
+
+  const loading = 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 logTextOrigin = ref<string>('')
+  const logsInfoRef = ref<HTMLElement | 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 getCurrPage = computed(() => {
+    return currPage.value[breadcrumbs.value.length - 1]
+  })
+
+  const logText = computed(() => {
+    return logTextOrigin.value
+      .split('\n\n')
+      .map((s) => {
+        return s.substring(5)
+      })
+      .join('\n')
+  })
+
+  watch(visible, (val) => {
+    if (val) {
+      loading.value = true
+      Object.assign(paginationProps, initPagedProps())
+      outerData.value ? checkMetaOrigin(true) : checkMetaOrigin(false)
+      loading.value = false
+    }
+  })
+
+  watch(outerData, (val) => {
+    if (!val) return
+    jobs.value = val.meta as any
+  })
+
+  watch(jobs, (val) => {
+    if (val) {
+      const len = breadcrumbs.value.length
+      const idxId = breadcrumbs.value[len - 1]?.id
+      if (idxId) {
+        stages.value = val.find((v: JobVO) => v.id == idxId)?.stages || []
+      }
+    }
+  })
+
+  const checkMetaOrigin = (isOuter = false) => {
+    if (isOuter) {
+      const { meta, currItem } = outerData.value as OuterData
+      jobs.value = meta
+      clickJob(meta[0])
+      clickStage(currItem as StageVO)
+      return
+    }
+    getJobsList()
+    initInterval()
+  }
+
+  const initInterval = () => {
+    if (intervalId.value) {
+      intervalId.value?.resume()
+      return
+    }
+    intervalId.value = useIntervalFn(
+      async () => {
+        await getJobsList()
+      },
+      MONITOR_SCHEDULE_INTERVAL,
+      { immediate: false, immediateCallback: true }
+    )
+  }
+
+  const getJobsList = async () => {
+    try {
+      const params = { ...toRaw(jobsPageState) }
+      const { content, total } = await getJobs(clusterId.value, params)
+      jobs.value = content.map((v) => {
+        return {
+          ...v
+        }
+      })
+      paginationProps.total = total
+      loading.value = false
+    } catch (error) {
+      loading.value = false
+    }
+  }
+
+  const getLogsInfo = (id: number) => {
+    getLogs(clusterId.value, id, ({ event }: AxiosProgressEvent) => {
+      logTextOrigin.value = event.target.responseText
+      logsInfoRef.value = document.querySelector('.logsInfoRef')
+      if (!logsInfoRef.value) {
+        return
+      }
+      ;(function smoothscroll() {
+        const { scrollTop, offsetHeight, scrollHeight } = logsInfoRef.value
+        if (scrollHeight - 10 > scrollTop + offsetHeight) {
+          window.requestAnimationFrame(smoothscroll)
+          logsInfoRef.value.scrollTo(
+            0,
+            scrollTop + (scrollHeight - scrollTop - offsetHeight) / 2
+          )
+        }
+      })()
+    })
+  }
+
+  const copyLogTextContent = () => {
+    const clipboard = new ClipboardJS('.copyBtn', {
+      text: () => logText.value
+    })
+    if (!logText.value) {
+      console.error('No text to copy')
+      return
+    }
+    clipboard.on('success', () => {
+      message.success('Copy success!')
+      clipboard.destroy()
+    })
+    clipboard.on('error', () => {
+      message.success('Copy failed!')
+      clipboard.destroy()
+    })
+  }
+
+  const clickTask = (record: TaskVO) => {
+    breadcrumbs.value.push(record)
+    currTaskInfo.value = record
+    getLogsInfo(record.id)
+  }
+
+  const clickJob = (record: JobVO) => {
+    stages.value = record.stages
+    breadcrumbs.value.push(record)
+  }
+
+  const clickStage = (record: StageVO) => {
+    tasks.value = record.tasks
+    breadcrumbs.value.push(record)
+  }
+
+  const clickBreadCrumbs = (idx: number) => {
+    const len = breadcrumbs.value.length
+    breadcrumbs.value.splice(idx + 1, len)
+  }
+
+  const handlePageChange = (page: number) => {
+    paginationProps.current = page
+    jobsPageState.pageNum = page
+    loading.value = true
+    getJobsList()
+  }
+
+  const handlePageSizeChange = (_current: number, size: number) => {
+    paginationProps.pageSize = size
+    jobsPageState.pageSize = size
+    loading.value = true
+    getJobsList()
+  }
+
+  const initPagedProps = () => {
+    return {
+      current: 1,
+      pageSize: 10,
+      size: 'small',
+      showSizeChanger: true,
+      pageSizeOptions: ['10', '20', '30', '40', '50'],
+      total: 0,
+      onChange: handlePageChange,
+      onShowSizeChange: handlePageSizeChange
+    }
+  }
+
+  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)
+  }
+</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>
+    </template>
+
+    <div class="breadcrumb">
+      <a-breadcrumb>
+        <a-breadcrumb-item
+          v-for="(item, idx) in breadcrumbs"
+          :key="idx"
+          @click="clickBreadCrumbs(idx)"
+        >
+          <a href="#">{{ item.name }}</a>
+        </a-breadcrumb-item>
+      </a-breadcrumb>
+    </div>
+
+    <a-table
+      v-show="getCurrPage == 'isJobTable'"
+      :scroll="{ y: 500 }"
+      :pagination="paginationProps"
+      :loading="loading"
+      :data-source="jobs"
+      :columns="columns"
+      destroy-on-close
+    >
+      <template #headerCell="{ column }">
+        <span>{{ $t(column.title) }}</span>
+      </template>
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a @click="clickJob(record)">
+            {{ text }}
+          </a>
+        </template>
+        <template v-if="column.dataIndex === 'state'">
+          <custom-progress
+            :key="record.id"
+            :state="text"
+            :progress-data="record.stages"
+          />
+        </template>
+      </template>
+    </a-table>
+    <template v-if="getCurrPage == 'isStageTable'">
+      <stage-info
+        :columns="columns"
+        :stages="stages"
+        @click-stage="clickStage"
+      />
+    </template>
+    <template v-if="getCurrPage == 'isTaskTable'">
+      <task-info :columns="columns" :tasks="tasks" @click-task="clickTask" />
+    </template>
+    <template v-if="getCurrPage == 'isTaskLogs'">
+      <div class="logs">
+        <div class="logs_header">
+          <span>Task Logs</span>
+          <div class="logs_header-ops">
+            <a-button
+              class="copyBtn"
+              size="small"
+              type="primary"
+              @click="copyLogTextContent"
+            >
+              copy
+            </a-button>
+          </div>
+        </div>
+        <div ref="logsInfoRef" class="logs_info">
+          <pre id="logs">{{ logText }}</pre>
+        </div>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+  .breadcrumb {
+    :deep(.ant-breadcrumb) {
+      margin-bottom: 16px !important;
+    }
+  }
+  .logs {
+    height: 50vh;
+    display: flex;
+    flex-direction: column;
+    &_header {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0 0 10px 0;
+      display: flex;
+      justify-content: space-between;
+    }
+    &_info {
+      height: 100%;
+      overflow: auto;
+      background-color: #f5f5f5;
+      border-radius: 4px;
+      position: relative;
+      pre {
+        height: 100%;
+        margin: 0;
+        padding: 16px 14px;
+        box-sizing: border-box;
+        color: #444;
+        border-color: #eee;
+        line-height: 16px;
+      }
+    }
+  }
+</style>
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 7fa421f7..9e74c63a 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 { ref, reactive, watch } from 'vue'
+  import { ref, reactive, watch, computed } from 'vue'
   import { PaginationConfig } from 'ant-design-vue/es/pagination/Pagination'
   import CustomProgress from './custom-progress.vue'
 
@@ -29,13 +29,19 @@
   }
 
   const props = withDefaults(defineProps<StageProps>(), {})
-
-  const pagedList = ref<StageVO[]>([])
+  const loading = ref(false)
+  const pagedList = computed(() => {
+    return props.stages
+  })
 
   watch(
     () => props.stages,
     (val) => {
-      pagedList.value = val || []
+      if (val.length == 0) {
+        loading.value = true
+      } else {
+        loading.value = false
+      }
     },
     {
       immediate: true,
@@ -74,6 +80,7 @@
       :pagination="paginationProps"
       :data-source="pagedList"
       :columns="props.columns"
+      :loading="loading"
       :scroll="{ y: 500 }"
     >
       <template #headerCell="{ column }">
-- 
Gitee


From 2d80c1c7b889f129194793574b91242b76488e4e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Thu, 9 May 2024 18:02:45 +0800
Subject: [PATCH 2/6] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=9C=8D=E5=8A=A1-?=
 =?UTF-8?q?=E9=98=B6=E6=AE=B5=E5=8A=A0=E8=BD=BD=E5=8F=AF=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E7=82=B9=E5=87=BBstageName=E8=A7=A6=E5=8F=91=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/service-add/install.vue    | 107 +++++++-----------
 1 file changed, 42 insertions(+), 65 deletions(-)

diff --git a/bigtop-manager-ui/src/components/service-add/install.vue b/bigtop-manager-ui/src/components/service-add/install.vue
index 797637f8..e9a94ff3 100644
--- a/bigtop-manager-ui/src/components/service-add/install.vue
+++ b/bigtop-manager-ui/src/components/service-add/install.vue
@@ -25,6 +25,7 @@
   import { onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
   import { useClusterStore } from '@/store/cluster'
   import { storeToRefs } from 'pinia'
+  import { JobVO, StageVO } from '@/api/job/types'
 
   const serviceInfo = defineModel<any>('serviceInfo')
   const disableButton = defineModel<boolean>('disableButton')
@@ -33,12 +34,29 @@
   const { clusterId } = storeToRefs(clusterStore)
 
   const { t } = useI18n()
-  const installData = reactive([])
   const loading = ref(true)
-  const jobState = ref('')
+  const jobWindowOpened = ref(false)
+  const jobState = ref<string>('')
+  const jobs = ref<JobVO[]>([])
+  const currStage = ref<StageVO>()
+  const installData = reactive([])
+
+  const installColumns = [
+    {
+      title: t('common.stage'),
+      dataIndex: 'name',
+      align: 'center'
+    },
+    {
+      title: t('common.progress'),
+      dataIndex: 'state',
+      align: 'center'
+    }
+  ]
 
   const initData = async () => {
     const res = await getJob(serviceInfo.value.jobId, clusterId.value)
+    jobs.value = [res] as any
     console.log(res)
     jobState.value = res.state
 
@@ -46,63 +64,13 @@
       disableButton.value = false
       serviceInfo.value.success = jobState.value === 'Successful'
     }
-
-    const arr: any[] = []
-    res.stages
-      .sort((a, b) => a.order - b.order)
-      .forEach((stage) => {
-        const data = {
-          key: stage.id,
-          stage: stage.name,
-          progress: 0,
-          status: '',
-          color: ''
-        }
-
-        if (stage.state === 'Pending') {
-          data.progress = 0
-          data.status = 'normal'
-          data.color = '#1677ff'
-        } else if (stage.state === 'Processing') {
-          data.progress = Math.round(
-            (stage.tasks.filter((task) => task.state === 'Successful').length /
-              stage.tasks.length) *
-              100
-          )
-          data.status = 'active'
-          data.color = '#1677ff'
-        } else if (stage.state === 'Successful') {
-          data.progress = 100
-          data.status = 'success'
-          data.color = '#52c41a'
-        } else if (stage.state === 'Canceled') {
-          data.progress = 0
-          data.status = 'normal'
-          data.color = '#8c908b'
-        } else {
-          data.progress = 100
-          data.status = 'exception'
-          data.color = '#ff4d4f'
-        }
-
-        arr.push(data)
-      })
-
-    return arr
+    return res.stages.sort((a: StageVO, b: StageVO) => a.order - b.order)
   }
 
-  const installColumns = [
-    {
-      title: t('common.stage'),
-      dataIndex: 'stage',
-      align: 'center'
-    },
-    {
-      title: t('common.progress'),
-      dataIndex: 'progress',
-      align: 'center'
-    }
-  ]
+  const clickStage = (record: StageVO) => {
+    jobWindowOpened.value = true
+    currStage.value = record
+  }
 
   onBeforeMount(async () => {
     disableButton.value = true
@@ -142,16 +110,25 @@
       :data-source="installData"
       :loading="loading"
     >
-      <template #bodyCell="{ record, column }">
-        <a-progress
-          v-if="column.dataIndex === 'progress'"
-          class="progress"
-          :percent="record.progress"
-          :status="record.status"
-          :stroke-color="record.color"
-        />
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a @click="clickStage(record)">
+            {{ text }}
+          </a>
+        </template>
+        <template v-if="column.dataIndex === 'state'">
+          <custom-progress
+            :key="record.id"
+            :state="text"
+            :progress-data="record.tasks"
+          />
+        </template>
       </template>
     </a-table>
+    <job-info
+      v-model:visible="jobWindowOpened"
+      :outer-data="{ meta: jobs, currItem: currStage }"
+    />
   </div>
 </template>
 
-- 
Gitee


From 5954c9a56f16370430a891021f6a7705fca818c0 Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Fri, 10 May 2024 11:03:59 +0800
Subject: [PATCH 3/6] =?UTF-8?q?jobInfo=E6=96=87=E4=BB=B6=E5=90=8D=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9job?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cluster-create/install.vue        |  4 ++--
 bigtop-manager-ui/src/components/job-info/index.vue  |  4 ++--
 .../components/job-info/{job-info.vue => job.vue}    | 12 ++++--------
 .../job-info/{stage-info.vue => stage.vue}           |  0
 .../components/job-info/{task-info.vue => task.vue}  |  0
 .../src/components/service-add/install.vue           |  3 ++-
 6 files changed, 10 insertions(+), 13 deletions(-)
 rename bigtop-manager-ui/src/components/job-info/{job-info.vue => job.vue} (97%)
 rename bigtop-manager-ui/src/components/job-info/{stage-info.vue => stage.vue} (100%)
 rename bigtop-manager-ui/src/components/job-info/{task-info.vue => task.vue} (100%)

diff --git a/bigtop-manager-ui/src/components/cluster-create/install.vue b/bigtop-manager-ui/src/components/cluster-create/install.vue
index 1ed14fb7..19e7079f 100644
--- a/bigtop-manager-ui/src/components/cluster-create/install.vue
+++ b/bigtop-manager-ui/src/components/cluster-create/install.vue
@@ -26,7 +26,7 @@
   import { useClusterStore } from '@/store/cluster'
   import { storeToRefs } from 'pinia'
   import CustomProgress from '@/components/job-info/custom-progress.vue'
-  import JobInfo from '@/components/job-info/job-info.vue'
+  import Job from '@/components/job-info/job.vue'
   import { JobVO, StageVO } from '@/api/job/types'
 
   const clusterInfo = defineModel<any>('clusterInfo')
@@ -128,7 +128,7 @@
         </template>
       </template>
     </a-table>
-    <job-info
+    <job
       v-model:visible="jobWindowOpened"
       :outer-data="{ meta: jobs, currItem: currStage }"
     />
diff --git a/bigtop-manager-ui/src/components/job-info/index.vue b/bigtop-manager-ui/src/components/job-info/index.vue
index ec42ead7..f9d7c89f 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 JobInfo from './job-info.vue'
+  import Job from './job.vue'
   import { ref } from 'vue'
 
   const jobWindowOpened = ref(false)
@@ -36,7 +36,7 @@
       <setting-outlined />
     </a-badge>
   </div>
-  <job-info v-model:visible="jobWindowOpened" />
+  <job v-model:visible="jobWindowOpened" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/bigtop-manager-ui/src/components/job-info/job-info.vue b/bigtop-manager-ui/src/components/job-info/job.vue
similarity index 97%
rename from bigtop-manager-ui/src/components/job-info/job-info.vue
rename to bigtop-manager-ui/src/components/job-info/job.vue
index d4d15aaa..5d16a99c 100644
--- a/bigtop-manager-ui/src/components/job-info/job-info.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -37,8 +37,8 @@
   import { AxiosProgressEvent } from 'axios'
   import { MONITOR_SCHEDULE_INTERVAL } from '@/utils/constant.ts'
   import CustomProgress from './custom-progress.vue'
-  import StageInfo from './stage-info.vue'
-  import TaskInfo from './task-info.vue'
+  import Stage from './stage.vue'
+  import Task from './task.vue'
 
   const columns = [
     {
@@ -329,14 +329,10 @@
       </template>
     </a-table>
     <template v-if="getCurrPage == 'isStageTable'">
-      <stage-info
-        :columns="columns"
-        :stages="stages"
-        @click-stage="clickStage"
-      />
+      <stage :columns="columns" :stages="stages" @click-stage="clickStage" />
     </template>
     <template v-if="getCurrPage == 'isTaskTable'">
-      <task-info :columns="columns" :tasks="tasks" @click-task="clickTask" />
+      <task :columns="columns" :tasks="tasks" @click-task="clickTask" />
     </template>
     <template v-if="getCurrPage == 'isTaskLogs'">
       <div class="logs">
diff --git a/bigtop-manager-ui/src/components/job-info/stage-info.vue b/bigtop-manager-ui/src/components/job-info/stage.vue
similarity index 100%
rename from bigtop-manager-ui/src/components/job-info/stage-info.vue
rename to bigtop-manager-ui/src/components/job-info/stage.vue
diff --git a/bigtop-manager-ui/src/components/job-info/task-info.vue b/bigtop-manager-ui/src/components/job-info/task.vue
similarity index 100%
rename from bigtop-manager-ui/src/components/job-info/task-info.vue
rename to bigtop-manager-ui/src/components/job-info/task.vue
diff --git a/bigtop-manager-ui/src/components/service-add/install.vue b/bigtop-manager-ui/src/components/service-add/install.vue
index e9a94ff3..d9aeae60 100644
--- a/bigtop-manager-ui/src/components/service-add/install.vue
+++ b/bigtop-manager-ui/src/components/service-add/install.vue
@@ -26,6 +26,7 @@
   import { useClusterStore } from '@/store/cluster'
   import { storeToRefs } from 'pinia'
   import { JobVO, StageVO } from '@/api/job/types'
+  import Job from '@/components/job-info/job.vue'
 
   const serviceInfo = defineModel<any>('serviceInfo')
   const disableButton = defineModel<boolean>('disableButton')
@@ -125,7 +126,7 @@
         </template>
       </template>
     </a-table>
-    <job-info
+    <job
       v-model:visible="jobWindowOpened"
       :outer-data="{ meta: jobs, currItem: currStage }"
     />
-- 
Gitee


From f7a549a3295cb8a13dbac08f78a0f7b76ab0846e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 13 May 2024 08:56:07 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=88=A4=E6=96=AD=E8=AF=AD=E5=8F=A5?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/src/components/job-info/job.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/bigtop-manager-ui/src/components/job-info/job.vue b/bigtop-manager-ui/src/components/job-info/job.vue
index 5d16a99c..3fa330b2 100644
--- a/bigtop-manager-ui/src/components/job-info/job.vue
+++ b/bigtop-manager-ui/src/components/job-info/job.vue
@@ -120,7 +120,11 @@
     if (val) {
       loading.value = true
       Object.assign(paginationProps, initPagedProps())
-      outerData.value ? checkMetaOrigin(true) : checkMetaOrigin(false)
+      if (outerData.value) {
+        checkMetaOrigin(true)
+      } else {
+        checkMetaOrigin(false)
+      }
       loading.value = false
     }
   })
-- 
Gitee


From 6c64bfb5d25f4041546014a2e2f71c28461e96af Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Mon, 13 May 2024 08:57:03 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/bigtop-manager-ui/.env.development b/bigtop-manager-ui/.env.development
index 44482818..4af78b52 100644
--- a/bigtop-manager-ui/.env.development
+++ b/bigtop-manager-ui/.env.development
@@ -17,8 +17,7 @@ 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_API='/api'
 #VITE_APP_BASE_WS_URL='ws://172.29.40.96:8080'
 VITE_APP_BASE_WS_URL='ws://localhost:8080'
-- 
Gitee


From ac2d9687f16ed7096d6bcbaaf5488fe34a84ea9e Mon Sep 17 00:00:00 2001
From: fuliqiang <1348994179@qq.com>
Date: Tue, 14 May 2024 09:20:34 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E9=94=99=E8=AF=AF=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bigtop-manager-ui/src/components/cluster-create/set-hosts.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
index 5d48c32e..8ee9481c 100644
--- a/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
+++ b/bigtop-manager-ui/src/components/cluster-create/set-hosts.vue
@@ -49,8 +49,7 @@
       }
     } catch (e) {
       console.log(e)
-      return Promise.resolve(true)
-      // return Promise.resolve(false)
+      return Promise.resolve(false)
     }
   }
 
-- 
Gitee