Replace console view with proper ts

Author: DaneEveritt

resources/assets/scripts/components/server/index.ts

@@ -1,6 +1,6 @@
 export {default as Server} from './Server';
 export {default as ServerAllocations} from './ServerAllocations.vue';
-export {default as ConsolePage} from './subpages/Console.vue';
+export {default as ConsolePage} from './subpages/Console';
 export {default as DatabasesPage} from './subpages/Databases.vue';
 export {default as FileManagerPage} from './subpages/FileManager.vue';
 export {default as ServerSchedules} from './ServerSchedules.vue';

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

@@ -0,0 +1,187 @@
+import Vue from 'vue';
+import {mapState} from "vuex";
+import {Terminal} from 'xterm';
+import * as TerminalFit from 'xterm/lib/addons/fit/fit';
+import {Socketio} from "@/mixins/socketio";
+
+type DataStructure = {
+    terminal: Terminal | null,
+    command: string,
+    commandHistory: Array<string>,
+    commandHistoryIndex: number,
+}
+
+export default Vue.component('server-console', {
+    mixins: [Socketio],
+    computed: {
+        ...mapState('socket', ['connected']),
+    },
+
+    watch: {
+        /**
+         * Watch the connected variable and when it becomes true request the server logs.
+         */
+        connected: function (state: boolean) {
+            if (state) {
+                this.$nextTick(() => {
+                    this.mountTerminal();
+                });
+            } else {
+                this.terminal && this.terminal.clear();
+            }
+        },
+    },
+
+    /**
+     * Listen for specific socket.io emits from the server.
+     */
+    sockets: {
+        'server log': function (data: string) {
+            data.split(/\n/g).forEach((line: string): void => {
+                if (this.terminal) {
+                    this.terminal.writeln(line + '\u001b[0m');
+                }
+            });
+        },
+
+        'console': function (data: { line: string }) {
+            data.line.split(/\n/g).forEach((line: string): void => {
+                if (this.terminal) {
+                    this.terminal.writeln(line + '\u001b[0m');
+                }
+            });
+        },
+    },
+
+    /**
+     * Mount the component and setup all of the terminal actions. Also fetches the initial
+     * logs from the server to populate into the terminal if the socket is connected. If the
+     * socket is not connected this will occur automatically when it connects.
+     */
+    mounted: function () {
+        if (this.connected) {
+            this.mountTerminal();
+        }
+    },
+
+    data: function (): DataStructure {
+        return {
+            terminal: null,
+            command: '',
+            commandHistory: [],
+            commandHistoryIndex: -1,
+        };
+    },
+
+    methods: {
+        /**
+         * Mount the terminal and grab the most recent server logs.
+         */
+        mountTerminal: function () {
+            // Get a new instance of the terminal setup.
+            this.terminal = this._terminalInstance();
+
+            this.terminal.open((this.$refs.terminal as HTMLElement));
+            // @ts-ignore
+            this.terminal.fit();
+            this.terminal.clear();
+
+            this.$socket().instance().emit('send server log');
+        },
+
+        /**
+         * Send a command to the server using the configured websocket.
+         */
+        sendCommand: function () {
+            this.commandHistoryIndex = -1;
+            // this.commandHistory.unshift(this.command);
+            this.commandHistory.unshift();
+            this.$socket().instance().emit('send command', this.command);
+            this.command = '';
+        },
+
+        /**
+         * Handle a user pressing up/down arrows when in the command field to scroll through thier
+         * command history for this server.
+         */
+        handleArrowKey: function (e: KeyboardEvent) {
+            if (['ArrowUp', 'ArrowDown'].indexOf(e.key) < 0 || e.key === 'ArrowDown' && this.commandHistoryIndex < 0) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (e.key === 'ArrowUp' && (this.commandHistoryIndex + 1 > (this.commandHistory.length - 1))) {
+                return;
+            }
+
+            this.commandHistoryIndex += (e.key === 'ArrowUp') ? 1 : -1;
+            this.command = this.commandHistoryIndex < 0 ? '' : this.commandHistory[this.commandHistoryIndex];
+        },
+
+        /**
+         * Returns a new instance of the terminal to be used.
+         *
+         * @private
+         */
+        _terminalInstance() {
+            Terminal.applyAddon(TerminalFit);
+
+            return new Terminal({
+                disableStdin: true,
+                cursorStyle: 'underline',
+                allowTransparency: true,
+                fontSize: 12,
+                fontFamily: 'Menlo, Monaco, Consolas, monospace',
+                rows: 30,
+                theme: {
+                    background: 'transparent',
+                    cursor: 'transparent',
+                    black: '#000000',
+                    red: '#E54B4B',
+                    green: '#9ECE58',
+                    yellow: '#FAED70',
+                    blue: '#396FE2',
+                    magenta: '#BB80B3',
+                    cyan: '#2DDAFD',
+                    white: '#d0d0d0',
+                    brightBlack: 'rgba(255, 255, 255, 0.2)',
+                    brightRed: '#FF5370',
+                    brightGreen: '#C3E88D',
+                    brightYellow: '#FFCB6B',
+                    brightBlue: '#82AAFF',
+                    brightMagenta: '#C792EA',
+                    brightCyan: '#89DDFF',
+                    brightWhite: '#ffffff',
+                },
+            });
+        }
+    },
+
+    template: `
+        <div class="content-box animate fadein">
+            <div class="text-xs font-mono">
+                <div class="rounded-t p-2 bg-black overflow-scroll w-full" style="min-height: 16rem;max-height:64rem;">
+                    <div class="mb-2 text-grey-light" ref="terminal" v-if="connected"></div>
+                    <div v-else>
+                        <div class="spinner spinner-xl mt-24"></div>
+                    </div>
+                </div>
+                <div class="rounded-b bg-grey-darkest text-white flex">
+                    <div class="flex-no-shrink p-2">
+                        <span class="font-bold">$</span>
+                    </div>
+                    <div class="w-full">
+                        <input type="text" aria-label="Send console command" class="bg-transparent text-white p-2 pl-0 w-full" placeholder="enter command and press enter to send"
+                               ref="command"
+                               v-model="command"
+                               v-on:keyup.enter="sendCommand"
+                               v-on:keydown="handleArrowKey"
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+});

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

@@ -27,6 +27,9 @@ declare module 'vue/types/options' {
                 [s: string]: (data: any) => void,
             }
         },
+        sockets?: {
+            [s: string]: (data: any) => void,
+        }
     }
 }
 

resources/assets/scripts/pterodactyl-shims.d.ts

@@ -4,6 +4,8 @@
 @import "tailwindcss/preflight";
 @import "tailwindcss/components";
 
+@import "xterm/src/xterm.css";
+
 /**
  * Pterodactyl Specific CSS
  */