diff --git a/static/skywire-manager-src/src/app/app.component.html b/static/skywire-manager-src/src/app/app.component.html
index 7c8353e9aa..af0e10c7ea 100644
--- a/static/skywire-manager-src/src/app/app.component.html
+++ b/static/skywire-manager-src/src/app/app.component.html
@@ -10,3 +10,9 @@
+
+
+
+ error_outline {{ 'common.data-update-problems' | translate }}
+
+
diff --git a/static/skywire-manager-src/src/app/app.component.scss b/static/skywire-manager-src/src/app/app.component.scss
index d46021feb8..1d5b80fa6d 100644
--- a/static/skywire-manager-src/src/app/app.component.scss
+++ b/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;
+ }
+}
diff --git a/static/skywire-manager-src/src/app/app.component.ts b/static/skywire-manager-src/src/app/app.component.ts
index 4749b68337..50d070ad7e 100644
--- a/static/skywire-manager-src/src/app/app.component.ts
+++ b/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.
*/
diff --git a/static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.scss b/static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.scss
index ce3e8c6d56..2862192061 100644
--- a/static/skywire-manager-src/src/app/components/layout/top-bar/top-bar.component.scss
+++ b/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;
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
index b6aac69c24..f53cce715e 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
+++ b/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();
}
}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts b/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
index 89544706a0..064513514b 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
+++ b/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();
}
}
diff --git a/static/skywire-manager-src/src/app/services/vpn-client.service.ts b/static/skywire-manager-src/src/app/services/vpn-client.service.ts
index 14338ddb35..d3c2050787 100644
--- a/static/skywire-manager-src/src/app/services/vpn-client.service.ts
+++ b/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) {
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index 7208802ac0..11e95661be 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/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": {
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index bfeaa503ba..b7c28e138d 100644
--- a/static/skywire-manager-src/src/assets/i18n/es.json
+++ b/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": {
diff --git a/static/skywire-manager-src/src/assets/i18n/es_base.json b/static/skywire-manager-src/src/assets/i18n/es_base.json
index 702795066f..e3b5cd9133 100644
--- a/static/skywire-manager-src/src/assets/i18n/es_base.json
+++ b/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": {
diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
index 16a527d3b2..24fd7cb490 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/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;
}