From e491c242dbceb4cd72c7f9941141b86c353b9643 Mon Sep 17 00:00:00 2001
From: zkqiang <zkqiang@126.com>
Date: Sat, 4 Jul 2020 14:32:23 +0800
Subject: [PATCH] fix task log view

---
 .../src/components/ScrollView/LogItem.vue     | 38 +++--------
 .../src/components/ScrollView/LogView.vue     | 66 +++++++------------
 frontend/src/views/task/TaskDetail.vue        | 21 ++----
 3 files changed, 37 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/ScrollView/LogItem.vue b/frontend/src/components/ScrollView/LogItem.vue
index b1a95081..bc09a6fb 100644
--- a/frontend/src/components/ScrollView/LogItem.vue
+++ b/frontend/src/components/ScrollView/LogItem.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="log-item" :style="style" :class="`log-item-${index} ${active ? 'active' : ''}`">
-    <div class="line-no">{{ index }}</div>
+  <div class="log-item" :style="style" :class="`log-item-${source.index} ${source.active ? 'active' : ''}`">
+    <div class="line-no">{{ source.index }}</div>
     <div class="line-content">
       <span v-if="isLogEnd" style="color: #E6A23C">
         <span class="loading-text">{{ $t('Updating log...') }}</span>
         <i class="el-icon-loading" />
       </span>
-      <span v-else-if="isAnsi" v-html="dataHtml" />
+      <span v-else-if="source.isAnsi" v-html="dataHtml" />
       <span v-else v-html="dataHtml" />
     </div>
   </div>
@@ -20,31 +20,11 @@
   export default {
     name: 'LogItem',
     props: {
-      index: {
-        type: Number,
-        default: 1
-      },
-      logItem: {
+      source: {
         type: Object,
         default() {
           return {}
         }
-      },
-      data: {
-        type: String,
-        default: ''
-      },
-      isAnsi: {
-        type: Boolean,
-        default: false
-      },
-      searchString: {
-        type: String,
-        default: ''
-      },
-      active: {
-        type: Boolean,
-        default: false
       }
     },
     data() {
@@ -63,14 +43,14 @@
         return new RegExp(this.userInfo.setting.error_regex_pattern, 'i')
       },
       dataHtml() {
-        let html = this.data.replace(this.errorRegex, ' <span style="font-weight: bolder; text-decoration: underline">$1</span> ')
-        if (!this.searchString) return html
-        html = html.replace(new RegExp(`(${this.searchString})`, 'gi'), '<mark>$1</mark>')
+        let html = this.source.data.replace(this.errorRegex, ' <span style="font-weight: bolder; text-decoration: underline">$1</span> ')
+        if (!this.source.searchString) return html
+        html = html.replace(new RegExp(`(${this.source.searchString})`, 'gi'), '<mark>$1</mark>')
         return html
       },
       style() {
         let color = ''
-        if (this.data.match(this.errorRegex)) {
+        if (this.source.data.match(this.errorRegex)) {
           color = '#F56C6C'
         }
         return {
@@ -78,7 +58,7 @@
         }
       },
       isLogEnd() {
-        return this.data === '###LOG_END###'
+        return this.source.data === '###LOG_END###'
       }
     }
   }
diff --git a/frontend/src/components/ScrollView/LogView.vue b/frontend/src/components/ScrollView/LogView.vue
index b14c8d13..d77ffc51 100644
--- a/frontend/src/components/ScrollView/LogView.vue
+++ b/frontend/src/components/ScrollView/LogView.vue
@@ -7,12 +7,6 @@
           :inactive-text="$t('Auto-Scroll')"
           style="margin-right: 10px"
         />
-        <!--        <el-switch-->
-        <!--          v-model="isLogAutoFetch"-->
-        <!--          :inactive-text="$t('Auto-Refresh')"-->
-        <!--          style="margin-right: 10px"-->
-        <!--        >-->
-        <!--        </el-switch>-->
         <el-input
           v-model="logKeyword"
           size="small"
@@ -37,7 +31,7 @@
           :current-page.sync="taskLogPage"
           :page-sizes="[1000, 2000, 5000, 10000]"
           :page-size.sync="taskLogPageSize"
-          :pager-count="3"
+          :page-count="3"
           layout="sizes, prev, pager, next"
         />
         <el-badge
@@ -57,22 +51,18 @@
     </div>
     <div class="content">
       <div
-        v-loading="isLogFetchLoading"
+        :loading="isLogFetchLoading"
         class="log-view-wrapper"
         :class="isErrorsCollapsed ? 'errors-collapsed' : ''"
       >
         <virtual-list
           ref="log-view"
           class="log-view"
+          :data-key="'index'"
+          :data-sources="items"
+          :data-component="itemComponent"
+          :keeps="taskLogPageSize"
           :start="currentLogIndex - 1"
-          :offset="0"
-          :size="18"
-          :remain="remainSize"
-          :item="item"
-          :itemcount="filteredLogData.length"
-          :itemprops="getItemProps"
-          :tobottom="onToBottom"
-          :onscroll="onScroll"
         />
       </div>
       <div
@@ -123,7 +113,7 @@
     },
     data() {
       return {
-        item: LogItem,
+        itemComponent: LogItem,
         searchString: '',
         isScrolling: false,
         isScrolling2nd: false,
@@ -200,15 +190,24 @@
           this.$store.commit('task/SET_IS_LOG_FETCH_LOADING', value)
         }
       },
-      filteredLogData() {
-        return this.logData.filter(d => {
+      items() {
+        if (!this.logData || this.logData.length === 0) {
+          return []
+        }
+        const filteredLogData = this.logData.filter(d => {
           if (!this.searchString) return true
           return !!d.data.toLowerCase().match(this.searchString.toLowerCase())
         })
-      },
-      remainSize() {
-        const height = document.querySelector('body').clientHeight
-        return (height - 240) / 18
+        return filteredLogData.map(logItem => {
+          const isAnsi = hasAnsi(logItem.data)
+          return {
+            index: logItem.index,
+            data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
+            searchString: this.logKeyword,
+            active: logItem.active,
+            isAnsi
+          }
+        })
       }
     },
     watch: {
@@ -246,26 +245,6 @@
       clearInterval(this.handle)
     },
     methods: {
-      getItemProps(index) {
-        const logItem = this.filteredLogData[index]
-        const isAnsi = hasAnsi(logItem.data)
-        return {
-          // <item/> will render with itemProps.
-          // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
-          props: {
-            index: logItem.index,
-            logItem,
-            data: isAnsi ? convert.toHtml(logItem.data) : logItem.data,
-            searchString: this.logKeyword,
-            active: logItem.active,
-            isAnsi
-          }
-        }
-      },
-      onToBottom() {
-      },
-      onScroll() {
-      },
       toBottom() {
         this.$el.querySelector('.log-view').scrollTo({ top: 99999999 })
       },
@@ -319,6 +298,7 @@
   .log-view {
     margin-top: 0 !important;
     overflow-y: scroll !important;
+    height: 600px;
     list-style: none;
     color: #A9B7C6;
     background: #2B2B2B;
diff --git a/frontend/src/views/task/TaskDetail.vue b/frontend/src/views/task/TaskDetail.vue
index b8aeee44..af5346f2 100644
--- a/frontend/src/views/task/TaskDetail.vue
+++ b/frontend/src/views/task/TaskDetail.vue
@@ -221,12 +221,12 @@
 
       await this.$store.dispatch('task/getTaskResults', this.$route.params.id)
 
-      this.getTaskLog()
-      this.handle = setInterval(() => {
+      await this.getTaskLog()
+      this.handle = setInterval(async() => {
         if (this.isLogAutoFetch) {
-          this.$store.dispatch('task/getTaskData', this.$route.params.id)
-          this.$store.dispatch('task/getTaskResults', this.$route.params.id)
-          this.getTaskLog()
+          await this.$store.dispatch('task/getTaskData', this.$route.params.id)
+          await this.$store.dispatch('task/getTaskResults', this.$route.params.id)
+          await this.getTaskLog()
         }
       }, 5000)
     },
@@ -284,17 +284,6 @@
     padding-left: 10px;
   }
 
-  .log-view {
-    margin: 20px;
-    height: 640px;
-  }
-
-  .log-view pre {
-    height: 100%;
-    overflow-x: auto;
-    overflow-y: auto;
-  }
-
   .button-group {
     margin-bottom: 10px;
     text-align: right;