From a168cbcd7885b2ca50e31e832c8a765d4757030c Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Mon, 16 May 2022 10:35:45 -0400
Subject: [PATCH] Fix the VPN status in the UI

---
 .../node-apps-list.component.html             |  5 +---
 .../node-apps-list.component.ts               | 26 +++++++++++++++++++
 .../src/app/services/vpn-client.service.ts    |  2 +-
 .../src/assets/i18n/en.json                   |  1 +
 .../src/assets/i18n/es.json                   |  1 +
 .../src/assets/i18n/es_base.json              |  1 +
 6 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html
index 96dcaa7c6b..a2d50c971f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.html
@@ -96,10 +96,7 @@
         </mat-checkbox>
       </td>
       <td>
-        <i
-          [class]="app.status === 1 ? 'dot-green' : 'dot-red'"
-          [matTooltip]="(app.status === 1 ? 'apps.status-running-tooltip' : 'apps.status-stopped-tooltip') | translate"
-        ></i>
+        <i [class]="getStateClass(app)" [matTooltip]="getStateTooltip(app) | translate"></i>
       </td>
       <td>
         {{ app.name }}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts
index ad5873f038..f804f414e1 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps-list/node-apps-list.component.ts
@@ -231,6 +231,32 @@ export class NodeAppsListComponent implements OnDestroy {
     return null;
   }
 
+  /**
+   * Gets the class for the app status dot.
+   */
+  getStateClass(app: Application): string {
+    if (app.status === 1) {
+      return 'dot-green';
+    } else if (app.name === 'vpn-client' && app.status === 3) {
+      return 'dot-yellow';
+    }
+
+    return 'dot-red';
+  }
+
+  /**
+   * 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) {
+      return 'apps.status-connecting-tooltip';
+    }
+
+    return 'apps.status-stopped-tooltip';
+  }
+
   /**
    * Changes the selection state of an entry (modifies the state of its checkbox).
    */
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 f69edbc0dd..6f05fc4631 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
@@ -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;
+        vpnClientData.running = appData.status === 1 || appData.status === 3;
         vpnClientData.connectionDuration = appData.connection_duration;
 
         vpnClientData.appState = AppState.Stopped;
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index 0716773ec1..6708d08d25 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -464,6 +464,7 @@
     "status-stopped": "Stopped",
     "status-failed": "Failed",
     "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"
   },
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index ed0dce50cd..8ab4238706 100644
--- a/static/skywire-manager-src/src/assets/i18n/es.json
+++ b/static/skywire-manager-src/src/assets/i18n/es.json
@@ -468,6 +468,7 @@
     "status-stopped": "Detenida",
     "status-failed": "Fallida",
     "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"
   },
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 b17d749d64..bfe0252cda 100644
--- a/static/skywire-manager-src/src/assets/i18n/es_base.json
+++ b/static/skywire-manager-src/src/assets/i18n/es_base.json
@@ -468,6 +468,7 @@
     "status-stopped": "Stopped",
     "status-failed": "Failed",
     "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"
   },