From 1ec3074012de2833cc017ab389f2337543effa6a Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Tue, 12 Mar 2019 21:20:22 +0800
Subject: [PATCH] added pagination for tasks results

---
 crawlab/routes/tasks.py                       |  7 ++++
 .../components/TableView/GeneralTableView.vue | 35 +++++++++++++------
 frontend/src/store/modules/task.js            | 22 ++++++++++--
 frontend/src/views/task/TaskDetail.vue        | 27 ++++++++++++--
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/crawlab/routes/tasks.py b/crawlab/routes/tasks.py
index 7d997187..24a2f7ca 100644
--- a/crawlab/routes/tasks.py
+++ b/crawlab/routes/tasks.py
@@ -107,6 +107,10 @@ class TaskApi(BaseApi):
                    }, 500
 
     def get_results(self, id):
+        args = self.parser.parse_args()
+        page_size = args.get('page_size') or 10
+        page_num = args.get('page_num') or 1
+
         task = db_manager.get('tasks', id=id)
         spider = db_manager.get('spiders', id=task['spider_id'])
         col_name = spider.get('col')
@@ -117,6 +121,9 @@ class TaskApi(BaseApi):
         return {
             'status': 'ok',
             'fields': jsonify(fields),
+            'total_count': db_manager.count(col_name, {'task_id': id}),
+            'page_num': page_num,
+            'page_size': page_size,
             'items': jsonify(items)
         }
 
diff --git a/frontend/src/components/TableView/GeneralTableView.vue b/frontend/src/components/TableView/GeneralTableView.vue
index 42f13a57..97bd3b38 100644
--- a/frontend/src/components/TableView/GeneralTableView.vue
+++ b/frontend/src/components/TableView/GeneralTableView.vue
@@ -11,11 +11,13 @@
     </el-table>
     <div class="pagination">
       <el-pagination
-        :current-page.sync="pagination.pageNum"
+        @current-change="onPageChange"
+        @size-change="onPageChange"
+        :current-page.sync="pageNum"
         :page-sizes="[10, 20, 50, 100]"
-        :page-size.sync="pagination.pageSize"
+        :page-size.sync="pageSize"
         layout="sizes, prev, pager, next"
-        :total="data.length">
+        :total="total">
       </el-pagination>
     </div>
   </div>
@@ -25,14 +27,21 @@
 export default {
   name: 'GeneralTableView',
   data () {
-    return {
-      pagination: {
-        pageNum: 1,
-        pageSize: 10
-      }
-    }
+    return {}
   },
   props: {
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
     columns: {
       type: Array,
       default () {
@@ -52,10 +61,16 @@ export default {
         .map(d => d)
         .filter((d, index) => {
           // pagination
-          const { pageNum, pageSize } = this.pagination
+          const pageNum = this.pageNum
+          const pageSize = this.pageSize
           return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
         })
     }
+  },
+  methods: {
+    onPageChange () {
+      this.$emit('page-change')
+    }
   }
 }
 </script>
diff --git a/frontend/src/store/modules/task.js b/frontend/src/store/modules/task.js
index 742f1c66..e578dd34 100644
--- a/frontend/src/store/modules/task.js
+++ b/frontend/src/store/modules/task.js
@@ -9,9 +9,13 @@ const state = {
   taskLog: '',
   taskResultsData: [],
   taskResultsColumns: [],
+  taskResultsTotalCount: 0,
   // pagination
   pageNum: 0,
-  pageSize: 10
+  pageSize: 10,
+  // results
+  resultsPageNum: 0,
+  resultsPageSize: 10
 }
 
 const getters = {}
@@ -40,6 +44,15 @@ const mutations = {
   },
   SET_TASK_LIST_TOTAL_COUNT (state, value) {
     state.taskListTotalCount = value
+  },
+  SET_RESULTS_PAGE_NUM (state, value) {
+    state.resultsPageNum = value
+  },
+  SET_RESULTS_PAGE_SIZE (state, value) {
+    state.resultsPageSize = value
+  },
+  SET_TASK_RESULTS_TOTAL_COUNT (state, value) {
+    state.taskResultsTotalCount = value
   }
 }
 
@@ -87,10 +100,15 @@ const actions = {
       })
   },
   getTaskResults ({ state, commit }, id) {
-    return request.get(`/tasks/${id}/get_results`)
+    return request.get(`/tasks/${id}/get_results`, {
+      page_num: state.resultsPageNum,
+      page_size: state.resultsPageSize
+    })
       .then(response => {
         commit('SET_TASK_RESULTS_DATA', response.data.items)
         commit('SET_TASK_RESULTS_COLUMNS', response.data.fields)
+        commit('SET_TASK_RESULTS_COLUMNS', response.data.fields)
+        commit('SET_TASK_RESULTS_TOTAL_COUNT', response.data.total_count)
       })
   }
 }
diff --git a/frontend/src/views/task/TaskDetail.vue b/frontend/src/views/task/TaskDetail.vue
index 1ef99ba5..c4968ce4 100644
--- a/frontend/src/views/task/TaskDetail.vue
+++ b/frontend/src/views/task/TaskDetail.vue
@@ -13,7 +13,11 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="Results" name="results">
-        <general-table-view :data="taskResultsData" :columns="taskResultsColumns"/>
+        <general-table-view :data="taskResultsData"
+                            :columns="taskResultsColumns"
+                            :page-num="resultsPageNum"
+                            :page-size="resultsPageSize"
+                            :total="taskResultsTotalCount"/>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -41,14 +45,31 @@ export default {
     ...mapState('task', [
       'taskLog',
       'taskResultsData',
-      'taskResultsColumns'
+      'taskResultsColumns',
+      'taskResultsTotalCount'
     ]),
     ...mapState('file', [
       'currentPath'
     ]),
     ...mapState('deploy', [
       'deployList'
-    ])
+    ]),
+    resultsPageNum: {
+      get () {
+        return this.$store.state.task.resultsPageNum
+      },
+      set (value) {
+        this.$store.commit('task/SET_RESULTS_PAGE_NUM', value)
+      }
+    },
+    resultsPageSize: {
+      get () {
+        return this.$store.state.task.resultsPageSize
+      },
+      set (value) {
+        this.$store.commit('task/SET_RESULTS_PAGE_SIZE', value)
+      }
+    }
   },
   methods: {
     onTabClick () {