adapt changes to golang api

frontend/src/views/task/TaskDetail.vue

@@ -29,7 +29,8 @@
 
 <script>
 import {
-  mapState
+  mapState,
+  mapGetters
 } from 'vuex'
 import TaskOverview from '../../components/Overview/TaskOverview'
 import GeneralTableView from '../../components/TableView/GeneralTableView'
@@ -44,16 +45,19 @@ export default {
   },
   data () {
     return {
-      activeTabName: 'overview'
+      activeTabName: 'overview',
+      handle: undefined
     }
   },
   computed: {
     ...mapState('task', [
       'taskLog',
       'taskResultsData',
-      'taskResultsColumns',
       'taskResultsTotalCount'
     ]),
+    ...mapGetters('task', [
+      'taskResultsColumns'
+    ]),
     ...mapState('file', [
       'currentPath'
     ]),
@@ -99,6 +103,13 @@ export default {
     this.$store.dispatch('task/getTaskData', this.$route.params.id)
     this.$store.dispatch('task/getTaskLog', this.$route.params.id)
     this.$store.dispatch('task/getTaskResults', this.$route.params.id)
+
+    this.handle = setInterval(() => {
+      this.$store.dispatch('task/getTaskLog', this.$route.params.id)
+    }, 5000)
+  },
+  destroyed () {
+    clearInterval(this.handle)
   }
 }
 </script>

frontend/src/views/task/TaskList.vue

@@ -40,17 +40,57 @@
                          :key="col.name"
                          :label="$t(col.label)"
                          :sortable="col.sortable"
-                         align="center"
+                         :align="col.align"
                          :width="col.width">
           <template slot-scope="scope">
             <a href="javascript:" class="a-tag" @click="onClickSpider(scope.row)">{{scope.row[col.name]}}</a>
           </template>
         </el-table-column>
-        <el-table-column v-else-if="col.name === 'node_id'"
+        <el-table-column v-else-if="col.name.match(/_ts$/)"
                          :key="col.name"
                          :label="$t(col.label)"
                          :sortable="col.sortable"
-                         align="center"
+                         :align="col.align"
+                         :width="col.width">
+          <template slot-scope="scope">
+            {{getTime(scope.row[col.name])}}
+          </template>
+        </el-table-column>
+        <el-table-column v-else-if="col.name === 'wait_duration'"
+                         :key="col.name"
+                         :label="$t(col.label)"
+                         :sortable="col.sortable"
+                         :align="col.align"
+                         :width="col.width">
+          <template slot-scope="scope">
+            {{getWaitDuration(scope.row)}}
+          </template>
+        </el-table-column>
+        <el-table-column v-else-if="col.name === 'runtime_duration'"
+                         :key="col.name"
+                         :label="$t(col.label)"
+                         :sortable="col.sortable"
+                         :align="col.align"
+                         :width="col.width">
+          <template slot-scope="scope">
+            {{getRuntimeDuration(scope.row)}}
+          </template>
+        </el-table-column>
+        <el-table-column v-else-if="col.name === 'total_duration'"
+                         :key="col.name"
+                         :label="$t(col.label)"
+                         :sortable="col.sortable"
+                         :align="col.align"
+                         :width="col.width">
+          <template slot-scope="scope">
+            {{getTotalDuration(scope.row)}}
+          </template>
+        </el-table-column>
+        <el-table-column v-else-if="col.name === 'node_name'"
+                         :key="col.name"
+                         :label="$t(col.label)"
+                         :sortable="col.sortable"
+                         :align="col.align"
                          :width="col.width">
           <template slot-scope="scope">
             <a href="javascript:" class="a-tag" @click="onClickNode(scope.row)">{{scope.row[col.name]}}</a>
@@ -60,13 +100,10 @@
                          :key="col.name"
                          :label="$t(col.label)"
                          :sortable="col.sortable"
-                         align="center"
+                         :align="col.align"
                          :width="col.width">
           <template slot-scope="scope">
-            <el-tag type="success" v-if="scope.row.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
-            <el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
-            <el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
-            <el-tag type="info" v-else>{{$t(scope.row[col.name])}}</el-tag>
+            <status-tag :status="scope.row[col.name]"/>
           </template>
         </el-table-column>
         <el-table-column v-else
@@ -74,11 +111,11 @@
                          :property="col.name"
                          :label="$t(col.label)"
                          :sortable="col.sortable"
-                         align="center"
+                         :align="col.align"
                          :width="col.width">
         </el-table-column>
       </template>
-      <el-table-column :label="$t('Action')" align="left" width="auto" fixed="right">
+      <el-table-column :label="$t('Action')" align="left" width="150" fixed="right">
         <template slot-scope="scope">
           <el-tooltip :content="$t('View')" placement="top">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
@@ -107,9 +144,12 @@
 import {
   mapState
 } from 'vuex'
+import dayjs from 'dayjs'
+import StatusTag from '../../components/Status/StatusTag'
 
 export default {
   name: 'TaskList',
+  components: { StatusTag },
   data () {
     return {
       // setInterval handle
@@ -123,15 +163,17 @@ export default {
 
       // table columns
       columns: [
+        { name: 'node_name', label: 'Node', width: '120' },
+        { name: 'spider_name', label: 'Spider', width: '120' },
+        { name: 'status', label: 'Status', width: '120' },
         { name: 'create_ts', label: 'Create Time', width: '100' },
         { name: 'start_ts', label: 'Start Time', width: '100' },
         { name: 'finish_ts', label: 'Finish Time', width: '100' },
-        { name: 'duration', label: 'Duration (sec)', width: '80' },
-        { name: 'spider_name', label: 'Spider', width: '120' },
-        { name: 'node_id', label: 'Node', width: '160' },
-        { name: 'num_results', label: 'Results Count', width: '80' },
-        { name: 'avg_num_results', label: 'Average Results Count per Second', width: '80' },
-        { name: 'status', label: 'Status', width: '80' }
+        { name: 'wait_duration', label: 'Wait Duration (sec)', width: '80', align: 'right' },
+        { name: 'runtime_duration', label: 'Runtime Duration (sec)', width: '80', align: 'right' },
+        { name: 'total_duration', label: 'Total Duration (sec)', width: '80', align: 'right' },
+        { name: 'num_results', label: 'Results Count', width: '80' }
+        // { name: 'avg_num_results', label: 'Average Results Count per Second', width: '80' }
       ]
     }
   },
@@ -233,6 +275,22 @@ export default {
       setTimeout(() => {
         this.$store.dispatch('task/getTaskList')
       }, 0)
+    },
+    getTime (str) {
+      if (str.match('^0001')) return 'NA'
+      return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
+    },
+    getWaitDuration (row) {
+      if (row.start_ts.match('^0001')) return 'NA'
+      return dayjs(row.start_ts).diff(row.create_ts, 'second')
+    },
+    getRuntimeDuration (row) {
+      if (row.finish_ts.match('^0001')) return 'NA'
+      return dayjs(row.finish_ts).diff(row.start_ts, 'second')
+    },
+    getTotalDuration (row) {
+      if (row.finish_ts.match('^0001')) return 'NA'
+      return dayjs(row.finish_ts).diff(row.create_ts, 'second')
     }
   },
   created () {