feat(ui): use virtial list for task output

web/package.json

@@ -12,21 +12,21 @@
     "@mdi/font": "^5.9.55",
     "ansi_up": "^6.0.2",
     "axios": "^0.29.0",
+    "chart.js": "^3.8.0",
+    "chartjs-adapter-moment": "^1.0.1",
     "core-js": "^3.39.0",
     "cron-parser": "^4.9.0",
     "moment": "^2.29.4",
     "vue": "^2.6.14",
+    "vue-chartjs": "^4.0.0",
     "vue-codemirror": "^4.0.6",
     "vue-i18n": "^8.18.2",
     "vue-router": "^3.5.4",
+    "vue-virtual-scroll-list": "^2.3.5",
     "vuedraggable": "^2.24.3",
-    "vuetify": "^2.6.10",
-    "chart.js": "^3.8.0",
-    "chartjs-adapter-moment": "^1.0.1",
-    "vue-chartjs": "^4.0.0"
+    "vuetify": "^2.6.10"
   },
   "devDependencies": {
-    "dredd": "^13.1.2",
     "@vue/cli-plugin-babel": "^5.0.6",
     "@vue/cli-plugin-eslint": "^5.0.6",
     "@vue/cli-plugin-router": "^5.0.6",
@@ -37,6 +37,7 @@
     "babel-eslint": "^10.1.0",
     "chai": "^4.3.6",
     "dotenv": "^16.4.5",
+    "dredd": "^13.1.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",

web/src/components/TaskLogView.vue

@@ -77,7 +77,14 @@
       </v-row>
     </v-container>
 
-    <div class="task-log-records" ref="output">
+    <VirtualList
+      class="task-log-records"
+      :data-key="'id'"
+      :data-sources="output"
+      :data-component="itemComponent"
+      :estimate-size="22"
+      :keeps="60"
+    >
       <div class="task-log-records__record" v-for="record in output" :key="record.id">
         <div class="task-log-records__time">
           {{ record.time | formatTime }}
@@ -85,7 +92,7 @@
         <div class="task-log-records__output" v-html="$options.filters.formatLog(record.output)">
         </div>
       </div>
-    </div>
+    </VirtualList>
 
     <v-btn
       color="success"
@@ -179,15 +186,18 @@ $task-log-message-height: 48px;
 import axios from 'axios';
 import TaskStatus from '@/components/TaskStatus.vue';
 import socket from '@/socket';
+import VirtualList from 'vue-virtual-scroll-list';
+import TaskLogViewRecord from '@/components/TaskLogViewRecord.vue';
 
 export default {
-  components: { TaskStatus },
+  components: { TaskStatus, VirtualList },
   props: {
     itemId: Number,
     projectId: Number,
   },
   data() {
     return {
+      itemComponent: TaskLogViewRecord,
       item: {},
       output: [],
       user: {},
@@ -274,10 +284,13 @@ export default {
           });
           break;
         case 'log':
-          this.output.push(data);
-          setTimeout(() => {
-            this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
-          }, 200);
+          this.output.push({
+            ...data,
+            id: data.time + data.output,
+          });
+          // setTimeout(() => {
+          //   this.$refs.output.scrollTop = this.$refs.output.scrollHeight;
+          // }, 200);
           break;
         default:
           break;
@@ -295,7 +308,10 @@ export default {
         method: 'get',
         url: `/api/project/${this.projectId}/tasks/${this.itemId}/output`,
         responseType: 'json',
-      })).data;
+      })).data.map((item) => ({
+        ...item,
+        id: item.time + item.output,
+      }));
 
       this.user = this.item.user_id ? (await axios({
         method: 'get',

web/src/components/TaskLogViewRecord.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="task-log-records__record">
+    <div class="task-log-records__time">
+      {{ source.time | formatTime }}
+    </div>
+    <div class="task-log-records__output" v-html="$options.filters.formatLog(source.output)">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    index: { // index of current item
+      type: Number,
+    },
+    source: { // here is: {uid: 'unique_1', text: 'abc'}
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>