+
+ {job.jobName}
+
+ {job.jobStatus}
+
+
+
+ {t('detail.id')}:
+ {job.jobId}
+
+ {t('detail.createTime')}:
+ {job.createTime}
+
+ {t('detail.duration')}:
+ {duration.value}
+
+
+
+
+
+
+
+
+ {job.errorMsg}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+})
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/jobs/finished-jobs.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/jobs/finished-jobs.tsx
new file mode 100644
index 00000000000..e964e53c325
--- /dev/null
+++ b/seatunnel-engine/seatunnel-engine-ui/src/views/jobs/finished-jobs.tsx
@@ -0,0 +1,104 @@
+/*
+ * 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
+ *
+ * http://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.
+ */
+
+import { defineComponent, h, onUnmounted, ref } from 'vue'
+import { NDataTable, NTag } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { JobsService } from '@/service/job'
+import type { DataTableColumns } from 'naive-ui'
+import { NButton } from 'naive-ui'
+import type { Job } from '@/service/job/types'
+import { useRouter } from 'vue-router'
+import { getColorFromStatus } from '@/utils/getTypeFromStatus'
+
+export default defineComponent({
+ setup() {
+ const { t } = useI18n()
+
+ const jobs = ref([] as Job[])
+
+ let timer: NodeJS.Timeout
+ const fetch = async () => {
+ jobs.value = await JobsService.getFinishedJobs()
+ timer = setTimeout(fetch, 5000)
+ }
+ onUnmounted(() => clearTimeout(timer))
+
+ fetch()
+
+ const router = useRouter()
+ function createColumns(): DataTableColumns