[Fix][UI] Optimize detail and finish-jobs components

seatunnel-engine/seatunnel-engine-server/src/main/java/org/apache/seatunnel/engine/server/rest/service/JobInfoService.java

@@ -104,7 +104,7 @@ public JsonArray getJobsByStateJson(String state) {
                             }
                             return jobState.getJobStatus().name().equals(state.toUpperCase());
                         })
-                .sorted(Comparator.comparing(JobState::getFinishTime))
+                .sorted(Comparator.comparing(JobState::getFinishTime, Comparator.reverseOrder()))
                 .map(
                         jobState -> {
                             Long jobId = jobState.getJobId();

seatunnel-engine/seatunnel-engine-ui/src/views/jobs/detail.tsx

@@ -25,7 +25,7 @@ import {
   NDrawer,
   NDrawerContent
 } from 'naive-ui'
-import { computed, defineComponent, reactive, ref, watch } from 'vue'
+import {computed, defineComponent, onUnmounted, reactive, ref, watch} from 'vue'
 import { getJobInfo } from '@/service/job'
 import { useRoute } from 'vue-router'
 import type { Job, Vertex } from '@/service/job/types'
@@ -47,19 +47,23 @@ export default defineComponent({
     const job = reactive({} as Job)
     const duration = ref('')
     let timer: NodeJS.Timeout
+    let fetchTimer: NodeJS.Timeout
     const fetch = async () => {
       const res = await getJobInfo(jobId)
       Object.assign(job, res)
       clearInterval(timer)
       const d = parse(res.createTime, 'yyyy-MM-dd HH:mm:ss', new Date())
       duration.value = getRemainTime(Math.abs(Date.now() - d.getTime()))
-      setTimeout(fetch, 5000)
-      if (job.jobStatus !== 'RUNNING') {
+      if (isTerminalState(job.jobStatus)) {
+        clearTimeout(fetchTimer)
         return
       }
-      timer = setInterval(() => {
-        duration.value = getRemainTime(Math.abs(Date.now() - d.getTime()))
-      }, 1000)
+      fetchTimer = setTimeout(fetch, 5000)
+      if (isRunningState(job.jobStatus)) {
+        timer = setInterval(() => {
+          duration.value = getRemainTime(Math.abs(Date.now() - d.getTime()))
+        }, 1000)
+      }
     }
 
     fetch()
@@ -70,6 +74,20 @@ export default defineComponent({
     }
     watch(() => select.value, change)
 
+    // Clear the timer when the component is uninstalled
+    onUnmounted(() => {
+      clearInterval(timer)
+      clearTimeout(fetchTimer)
+    })
+
+    const isTerminalState = (status: string) => {
+      return ['FINISHED', 'FAILED', 'CANCELED','SAVEPOINT_DONE'].includes(status)
+    }
+
+    const isRunningState = (status: string) => {
+      return status === 'RUNNING'
+    }
+
     const tableData = computed(() => {
       return job.jobDag?.vertexInfoMap?.filter((v) => v.type !== 'transform') || []
     })

seatunnel-engine/seatunnel-engine-ui/src/views/jobs/finished-jobs.tsx

@@ -66,6 +66,11 @@ export default defineComponent({
           key: 'createTime',
           sorter: 'default'
         },
+        {
+          title: 'Finish Time',
+          key: 'finishTime',
+          sorter: 'default'
+        },
         {
           title: 'Status',
           key: 'jobStatus',