Improvements for the UI (#1620)

static/skywire-manager-src/src/app/app.component.html

@@ -10,3 +10,9 @@
   <router-outlet *ngIf="hypervisorPkObtained || inLoginPage"></router-outlet>
   <app-loading-indicator class="h-100" *ngIf="!hypervisorPkObtained && !inLoginPage"></app-loading-indicator>
 </div>
+
+<div class="connection-problem-container" *ngIf="showingDataProblemMsg">
+  <span class="blinking">
+    <mat-icon [inline]="true">error_outline</mat-icon> {{ 'common.data-update-problems' | translate }}
+  </span>
+</div>

static/skywire-manager-src/src/app/app.component.scss

@@ -41,3 +41,18 @@
   left: 0;
   position: fixed;
 }
+
+.connection-problem-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  background-color: red;
+  padding: 0px 10px 5px;
+  font-size: 10px;
+  opacity: 0.75;
+
+  mat-icon {
+    position: relative;
+    top: 4px;
+  }
+}

static/skywire-manager-src/src/app/app.component.ts

@@ -32,6 +32,8 @@ export class AppComponent {
   pkErrorShown = false;
   pkErrorsFound = 0;
 
+  showingDataProblemMsg = false;
+
   obtainPkSubscription: Subscription;
 
   constructor(
@@ -108,6 +110,20 @@ export class AppComponent {
     }
   }
 
+  /**
+   * Shows a box at the bottom-right corner indicating that there is a problem getting the data.
+   */
+  showDataProblemMsg() {
+    this.showingDataProblemMsg = true;
+  }
+
+  /**
+   * Hides the box at the bottom-right corner indicating that there is a problem getting the data.
+   */
+  hideDataProblemMsg() {
+    this.showingDataProblemMsg = false;
+  }
+
   /**
    * Gets the pk of the hypervisor. After that, it initializes services and allows the app to start working.
    */

static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.scss

@@ -281,6 +281,11 @@ $top-bar-height: 56px;
   flex-direction: row-reverse;
   font-size: $font-size-mini-plus;
 
+  mat-icon {
+    position: relative;
+    top: 3px;
+  }
+
   .connection-error-msg-vpn {
     margin: -5px 5px 5px 10px;
     color: $yellow-clear;

static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts

@@ -24,6 +24,7 @@ import { NodeData, UpdateAllComponent } from '../../layout/update-all/update-all
 import { BulkRewardAddressChangerComponent, BulkRewardAddressParams, NodeToEditData } from '../../layout/bulk-reward-address-changer/bulk-reward-address-changer.component';
 import { MultipleNodeDataService, MultipleNodesBackendData } from 'src/app/services/multiple-node-data.service';
 import { PageBaseComponent } from 'src/app/utils/page-base';
+import { AppComponent } from 'src/app/app.component';
 
 /**
  * Page for showing the node list.
@@ -409,6 +410,7 @@ export class NodeListComponent extends PageBaseComponent implements OnInit, OnDe
           this.lastUpdate = result.momentOfLastCorrectUpdate;
           this.secondsSinceLastUpdate = Math.floor((Date.now() - result.momentOfLastCorrectUpdate) / 1000);
           this.errorsUpdating = false;
+          AppComponent.currentInstance.hideDataProblemMsg();
 
           if (this.lastUpdateRequestedManually) {
             // Show a confirmation msg.
@@ -429,6 +431,7 @@ export class NodeListComponent extends PageBaseComponent implements OnInit, OnDe
 
           // Stop the loading indicator and show a warning icon.
           this.errorsUpdating = true;
+          AppComponent.currentInstance.showDataProblemMsg();
         }
       }
 

static/skywire-manager-src/src/app/components/pages/node/node.component.ts

@@ -12,6 +12,7 @@ import { SnackbarService } from '../../../services/snackbar.service';
 import { NodeActionsHelper } from './actions/node-actions-helper';
 import { SingleNodeBackendData, SingleNodeDataService, TrafficData } from 'src/app/services/single-node-data.service';
 import { PageBaseComponent } from 'src/app/utils/page-base';
+import { AppComponent } from 'src/app/app.component';
 
 /**
  * Main page used for showing the details of a node. It is in charge of loading
@@ -320,6 +321,7 @@ export class NodeComponent extends PageBaseComponent implements OnInit, OnDestro
           this.lastUpdate = result.momentOfLastCorrectUpdate;
           this.secondsSinceLastUpdate = Math.floor((Date.now() - result.momentOfLastCorrectUpdate) / 1000);
           this.errorsUpdating = false;
+          AppComponent.currentInstance.hideDataProblemMsg();
 
           if (this.lastUpdateRequestedManually) {
             // Show a confirmation msg.
@@ -347,6 +349,7 @@ export class NodeComponent extends PageBaseComponent implements OnInit, OnDestro
 
           // Stop the loading indicator and show a warning icon.
           this.errorsUpdating = true;
+          AppComponent.currentInstance.showDataProblemMsg();
         }
       }
 

static/skywire-manager-src/src/app/services/vpn-client.service.ts

@@ -15,6 +15,7 @@ import { environment } from 'src/environments/environment';
 import { SnackbarService } from './snackbar.service';
 import { processServiceError } from '../utils/errors';
 import { OperationError } from '../utils/operation-error';
+import { AppComponent } from '../app.component';
 
 /**
  * States in which the VPN client app of the local visor can be.
@@ -576,6 +577,7 @@ export class VpnClientService {
       mergeMap(() => this.getVpnClientState()),
       retryWhen(err => err.pipe(mergeMap((error: OperationError) => {
         this.errorSubject.next(true);
+        AppComponent.currentInstance.showDataProblemMsg();
 
         error = processServiceError(error);
         // If the problem was because the user is not authorized, don't retry.
@@ -599,6 +601,7 @@ export class VpnClientService {
     ).subscribe(appData => {
       if (appData) {
         this.errorSubject.next(false);
+        AppComponent.currentInstance.hideDataProblemMsg();
 
         // Remove the busy state of the initial check.
         if (this.lastServiceState === VpnServiceStates.PerformingInitialCheck) {

static/skywire-manager-src/src/assets/i18n/en.json

@@ -20,7 +20,8 @@
     "no": "No",
     "unknown": "Unknown",
     "close": "Close",
-    "window-size-error": "The window is too narrow for the content."
+    "window-size-error": "The window is too narrow for the content.",
+    "data-update-problems": "Problem updating the data."
   },
 
   "labeled-element": {

static/skywire-manager-src/src/assets/i18n/es.json

@@ -20,7 +20,8 @@
     "no": "No",
     "unknown": "Desconocido",
     "close": "Cerrar",
-    "window-size-error": "La ventana es demasiado estrecha para el contenido."
+    "window-size-error": "La ventana es demasiado estrecha para el contenido.",
+    "data-update-problems": "Problema actualizando los datos."
   },
 
   "labeled-element": {

static/skywire-manager-src/src/assets/i18n/es_base.json

@@ -20,7 +20,8 @@
     "no": "No",
     "unknown": "Unknown",
     "close": "Close",
-    "window-size-error": "The window is too narrow for the content."
+    "window-size-error": "The window is too narrow for the content.",
+    "data-update-problems": "Problem updating the data."
   },
 
   "labeled-element": {

static/skywire-manager-src/src/assets/scss/_responsive_tables.scss

@@ -306,7 +306,5 @@ $responsive-table-colors: (
 // Allows to remove the margin at the right of the last mat-icon element inside
 // generic-title-container, to make it be shown correctly when there is a paginator.
 .paginator-icons-fixer {
-  mat-icon:last-of-type {
-    margin-right: 0 !important;
-  }
+  margin-right: 0 !important;
 }