Feature/UI indicate when no connection (#10774)

* Show red cross in medusa icon, when no connection
* Have it reload the page instead of routing to home.

* Extend the isConnected state to the webSockets.

* Extend the retries for the socket connection to 25 x 2500 ms.

* changelog

* Improve the spin animation

* Update fixture and test

CHANGELOG.md

@@ -3,6 +3,7 @@
 #### New Features
 
 #### Improvements
+- Added connection (lost) indicator on the Medusa log ([10774](https://github.com/pymedusa/Medusa/pull/10774))
 
 #### Fixes
 

themes-default/slim/src/app.js

@@ -63,16 +63,20 @@ export default new Vue({
                             setLoadingFinished(true);
                             setLoadingDisplay(false);
                         }, 2000);
+                        this.connect(true);
                     });
             }).catch(error => {
                 console.debug(error);
                 alert('Unable to connect to Medusa!'); // eslint-disable-line no-alert
+                this.connect(false);
             });
         }
     },
     methods: {
         ...mapActions({
-            getShows: 'getShows'
+            getShows: 'getShows',
+            connect: 'connect'
+
         }),
         ...mapMutations([
             'setLoadingDisplay',

themes-default/slim/src/components/app-header.vue

@@ -9,7 +9,11 @@
                     <span class="icon-bar" />
                     <span class="icon-bar" />
                 </button>
-                <app-link class="navbar-brand" href="home/" title="Medusa"><img alt="Medusa" src="images/medusa.png" style="height: 50px;" class="img-responsive pull-left"></app-link>
+                <app-link v-if="isConnected || !socketIsConnected" class="navbar-brand" style="position: relative" title="Medusa">
+                    <img alt="Medusa" src="images/medusa.png" style="height: 50px;" class="img-responsive pull-left" @click="reloadPage">
+                    <img alt="disconnected" src="images/no16.png" class="disconnected spin-hover-90">
+                </app-link>
+                <app-link v-else class="navbar-brand" href="home/" title="Medusa"><img alt="Medusa" src="images/medusa.png" style="height: 50px;" class="img-responsive pull-left"></app-link>
             </div>
             <div v-if="isAuthenticated" class="collapse navbar-collapse" id="main_nav">
                 <ul class="nav navbar-nav navbar-right navbar-mobile">
@@ -123,7 +127,9 @@ export default {
             isAuthenticated: state => state.auth.isAuthenticated,
             username: state => state.auth.user.username,
             warningLevel: state => state.config.general.logs.loggingLevels.warning,
-            client: state => state.auth.client
+            client: state => state.auth.client,
+            isConnected: state => state.auth.isConnected,
+            socketIsConnected: state => state.socket.isConnected
         }),
         /**
          * Moved into a computed, so it's easier to mock in Jest.
@@ -304,6 +310,9 @@ export default {
                     'Error trying to update plex'
                 );
             }
+        },
+        reloadPage() {
+            location.reload();
         }
     }
 };
@@ -350,4 +359,10 @@ export default {
         transform: translateX(-6rem);
     }
 }
+
+.disconnected {
+    position: absolute;
+    right: 1rem;
+    bottom: 0.5rem;
+}
 </style>

themes-default/slim/src/components/app.vue

@@ -71,6 +71,7 @@ export default {
 @use '../style/modal.scss';
 @use '../style/vue-tags.scss';
 @use '../style/back-arrow.scss';
+@use '../style/spin.scss';
 
 #app {
     padding-top: 4rem;

themes-default/slim/src/store/index.js

@@ -108,8 +108,8 @@ Vue.use(VueNativeSock, websocketUrl, {
     store,
     format: 'json',
     reconnection: true, // (Boolean) whether to reconnect automatically (false)
-    reconnectionAttempts: 2, // (Number) number of reconnection attempts before giving up (Infinity),
-    reconnectionDelay: 1000, // (Number) how long to initially wait before attempting a new (1000)
+    reconnectionAttempts: 25, // (Number) number of reconnection attempts before giving up (Infinity),
+    reconnectionDelay: 2500, // (Number) how long to initially wait before attempting a new (1000)
     passToStoreHandler, // (Function|<false-y>) Handler for events triggered by the WebSocket (false)
     mutations: {
         SOCKET_ONOPEN,

themes-default/slim/src/store/modules/auth.js

@@ -1,5 +1,6 @@
 import {
     AUTHENTICATE,
+    CONNECT,
     LOGIN_PENDING,
     LOGIN_SUCCESS,
     LOGIN_FAILED,
@@ -12,6 +13,7 @@ import VueJwtDecode from 'vue-jwt-decode';
 
 const state = {
     isAuthenticated: false,
+    isConnected: false,
     user: {},
     tokens: {
         access: null,
@@ -48,6 +50,9 @@ const mutations = {
     [AUTHENTICATE](state, client) {
         state.client = client;
         state.tokens.access = client.token;
+    },
+    [CONNECT](state, value) {
+        state.isConnected = value;
     }
 };
 
@@ -92,6 +97,9 @@ const actions = {
                     resolve();
                 });
         });
+    },
+    connect({ commit }, connected) {
+        commit(CONNECT, connected);
     }
 };
 

themes-default/slim/src/store/mutation-types.js

@@ -1,4 +1,5 @@
 const AUTHENTICATE = '🔒 Authenticating';
+const CONNECT = '🔒 🔗 Connected';
 const LOGIN_PENDING = '🔒 Logging in';
 const LOGIN_SUCCESS = '🔒 ✅ Login Successful';
 const LOGIN_FAILED = '🔒 ❌ Login Failed';
@@ -49,6 +50,7 @@ const ADD_SCHEDULE = '📅 Schedule information added';
 
 export {
     AUTHENTICATE,
+    CONNECT,
     LOGIN_PENDING,
     LOGIN_SUCCESS,
     LOGIN_FAILED,

themes-default/slim/src/style/spin.scss

@@ -0,0 +1,13 @@
+.spin-hover-90:hover {
+    animation: spin-90 0.3s linear;
+}
+
+@keyframes spin-90 {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(90deg);
+    }
+}

themes-default/slim/test/__fixtures__/common.json

@@ -1539,6 +1539,7 @@
         },
         "auth": {
             "isAuthenticated": true,
+            "isConnected": true,
             "user": {
                 "username": "admin"
             }

themes-default/slim/test/specs/__snapshots__/app-header.spec.js.snap

@@ -44,8 +44,8 @@ exports[`AppHeader.test.js renders 1`] = `
        
       <app-link-stub
         class="navbar-brand"
-        href="home/"
         placeholder="indexer-to-name"
+        style="position: relative;"
         title="Medusa"
       >
         <img
@@ -54,6 +54,12 @@ exports[`AppHeader.test.js renders 1`] = `
           src="images/medusa.png"
           style="height: 50px;"
         />
+         
+        <img
+          alt="disconnected"
+          class="disconnected spin-hover-90"
+          src="images/no16.png"
+        />
       </app-link-stub>
     </div>