加入日志分页

frontend/src/components/InfoView/TaskInfoView.vue

@@ -79,8 +79,7 @@
 
 <script>
 import {
-  mapState,
-  mapGetters
+  mapState
 } from 'vuex'
 import StatusTag from '../Status/StatusTag'
 import dayjs from 'dayjs'
@@ -91,9 +90,7 @@ export default {
   computed: {
     ...mapState('task', [
       'taskForm',
-      'taskLog'
-    ]),
-    ...mapGetters('task', [
+      'taskLog',
       'errorLogData'
     ]),
     isRunning () {

frontend/src/components/ScrollView/LogView.vue

@@ -13,14 +13,31 @@
           {{$t('Auto-Scroll')}}
         </el-button>
         <el-input
-          v-model="searchString"
+          v-model="logKeyword"
           size="small"
           suffix-icon="el-icon-search"
           :placeholder="$t('Search Log')"
           style="width: 240px; margin-right: 10px"
         />
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-search"
+          @click="onSearchLog"
+        >
+          {{$t('Search Log')}}
+        </el-button>
       </div>
       <div class="right">
+        <el-pagination
+          size="small"
+          :total="taskLogTotal"
+          :current-page.sync="taskLogPage"
+          :page-sizes="[1000, 2000, 5000, 10000]"
+          :page-size.sync="taskLogPageSize"
+          :pager-count="3"
+          layout="sizes, prev, pager, next"
+        />
         <el-badge
           v-if="errorLogData.length > 0"
           :value="errorLogData.length"
@@ -68,11 +85,11 @@
             :class="currentLogIndex === item.index ? 'active' : ''"
             @click="onClickError(item)"
           >
-            <span class="line-no">
-              {{item.index}}
-            </span>
+<!--            <span class="line-no">-->
+<!--              {{item.index}}-->
+<!--            </span>-->
             <span class="line-content">
-              {{item.data}}
+              {{item.msg}}
             </span>
           </li>
         </ul>
@@ -119,7 +136,8 @@ export default {
   },
   computed: {
     ...mapState('task', [
-      'taskForm'
+      'taskForm',
+      'taskLogTotal'
     ]),
     ...mapGetters('task', [
       'logData',
@@ -133,6 +151,30 @@ export default {
         this.$store.commit('task/SET_CURRENT_LOG_INDEX', value)
       }
     },
+    logKeyword: {
+      get () {
+        return this.$store.state.task.logKeyword
+      },
+      set (value) {
+        this.$store.commit('task/SET_LOG_KEYWORD', value)
+      }
+    },
+    taskLogPage: {
+      get () {
+        return this.$store.state.task.taskLogPage
+      },
+      set (value) {
+        this.$store.commit('task/SET_TASK_LOG_PAGE', value)
+      }
+    },
+    taskLogPageSize: {
+      get () {
+        return this.$store.state.task.taskLogPageSize
+      },
+      set (value) {
+        this.$store.commit('task/SET_TASK_LOG_PAGE_SIZE', value)
+      }
+    },
     filteredLogData () {
       return this.logData.filter(d => {
         if (!this.searchString) return true
@@ -145,8 +187,13 @@ export default {
     }
   },
   watch: {
-    searchString () {
-      this.$st.sendEv('任务详情', '日志', '搜索日志')
+    taskLogPage () {
+      this.$emit('search')
+      this.$st.sendEv('任务详情', '日志', '改变页数')
+    },
+    taskLogPageSize () {
+      this.$emit('search')
+      this.$st.sendEv('任务详情', '日志', '改变日志每页条数')
     }
   },
   methods: {
@@ -160,7 +207,7 @@ export default {
           index: logItem.index,
           logItem,
           data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
-          searchString: this.searchString,
+          searchString: this.logKeyword,
           active: logItem.active,
           isAnsi
         }
@@ -211,6 +258,10 @@ export default {
       setTimeout(() => {
         clearInterval(handle)
       }, 500)
+    },
+    onSearchLog () {
+      this.$emit('search')
+      this.$st.sendEv('任务详情', '日志', '搜索日志')
     }
   },
   mounted () {
@@ -319,4 +370,13 @@ export default {
     width: calc(100% - 70px);
     padding-left: 10px;
   }
+
+  .right {
+    display: flex;
+    align-items: center;
+  }
+
+  .right .el-pagination {
+    margin-right: 10px;
+  }
 </style>

frontend/src/store/modules/task.js

@@ -7,6 +7,9 @@ const state = {
   taskListTotalCount: 0,
   taskForm: {},
   taskLog: [],
+  taskLogTotal: 0,
+  taskLogPage: 1,
+  taskLogPageSize: 5000,
   currentLogIndex: 0,
   taskResultsData: [],
   taskResultsColumns: [],
@@ -21,6 +24,9 @@ const state = {
   // pagination
   pageNum: 1,
   pageSize: 10,
+  // log
+  logKeyword: '',
+  errorLogData: [],
   // results
   resultsPageNum: 1,
   resultsPageSize: 10
@@ -63,8 +69,11 @@ const getters = {
     return data
   },
   errorLogData (state, getters) {
-    return getters.logData.filter(d => {
-      return d.data.match(utils.log.errorRegex)
+    const idxList = getters.logData.map(d => d._id)
+    return state.errorLogData.map(d => {
+      const idx = idxList.indexOf(d._id)
+      d.index = getters.logData[idx].index
+      return d
     })
   }
 }
@@ -79,6 +88,9 @@ const mutations = {
   SET_TASK_LOG (state, value) {
     state.taskLog = value
   },
+  SET_TASK_LOG_TOTAL (state, value) {
+    state.taskLogTotal = value
+  },
   SET_CURRENT_LOG_INDEX (state, value) {
     state.currentLogIndex = value
   },
@@ -105,6 +117,18 @@ const mutations = {
   },
   SET_TASK_RESULTS_TOTAL_COUNT (state, value) {
     state.taskResultsTotalCount = value
+  },
+  SET_LOG_KEYWORD (state, value) {
+    state.logKeyword = value
+  },
+  SET_ERROR_LOG_DATA (state, value) {
+    state.errorLogData = value
+  },
+  SET_TASK_LOG_PAGE (state, value) {
+    state.taskLogPage = value
+  },
+  SET_TASK_LOG_PAGE_SIZE (state, value) {
+    state.taskLogPageSize = value
   }
 }
 
@@ -149,10 +173,21 @@ const actions = {
         dispatch('getTaskList')
       })
   },
-  getTaskLog ({ state, commit }, id) {
-    return request.get(`/tasks/${id}/log`)
+  getTaskLog ({ state, commit }, { id, keyword }) {
+    return request.get(`/tasks/${id}/log`, {
+      keyword,
+      page_num: state.taskLogPage,
+      page_size: state.taskLogPageSize
+    })
       .then(response => {
         commit('SET_TASK_LOG', response.data.data || [])
+        commit('SET_TASK_LOG_TOTAL', response.data.total || 0)
+      })
+  },
+  getTaskErrorLog ({ state, commit }, id) {
+    return request.get(`/tasks/${id}/log`, { keyword: utils.log.errorRegex.source })
+      .then(response => {
+        commit('SET_ERROR_LOG_DATA', response.data.data || [])
       })
   },
   getTaskResults ({ state, commit }, id) {

frontend/src/views/task/TaskDetail.vue

@@ -15,7 +15,7 @@
         <task-overview @click-log="activeTabName = 'log'"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('Log')" name="log">
-        <log-view/>
+        <log-view @search="getTaskLog"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('Results')" name="results">
         <div class="button-group">
@@ -136,7 +136,8 @@ export default {
       'taskForm',
       'taskResultsData',
       'taskResultsTotalCount',
-      'taskLog'
+      'taskLog',
+      'logKeyword'
     ]),
     ...mapGetters('task', [
       'taskResultsColumns'
@@ -185,7 +186,8 @@ export default {
       this.$st.sendEv('任务详情', '结果', '下载CSV')
     },
     getTaskLog () {
-      this.$store.dispatch('task/getTaskLog', this.$route.params.id)
+      this.$store.dispatch('task/getTaskLog', { id: this.$route.params.id, keyword: this.logKeyword })
+      this.$store.dispatch('task/getTaskErrorLog', this.$route.params.id)
     }
   },
   created () {