Store the console output in a buffer for easier display

Author: DaneEveritt

resources/assets/scripts/components/server/subpages/Console.vue

@@ -42,7 +42,7 @@
         name: 'ServerConsole',
         mixins: [Socketio],
         computed: {
-            ...mapState('socket', ['connected']),
+            ...mapState('socket', ['connected', 'outputBuffer']),
         },
 
         watch: {
@@ -65,7 +65,7 @@
          */
         sockets: {
             'console output': function (line: string) {
-                this.terminal && this.terminal.writeln(line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
+                this.writeLineToConsole(line);
             },
         },
 
@@ -101,6 +101,8 @@
                 // @ts-ignore
                 this.terminal.fit();
                 this.terminal.clear();
+
+                this.outputBuffer.forEach(this.writeLineToConsole);
             },
 
             /**
@@ -113,6 +115,10 @@
                 this.command = '';
             },
 
+            writeLineToConsole: function (line: string) {
+                this.terminal && this.terminal.writeln(line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m');
+            },
+
             /**
              * Handle a user pressing up/down arrows when in the command field to scroll through thier
              * command history for this server.

resources/assets/scripts/store/modules/socket.ts

@@ -7,6 +7,7 @@ export default {
         connected: false,
         connectionError: false,
         status: Status.STATUS_OFF,
+        outputBuffer: [],
     },
     mutations: {
         SOCKET_CONNECT: (state: SocketState) => {
@@ -25,6 +26,22 @@ export default {
 
         SOCKET_STATUS: (state: SocketState, data: string) => {
             state.status = data;
-        }
+        },
+
+        'SOCKET_CONSOLE OUTPUT': (state: SocketState, data: string) => {
+            const { outputBuffer } = state;
+
+            if (outputBuffer.length >= 500) {
+                // Pop all of the output buffer items off the front until we only have 499
+                // items in the array.
+                for (let i = 0; i <= (outputBuffer.length - 500); i++) {
+                    outputBuffer.shift();
+                    i++;
+                }
+            }
+
+            outputBuffer.push(data);
+            state.outputBuffer = outputBuffer;
+        },
     },
 };

resources/assets/scripts/store/types.ts

@@ -12,6 +12,7 @@ export type SocketState = {
     connected: boolean,
     connectionError: boolean | Error,
     status: string,
+    outputBuffer: string[],
 }
 
 export type ServerApplicationCredentials = {