Show a spinner on the console when loading the contents initially

Author: DaneEveritt

resources/assets/scripts/components/server/Server.vue

@@ -25,7 +25,7 @@
                     </div>
                 </div>
                 <div class="sidenav">
-                    <router-link :to="{ name: '', params: { id: this.$route.params.id } }">
+                    <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
                         <terminal-icon style="height: 1em;"></terminal-icon>
                         Console
                     </router-link>
@@ -67,13 +67,12 @@
     import Navigation from '../core/Navigation';
     import ProgressBar from './components/ProgressBar';
     import {mapState} from 'vuex';
-    import { ConsolePage } from './subpages/ConsolePage';
 
     import io from 'socket.io-client';
 
     export default {
         components: {
-            ProgressBar, Navigation, ConsolePage, TerminalIcon, FolderIcon, UsersIcon,
+            ProgressBar, Navigation, TerminalIcon, FolderIcon, UsersIcon,
             CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
         },
 
@@ -87,6 +86,10 @@
             this.$on('send-command', data => {
                 this.socket.emit('send command', data);
             });
+
+            this.$on('send-initial-log', () => {
+                this.socket.emit('send server log');
+            })
         },
 
         data: function () {
@@ -126,14 +129,15 @@
             },
 
             _socket_error: function (err) {
-                console.error('there was a socket error:', err);
+                this.$emit('socket-error', {err});
             },
 
             _socket_connect: function () {
-                this.socket.emit('send server log');
+                this.$emit('socket-connected');
             },
 
             _socket_status: function (data) {
+                this.$emit('socket-status', {data});
             },
 
             _socket_serverLog: function (data) {

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

@@ -2,6 +2,9 @@
     <div>
         <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 v-if="loadingConsole">
+                    <div class="spinner spinner-xl mt-24"></div>
+                </div>
                 <div class="mb-2 text-grey-light" ref="terminal"></div>
             </div>
             <div class="rounded-b bg-grey-darkest text-white flex">
@@ -24,19 +27,36 @@
 <script>
     import { Terminal } from 'xterm';
     import * as TerminalFit from 'xterm/lib/addons/fit/fit';
+    import Status from './../../../helpers/statuses';
 
     Terminal.applyAddon(TerminalFit);
 
     export default {
         name: 'console-page',
 
+        /**
+         * Mount the component and setup all of the terminal actions. Also fetches the initial
+         * logs from the server to populate into the terminal.
+         */
         mounted: function () {
-            this.terminal.open(this.$refs.terminal);
-            this.terminal.fit();
+            this.$parent.$on('socket-connected', () => {
+                this.terminal.open(this.$refs.terminal);
+                this.terminal.fit();
+                this.terminal.clear();
+
+                this.$parent.$emit('send-initial-log');
+            });
 
             this.$parent.$on('console', data => {
+                this.loadingConsole = false;
                 this.terminal.writeln(data);
             });
+
+            this.$parent.$on('socket-status', s => {
+                if (s === Status.STATUS_OFF) {
+                    this.loadingConsole = false;
+                }
+            });
         },
 
         data: function () {
@@ -56,10 +76,14 @@
                 command: '',
                 commandHistory: [],
                 commandHistoryIndex: -1,
+                loadingConsole: true,
             };
         },
 
         methods: {
+            /**
+             * Send a command to the server using the configured websocket.
+             */
             sendCommand: function () {
                 this.commandHistoryIndex = -1;
                 this.commandHistory.unshift(this.command);

resources/assets/scripts/helpers/statuses.js

@@ -0,0 +1,6 @@
+export default {
+    STATUS_OFF: 0,
+    STATUS_ON: 1,
+    STATUS_STARTING: 2,
+    STATUS_STOPPING: 3,
+};