limit ws messages updates to batch of messages & limit number of displayed messages in waiting modal

app/src/components/MessageListGroup.vue

@@ -1,9 +1,15 @@
 <template>
   <b-list-group
-    v-bind="$attrs" ref="self"
-    flush :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
+    v-bind="$attrs" flush
+    :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
+    @scroll="onScroll"
   >
-    <b-list-group-item v-for="({ color, text }, i) in messages" :key="i">
+    <b-list-group-item
+      v-if="limit && messages.length > limit"
+      variant="info" v-t="'api.partial_logs'"
+    />
+
+    <b-list-group-item v-for="({ color, text }, i) in reducedMessages" :key="i">
       <span class="status" :class="'bg-' + color" />
       <span v-html="text" />
     </b-list-group-item>
@@ -18,15 +24,36 @@ export default {
     messages: { type: Array, required: true },
     fixedHeight: { type: Boolean, default: false },
     bordered: { type: Boolean, default: false },
-    autoScroll: { type: Boolean, default: false }
+    autoScroll: { type: Boolean, default: false },
+    limit: { type: Number, default: null }
+  },
+
+  data () {
+    return {
+      auto: true
+    }
+  },
+
+  computed: {
+    reducedMessages () {
+      const len = this.messages.length
+      if (!this.limit || len <= this.limit) {
+        return this.messages
+      }
+      return this.messages.slice(len - this.limit)
+    }
   },
 
   methods: {
     scrollToEnd () {
+      if (!this.auto) return
       this.$nextTick(() => {
-        const container = this.$refs.self
-        container.scrollTo(0, container.lastElementChild.offsetTop)
+        this.$el.scrollTo(0, this.$el.lastElementChild.offsetTop)
       })
+    },
+
+    onScroll ({ target }) {
+      this.auto = target.scrollHeight === target.scrollTop + target.clientHeight
     }
   },
 

app/src/i18n/locales/en.json

@@ -14,6 +14,7 @@
     "administration_password": "Administration password",
     "all": "All",
     "api": {
+        "partial_logs": "[...] (check in history for full logs)",
         "processing": "The server is processing the action...",
         "query_status": {
             "error": "Unsuccessful",

app/src/store/info.js

@@ -12,7 +12,9 @@ export default {
     waiting: false, // Boolean
     history: [], // Array of `request`
     requests: [], // Array of `request`
-    error: null // null || request
+    error: null, // null || request
+    historyTimer: null, // null || setTimeout id
+    tempMessages: [] // array of messages
   },
 
   mutations: {
@@ -52,12 +54,26 @@ export default {
       state.history.push(request)
     },
 
-    'ADD_MESSAGE' (state, { message, type }) {
-      const request = state.history[state.history.length - 1]
-      request.messages.push(message)
-      if (['error', 'warning'].includes(type)) {
-        request[type + 's']++
+    'ADD_TEMP_MESSAGE' (state, { request, message, type }) {
+      state.tempMessages.push([message, type])
+    },
+
+    'UPDATE_DISPLAYED_MESSAGES' (state, { request }) {
+      if (!state.tempMessages.length) {
+        state.historyTimer = null
+        return
       }
+
+      const { messages, warnings, errors } = state.tempMessages.reduce((acc, [message, type]) => {
+        acc.messages.push(message)
+        if (['error', 'warning'].includes(type)) acc[type + 's']++
+        return acc
+      }, { messages: [], warnings: 0, errors: 0 })
+      state.tempMessages = []
+      state.historyTimer = null
+      request.messages = request.messages.concat(messages)
+      request.warnings += warnings
+      request.errors += errors
     },
 
     'SET_ERROR' (state, request) {
@@ -147,7 +163,11 @@ export default {
       return request
     },
 
-    'END_REQUEST' ({ commit }, { request, success, wait }) {
+    'END_REQUEST' ({ state, commit }, { request, success, wait }) {
+      // Update last messages before finishing this request
+      clearTimeout(state.historyTimer)
+      commit('UPDATE_DISPLAYED_MESSAGES', { request })
+
       let status = success ? 'success' : 'error'
       if (success && (request.warnings || request.errors)) {
         const messages = request.messages
@@ -166,7 +186,7 @@ export default {
       }
     },
 
-    'DISPATCH_MESSAGE' ({ commit }, { request, messages }) {
+    'DISPATCH_MESSAGE' ({ state, commit, dispatch }, { request, messages }) {
       for (const type in messages) {
         const message = {
           text: messages[type].replace('\n', '<br>'),
@@ -183,7 +203,13 @@ export default {
           commit('UPDATE_REQUEST', { request, key: 'progress', value: Object.values(progress) })
         }
         if (message.text) {
-          commit('ADD_MESSAGE', { request, message, type })
+          // To avoid rendering lag issues, limit the flow of websocket messages to batches of 50ms.
+          if (state.historyTimer === null) {
+            state.historyTimer = setTimeout(() => {
+              commit('UPDATE_DISPLAYED_MESSAGES', { request })
+            }, 50)
+          }
+          commit('ADD_TEMP_MESSAGE', { request, message, type })
         }
       }
     },

app/src/views/_partials/HistoryConsole.vue

@@ -59,7 +59,7 @@
             @shown="scrollToAction(i)"
             @hide="scrollToAction(i)"
           >
-            <message-list-group :messages="action.messages" flush />
+            <message-list-group :messages="action.messages" />
           </b-collapse>
         </b-card>
       </div>

app/src/views/_partials/WaitingDisplay.vue

@@ -18,6 +18,7 @@
     <message-list-group
       v-if="hasMessages" :messages="request.messages"
       bordered fixed-height auto-scroll
+      :limit="100"
     />
   </b-card-body>
 </template>