skycoin · jdknives · Mar 25, 2020 · Mar 24, 2020
diff --git a/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.html b/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.html
@@ -2,6 +2,10 @@
   <div class="icon-container" *ngIf="config.icon"><mat-icon>{{ config.icon }}</mat-icon></div>
   <div class="text-container">
     {{ config.text | translate:config.textTranslationParams }}
+    <div class="second-line" *ngIf="config.smallText">
+      {{ 'common.error' | translate }}
+      {{ config.smallText | translate:config.smallTextTranslationParams }}
+    </div>
   </div>
   <mat-icon class="close-button" (click)="close()">close</mat-icon>
 </div>
diff --git a/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.scss b/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.scss
@@ -29,6 +29,10 @@
   margin-right: 10px;
   font-size: $font-size-base;
   margin-top: 2px;
+
+  .second-line {
+    font-size: $font-size-smaller;
+  }
 }
 
 .close-button {
@@ -39,3 +43,8 @@
     opacity: 1;
   }
 }
+
+mat-icon {
+  position: relative;
+  top: 3px;
+}
diff --git a/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.ts b/static/skywire-manager-src/src/app/components/layout/snack-bar/snack-bar.component.ts
@@ -28,9 +28,17 @@ export interface SnackbarConfig {
    */
   text: string;
   /**
-   * Object to be passed to the "translate pipe", to fill the params of the text.
+   * Object to be passed to the "translate" pipe, to fill the params of the text.
    */
   textTranslationParams: any;
+  /**
+   * Text to show on the small lower line. Can be a variable for the "translate" pipe.
+   */
+  smallText: string;
+  /**
+   * Object to be passed to the "translate" pipe for smallText, to fill the params of the text.
+   */
+  smallTextTranslationParams: any;
   /**
    * Icon to show.
    */

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
@@ -15,6 +15,7 @@ import { SidenavService } from 'src/app/services/sidenav.service';
 import { SelectColumnComponent, SelectedColumn } from '../../layout/select-column/select-column.component';
 import GeneralUtils from 'src/app/utils/generalUtils';
 import { SelectOptionComponent, SelectableOption } from '../../layout/select-option/select-option.component';
+import { processServiceError } from 'src/app/utils/errors';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -234,14 +235,16 @@ export class NodeListComponent implements OnInit, OnDestroy {
             // Automatically refresh the data after some time.
             this.refresh(this.storageService.getRefreshTime() * 1000);
           });
-        }, error => {
+        }, err => {
           this.ngZone.run(() => {
+            err = processServiceError(err);
+
             // Show an error msg if it has not be done before during the current attempt to obtain the data.
             if (!this.errorsUpdating) {
               if (this.loading) {
-                this.snackbarService.showError('common.loading-error', null, true);
+                this.snackbarService.showError('common.loading-error', null, true, err);
               } else {
-                this.snackbarService.showError('nodes.error-load', null, true);
+                this.snackbarService.showError('nodes.error-load', null, true, err);
               }
             }
 

diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts b/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
@@ -177,19 +177,28 @@ export class ActionsComponent implements AfterViewInit, OnDestroy {
         };
 
         // Ask for confirmation.
-        confirmationDialog.componentInstance.showAsking(newConfirmationData);
+        setTimeout(() => {
+          confirmationDialog.componentInstance.showAsking(newConfirmationData);
+        });
       } else if (response) {
         // Inform that there are no updates available.
         const newText = this.translateService.instant('actions.update.no-update', { version: response.current_version });
-        confirmationDialog.componentInstance.showDone(null, newText);
+        setTimeout(() => {
+          confirmationDialog.componentInstance.showDone(null, newText);
+        });
       } else {
         // Inform that there was an error.
-        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'common.operation-error');
+        setTimeout(() => {
+          confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'common.operation-error');
+        });
       }
     }, (err: OperationError) => {
       err = processServiceError(err);
 
-      confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
+      // Must wait because the loading state is activated after a frame.
+      setTimeout(() => {
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
+      });
     });
 
     // React if the user confirm the update.

diff --git a/...ager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts b/...ager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.ts
@@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 import { ApiService } from '../../../../../services/api.service';
 import { AppConfig } from 'src/app/app.config';
-import { OperationError } from 'src/app/utils/operation-error';
+import { OperationError, OperationErrorTypes } from 'src/app/utils/operation-error';
 import { processServiceError } from 'src/app/utils/errors';
 
 /**
@@ -145,7 +145,11 @@ export class BasicTerminalComponent implements AfterViewInit, OnDestroy {
         error = processServiceError(error);
 
         if (error.originalServerErrorMsg && typeof error.originalServerErrorMsg === 'string') {
-          this.printLines(error.originalServerErrorMsg);
+          if (error.type === OperationErrorTypes.Unknown) {
+            this.printLines(error.originalServerErrorMsg);
+          } else {
+            this.printLines(this.translate.instant(error.translatableErrorMsg));
+          }
         } else {
           this.printLines(this.translate.instant('actions.terminal.error'));
         }

diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.ts
@@ -9,6 +9,8 @@ import { NodeComponent } from '../../../node.component';
 import { LogFilterComponent, LogsFilter } from './log-filter/log-filter.component';
 import { SnackbarService } from '../../../../../../services/snackbar.service';
 import { AppConfig } from 'src/app/app.config';
+import { OperationError } from 'src/app/utils/operation-error';
+import { processServiceError } from 'src/app/utils/errors';
 
 /**
  * Represents a log entry.
@@ -100,7 +102,7 @@ export class LogComponent implements OnInit, OnDestroy {
       flatMap(() => this.appsService.getLogMessages(NodeComponent.getCurrentNodeKey(), this.data.name, this.currentFilter.days))
     ).subscribe(
       (log) => this.onLogsReceived(log),
-      this.onLogsError.bind(this)
+      (err: OperationError) => this.onLogsError(err)
     );
   }
 
@@ -140,10 +142,12 @@ export class LogComponent implements OnInit, OnDestroy {
     });
   }
 
-  private onLogsError() {
+  private onLogsError(err: OperationError) {
+    err = processServiceError(err);
+
     // Show an error msg if it has not be done before during the current attempt to obtain the data.
     if (this.shouldShowError) {
-      this.snackbarService.showError('common.loading-error', null, true);
+      this.snackbarService.showError('common.loading-error', null, true, err);
       this.shouldShowError = false;
     }
 

diff --git a/...c/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts b/...c/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
@@ -13,6 +13,8 @@ import { ConfirmationComponent } from '../../../../../layout/confirmation/confir
 import { SnackbarService } from '../../../../../../services/snackbar.service';
 import { SelectableOption, SelectOptionComponent } from 'src/app/components/layout/select-option/select-option.component';
 import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
+import { processServiceError } from 'src/app/utils/errors';
+import { OperationError } from 'src/app/utils/operation-error';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -289,14 +291,16 @@ export class NodeAppsListComponent implements OnDestroy {
         // Make the parent page reload the data.
         setTimeout(() => NodeComponent.refreshCurrentDisplayedData(), 50);
         this.snackbarService.showDone('apps.operation-completed');
-      }, () => {
+      }, (err: OperationError) => {
+        err = processServiceError(err);
+
         // Make the parent page reload the data.
         setTimeout(() => NodeComponent.refreshCurrentDisplayedData(), 50);
 
         if (confirmationDialog) {
-          confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'apps.error');
+          confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
         } else {
-          this.snackbarService.showError('apps.error');
+          this.snackbarService.showError(err);
         }
       }
     ));
@@ -453,7 +457,7 @@ export class NodeAppsListComponent implements OnDestroy {
     // The list may be empty because apps which already have the settings are ignored.
     if (!names || names.length === 0) {
       setTimeout(() => NodeComponent.refreshCurrentDisplayedData(), 50);
-      this.snackbarService.showDone('apps.operation-completed');
+      this.snackbarService.showWarning('apps.operation-unnecessary');
 
       if (confirmationDialog) {
         confirmationDialog.close();
@@ -481,12 +485,14 @@ export class NodeAppsListComponent implements OnDestroy {
       } else {
         this.changeAppsValRecursively(names, changingAutostart, newVal, confirmationDialog);
       }
-    }, () => {
+    }, (err: OperationError) => {
+      err = processServiceError(err);
+
       setTimeout(() => NodeComponent.refreshCurrentDisplayedData(), 50);
       if (confirmationDialog) {
-        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'apps.error');
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
       } else {
-        this.snackbarService.showError('apps.error');
+        this.snackbarService.showError(err);
       }
     }));
   }

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
@@ -250,10 +250,7 @@ export class NodeComponent implements OnInit, OnDestroy {
 
         this.ngZone.run(() => {
           // If the node was not found, show a msg telling the user and stop the operation.
-          if (
-            err.originalError &&
-            ((err.originalError as HttpErrorResponse).status === 400 || (err.originalError as HttpErrorResponse).status === 404)
-          ) {
+          if (err.originalError && ((err.originalError as HttpErrorResponse).status === 400)) {
             this.notFound = true;
 
             return;
@@ -262,9 +259,9 @@ export class NodeComponent implements OnInit, OnDestroy {
           // Show an error msg if it has not be done before during the current attempt to obtain the data.
           if (!this.errorsUpdating) {
             if (!this.node) {
-              this.snackbarService.showError('common.loading-error', null, true);
+              this.snackbarService.showError('common.loading-error', null, true, err);
             } else {
-              this.snackbarService.showError('node.error-load', null, true);
+              this.snackbarService.showError('node.error-load', null, true, err);
             }
           }
 

diff --git a/...src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts b/...src/app/components/pages/node/routing/route-list/route-details/route-details.component.ts
@@ -7,6 +7,7 @@ import { RouteService } from '../../../../../../services/route.service';
 import { NodeComponent } from '../../../node.component';
 import { SnackbarService } from '../../../../../../services/snackbar.service';
 import { AppConfig } from 'src/app/app.config';
+import { processServiceError } from 'src/app/utils/errors';
 
 // Objects representing the structure of the response returned by the hypervisor.
 
@@ -117,10 +118,12 @@ export class RouteDetailsComponent implements OnInit, OnDestroy {
         this.snackbarService.closeCurrentIfTemporaryError();
         this.routeRule = rule;
       },
-      () => {
+      err => {
+        err = processServiceError(err);
+
         // Show an error msg if it has not be done before during the current attempt to obtain the data.
         if (this.shouldShowError) {
-          this.snackbarService.showError('common.loading-error', null, true);
+          this.snackbarService.showError('common.loading-error', null, true, err);
           this.shouldShowError = false;
         }
 

diff --git a/...wire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts b/...wire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts
@@ -13,6 +13,8 @@ import { ConfirmationComponent } from '../../../../layout/confirmation/confirmat
 import { SnackbarService } from '../../../../../services/snackbar.service';
 import { SelectOptionComponent, SelectableOption } from 'src/app/components/layout/select-option/select-option.component';
 import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
+import { OperationError } from 'src/app/utils/operation-error';
+import { processServiceError } from 'src/app/utils/errors';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -208,8 +210,9 @@ export class RouteListComponent implements OnDestroy {
         // Make the parent page reload the data.
         NodeComponent.refreshCurrentDisplayedData();
         this.snackbarService.showDone('routes.deleted');
-      }, () => {
-        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'routes.error-deleting');
+      }, (err: OperationError) => {
+        err = processServiceError(err);
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
       }));
     });
   }
@@ -344,9 +347,11 @@ export class RouteListComponent implements OnDestroy {
       } else {
         this.deleteRecursively(ids, confirmationDialog);
       }
-    }, () => {
+    }, (err: OperationError) => {
       NodeComponent.refreshCurrentDisplayedData();
-      confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'routes.error-deleting');
+
+      err = processServiceError(err);
+      confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
     }));
   }
 }
diff --git a/...mponents/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/...mponents/pages/node/routing/transport-list/create-transport/create-transport.component.ts
@@ -125,10 +125,12 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
         this.types = types;
         this.form.get('type').setValue(types[0]);
       },
-      () => {
+      err => {
+        err = processServiceError(err);
+
         // Show an error msg if it has not be done before during the current attempt to obtain the data.
         if (this.shouldShowError) {
-          this.snackbarService.showError('common.loading-error', null, true);
+          this.snackbarService.showError('common.loading-error', null, true, err);
           this.shouldShowError = false;
         }
 

diff --git a/...ager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts b/...ager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
@@ -14,6 +14,8 @@ import { TransportDetailsComponent } from './transport-details/transport-details
 import { SnackbarService } from '../../../../../services/snackbar.service';
 import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
 import { SelectableOption, SelectOptionComponent } from 'src/app/components/layout/select-option/select-option.component';
+import { processServiceError } from 'src/app/utils/errors';
+import { OperationError } from 'src/app/utils/operation-error';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -219,8 +221,9 @@ export class TransportListComponent implements OnDestroy {
         // Make the parent page reload the data.
         NodeComponent.refreshCurrentDisplayedData();
         this.snackbarService.showDone('transports.deleted');
-      }, () => {
-        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'transports.error-deleting');
+      }, (err: OperationError) => {
+        err = processServiceError(err);
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
       }));
     });
   }
@@ -362,9 +365,11 @@ export class TransportListComponent implements OnDestroy {
       } else {
         this.deleteRecursively(ids, confirmationDialog);
       }
-    }, () => {
+    }, (err: OperationError) => {
       NodeComponent.refreshCurrentDisplayedData();
-      confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'transports.error-deleting');
+
+      err = processServiceError(err);
+      confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
     }));
   }
 }
diff --git a/static/skywire-manager-src/src/app/services/node.service.ts b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -135,20 +135,20 @@ export class NodeService {
    * Restarts a node.
    */
   reboot(nodeKey: string): Observable<any> {
-    return this.apiService.post(`visors/${nodeKey}/restart`).pipe();
+    return this.apiService.post(`visors/${nodeKey}/restart`);
   }
 
   /**
    * Checks if there are updates available for a node.
    */
   checkUpdate(nodeKey: string): Observable<any> {
-    return this.apiService.get(`visors/${nodeKey}/update/available`).pipe();
+    return this.apiService.get(`visors/${nodeKey}/update/available`);
   }
 
   /**
    * Updates a node.
    */
   update(nodeKey: string): Observable<any> {
-    return this.apiService.post(`visors/${nodeKey}/update`).pipe();
+    return this.apiService.post(`visors/${nodeKey}/update`);
   }
 }