Better handling of connection errors

Author: DaneEveritt

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

@@ -1,6 +1,7 @@
 <template>
     <div>
         <navigation></navigation>
+        <flash class="m-6"/>
         <div v-if="loadingServerData">
             <div class="mt-6 h-16">
                 <div class="spinner spinner-xl spinner-thick blue"></div>
@@ -56,6 +57,11 @@
                 </div>
             </div>
         </div>
+        <div class="fixed pin-r pin-b m-6 max-w-sm" v-show="connectionError">
+            <div class="alert error">
+                There was an error while attempting to connect to the Daemon websocket. Error reported was: "{{connectionError.message}}"
+            </div>
+        </div>
     </div>
 </template>
 
@@ -69,9 +75,11 @@
     import Vue from 'vue';
 
     import PowerButtons from './components/PowerButtons';
+    import Flash from '../Flash';
 
     export default {
         components: {
+            Flash,
             PowerButtons, ProgressBar, Navigation,
             TerminalIcon, FolderIcon, UsersIcon, CalendarIcon, DatabaseIcon, GlobeIcon, SettingsIcon
         },
@@ -81,16 +89,16 @@
             ...mapState('socket', ['connected', 'connectionError']),
         },
 
-        mounted: function () {
-            this.loadServer();
-        },
-
         data: function () {
             return {
                 loadingServerData: true,
             };
         },
 
+        mounted: function () {
+            this.loadServer();
+        },
+
         methods: {
             /**
              * Load the core server information needed for these pages to be functional.

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

@@ -45,9 +45,15 @@
              */
             connected: function (state) {
                 if (state) {
+                    this.terminal.open(this.$refs.terminal);
+                    this.terminal.fit();
+                    this.terminal.clear();
+
                     this.$socket.emit('send server log');
+                } else {
+                    this.terminal.dispose();
                 }
-            }
+            },
         },
 
         /**
@@ -64,7 +70,7 @@
                 data.line.split(/\n/g).forEach(line => {
                     this.terminal.writeln(line + '\u001b[0m');
                 });
-            }
+            },
         },
 
         /**
@@ -73,10 +79,6 @@
          * socket is not connected this will occur automatically when it connects.
          */
         mounted: function () {
-            this.terminal.open(this.$refs.terminal);
-            this.terminal.fit();
-            this.terminal.clear();
-
             if (this.connected) {
                 this.$socket.emit('send server log');
             }

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

@@ -4,17 +4,24 @@ export default {
     namespaced: true,
     state: {
         connected: false,
-        connectionError: null,
+        connectionError: false,
         status: Status.STATUS_OFF,
     },
     actions: {
     },
     mutations: {
         SOCKET_CONNECT: (state) => {
             state.connected = true;
+            state.connectionError = false;
         },
 
         SOCKET_ERROR: (state, err) => {
+            state.connected = false;
+            state.connectionError = err;
+        },
+
+        SOCKET_CONNECT_ERROR: (state, err) => {
+            state.connected = false;
             state.connectionError = err;
         },