From ba9a4ae95359671c2de99282f530c688eb9e2ebf Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 2 Sep 2021 09:42:46 -0400
Subject: [PATCH] Add NAT info to the UI

---
 static/skywire-manager-src/src/app/app.datatypes.ts       | 2 ++
 .../node-info-content/node-info-content.component.html    | 8 ++++++++
 .../skywire-manager-src/src/app/services/node.service.ts  | 2 ++
 static/skywire-manager-src/src/assets/i18n/en.json        | 4 ++++
 static/skywire-manager-src/src/assets/i18n/es.json        | 4 ++++
 static/skywire-manager-src/src/assets/i18n/es_base.json   | 4 ++++
 6 files changed, 24 insertions(+)

diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts
index d540a8a604..0ddd59af99 100644
--- a/static/skywire-manager-src/src/app/app.datatypes.ts
+++ b/static/skywire-manager-src/src/app/app.datatypes.ts
@@ -1,6 +1,8 @@
 export class Node {
   label: string;
   localPk: string;
+  isSymmeticNat?: boolean;
+  publicIp?: string;
   ip: string;
   version: string;
   apps: Application[];
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
index a429276985..c3752fc1ea 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
@@ -13,6 +13,14 @@
       <span class="title">{{ 'node.details.node-info.public-key' | translate }}&nbsp;</span>
       <app-copy-to-clipboard-text text="{{ node.localPk }}"></app-copy-to-clipboard-text>
     </span>
+    <span class="info-line">
+      <span class="title">{{ 'node.details.node-info.symmetic-nat' | translate }}&nbsp;</span>
+      {{ (node.isSymmeticNat ? 'common.yes' : 'common.no') | translate }}
+    </span>
+    <span class="info-line" *ngIf="!node.isSymmeticNat">
+      <span class="title">{{ 'node.details.node-info.public-ip' | translate }}&nbsp;</span>
+      <app-copy-to-clipboard-text text="{{ node.publicIp }}"></app-copy-to-clipboard-text>
+    </span>
     <span class="info-line" *ngIf="node.ip">
       <span class="title">{{ 'node.details.node-info.ip' | translate }}&nbsp;</span>
       <app-copy-to-clipboard-text text="{{ node.ip }}"></app-copy-to-clipboard-text>
diff --git a/static/skywire-manager-src/src/app/services/node.service.ts b/static/skywire-manager-src/src/app/services/node.service.ts
index f39e1af8c6..9a7679e130 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -614,6 +614,8 @@ export class NodeService {
         node.secondsOnline = Math.floor(Number.parseFloat(response.uptime));
         node.minHops = response.min_hops;
         node.skybianBuildVersion = response.skybian_build_version;
+        node.isSymmeticNat = response.overview.is_symmetic_nat;
+        node.publicIp = response.overview.public_ip;
 
         // Ip.
         if (response.overview.local_ip && (response.overview.local_ip as string).trim()) {
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index 299f9f3bb7..afdcde3b47 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -16,6 +16,8 @@
     "time-in-ms": "{{ time }}ms.",
     "time-in-segs": "{{ time }}s.",
     "ok": "Ok",
+    "yes": "Yes",
+    "no": "No",
     "unknown": "Unknown",
     "close": "Close",
     "window-size-error": "The window is too narrow for the content."
@@ -96,6 +98,8 @@
         "title": "Visor Info",
         "label": "Label:",
         "public-key": "Public key:",
+        "symmetic-nat": "Symmetic NAT:",
+        "public-ip": "Public IP:",
         "ip": "IP:",
         "dmsg-server": "DMSG server:",
         "ping": "Ping:",
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index 96e25b4e1d..4fa85eca57 100644
--- a/static/skywire-manager-src/src/assets/i18n/es.json
+++ b/static/skywire-manager-src/src/assets/i18n/es.json
@@ -16,6 +16,8 @@
     "time-in-ms": "{{ time }}ms.",
     "time-in-segs": "{{ time }}s.",
     "ok": "Ok",
+    "yes": "Yes",
+    "no": "No",
     "unknown": "Desconocido",
     "close": "Cerrar",
     "window-size-error": "La ventana es demasiado estrecha para el contenido."
@@ -96,6 +98,8 @@
         "title": "Información del visor",
         "label": "Etiqueta:",
         "public-key": "Llave pública:",
+        "symmetic-nat": "NAT simétrica:",
+        "public-ip": "IP pública:",
         "ip": "IP:",
         "dmsg-server": "Servidor DMSG:",
         "ping": "Ping:",
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 ae298d4ba7..76f33d7931 100644
--- a/static/skywire-manager-src/src/assets/i18n/es_base.json
+++ b/static/skywire-manager-src/src/assets/i18n/es_base.json
@@ -16,6 +16,8 @@
     "time-in-ms": "{{ time }}ms.",
     "time-in-segs": "{{ time }}s.",
     "ok": "Ok",
+    "yes": "Yes",
+    "no": "No",
     "unknown": "Unknown",
     "close": "Close",
     "window-size-error": "The window is too narrow for the content."
@@ -96,6 +98,8 @@
         "title": "Visor Info",
         "label": "Label:",
         "public-key": "Public key:",
+        "symmetic-nat": "Symmetic NAT:",
+        "public-ip": "Public IP:",
         "ip": "IP:",
         "dmsg-server": "DMSG server:",
         "ping": "Ping:",