Make the UI work with the new app statuses

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

@@ -27,6 +27,7 @@ export interface Application {
   autostart: boolean;
   port: number;
   status: number;
+  detailedStatus: string;
   args: any[];
 }
 

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

@@ -96,7 +96,13 @@
         </mat-checkbox>
       </td>
       <td>
-        <i [class]="getStateClass(app)" [matTooltip]="getStateTooltip(app) | translate"></i>
+        <i *ngIf="app.status !== 2" [class]="getStateClass(app)" [matTooltip]="getStateTooltip(app) | translate"></i>
+        <mat-icon
+          *ngIf="app.status === 2"
+          class="red-text"
+          [inline]="true"
+          [matTooltip]="'apps.status-failed-tooltip' | translate:{error: app.detailedStatus ? app.detailedStatus : ''}"
+        >warning</mat-icon>
       </td>
       <td>
         {{ app.name }}
@@ -144,10 +150,10 @@
         <button
           (click)="changeAppState(app)"
           mat-icon-button
-          [matTooltip]="('apps.' + (app.status === 1 ? 'stop-app' : 'start-app')) | translate"
+          [matTooltip]="('apps.' + (app.status === 0 || app.status === 2 ? 'start-app' : 'stop-app')) | translate"
           class="big-action-button transparent-button"
         >
-          <mat-icon [inline]="true">{{ app.status === 1 ? 'stop' : 'play_arrow' }}</mat-icon>
+          <mat-icon [inline]="true">{{ app.status === 0 || app.status === 2 ? 'play_arrow' : 'stop' }}</mat-icon>
         </button>
       </td>
     </tr>
@@ -194,8 +200,8 @@
           </div>
           <div class="list-row">
             <span class="title">{{ 'apps.apps-list.state' | translate }}</span>:
-            <span [class]="(app.status === 1 ? 'green-clear-text' : 'red-clear-text') + ' title'">
-              {{ (app.status === 1 ? 'apps.status-running' : 'apps.status-stopped') | translate }}
+            <span [class]="getSmallScreenStateClass(app) + ' title'">
+              {{ getSmallScreenStateTextVar(app) | translate:{error: app.detailedStatus ? app.detailedStatus : ''} }}
             </span>
           </div>
           <div class="list-row">

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

@@ -20,6 +20,7 @@ import { SkysocksClientSettingsComponent } from '../node-apps/skysocks-client-se
 import { FilterProperties, FilterFieldTypes } from 'src/app/utils/filters';
 import { SortingColumn, SortingModes, DataSorter } from 'src/app/utils/lists/data-sorter';
 import { DataFilterer } from 'src/app/utils/lists/data-filterer';
+import { map } from 'rxjs/operators';
 
 /**
  * Shows the list of applications of a node. I can be used to show a short preview, with just some
@@ -85,7 +86,6 @@ export class NodeAppsListComponent implements OnDestroy {
   currentPageInUrl = 1;
   @Input() set apps(val: Application[]) {
     this.allApps = val ? val : [];
-
     this.dataFilterer.setData(this.allApps);
   }
 
@@ -206,7 +206,7 @@ export class NodeAppsListComponent implements OnDestroy {
    * Gets the link for openning the UI of an app. Currently only works for the Skychat app.
    */
   getLink(app: Application): string {
-    if (app.name.toLocaleLowerCase() === 'skychat' && this.nodeIp && app.status === 1) {
+    if (app.name.toLocaleLowerCase() === 'skychat' && this.nodeIp && app.status !== 0 && app.status !== 2) {
       // Default port.
       let port = '8001';
 
@@ -237,26 +237,54 @@ export class NodeAppsListComponent implements OnDestroy {
   getStateClass(app: Application): string {
     if (app.status === 1) {
       return 'dot-green';
-    } else if (app.name === 'vpn-client' && app.status === 3) {
+    } else if (app.status === 3) {
       return 'dot-yellow';
     }
 
     return 'dot-red';
   }
 
+  /**
+   * Gets the class for the app status text in small screens.
+   */
+   getSmallScreenStateClass(app: Application): string {
+    if (app.status === 1) {
+      return 'green-clear-text';
+    } else if (app.status === 3) {
+      return 'yellow-clear-text';
+    }
+
+    return 'red-clear-text';
+  }
+
   /**
    * Gets the tooltip text for the app status dot.
    */
   getStateTooltip(app: Application): string {
     if (app.status === 1) {
       return 'apps.status-running-tooltip';
-    } else if (app.name === 'vpn-client' && app.status === 3) {
+    } else if (app.status === 3) {
       return 'apps.status-connecting-tooltip';
     }
 
     return 'apps.status-stopped-tooltip';
   }
 
+  /**
+   * Gets the text for status shown in small screens.
+   */
+   getSmallScreenStateTextVar(app: Application): string {
+    if (app.status === 1) {
+      return 'apps.status-running';
+    } else if (app.status === 2) {
+      return 'apps.status-failed';
+    } else if (app.status === 3) {
+      return 'apps.status-connecting';
+    }
+
+    return 'apps.status-stopped';
+  }
+
   /**
    * Changes the selection state of an entry (modifies the state of its checkbox).
    */
@@ -269,7 +297,7 @@ export class NodeAppsListComponent implements OnDestroy {
   }
 
   /**
-   * Check if at lest one entry has been selected via its checkbox.
+   * Check if at least one entry has been selected via its checkbox.
    */
   hasSelectedElements(): boolean {
     if (!this.selections) {
@@ -303,7 +331,10 @@ export class NodeAppsListComponent implements OnDestroy {
     // Ignore all elements which already have the desired settings applied.
     this.selections.forEach((val, key) => {
       if (val) {
-        if ((startApps && this.appsMap.get(key).status !== 1) || (!startApps && this.appsMap.get(key).status === 1)) {
+        if (
+          (startApps && (this.appsMap.get(key).status === 0 || this.appsMap.get(key).status === 2)) ||
+          (!startApps && (this.appsMap.get(key).status !== 0 && this.appsMap.get(key).status !== 2))
+        ) {
           elementsToChange.push(key);
         }
       }
@@ -359,8 +390,8 @@ export class NodeAppsListComponent implements OnDestroy {
         label: 'apps.view-logs',
       },
       {
-        icon: app.status === 1 ? 'stop' : 'play_arrow',
-        label: 'apps.' + (app.status === 1 ? 'stop-app' : 'start-app'),
+        icon: app.status === 0 || app.status === 2 ? 'play_arrow' : 'stop',
+        label: 'apps.' + (app.status === 0 || app.status === 2 ? 'start-app' : 'stop-app'),
       },
       {
         icon: app.autostart ? 'close' : 'done',
@@ -392,9 +423,9 @@ export class NodeAppsListComponent implements OnDestroy {
    * Starts or stops a specific app.
    */
   changeAppState(app: Application): void {
-    if (app.status !== 1) {
+    if (app.status === 0 || app.status === 2) {
       this.changeSingleAppVal(
-        this.startChangingAppState(app.name, app.status !== 1)
+        this.startChangingAppState(app.name, true)
       );
     } else {
       // Ask for confirmation if the app is going to be stopped.
@@ -404,7 +435,7 @@ export class NodeAppsListComponent implements OnDestroy {
         confirmationDialog.componentInstance.showProcessing();
 
         this.changeSingleAppVal(
-          this.startChangingAppState(app.name, app.status !== 1),
+          this.startChangingAppState(app.name, false),
           confirmationDialog
         );
       });
@@ -476,7 +507,7 @@ export class NodeAppsListComponent implements OnDestroy {
    * Shows a modal window with the logs of an app.
    */
   viewLogs(app: Application): void {
-    if (app.status === 1) {
+    if (app.status !== 0 && app.status !== 2) {
       LogComponent.openDialog(this.dialog, app);
     } else {
       this.snackbarService.showError('apps.apps-list.unavailable-logs-error');
@@ -558,7 +589,18 @@ export class NodeAppsListComponent implements OnDestroy {
    * subscribe to the response.
    */
   private startChangingAppState(appName: string, startApp: boolean): Observable<any> {
-    return this.appsService.changeAppState(NodeComponent.getCurrentNodeKey(), appName, startApp);
+    return this.appsService.changeAppState(NodeComponent.getCurrentNodeKey(), appName, startApp).pipe(map(response => {
+      if (response.status !== null && response.status !== undefined) {
+        this.dataSource.forEach(app => {
+          if (app.name === appName) {
+            app.status = response.status;
+            app.detailedStatus = response.detailed_status;
+          }
+        });
+      }
+
+      return response;
+    }));
   }
 
   /**

static/skywire-manager-src/src/app/services/node.service.ts

@@ -707,6 +707,7 @@ export class NodeService {
               status: app.status,
               port: app.port,
               autostart: app.auto_start,
+              detailedStatus: app.detailed_status,
               args: app.args,
             });
           });

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

@@ -680,7 +680,7 @@ export class VpnClientService {
       // Get the required data from the app properties.
       if (appData) {
         vpnClientData = new VpnClientAppData();
-        vpnClientData.running = appData.status === 1 || appData.status === 3;
+        vpnClientData.running = appData.status !== 0 || appData.status !== 2;
         vpnClientData.connectionDuration = appData.connection_duration;
 
         vpnClientData.appState = AppState.Stopped;

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

@@ -462,12 +462,13 @@
     "operation-completed": "Operation completed.",
     "operation-unnecessary": "The selection already has the requested setting.",
     "status-running": "Running",
+    "status-connecting": "Connecting",
     "status-stopped": "Stopped",
-    "status-failed": "Failed",
+    "status-failed": "Ended with the following error: {{ error }}",
     "status-running-tooltip": "App is currently running",
     "status-connecting-tooltip": "App is currently connecting",
     "status-stopped-tooltip": "App is currently stopped",
-    "status-failed-tooltip": "Something went wrong. Check the app's messages for more information"
+    "status-failed-tooltip": "The app finished with the following error: {{ error }}"
   },
 
   "transports": {

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

@@ -466,12 +466,13 @@
     "operation-completed": "Operación completada.",
     "operation-unnecessary": "La selección ya tiene la configuración solicitada.",
     "status-running": "Corriendo",
+    "status-connecting": "Conectando",
     "status-stopped": "Detenida",
-    "status-failed": "Fallida",
+    "status-failed": "Finalizó con el siguiente error: {{ error }}",
     "status-running-tooltip": "La aplicación está actualmente corriendo",
     "status-connecting-tooltip": "La aplicación está actualmente conectando",
     "status-stopped-tooltip": "La aplicación está actualmente detenida",
-    "status-failed-tooltip": "Algo salió mal. Revise los mensajes de la aplicación para más información"
+    "status-failed-tooltip": "La app finalizó con el siguiente error: {{ error }}"
   },
 
   "transports": {

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

@@ -466,12 +466,13 @@
     "operation-completed": "Operation completed.",
     "operation-unnecessary": "The selection already has the requested setting.",
     "status-running": "Running",
+    "status-connecting": "Connecting",
     "status-stopped": "Stopped",
-    "status-failed": "Failed",
+    "status-failed": "Ended with the following error: {{ error }}",
     "status-running-tooltip": "App is currently running",
     "status-connecting-tooltip": "App is currently connecting",
     "status-stopped-tooltip": "App is currently stopped",
-    "status-failed-tooltip": "Something went wrong. Check the app's messages for more information"
+    "status-failed-tooltip": "The app finished with the following error: {{ error }}"
   },
 
   "transports": {