From 91aead8b81f862fe789f4b4abf03ad2648e5d961 Mon Sep 17 00:00:00 2001
From: Li ZongYing <lizongying@msn.com>
Date: Tue, 21 Nov 2023 21:42:58 +0800
Subject: [PATCH] optimize status

---
 pkg/context/job.go                |   4 +-
 pkg/item.go                       |  12 ++--
 pkg/job.go                        |  23 ++++---
 pkg/request.go                    |   8 +--
 pkg/spider/base_spider.go         |   5 +-
 pkg/spider/job.go                 |  22 ++++--
 pkg/statistics/job/job.go         |   4 +-
 pkg/statistics/statistics.go      |   2 +-
 pkg/task.go                       |   8 +--
 web/ui/src/App.vue                |   4 +-
 web/ui/src/stores/jobs.js         |  24 ++++++-
 web/ui/src/stores/nodes.js        |  18 +++++
 web/ui/src/stores/records.js      |  21 ++++++
 web/ui/src/stores/requests.js     |  20 ++++++
 web/ui/src/stores/spiders.js      |  18 +++++
 web/ui/src/stores/tasks.js        |  23 +++++--
 web/ui/src/views/JobsView.vue     |  41 ++++-------
 web/ui/src/views/NodesView.vue    |  24 +------
 web/ui/src/views/RecordsView.vue  | 109 ++++++++++++++++++++++++++++--
 web/ui/src/views/RequestsView.vue |  44 +++++++++++-
 web/ui/src/views/SpidersView.vue  |  56 ++++-----------
 web/ui/src/views/TasksView.vue    |  32 ++++-----
 22 files changed, 361 insertions(+), 161 deletions(-)

diff --git a/pkg/context/job.go b/pkg/context/job.go
index f3641e8..e2d4ba6 100644
--- a/pkg/context/job.go
+++ b/pkg/context/job.go
@@ -55,7 +55,9 @@ func (c *Job) WithStatus(status pkg.JobStatus) pkg.ContextJob {
 	switch status {
 	case pkg.JobStatusRunning:
 		c.withStartTime(t)
-	case pkg.JobStatusStopped:
+	case pkg.JobStatusSuccess:
+		c.withStopTime(t)
+	case pkg.JobStatusFailure:
 		c.withStopTime(t)
 	}
 
diff --git a/pkg/item.go b/pkg/item.go
index b1d289f..5166413 100644
--- a/pkg/item.go
+++ b/pkg/item.go
@@ -190,15 +190,15 @@ const (
 	ItemStatusFailure
 )
 
-func (s *ItemStatus) String() string {
-	switch *s {
-	case 1:
+func (s ItemStatus) String() string {
+	switch s {
+	case ItemStatusPending:
 		return "pending"
-	case 2:
+	case ItemStatusRunning:
 		return "running"
-	case 3:
+	case ItemStatusSuccess:
 		return "success"
-	case 4:
+	case ItemStatusFailure:
 		return "failure"
 	default:
 		return "unknown"
diff --git a/pkg/job.go b/pkg/job.go
index c1daa39..9d25632 100644
--- a/pkg/job.go
+++ b/pkg/job.go
@@ -14,23 +14,26 @@ const (
 	JobStatusRunning
 	JobStatusIdle
 	JobStatusStopping
-	JobStatusStopped
+	JobStatusSuccess
+	JobStatusFailure
 )
 
-func (s *JobStatus) String() string {
-	switch *s {
-	case 1:
+func (s JobStatus) String() string {
+	switch s {
+	case JobStatusReady:
 		return "ready"
-	case 2:
+	case JobStatusStarting:
 		return "starting"
-	case 3:
+	case JobStatusRunning:
 		return "running"
-	case 4:
+	case JobStatusIdle:
 		return "idle"
-	case 5:
+	case JobStatusStopping:
 		return "stopping"
-	case 6:
-		return "stopped"
+	case JobStatusSuccess:
+		return "success"
+	case JobStatusFailure:
+		return "failure"
 	default:
 		return "unknown"
 	}
diff --git a/pkg/request.go b/pkg/request.go
index b90c294..c64c92f 100644
--- a/pkg/request.go
+++ b/pkg/request.go
@@ -175,13 +175,13 @@ const (
 
 func (s RequestStatus) String() string {
 	switch s {
-	case 1:
+	case RequestStatusPending:
 		return "pending"
-	case 2:
+	case RequestStatusRunning:
 		return "running"
-	case 3:
+	case RequestStatusSuccess:
 		return "success"
-	case 4:
+	case RequestStatusFailure:
 		return "failure"
 	default:
 		return "unknown"
diff --git a/pkg/spider/base_spider.go b/pkg/spider/base_spider.go
index 6a70bdb..5ea564e 100644
--- a/pkg/spider/base_spider.go
+++ b/pkg/spider/base_spider.go
@@ -424,7 +424,10 @@ func (s *BaseSpider) RerunJob(ctx context.Context, jobId string) (err error) {
 		err = errors.New("job is not exists")
 		return
 	}
-	if job.GetContext().GetJob().GetStatus() != pkg.JobStatusStopped {
+	if !utils.InSlice(job.GetContext().GetJob().GetStatus(), []pkg.JobStatus{
+		pkg.JobStatusSuccess,
+		pkg.JobStatusFailure,
+	}) {
 		err = errors.New("job is not stopped")
 		return
 	}
diff --git a/pkg/spider/job.go b/pkg/spider/job.go
index d871b35..7a68acb 100644
--- a/pkg/spider/job.go
+++ b/pkg/spider/job.go
@@ -84,7 +84,8 @@ func (j *Job) run(ctx context.Context) (err error) {
 
 	if !utils.InSlice(j.context.GetJob().GetStatus(), []pkg.JobStatus{
 		pkg.JobStatusReady,
-		pkg.JobStatusStopped,
+		pkg.JobStatusSuccess,
+		pkg.JobStatusFailure,
 	}) {
 		err = errors.New("the job can be started in the ready or stopped state")
 		j.logger.Error(err)
@@ -103,12 +104,18 @@ func (j *Job) run(ctx context.Context) (err error) {
 	go func() {
 		select {
 		case <-j.context.GetJob().GetContext().Done():
-			if j.context.GetJob().GetStatus() != pkg.JobStatusStopped {
+			if !utils.InSlice(j.context.GetJob().GetStatus(), []pkg.JobStatus{
+				pkg.JobStatusSuccess,
+				pkg.JobStatusFailure,
+			}) {
 				j.stop(ctx.Err())
 			}
 			return
 		case <-ctx.Done():
-			if j.context.GetJob().GetStatus() != pkg.JobStatusStopped {
+			if !utils.InSlice(j.context.GetJob().GetStatus(), []pkg.JobStatus{
+				pkg.JobStatusSuccess,
+				pkg.JobStatusFailure,
+			}) {
 				j.stop(ctx.Err())
 			}
 			return
@@ -146,7 +153,10 @@ func (j *Job) run(ctx context.Context) (err error) {
 }
 
 func (j *Job) stop(err error) {
-	if j.context.GetJob().GetStatus() == pkg.JobStatusStopped {
+	if !utils.InSlice(j.context.GetJob().GetStatus(), []pkg.JobStatus{
+		pkg.JobStatusSuccess,
+		pkg.JobStatusFailure,
+	}) {
 		err = errors.New("job has been finished")
 		j.logger.Error(err)
 		return
@@ -162,7 +172,7 @@ func (j *Job) stop(err error) {
 		}
 
 		j.context.GetJob().WithStopReason(err.Error())
-		j.context.GetJob().WithStatus(pkg.JobStatusStopped)
+		j.context.GetJob().WithStatus(pkg.JobStatusFailure)
 		j.crawler.GetSignal().JobChanged(j.context)
 
 		j.spider.JobStopped(j.context, err)
@@ -171,7 +181,7 @@ func (j *Job) stop(err error) {
 
 	switch j.context.GetJob().GetMode() {
 	case pkg.JobModeOnce:
-		j.context.GetJob().WithStatus(pkg.JobStatusStopped)
+		j.context.GetJob().WithStatus(pkg.JobStatusSuccess)
 		j.crawler.GetSignal().JobChanged(j.context)
 
 		j.spider.JobStopped(j.context, nil)
diff --git a/pkg/statistics/job/job.go b/pkg/statistics/job/job.go
index 2df0399..eb85f84 100644
--- a/pkg/statistics/job/job.go
+++ b/pkg/statistics/job/job.go
@@ -35,7 +35,9 @@ func (s *Job) WithStatusAndTime(status pkg.JobStatus, t time.Time) pkg.Statistic
 	switch status {
 	case pkg.JobStatusRunning:
 		s.withStartTime(t)
-	case pkg.JobStatusStopped:
+	case pkg.JobStatusSuccess:
+		s.withFinishTime(t)
+	case pkg.JobStatusFailure:
 		s.withFinishTime(t)
 	}
 
diff --git a/pkg/statistics/statistics.go b/pkg/statistics/statistics.go
index e45d05d..bb5f7b7 100644
--- a/pkg/statistics/statistics.go
+++ b/pkg/statistics/statistics.go
@@ -139,7 +139,7 @@ func (s *Statistics) jobChanged(ctx pkg.Context) (err error) {
 
 	switch j.GetStatus() {
 	case pkg.JobStatusRunning:
-	case pkg.JobStatusStopped:
+	case pkg.JobStatusFailure:
 		s.Jobs[id].WithStopReason(j.GetStopReason())
 	}
 	return
diff --git a/pkg/task.go b/pkg/task.go
index 83fdbe3..01d3f14 100644
--- a/pkg/task.go
+++ b/pkg/task.go
@@ -24,13 +24,13 @@ const (
 
 func (s TaskStatus) String() string {
 	switch s {
-	case 1:
+	case TaskStatusPending:
 		return "pending"
-	case 2:
+	case TaskStatusRunning:
 		return "running"
-	case 3:
+	case TaskStatusSuccess:
 		return "success"
-	case 4:
+	case TaskStatusFailure:
 		return "failure"
 	default:
 		return "unknown"
diff --git a/web/ui/src/App.vue b/web/ui/src/App.vue
index 93b3110..838391f 100644
--- a/web/ui/src/App.vue
+++ b/web/ui/src/App.vue
@@ -83,7 +83,7 @@
 <script lang='jsx' setup>
 import {h, reactive, ref, watch} from 'vue';
 import {
-  BarsOutlined,
+  BarsOutlined, CloudDownloadOutlined,
   ClusterOutlined,
   DatabaseOutlined,
   DownOutlined,
@@ -188,7 +188,7 @@ const items = reactive([
   },
   {
     key: '6',
-    icon: () => h(DatabaseOutlined),
+    icon: () => h(CloudDownloadOutlined),
     label: <RouterLink to="/requests">Requests</RouterLink>,
     title: 'Requests',
   },
diff --git a/web/ui/src/stores/jobs.js b/web/ui/src/stores/jobs.js
index 29ff12f..4b75f60 100644
--- a/web/ui/src/stores/jobs.js
+++ b/web/ui/src/stores/jobs.js
@@ -8,7 +8,29 @@ export const JobStatusStarting = 2
 export const JobStatusRunning = 3
 export const JobStatusIdle = 4
 export const JobStatusStopping = 5
-export const JobStatusStopped = 6
+export const JobStatusSuccess = 6
+export const JobStatusFailure = 7
+
+export const JobStatusName = (status) => {
+    switch (status) {
+        case JobStatusReady:
+            return 'ready'
+        case JobStatusStarting:
+            return 'starting'
+        case JobStatusRunning:
+            return 'running'
+        case JobStatusIdle:
+            return 'idle'
+        case JobStatusStopping:
+            return 'stopping'
+        case JobStatusSuccess:
+            return 'success'
+        case JobStatusFailure:
+            return 'failure'
+        default:
+            return 'unknown'
+    }
+}
 
 export const useJobsStore = defineStore('jobs', () => {
     const jobs = reactive([])
diff --git a/web/ui/src/stores/nodes.js b/web/ui/src/stores/nodes.js
index 445617e..d7b70d0 100644
--- a/web/ui/src/stores/nodes.js
+++ b/web/ui/src/stores/nodes.js
@@ -9,6 +9,24 @@ export const NodeStatusRunning = 3
 export const NodeStatusIdle = 4
 export const NodeStatusStopping = 5
 export const NodeStatusStopped = 6
+export const NodeStatusName = (status) => {
+    switch (status) {
+        case NodeStatusReady:
+            return 'ready'
+        case NodeStatusStarting:
+            return 'starting'
+        case NodeStatusRunning:
+            return 'running'
+        case NodeStatusIdle:
+            return 'idle'
+        case NodeStatusStopping:
+            return 'stopping'
+        case NodeStatusStopped:
+            return 'stopped'
+        default:
+            return 'unknown'
+    }
+}
 
 export const useNodesStore = defineStore('nodes', () => {
     const nodes = reactive([])
diff --git a/web/ui/src/stores/records.js b/web/ui/src/stores/records.js
index c70eddf..0a3e9e3 100644
--- a/web/ui/src/stores/records.js
+++ b/web/ui/src/stores/records.js
@@ -2,6 +2,26 @@ import {defineStore} from 'pinia'
 import {computed, reactive} from 'vue';
 import {getRecords} from "@/requests/api";
 
+export const ItemStatusUnknown = 0
+export const ItemStatusPending = 1
+export const ItemStatusRunning = 2
+export const ItemStatusSuccess = 3
+export const ItemStatusFailure = 4
+
+export const ItemStatusName = (status) => {
+    switch (status) {
+        case ItemStatusPending:
+            return 'pending'
+        case ItemStatusRunning:
+            return 'running'
+        case ItemStatusSuccess:
+            return 'success'
+        case ItemStatusFailure:
+            return 'failure'
+        default:
+            return 'unknown'
+    }
+}
 export const useRecordsStore = defineStore('records', () => {
     const records = reactive([])
 
@@ -21,5 +41,6 @@ export const useRecordsStore = defineStore('records', () => {
         return records.length
     })
 
+
     return {records, GetRecords, Count}
 })
\ No newline at end of file
diff --git a/web/ui/src/stores/requests.js b/web/ui/src/stores/requests.js
index 82f78e8..013dc1f 100644
--- a/web/ui/src/stores/requests.js
+++ b/web/ui/src/stores/requests.js
@@ -2,6 +2,26 @@ import {defineStore} from 'pinia'
 import {computed, reactive} from 'vue';
 import {getRequests} from "@/requests/api";
 
+export const RequestStatusUnknown = 0
+export const RequestStatusPending = 1
+export const RequestStatusRunning = 2
+export const RequestStatusSuccess = 3
+export const RequestStatusFailure = 4
+
+export const RequestStatusName = (status) => {
+    switch (status) {
+        case RequestStatusPending:
+            return 'pending'
+        case RequestStatusRunning:
+            return 'running'
+        case RequestStatusSuccess:
+            return 'success'
+        case RequestStatusFailure:
+            return 'failure'
+        default:
+            return 'unknown'
+    }
+}
 export const useRequestsStore = defineStore('requests', () => {
     const requests = reactive([])
 
diff --git a/web/ui/src/stores/spiders.js b/web/ui/src/stores/spiders.js
index 3ebf321..8eedaaf 100644
--- a/web/ui/src/stores/spiders.js
+++ b/web/ui/src/stores/spiders.js
@@ -9,6 +9,24 @@ export const SpiderStatusRunning = 3
 export const SpiderStatusIdle = 4
 export const SpiderStatusStopping = 5
 export const SpiderStatusStopped = 6
+export const SpiderStatusName = (status) => {
+    switch (status) {
+        case SpiderStatusReady:
+            return 'ready'
+        case SpiderStatusStarting:
+            return 'starting'
+        case SpiderStatusRunning:
+            return 'running'
+        case SpiderStatusIdle:
+            return 'idle'
+        case SpiderStatusStopping:
+            return 'stopping'
+        case SpiderStatusStopped:
+            return 'stopped'
+        default:
+            return 'unknown'
+    }
+}
 
 export const useSpidersStore = defineStore('spiders', () => {
     const spiders = reactive([])
diff --git a/web/ui/src/stores/tasks.js b/web/ui/src/stores/tasks.js
index 9bb3a31..cd24d51 100644
--- a/web/ui/src/stores/tasks.js
+++ b/web/ui/src/stores/tasks.js
@@ -6,7 +6,22 @@ export const TaskStatusUnknown = 0
 export const TaskStatusPending = 1
 export const TaskStatusRunning = 2
 export const TaskStatusSuccess = 3
-export const TaskStatusError = 4
+export const TaskStatusFailure = 4
+
+export const TaskStatusName = (status) => {
+    switch (status) {
+        case TaskStatusPending:
+            return 'pending'
+        case TaskStatusRunning:
+            return 'running'
+        case TaskStatusSuccess:
+            return 'success'
+        case TaskStatusFailure:
+            return 'failure'
+        default:
+            return 'unknown'
+    }
+}
 
 export const useTasksStore = defineStore('tasks', () => {
     const tasks = reactive([])
@@ -27,9 +42,5 @@ export const useTasksStore = defineStore('tasks', () => {
         return tasks.length
     })
 
-    const CountError = computed(() => {
-        return tasks.filter(v => v.status === 4).length
-    })
-
-    return {tasks, GetTasks, Count, CountError}
+    return {tasks, GetTasks, Count}
 })
\ No newline at end of file
diff --git a/web/ui/src/views/JobsView.vue b/web/ui/src/views/JobsView.vue
index a3431ff..ad9e6db 100644
--- a/web/ui/src/views/JobsView.vue
+++ b/web/ui/src/views/JobsView.vue
@@ -63,9 +63,9 @@
         <span>
           <a-tag
               :key="record.status"
-              :color="record.status === JobStatusStopped ? 'volcano' : record.status === JobStatusRunning ? 'green' : 'geekblue'"
+              :color="record.status === JobStatusFailure ? 'volcano' : record.status === JobStatusSuccess ? 'green' : 'geekblue'"
           >
-            {{ jobStatusName(record.status) }}
+            {{ JobStatusName(record.status) }}
           </a-tag>
         </span>
       </template>
@@ -90,7 +90,8 @@
       </template>
       <template v-else-if="column.dataIndex === 'action'">
         <span>
-          <a v-if="record.status === JobStatusStopped" @click="rerun(record.spider, record.id)">Rerun</a>
+          <a v-if="record.status === JobStatusSuccess||record.status === JobStatusFailure"
+             @click="rerun(record.spider, record.id)">Rerun</a>
           <a v-if="record.status === JobStatusRunning" @click="stop(record.spider, record.id)">Stop</a>
           <a-divider type="vertical"/>
           <a class="ant-dropdown-link" @click="showDrawer(record)">
@@ -234,12 +235,14 @@
 import {ExclamationCircleOutlined, RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {RouterLink, useRoute} from "vue-router";
 import {
+  JobStatusFailure,
   JobStatusIdle,
+  JobStatusName,
   JobStatusReady,
   JobStatusRunning,
   JobStatusStarting,
-  JobStatusStopped,
   JobStatusStopping,
+  JobStatusSuccess,
   useJobsStore
 } from "@/stores/jobs";
 import {formatDuration, formattedDate} from "@/utils/time";
@@ -247,7 +250,6 @@ import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
 import {computed, createVNode, onBeforeUnmount, reactive, ref} from "vue";
 import {message, Modal} from "ant-design-vue";
 import {useSpidersStore} from "@/stores/spiders";
-import {useNodesStore} from "@/stores/nodes";
 
 const filteredInfo = reactive({});
 const {query} = useRoute();
@@ -346,8 +348,12 @@ const columns = computed(() => {
           value: JobStatusStopping,
         },
         {
-          text: 'stopped',
-          value: JobStatusStopped,
+          text: 'success',
+          value: JobStatusSuccess,
+        },
+        {
+          text: 'failure',
+          value: JobStatusFailure,
         },
       ],
       onFilter: (value, record) => record.status === value,
@@ -429,25 +435,6 @@ const columns = computed(() => {
 
 const jobsStore = useJobsStore()
 
-const jobStatusName = (status) => {
-  switch (status) {
-    case JobStatusReady:
-      return 'ready'
-    case JobStatusStarting:
-      return 'starting'
-    case JobStatusRunning:
-      return 'running'
-    case JobStatusIdle:
-      return 'idle'
-    case JobStatusStopping:
-      return 'stopping'
-    case JobStatusStopped:
-      return 'stopped'
-    default:
-      return 'unknown'
-  }
-}
-
 // auto refresh
 const checked1 = ref(true)
 const checked1Disable = ref(true)
@@ -515,7 +502,7 @@ const open = ref(false);
 const more = reactive({})
 const showDrawer = record => {
   open.value = true;
-  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${jobStatusName(v)}`).reverse();
+  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${JobStatusName(v)}`).reverse();
 };
 // status list
 const activeKey = ref('1');
diff --git a/web/ui/src/views/NodesView.vue b/web/ui/src/views/NodesView.vue
index 0c0e8a7..fe99349 100644
--- a/web/ui/src/views/NodesView.vue
+++ b/web/ui/src/views/NodesView.vue
@@ -83,7 +83,7 @@
               :key="record.status"
               :color="record.status === NodeStatusStopped ? 'volcano' : record.status === NodeStatusRunning ? 'green' : 'geekblue'"
           >
-                   {{ nodeStatusName(record.status) }}
+                   {{ NodeStatusName(record.status) }}
           </a-tag>
         </span>
       </template>
@@ -135,6 +135,7 @@ import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {RouterLink, useRoute} from "vue-router";
 import {
   NodeStatusIdle,
+  NodeStatusName,
   NodeStatusReady,
   NodeStatusRunning,
   NodeStatusStarting,
@@ -329,30 +330,11 @@ onBeforeUnmount(() => {
   clearInterval(interval)
 })
 
-const nodeStatusName = (status) => {
-  switch (status) {
-    case NodeStatusReady:
-      return 'ready'
-    case NodeStatusStarting:
-      return 'starting'
-    case NodeStatusRunning:
-      return 'running'
-    case NodeStatusIdle:
-      return 'idle'
-    case NodeStatusStopping:
-      return 'stopping'
-    case NodeStatusStopped:
-      return 'stopped'
-    default:
-      return 'unknown'
-  }
-}
-
 const open = ref(false);
 const more = reactive({})
 const showDrawer = record => {
   open.value = true;
-  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${nodeStatusName(v)}`).reverse();
+  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${NodeStatusName(v)}`).reverse();
 };
 // status list
 const activeKey = ref('1');
diff --git a/web/ui/src/views/RecordsView.vue b/web/ui/src/views/RecordsView.vue
index da87022..a86f479 100644
--- a/web/ui/src/views/RecordsView.vue
+++ b/web/ui/src/views/RecordsView.vue
@@ -68,8 +68,24 @@
           {{ record.task }}
         </RouterLink>
       </template>
-      <template v-else-if="column.dataIndex === 'save_time'">
-        {{ formattedDate(record.save_time) }}
+      <template v-else-if="column.dataIndex === 'status'">
+        <span>
+          <a-tag
+              :key="record.status"
+              :color="record.status === ItemStatusFailure ? 'volcano' : record.status===ItemStatusSuccess ? 'green' : 'geekblue'"
+          >
+            {{ ItemStatusName(record.status) }}
+          </a-tag>
+        </span>
+      </template>
+      <template v-else-if="column.dataIndex === 'start_time'">
+        {{ formattedDate(record.start_time) }}
+      </template>
+      <template v-else-if="column.dataIndex === 'finish_time'">
+        {{ formattedDate(record.finish_time) }}
+      </template>
+      <template v-else-if="column.dataIndex === 'duration'">
+        {{ formatDuration(record.finish_time - record.start_time) }}
       </template>
       <template v-else-if="column.dataIndex === 'action'">
         <span>
@@ -110,8 +126,15 @@
 <script setup>
 import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {RouterLink, useRoute} from "vue-router";
-import {formattedDate} from "@/utils/time";
-import {useRecordsStore} from "@/stores/records";
+import {formatDuration, formattedDate} from "@/utils/time";
+import {
+  ItemStatusFailure,
+  ItemStatusName,
+  ItemStatusPending,
+  ItemStatusRunning,
+  ItemStatusSuccess,
+  useRecordsStore
+} from "@/stores/records";
 import {computed, onBeforeUnmount, reactive, ref} from "vue";
 import {sortBigInt, sortStr} from "@/utils/sort";
 
@@ -222,10 +245,82 @@ const columns = computed(() => {
       ellipsis: true,
     },
     {
-      title: 'Save Time',
-      dataIndex: 'save_time',
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'pending',
+          value: ItemStatusPending,
+        },
+        {
+          text: 'running',
+          value: ItemStatusRunning,
+        },
+        {
+          text: 'success',
+          value: ItemStatusSuccess,
+        },
+        {
+          text: 'failure',
+          value: ItemStatusFailure,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
+    {
+      title: 'Start Time',
+      dataIndex: 'start_time',
       width: 200,
-      sorter: (a, b) => a.save_time - b.save_time,
+      sorter: (a, b) => a.start_time - b.start_time,
+    },
+    {
+      title: 'Finish Time',
+      dataIndex: 'finish_time',
+      width: 200,
+      sorter: (a, b) => {
+        if (a.finish_time === b.finish_time) {
+          return 0
+        }
+        const a_finish_time = a.finish_time !== 0 ? a.finish_time : Math.floor(Date.now() / 1000)
+        const b_finish_time = b.finish_time !== 0 ? b.finish_time : Math.floor(Date.now() / 1000)
+        return a_finish_time - b_finish_time
+      },
+    },
+    {
+      title: 'Duration',
+      dataIndex: 'duration',
+      width: 150,
+      sorter: (a, b) => {
+        let a_finish_time = a.finish_time
+        if (a.start_time === 0 && a.finish_time === 0) {
+          a_finish_time = Math.floor(Date.now() / 1000)
+        }
+        let b_finish_time = b.finish_time
+        if (b.start_time === 0 && b.finish_time === 0) {
+          b_finish_time = Math.floor(Date.now() / 1000)
+        }
+        return (a_finish_time - a.start_time) - (b_finish_time - b.start_time)
+      },
+    },
+    {
+      title: 'Stop Reason',
+      dataIndex: 'stop_reason',
+      sorter: (a, b) => sortStr(a.stop_reason, b.stop_reason),
+      width: 200,
+      ellipsis: true,
+      customFilterDropdown: true,
+      filteredValue: filteredInfo.stop_reason || null,
+      onFilter: (value, record) =>
+          record.stop_reason.toString().toLowerCase().includes(value.toLowerCase()),
+      onFilterDropdownOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => {
+            searchInput.value.focus();
+          }, 100);
+        }
+      },
     },
     {
       title: 'Action',
diff --git a/web/ui/src/views/RequestsView.vue b/web/ui/src/views/RequestsView.vue
index 2642191..af3aa80 100644
--- a/web/ui/src/views/RequestsView.vue
+++ b/web/ui/src/views/RequestsView.vue
@@ -68,6 +68,16 @@
           {{ record.task }}
         </RouterLink>
       </template>
+      <template v-else-if="column.dataIndex === 'status'">
+        <span>
+          <a-tag
+              :key="record.status"
+              :color="record.status === RequestStatusFailure ? 'volcano' : record.status===RequestStatusSuccess ? 'green' : 'geekblue'"
+          >
+            {{ RequestStatusName(record.status) }}
+          </a-tag>
+        </span>
+      </template>
       <template v-else-if="column.dataIndex === 'start_time'">
         {{ formattedDate(record.start_time) }}
       </template>
@@ -117,7 +127,14 @@
 import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {RouterLink, useRoute} from "vue-router";
 import {formatDuration, formattedDate} from "@/utils/time";
-import {useRequestsStore} from "@/stores/requests";
+import {
+  RequestStatusFailure,
+  RequestStatusName,
+  RequestStatusPending,
+  RequestStatusRunning,
+  RequestStatusSuccess,
+  useRequestsStore
+} from "@/stores/requests";
 import {computed, onBeforeUnmount, reactive, ref} from "vue";
 import {sortBigInt, sortStr} from "@/utils/sort";
 
@@ -227,6 +244,31 @@ const columns = computed(() => {
       width: 200,
       ellipsis: true,
     },
+    {
+      title: 'Status',
+      dataIndex: 'status',
+      width: 100,
+      filters: [
+        {
+          text: 'pending',
+          value: RequestStatusPending,
+        },
+        {
+          text: 'running',
+          value: RequestStatusRunning,
+        },
+        {
+          text: 'success',
+          value: RequestStatusSuccess,
+        },
+        {
+          text: 'failure',
+          value: RequestStatusFailure,
+        },
+      ],
+      onFilter: (value, record) => record.status === value,
+      filteredValue: null,
+    },
     {
       title: 'Start Time',
       dataIndex: 'start_time',
diff --git a/web/ui/src/views/SpidersView.vue b/web/ui/src/views/SpidersView.vue
index 00858f4..8e151d1 100644
--- a/web/ui/src/views/SpidersView.vue
+++ b/web/ui/src/views/SpidersView.vue
@@ -60,7 +60,7 @@
               :key="record.status"
               :color="record.status === SpiderStatusStopped ? 'volcano' : record.status===SpiderStatusRunning ? 'green' : 'geekblue'"
           >
-            {{ spiderStatusName(record.status) }}
+            {{ SpiderStatusName(record.status) }}
           </a-tag>
         </span>
       </template>
@@ -68,9 +68,9 @@
         <span>
           <a-tag
               :key="record.last_task_status"
-              :color="record.last_task_status === TaskStatusError ? 'volcano' : record.last_task_status===TaskStatusRunning ? 'green' : 'geekblue'"
+              :color="record.last_task_status === TaskStatusFailure ? 'volcano' : record.last_task_status===TaskStatusRunning ? 'green' : 'geekblue'"
           >
-            {{ taskStatusName(record.last_task_status) }}
+            {{ TaskStatusName(record.last_task_status) }}
           </a-tag>
         </span>
       </template>
@@ -158,6 +158,7 @@ import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {RouterLink, useRoute} from "vue-router";
 import {
   SpiderStatusIdle,
+  SpiderStatusName,
   SpiderStatusReady,
   SpiderStatusRunning,
   SpiderStatusStarting,
@@ -168,8 +169,13 @@ import {
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
 import {computed, onBeforeUnmount, reactive, ref} from "vue";
-import {TaskStatusError, TaskStatusPending, TaskStatusRunning, TaskStatusSuccess} from "@/stores/tasks";
-import {useNodesStore} from "@/stores/nodes";
+import {
+  TaskStatusFailure,
+  TaskStatusName,
+  TaskStatusPending,
+  TaskStatusRunning,
+  TaskStatusSuccess
+} from "@/stores/tasks";
 
 const filteredInfo = reactive({});
 const {query} = useRoute();
@@ -305,8 +311,8 @@ const columns = computed(() => {
           value: TaskStatusSuccess,
         },
         {
-          text: 'error',
-          value: TaskStatusError,
+          text: 'failure',
+          value: TaskStatusFailure,
         },
       ],
       onFilter: (value, record) => record.last_task_status === value,
@@ -360,40 +366,6 @@ const columns = computed(() => {
 
 const spidersStore = useSpidersStore();
 
-const spiderStatusName = (status) => {
-  switch (status) {
-    case 1:
-      return 'ready'
-    case 2:
-      return 'starting'
-    case 3:
-      return 'started'
-    case 4:
-      return 'idle'
-    case 5:
-      return 'stopping'
-    case 6:
-      return 'stopped'
-    default:
-      return 'unknown'
-  }
-}
-
-const taskStatusName = (status) => {
-  switch (status) {
-    case 1:
-      return 'pending'
-    case 2:
-      return 'running'
-    case 3:
-      return 'success'
-    case 4:
-      return 'error'
-    default:
-      return 'unknown'
-  }
-}
-
 // auto refresh
 const checked1 = ref(true)
 const checked1Disable = ref(true)
@@ -422,7 +394,7 @@ const open = ref(false);
 const more = reactive({})
 const showDrawer = record => {
   open.value = true;
-  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${spiderStatusName(v)}`).reverse();
+  more.status_list = Object.entries(record.status_list).map(([k, v]) => `${formattedDate(k / 1000000000)} ${SpiderStatusName(v)}`).reverse();
 };
 // status list
 const activeKey = ref('1');
diff --git a/web/ui/src/views/TasksView.vue b/web/ui/src/views/TasksView.vue
index 92088bd..e62ced9 100644
--- a/web/ui/src/views/TasksView.vue
+++ b/web/ui/src/views/TasksView.vue
@@ -67,9 +67,9 @@
         <span>
           <a-tag
               :key="record.status"
-              :color="record.status === TaskStatusError ? 'volcano' : record.status===TaskStatusSuccess ? 'green' : 'geekblue'"
+              :color="record.status === TaskStatusFailure ? 'volcano' : record.status===TaskStatusSuccess ? 'green' : 'geekblue'"
           >
-            {{ taskStatusName(record.status) }}
+            {{ TaskStatusName(record.status) }}
           </a-tag>
         </span>
       </template>
@@ -125,7 +125,14 @@
 import {RightOutlined, SearchOutlined} from "@ant-design/icons-vue";
 import {computed, onBeforeUnmount, reactive, ref} from "vue";
 import {RouterLink, useRoute} from "vue-router";
-import {TaskStatusError, TaskStatusPending, TaskStatusRunning, TaskStatusSuccess, useTasksStore} from "@/stores/tasks";
+import {
+  TaskStatusFailure,
+  TaskStatusName,
+  TaskStatusPending,
+  TaskStatusRunning,
+  TaskStatusSuccess,
+  useTasksStore
+} from "@/stores/tasks";
 import {formatDuration, formattedDate} from "@/utils/time";
 import {sortBigInt, sortInt, sortStr} from "@/utils/sort";
 import {useNodesStore} from "@/stores/nodes";
@@ -224,8 +231,8 @@ const columns = computed(() => {
           value: TaskStatusSuccess,
         },
         {
-          text: 'error',
-          value: TaskStatusError,
+          text: 'failure',
+          value: TaskStatusFailure,
         },
       ],
       onFilter: (value, record) => record.status === value,
@@ -307,21 +314,6 @@ const showDrawer = () => {
 };
 const activeKey = ref('1');
 
-const taskStatusName = (status) => {
-  switch (status) {
-    case 1:
-      return 'pending'
-    case 2:
-      return 'running'
-    case 3:
-      return 'success'
-    case 4:
-      return 'error'
-    default:
-      return 'unknown'
-  }
-}
-
 // auto refresh
 const checked1 = ref(true)
 const checked1Disable = ref(true)