From daeaa05d85122b055a4963afaa2e94958a867062 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Wed, 17 Apr 2019 21:50:30 +0800
Subject: [PATCH] added filter for TaskList

---
 .../components/InfoView/SpiderInfoView.vue    | 40 +++++++++---------
 frontend/src/store/modules/task.js            | 11 ++++-
 frontend/src/views/task/TaskList.vue          | 42 +++++++++++++------
 3 files changed, 59 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/InfoView/SpiderInfoView.vue b/frontend/src/components/InfoView/SpiderInfoView.vue
index a02088ad..6bc1a157 100644
--- a/frontend/src/components/InfoView/SpiderInfoView.vue
+++ b/frontend/src/components/InfoView/SpiderInfoView.vue
@@ -38,26 +38,26 @@
             <el-option value="go" label="Go"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="$t('Schedule Enabled')">
-          <el-switch v-model="spiderForm.cron_enabled" :disabled="isView">
-          </el-switch>
-        </el-form-item>
-        <el-form-item :label="$t('Schedule Cron')" v-if="spiderForm.cron_enabled"
-                      prop="cron"
-                      :rules="cronRules"
-                      :inline-message="true">
-          <template slot="label">
-            <el-tooltip :content="$t('Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]')"
-                        placement="top">
-              <span>
-                {{$t('Schedule Cron')}}
-                <i class="fa fa-exclamation-circle"></i>
-              </span>
-            </el-tooltip>
-          </template>
-          <el-input v-model="spiderForm.cron" :placeholder="$t('Schedule Cron')"
-                    :disabled="isView"></el-input>
-        </el-form-item>
+        <!--<el-form-item :label="$t('Schedule Enabled')">-->
+        <!--<el-switch v-model="spiderForm.cron_enabled" :disabled="isView">-->
+        <!--</el-switch>-->
+        <!--</el-form-item>-->
+        <!--<el-form-item :label="$t('Schedule Cron')" v-if="spiderForm.cron_enabled"-->
+        <!--prop="cron"-->
+        <!--:rules="cronRules"-->
+        <!--:inline-message="true">-->
+        <!--<template slot="label">-->
+        <!--<el-tooltip :content="$t('Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]')"-->
+        <!--placement="top">-->
+        <!--<span>-->
+        <!--{{$t('Schedule Cron')}}-->
+        <!--<i class="fa fa-exclamation-circle"></i>-->
+        <!--</span>-->
+        <!--</el-tooltip>-->
+        <!--</template>-->
+        <!--<el-input v-model="spiderForm.cron" :placeholder="$t('Schedule Cron')"-->
+        <!--:disabled="isView"></el-input>-->
+        <!--</el-form-item>-->
       </el-form>
     </el-row>
     <el-row class="button-container" v-if="!isView">
diff --git a/frontend/src/store/modules/task.js b/frontend/src/store/modules/task.js
index c421a79b..02a23841 100644
--- a/frontend/src/store/modules/task.js
+++ b/frontend/src/store/modules/task.js
@@ -9,6 +9,11 @@ const state = {
   taskResultsData: [],
   taskResultsColumns: [],
   taskResultsTotalCount: 0,
+  // filter
+  filter: {
+    node_id: '',
+    spider_id: ''
+  },
   // pagination
   pageNum: 0,
   pageSize: 10,
@@ -68,7 +73,11 @@ const actions = {
   getTaskList ({ state, commit }) {
     return request.get('/tasks', {
       page_num: state.pageNum,
-      page_size: state.pageSize
+      page_size: state.pageSize,
+      filter: {
+        node_id: state.filter.node_id || undefined,
+        spider_id: state.filter.spider_id || undefined
+      }
     })
       .then(response => {
         commit('SET_TASK_LIST', response.data.items)
diff --git a/frontend/src/views/task/TaskList.vue b/frontend/src/views/task/TaskList.vue
index 87fa6804..fe40fe5c 100644
--- a/frontend/src/views/task/TaskList.vue
+++ b/frontend/src/views/task/TaskList.vue
@@ -2,20 +2,22 @@
   <div class="app-container">
     <!--filter-->
     <div class="filter">
-      <el-input prefix-icon="el-icon-search"
-                :placeholder="$t('Search')"
-                class="filter-search"
-                v-model="filter.keyword"
-                @change="onSearch">
-      </el-input>
-      <div class="right">
+      <div class="left">
+        <el-select class="filter-select" v-model="filter.node_id" :placeholder="$t('Node')" filterable clearable>
+          <el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>
+        </el-select>
+        <el-select class="filter-select" v-model="filter.spider_id" :placeholder="$t('Spider')" filterable clearable>
+          <el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
+        </el-select>
         <el-button type="success"
-                   icon="el-icon-refresh"
+                   icon="el-icon-search"
                    class="refresh"
                    @click="onRefresh">
-          {{$t('Refresh')}}
+          {{$t('Search')}}
         </el-button>
       </div>
+      <!--<div class="right">-->
+      <!--</div>-->
     </div>
 
     <!--table list-->
@@ -102,26 +104,31 @@ export default {
     return {
       isEditMode: false,
       dialogVisible: false,
-      filter: {
-        keyword: ''
-      },
       // tableData,
       columns: [
         { name: 'create_ts', label: 'Create Time', width: '150' },
         { name: 'start_ts', label: 'Start Time', width: '150' },
         { name: 'finish_ts', label: 'Finish Time', width: '150' },
+        { name: 'duration', label: 'Duration (sec)', width: '80' },
         { name: 'spider_name', label: 'Spider', width: '160' },
         { name: 'node_id', label: 'Node', width: '160' },
-        { name: 'status', label: 'Status', width: '160', sortable: true }
+        { name: 'status', label: 'Status', width: '80' }
       ]
     }
   },
   computed: {
     ...mapState('task', [
+      'filter',
       'taskList',
       'taskListTotalCount',
       'taskForm'
     ]),
+    ...mapState('spider', [
+      'spiderList'
+    ]),
+    ...mapState('node', [
+      'nodeList'
+    ]),
     pageNum: {
       get () {
         return this.$store.state.task.pageNum
@@ -200,6 +207,8 @@ export default {
   },
   created () {
     this.$store.dispatch('task/getTaskList')
+    this.$store.dispatch('spider/getSpiderList')
+    this.$store.dispatch('node/getNodeList')
   }
 }
 </script>
@@ -215,6 +224,13 @@ export default {
     display: flex;
     justify-content: space-between;
 
+    .left {
+      .filter-select {
+        width: 180px;
+        margin-right: 10px;
+      }
+    }
+
     .filter-search {
       width: 240px;
     }