From be9a4f3fe8e3b101ffc4a96c996dfc553d3a4e1f Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Mon, 2 Aug 2021 18:00:41 +0530
Subject: [PATCH 01/19] Add stcpr heartbeat

---
 pkg/transport/network/addrresolver/client.go | 41 ++++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 286e114c20..04275b59e0 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -27,12 +27,14 @@ import (
 
 const (
 	// sudphPriority is used to set an order how connection filters apply.
-	sudphPriority        = 1
-	stcprBindPath        = "/bind/stcpr"
-	addrChSize           = 1024
-	udpKeepAliveInterval = 10 * time.Second
-	udpKeepAliveMessage  = "keepalive"
-	defaultUDPPort       = "30178"
+	sudphPriority          = 1
+	stcprBindPath          = "/bind/stcpr"
+	stcprAlivePath         = "/alive/stcpr/%s"
+	stcprKeepAliveInterval = 300 * time.Second
+	addrChSize             = 1024
+	udpKeepAliveInterval   = 10 * time.Second
+	udpKeepAliveMessage    = "keepalive"
+	defaultUDPPort         = "30178"
 )
 
 var (
@@ -216,6 +218,12 @@ func (c *httpClient) BindSTCPR(ctx context.Context, port string) error {
 		return fmt.Errorf("status: %d, error: %w", resp.StatusCode, extractError(resp.Body))
 	}
 
+	go func() {
+		if err := c.keepStcprAliveLoop(ctx); err != nil {
+			c.log.WithError(err).Errorf("Failed to send TCP keep alive signal to address-resolver")
+		}
+	}()
+
 	return nil
 }
 
@@ -273,7 +281,7 @@ func (c *httpClient) BindSUDPH(filter *pfilter.PacketFilter, hs Handshake) (<-ch
 	addrCh := c.readSUDPHMessages(arConn)
 
 	go func() {
-		if err := c.keepAliveLoop(arConn); err != nil {
+		if err := c.keepSudphAliveLoop(arConn); err != nil {
 			c.log.WithError(err).Errorf("Failed to send keep alive UDP packet to address-resolver")
 		}
 	}()
@@ -413,8 +421,25 @@ func (c *httpClient) Close() error {
 	return nil
 }
 
+// Keep stcpr alive in address-resolver
+func (c *httpClient) keepStcprAliveLoop(ctx context.Context) error {
+	for {
+		select {
+		case <-c.closed:
+			return nil
+		default:
+			_, err := c.Get(ctx, fmt.Sprintf(stcprAlivePath, c.pk.String()))
+			if err != nil {
+				return err
+			}
+
+			time.Sleep(stcprKeepAliveInterval)
+		}
+	}
+}
+
 // Keep NAT mapping alive.
-func (c *httpClient) keepAliveLoop(w io.Writer) error {
+func (c *httpClient) keepSudphAliveLoop(w io.Writer) error {
 	for {
 		select {
 		case <-c.closed:

From 12befebf750d448568388cc0f16aae9b2c71fe99 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Mon, 2 Aug 2021 22:26:42 +0530
Subject: [PATCH 02/19] Update url

---
 pkg/transport/network/addrresolver/client.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 04275b59e0..42ca3d180c 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -428,7 +428,7 @@ func (c *httpClient) keepStcprAliveLoop(ctx context.Context) error {
 		case <-c.closed:
 			return nil
 		default:
-			_, err := c.Get(ctx, fmt.Sprintf(stcprAlivePath, c.pk.String()))
+			_, err := c.Get(ctx, stcprAlivePath)
 			if err != nil {
 				return err
 			}

From fa85ee30ac561221629c51f89320ea9f14c8b8da Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Mon, 2 Aug 2021 22:30:56 +0530
Subject: [PATCH 03/19] Fix url

---
 pkg/transport/network/addrresolver/client.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 42ca3d180c..9974c34dbe 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -29,7 +29,7 @@ const (
 	// sudphPriority is used to set an order how connection filters apply.
 	sudphPriority          = 1
 	stcprBindPath          = "/bind/stcpr"
-	stcprAlivePath         = "/alive/stcpr/%s"
+	stcprAlivePath         = "/alive/stcpr"
 	stcprKeepAliveInterval = 300 * time.Second
 	addrChSize             = 1024
 	udpKeepAliveInterval   = 10 * time.Second

From 1c5cd683e8848b90d931bf8b40526e7fdcb78383 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 14:58:26 +0530
Subject: [PATCH 04/19] Change alive to heartbeat

---
 pkg/transport/network/addrresolver/client.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 9974c34dbe..73a37d9d47 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -29,7 +29,7 @@ const (
 	// sudphPriority is used to set an order how connection filters apply.
 	sudphPriority          = 1
 	stcprBindPath          = "/bind/stcpr"
-	stcprAlivePath         = "/alive/stcpr"
+	stcprAlivePath         = "/heartbeat/stcpr"
 	stcprKeepAliveInterval = 300 * time.Second
 	addrChSize             = 1024
 	udpKeepAliveInterval   = 10 * time.Second

From 1b5152083fcc2ea81a88b4cfeda1fb6ba77a212d Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 15:17:03 +0530
Subject: [PATCH 05/19] Update keepStcprHeartbeatLoop logic

---
 pkg/transport/network/addrresolver/client.go | 45 ++++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 73a37d9d47..8d63850b11 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -27,14 +27,14 @@ import (
 
 const (
 	// sudphPriority is used to set an order how connection filters apply.
-	sudphPriority          = 1
-	stcprBindPath          = "/bind/stcpr"
-	stcprAlivePath         = "/heartbeat/stcpr"
-	stcprKeepAliveInterval = 300 * time.Second
-	addrChSize             = 1024
-	udpKeepAliveInterval   = 10 * time.Second
-	udpKeepAliveMessage    = "keepalive"
-	defaultUDPPort         = "30178"
+	sudphPriority              = 1
+	stcprBindPath              = "/bind/stcpr"
+	stcprHeartbeatPath         = "/heartbeat/stcpr"
+	stcprKeepHeartbeatInterval = 300 * time.Second
+	addrChSize                 = 1024
+	udpKeepHeartbeatInterval   = 10 * time.Second
+	udpKeepHeartbeatMessage    = "heartbeat"
+	defaultUDPPort             = "30178"
 )
 
 var (
@@ -219,8 +219,8 @@ func (c *httpClient) BindSTCPR(ctx context.Context, port string) error {
 	}
 
 	go func() {
-		if err := c.keepStcprAliveLoop(ctx); err != nil {
-			c.log.WithError(err).Errorf("Failed to send TCP keep alive signal to address-resolver")
+		if err := c.keepStcprHeartbeatLoop(ctx); err != nil {
+			c.log.WithError(err).Errorf("Failed to send TCP heartbeat signal to address-resolver")
 		}
 	}()
 
@@ -281,8 +281,8 @@ func (c *httpClient) BindSUDPH(filter *pfilter.PacketFilter, hs Handshake) (<-ch
 	addrCh := c.readSUDPHMessages(arConn)
 
 	go func() {
-		if err := c.keepSudphAliveLoop(arConn); err != nil {
-			c.log.WithError(err).Errorf("Failed to send keep alive UDP packet to address-resolver")
+		if err := c.keepSudphHeartbeatLoop(arConn); err != nil {
+			c.log.WithError(err).Errorf("Failed to send UDP heartbeat packet to address-resolver")
 		}
 	}()
 
@@ -421,35 +421,34 @@ func (c *httpClient) Close() error {
 	return nil
 }
 
-// Keep stcpr alive in address-resolver
-func (c *httpClient) keepStcprAliveLoop(ctx context.Context) error {
+// Keep stcpr heartbeat in address-resolver
+func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 	for {
+		_, err := c.Get(ctx, stcprHeartbeatPath)
+		if err != nil {
+			return err
+		}
 		select {
 		case <-c.closed:
 			return nil
 		default:
-			_, err := c.Get(ctx, stcprAlivePath)
-			if err != nil {
-				return err
-			}
-
-			time.Sleep(stcprKeepAliveInterval)
+			time.Sleep(stcprKeepHeartbeatInterval)
 		}
 	}
 }
 
 // Keep NAT mapping alive.
-func (c *httpClient) keepSudphAliveLoop(w io.Writer) error {
+func (c *httpClient) keepSudphHeartbeatLoop(w io.Writer) error {
 	for {
 		select {
 		case <-c.closed:
 			return nil
 		default:
-			if _, err := w.Write([]byte(udpKeepAliveMessage)); err != nil {
+			if _, err := w.Write([]byte(udpKeepHeartbeatMessage)); err != nil {
 				return err
 			}
 
-			time.Sleep(udpKeepAliveInterval)
+			time.Sleep(udpKeepHeartbeatInterval)
 		}
 	}
 }

From 780f550c3341061b1502b41278a37e66708ee11a Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 15:25:10 +0530
Subject: [PATCH 06/19] Test logs

---
 pkg/transport/network/addrresolver/client.go | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 8d63850b11..82e205e845 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -218,7 +218,13 @@ func (c *httpClient) BindSTCPR(ctx context.Context, port string) error {
 		return fmt.Errorf("status: %d, error: %w", resp.StatusCode, extractError(resp.Body))
 	}
 
+	c.log.Errorf("HERERERERERERERERERE")
+	c.log.Errorf("HERERERERERERERERERE")
+	c.log.Errorf("HERERERERERERERERERE")
+	c.log.Errorf("HERERERERERERERERERE")
 	go func() {
+		c.log.Errorf("2222222222222222222")
+
 		if err := c.keepStcprHeartbeatLoop(ctx); err != nil {
 			c.log.WithError(err).Errorf("Failed to send TCP heartbeat signal to address-resolver")
 		}
@@ -424,6 +430,9 @@ func (c *httpClient) Close() error {
 // Keep stcpr heartbeat in address-resolver
 func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 	for {
+		c.log.Errorf("233333333333333333333")
+		c.log.Errorf("233333333333333333333")
+		c.log.Errorf("233333333333333333333")
 		_, err := c.Get(ctx, stcprHeartbeatPath)
 		if err != nil {
 			return err

From 4736e520788f858e52d3209f13a139a294cd74f4 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 15:29:53 +0530
Subject: [PATCH 07/19] Logs

---
 pkg/transport/network/addrresolver/client.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 82e205e845..4a7eae4a08 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -228,6 +228,7 @@ func (c *httpClient) BindSTCPR(ctx context.Context, port string) error {
 		if err := c.keepStcprHeartbeatLoop(ctx); err != nil {
 			c.log.WithError(err).Errorf("Failed to send TCP heartbeat signal to address-resolver")
 		}
+		c.log.Errorf("444444444444444444")
 	}()
 
 	return nil
@@ -435,6 +436,7 @@ func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 		c.log.Errorf("233333333333333333333")
 		_, err := c.Get(ctx, stcprHeartbeatPath)
 		if err != nil {
+			c.log.Error(err)
 			return err
 		}
 		select {

From 91b554c2a6d5c77a8eb0b96d62c4a184f2cd0226 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 15:45:09 +0530
Subject: [PATCH 08/19] Logs

---
 pkg/transport/network/addrresolver/client.go | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 4a7eae4a08..0db8965369 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -145,12 +145,14 @@ func (c *httpClient) initHTTPClient() {
 func (c *httpClient) Get(ctx context.Context, path string) (*http.Response, error) {
 	<-c.ready
 
+	c.log.Errorf("yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy")
 	addr := c.httpClient.Addr() + path
 
 	req, err := http.NewRequest(http.MethodGet, addr, new(bytes.Buffer))
 	if err != nil {
 		return nil, err
 	}
+	c.log.Errorf("xzzzzzzzzzzzzzzzzzzzzzzzzzzz")
 
 	return c.httpClient.Do(req.WithContext(ctx))
 }
@@ -439,6 +441,7 @@ func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 			c.log.Error(err)
 			return err
 		}
+		c.log.Errorf("xxxxxxxxxxxxxxxxxxxx")
 		select {
 		case <-c.closed:
 			return nil

From e835e906ba49c21db725bde24425675ff065c626 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Wed, 18 Aug 2021 15:54:10 +0530
Subject: [PATCH 09/19] Remove test logs

---
 pkg/transport/network/addrresolver/client.go | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 0db8965369..8d63850b11 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -145,14 +145,12 @@ func (c *httpClient) initHTTPClient() {
 func (c *httpClient) Get(ctx context.Context, path string) (*http.Response, error) {
 	<-c.ready
 
-	c.log.Errorf("yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy")
 	addr := c.httpClient.Addr() + path
 
 	req, err := http.NewRequest(http.MethodGet, addr, new(bytes.Buffer))
 	if err != nil {
 		return nil, err
 	}
-	c.log.Errorf("xzzzzzzzzzzzzzzzzzzzzzzzzzzz")
 
 	return c.httpClient.Do(req.WithContext(ctx))
 }
@@ -220,17 +218,10 @@ func (c *httpClient) BindSTCPR(ctx context.Context, port string) error {
 		return fmt.Errorf("status: %d, error: %w", resp.StatusCode, extractError(resp.Body))
 	}
 
-	c.log.Errorf("HERERERERERERERERERE")
-	c.log.Errorf("HERERERERERERERERERE")
-	c.log.Errorf("HERERERERERERERERERE")
-	c.log.Errorf("HERERERERERERERERERE")
 	go func() {
-		c.log.Errorf("2222222222222222222")
-
 		if err := c.keepStcprHeartbeatLoop(ctx); err != nil {
 			c.log.WithError(err).Errorf("Failed to send TCP heartbeat signal to address-resolver")
 		}
-		c.log.Errorf("444444444444444444")
 	}()
 
 	return nil
@@ -433,15 +424,10 @@ func (c *httpClient) Close() error {
 // Keep stcpr heartbeat in address-resolver
 func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 	for {
-		c.log.Errorf("233333333333333333333")
-		c.log.Errorf("233333333333333333333")
-		c.log.Errorf("233333333333333333333")
 		_, err := c.Get(ctx, stcprHeartbeatPath)
 		if err != nil {
-			c.log.Error(err)
 			return err
 		}
-		c.log.Errorf("xxxxxxxxxxxxxxxxxxxx")
 		select {
 		case <-c.closed:
 			return nil

From a314e2adfd401ebc4f08e4ca8fe1e77a0f4bee09 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Thu, 19 Aug 2021 22:04:27 +0530
Subject: [PATCH 10/19] Add debug log

---
 pkg/transport/network/addrresolver/client.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pkg/transport/network/addrresolver/client.go b/pkg/transport/network/addrresolver/client.go
index 8d63850b11..ac06860d6d 100644
--- a/pkg/transport/network/addrresolver/client.go
+++ b/pkg/transport/network/addrresolver/client.go
@@ -428,6 +428,8 @@ func (c *httpClient) keepStcprHeartbeatLoop(ctx context.Context) error {
 		if err != nil {
 			return err
 		}
+
+		c.log.Debugf("Sent TCP heartbeat signal to address-resolver")
 		select {
 		case <-c.closed:
 			return nil

From 6c54030cdcd19a9946b123d96c50f356124bc4b0 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Fri, 27 Aug 2021 19:50:36 -0400
Subject: [PATCH 11/19] Add the persistent transports to the UI

---
 .../src/app/app.datatypes.ts                  |  11 +-
 .../pages/node-list/node-list.component.html  |   2 +-
 .../pages/node-list/node-list.component.scss  |   4 -
 .../all-transports.component.html             |   7 +-
 .../all-transports.component.ts               |  10 +-
 .../pages/node/routing/routing.component.html |   5 +-
 .../pages/node/routing/routing.component.ts   |   6 +-
 .../transport-details.component.html          |  10 +-
 .../transport-details.component.scss          |   5 +
 .../transport-list.component.html             |  74 +++--
 .../transport-list.component.scss             |  15 +
 .../transport-list.component.ts               | 270 ++++++++++++------
 .../src/app/services/node.service.ts          |  14 +-
 .../src/app/services/transport.service.ts     |   5 +
 .../src/assets/i18n/en.json                   |  43 +--
 .../src/assets/i18n/es.json                   |  43 +--
 .../src/assets/i18n/es_base.json              |  43 +--
 .../src/assets/scss/_text.scss                |   4 +
 18 files changed, 384 insertions(+), 187 deletions(-)

diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts
index d540a8a604..b60920c3f1 100644
--- a/static/skywire-manager-src/src/app/app.datatypes.ts
+++ b/static/skywire-manager-src/src/app/app.datatypes.ts
@@ -5,6 +5,7 @@ export class Node {
   version: string;
   apps: Application[];
   transports: Transport[];
+  persistentTransports: PersistentTransport[];
   routesCount: number;
   minHops: number;
   routes?: Route[];
@@ -26,13 +27,21 @@ export interface Application {
 }
 
 export interface Transport {
-  isUp: boolean;
   id: string;
   localPk: string;
   remotePk: string;
   type: string;
   recv: number|null;
   sent: number|null;
+
+  // Calculated internally
+  isPersistent?: boolean;
+  notFound?: boolean;
+}
+
+export interface PersistentTransport {
+  pk: string;
+  type: string;
 }
 
 export interface Route {
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
index 6ce6c3ff95..fb6135f10a 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
@@ -81,7 +81,7 @@
         <!-- Column names. -->
         <tr>
           <th class="sortable-column small-column" (click)="dataSorter.changeSortingOrder(hypervisorSortData)" [matTooltip]="'nodes.hypervisor' | translate">
-            <mat-icon class="hypervisor-icon gray-text">star_outline</mat-icon>
+            <mat-icon class="hypervisor-icon grey-text">star_outline</mat-icon>
             <mat-icon *ngIf="dataSorter.currentSortingColumn === hypervisorSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
           </th>
           <th class="sortable-column small-column" (click)="dataSorter.changeSortingOrder(stateSortData)" [matTooltip]="'nodes.state-tooltip' | translate">
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
index 296715889c..ce07e8576f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
@@ -23,10 +23,6 @@
   color: $yellow;
 }
 
-.gray-text {
-  color: $light-gray !important;
-}
-
 .small-column {
   width: 1px;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.html
index 44f648e5c8..5c2f454be5 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.html
@@ -1,6 +1,5 @@
 <app-transport-list
-  *ngIf="transports"
-  [transports]="transports"
-  [showShortList]="false"
-  [nodePK]="nodePK">
+  *ngIf="node"
+  [node]="node"
+  [showShortList]="false">
 </app-transport-list>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.ts
index 77f24aa195..eb25b043ac 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
-import { Node, Transport } from '../../../../../app.datatypes';
+import { Node } from '../../../../../app.datatypes';
 import { NodeComponent } from '../../node.component';
 
 /**
@@ -13,17 +13,13 @@ import { NodeComponent } from '../../node.component';
   styleUrls: ['./all-transports.component.scss']
 })
 export class AllTransportsComponent implements OnInit, OnDestroy {
-  transports: Transport[];
-  nodePK: string;
+  node: Node;
 
   private dataSubscription: Subscription;
 
   ngOnInit() {
     // Get the node data from the parent page.
-    this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => {
-      this.nodePK = node.localPk;
-      this.transports = node.transports;
-    });
+    this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => this.node = node);
   }
 
   ngOnDestroy() {
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.html
index 8b6b5eb125..54b16c449d 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.html
@@ -1,7 +1,6 @@
 <app-transport-list
-  [transports]="transports"
-  [showShortList]="true"
-  [nodePK]="nodePK">
+  [node]="node"
+  [showShortList]="true">
 </app-transport-list>
 
 <app-route-list
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.ts
index 976bde781c..1a8b3fff5f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/routing.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 
-import { Node, Transport, Route } from '../../../../app.datatypes';
+import { Node, Route } from '../../../../app.datatypes';
 import { NodeComponent } from '../node.component';
 
 /**
@@ -13,7 +13,7 @@ import { NodeComponent } from '../node.component';
   styleUrls: ['./routing.component.scss']
 })
 export class RoutingComponent implements OnInit, OnDestroy {
-  transports: Transport[];
+  node: Node;
   routes: Route[];
   nodePK: string;
 
@@ -23,7 +23,7 @@ export class RoutingComponent implements OnInit, OnDestroy {
     // Get the node data from the parent page.
     this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => {
       this.nodePK = node.localPk;
-      this.transports = node.transports;
+      this.node = node;
       this.routes = node.routes;
     });
   }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
index 0896336b00..900d27e54b 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
@@ -4,10 +4,12 @@
       <mat-icon [inline]="true">list</mat-icon>{{ 'transports.details.basic.title' | translate }}
     </div>
     <div class="item">
-      <span>{{ 'transports.details.basic.state' | translate }}</span>
-      <div [class]="'d-inline ' + (data.isUp ? 'green-text' : 'red-text')">
-        {{ ('transports.statuses.' + (data.isUp ? 'online' : 'offline')) | translate }}
-      </div>
+      <span>{{ 'transports.details.basic.persistent' | translate }}</span>
+      <ng-container *ngIf="data.isPersistent">
+        {{ 'common.yes' | translate }}
+        <mat-icon [inline]="true" class="help-icon d-none d-md-inline" [matTooltip]="'transports.persistent-transport-tooltip' | translate">help</mat-icon>
+      </ng-container>
+      <ng-container *ngIf="!data.isPersistent">{{ 'common.no' | translate }}</ng-container>
     </div>
     <div class="item">
       <span>{{ 'transports.details.basic.id' | translate }}</span> {{ data.id }}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.scss b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.scss
index e69de29bb2..a54adeac41 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.scss
@@ -0,0 +1,5 @@
+.help-icon {
+    opacity: 0.5;
+    font-size: 14px;
+    cursor: default;
+}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
index 6b88138f81..8a48b2f032 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
@@ -32,15 +32,18 @@
         *ngIf="dataSource && dataSource.length > 0"
       >more_horiz</mat-icon>
       <mat-menu #selectionMenu="matMenu" [overlapTrigger]="false">
-        <div mat-menu-item disabled="{{ !hasOfflineTransports }}" (click)="removeOffline()">
-          {{ 'transports.remove-all-offline' | translate }}
-        </div>
         <div mat-menu-item (click)="changeAllSelections(true)">
           {{ 'selection.select-all' | translate }}
         </div>
         <div mat-menu-item (click)="changeAllSelections(false)">
           {{ 'selection.unselect-all' | translate }}
         </div>
+        <div mat-menu-item disabled="{{ !hasSelectedElements() }}" (click)="changeIfPersistentOfSelected(true)">
+          {{ 'transports.make-selected-persistent' | translate }}
+        </div>
+        <div mat-menu-item disabled="{{ !hasSelectedElements() }}" (click)="changeIfPersistentOfSelected(false)">
+          {{ 'transports.make-selected-non-persistent' | translate }}
+        </div>
         <div mat-menu-item disabled="{{ !hasSelectedElements() }}" (click)="deleteSelected()">
           {{ 'selection.delete-all' | translate }}
         </div>
@@ -70,9 +73,9 @@
     <!-- Column names. -->
     <tr>
       <th></th>
-      <th class="sortable-column" (click)="dataSorter.changeSortingOrder(stateSortData)" [matTooltip]="'transports.state-tooltip' | translate">
-        <span class="dot-outline-white"></span>
-        <mat-icon *ngIf="dataSorter.currentSortingColumn === stateSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+      <th class="sortable-column small-column" (click)="dataSorter.changeSortingOrder(persistentSortData)" [matTooltip]="'transports.persistent-tooltip' | translate">
+        <mat-icon class="persistent-icon grey-text">star_outline</mat-icon>
+        <mat-icon *ngIf="dataSorter.currentSortingColumn === persistentSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
       </th>
       <th class="sortable-column" (click)="dataSorter.changeSortingOrder(idSortData)">
         {{ 'transports.id' | translate }}
@@ -103,7 +106,7 @@
       <th class="actions"></th>
     </tr>
     <!-- Values. -->
-    <tr *ngFor="let transport of dataSource">
+    <tr *ngFor="let transport of dataSource" [ngClass]="{ 'offline': transport.notFound }">
       <td class="selection-col">
         <mat-checkbox
           [checked]="selections.get(transport.id)"
@@ -111,9 +114,26 @@
         </mat-checkbox>
       </td>
       <td>
-        <span [class]="transportStatusClass(transport, true)" [matTooltip]="transportStatusText(transport, true) | translate"></span>
+        <button
+          *ngIf="transport.isPersistent"
+          (click)="changeIfPersistent([transport], false)"
+          mat-icon-button
+          [matTooltip]="'transports.persistent-transport-button-tooltip' | translate"
+          class="action-button subtle-transparent-button"
+        >
+          <mat-icon [inline]="true" class="persistent-icon default-cursor">star</mat-icon>
+        </button>
+        <button
+          *ngIf="!transport.isPersistent"
+          (click)="changeIfPersistent([transport], true)"
+          mat-icon-button
+          [matTooltip]="'transports.non-persistent-transport-button-tooltip' | translate"
+          class="action-button subtle-transparent-button"
+        >
+          <mat-icon [inline]="true" class="persistent-icon grey-text">star_outline</mat-icon>
+        </button>
       </td>
-      <td>
+      <td *ngIf="!!!transport.notFound">
         <app-labeled-element-text
           [short]="true"
           id="{{ transport.id }}"
@@ -121,6 +141,10 @@
           (labelEdited)="refreshData()"
           [elementType]="labeledElementTypes.Transport">
         </app-labeled-element-text>
+        <span *ngIf="transport.notFound">{{ 'transports.offline' | translate }}</span>
+      </td>
+      <td *ngIf="transport.notFound">
+        {{ 'transports.offline' | translate }}
       </td>
       <td>
         <app-labeled-element-text
@@ -133,14 +157,21 @@
       <td>
         {{ transport.type }}
       </td>
-      <td>
+      <td *ngIf="!!!transport.notFound">
         {{ transport.sent | autoScale }}
       </td>
-      <td>
+      <td *ngIf="!!!transport.notFound">
         {{ transport.recv | autoScale }}
       </td>
+      <td *ngIf="transport.notFound">
+        {{ 'transports.offline' | translate }}
+      </td>
+      <td *ngIf="transport.notFound">
+        {{ 'transports.offline' | translate }}
+      </td>
       <td class="actions">
         <button
+          *ngIf="!transport.notFound"
           (click)="details(transport)"
           mat-icon-button
           [matTooltip]="'transports.details.title' | translate"
@@ -149,7 +180,8 @@
           <mat-icon [inline]="true">visibility</mat-icon>
         </button>
         <button
-          (click)="delete(transport.id)"
+          *ngIf="!transport.notFound"
+          (click)="delete(transport)"
           mat-icon-button
           [matTooltip]="'transports.delete' | translate"
           class="action-button transparent-button"
@@ -183,7 +215,7 @@
     </td></tr>
     <!-- Values. -->
     <tr *ngFor="let transport of dataSource"><td>
-      <div class="list-item-container">
+      <div class="list-item-container" [ngClass]="{ 'offline': transport.notFound }">
         <div class="check-part">
           <mat-checkbox
             [checked]="selections.get(transport.id)"
@@ -191,17 +223,21 @@
           </mat-checkbox>
         </div>
         <div class="left-part">
-          <div class="list-row">
-            <span class="title">{{ 'transports.state' | translate }}</span>:
-            <span [class]="transportStatusClass(transport, false) + ' title'">{{ transportStatusText(transport, false) | translate }}</span>
+          <div class="list-row" *ngIf="transport.isPersistent">
+            <div class="list-row">
+              <mat-icon class="persistent-icon" [inline]="true">star</mat-icon>&nbsp;
+              <span class="yellow-clear-text title">{{ 'transports.persistent' | translate }}</span>
+            </div>
           </div>
           <div class="list-row long-content">
             <span class="title">{{ 'transports.id' | translate }}</span>:
             <app-labeled-element-text
+              *ngIf="!!!transport.notFound"
               id="{{ transport.id }}"
               (labelEdited)="refreshData()"
               [elementType]="labeledElementTypes.Transport">
             </app-labeled-element-text>
+            <ng-container *ngIf="transport.notFound">{{ 'transports.offline' | translate }}</ng-container>
           </div>
           <div class="list-row long-content">
             <span class="title">{{ 'transports.remote-node' | translate }}</span>:
@@ -216,11 +252,13 @@
           </div>
           <div class="list-row">
             <span class="title">{{ 'common.uploaded' | translate }}</span>:
-            {{ transport.sent | autoScale }}
+            <ng-container *ngIf="!!!transport.notFound">{{ transport.sent | autoScale }}</ng-container>
+            <ng-container *ngIf="transport.notFound">{{ 'transports.offline' | translate }}</ng-container>
           </div>
           <div class="list-row">
             <span class="title">{{ 'common.downloaded' | translate }}</span>:
-            {{ transport.recv | autoScale }}
+            <ng-container *ngIf="!!!transport.notFound">{{ transport.recv | autoScale }}</ng-container>
+            <ng-container *ngIf="transport.notFound">{{ 'transports.offline' | translate }}</ng-container>
           </div>
         </div>
         <div class="margin-part"></div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
index b4e0352459..a6512a5e70 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
@@ -1,4 +1,5 @@
 @import "bootstrap_overrides";
+@import "variables";
 
 .overflow {
   display: block;
@@ -19,3 +20,17 @@
   vertical-align: middle;
   margin-right: 10px;
 }
+
+.small-column {
+  width: 1px;
+  text-align: center;
+}
+
+.persistent-icon {
+  font-size: 14px !important;
+  color: $yellow;
+}
+
+.offline {
+  opacity: 0.35;
+}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
index 6d4c2220ba..896db8c09c 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
@@ -1,10 +1,10 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { Observable, Subscription, forkJoin } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
-import { Transport } from '../../../../../app.datatypes';
+import { Node, PersistentTransport, Transport } from '../../../../../app.datatypes';
 import { CreateTransportComponent } from './create-transport/create-transport.component';
 import { TransportService } from '../../../../../services/transport.service';
 import { NodeComponent } from '../../node.component';
@@ -21,6 +21,7 @@ import { LabeledElementTypes, StorageService } from 'src/app/services/storage.se
 import { LabeledElementTextComponent } from 'src/app/components/layout/labeled-element-text/labeled-element-text.component';
 import { DataSorter, SortingColumn, SortingModes } from 'src/app/utils/lists/data-sorter';
 import { DataFilterer } from 'src/app/utils/lists/data-filterer';
+import { NodeService } from 'src/app/services/node.service';
 
 /**
  * Shows the list of transports of a node. I can be used to show a short preview, with just some
@@ -35,10 +36,10 @@ export class TransportListComponent implements OnDestroy {
   // Small text for identifying the list, needed for the helper objects.
   private readonly listId = 'tr';
 
-  @Input() nodePK: string;
+  nodePK: string;
 
   // Vars with the data of the columns used for sorting the data.
-  stateSortData = new SortingColumn(['isUp'], 'transports.state', SortingModes.Boolean);
+  persistentSortData = new SortingColumn(['isPersistent'], 'transports.persistent', SortingModes.Boolean);
   idSortData = new SortingColumn(['id'], 'transports.id', SortingModes.Text, ['id_label']);
   remotePkSortData = new SortingColumn(['remotePk'], 'transports.remote-node', SortingModes.Text, ['remote_pk_label']);
   typeSortData = new SortingColumn(['type'], 'transports.type', SortingModes.Text);
@@ -69,16 +70,43 @@ export class TransportListComponent implements OnDestroy {
     this.dataSorter.setData(this.filteredTransports);
   }
 
+  currentNode: Node;
   allTransports: Transport[];
   filteredTransports: Transport[];
   transportsToShow: Transport[];
-  hasOfflineTransports = false;
   numberOfPages = 1;
   currentPage = 1;
   // Used as a helper var, as the URL is read asynchronously.
   currentPageInUrl = 1;
-  @Input() set transports(val: Transport[]) {
-    this.allTransports = val;
+  @Input() set node(val: Node) {
+    this.currentNode = val;
+    this.allTransports = val.transports;
+    this.nodePK = val.localPk;
+
+    const persistentTransportsMap: Map<String, PersistentTransport> = new Map<String, PersistentTransport>();
+    val.persistentTransports.forEach(pt => persistentTransportsMap.set(this.getPersistentTransportID(pt.pk, pt.type), pt));
+
+    this.allTransports.forEach(transport => {
+      if (persistentTransportsMap.has(this.getPersistentTransportID(transport.remotePk, transport.type))) {
+        transport.isPersistent = true;
+        persistentTransportsMap.delete(this.getPersistentTransportID(transport.remotePk, transport.type));
+      } else {
+        transport.isPersistent = false;
+      }
+    });
+
+    persistentTransportsMap.forEach((persistentTransport, key) => {
+      this.allTransports.push({
+        id: this.getPersistentTransportID(persistentTransport.pk, persistentTransport.type),
+        localPk: val.localPk,
+        remotePk: persistentTransport.pk,
+        type: persistentTransport.type,
+        recv: 0,
+        sent: 0,
+        isPersistent: true,
+        notFound: true,
+      });
+    });
 
     // Add the label data to the array, to be able to use it for filtering and sorting.
     this.allTransports.forEach(transport => {
@@ -95,21 +123,21 @@ export class TransportListComponent implements OnDestroy {
   // Array with the properties of the columns that can be used for filtering the data.
   filterProperties: FilterProperties[] = [
     {
-      filterName: 'transports.filter-dialog.online',
-      keyNameInElementsArray: 'isUp',
+      filterName: 'transports.filter-dialog.persistent',
+      keyNameInElementsArray: 'isPersistent',
       type: FilterFieldTypes.Select,
       printableLabelsForValues: [
         {
           value: '',
-          label: 'transports.filter-dialog.online-options.any',
+          label: 'transports.filter-dialog.persistent-options.any',
         },
         {
           value: 'true',
-          label: 'transports.filter-dialog.online-options.online',
+          label: 'transports.filter-dialog.persistent-options.persistent',
         },
         {
           value: 'false',
-          label: 'transports.filter-dialog.online-options.offline',
+          label: 'transports.filter-dialog.persistent-options.non-persistent',
         }
       ],
     },
@@ -131,6 +159,7 @@ export class TransportListComponent implements OnDestroy {
 
   labeledElementTypes = LabeledElementTypes;
 
+  private persistentTransportSubscription: Subscription;
   private navigationsSubscription: Subscription;
   private operationSubscriptionsGroup: Subscription[] = [];
   private languageSubscription: Subscription;
@@ -143,10 +172,11 @@ export class TransportListComponent implements OnDestroy {
     private snackbarService: SnackbarService,
     private translateService: TranslateService,
     private storageService: StorageService,
+    private nodeService: NodeService,
   ) {
     // Initialize the data sorter.
     const sortableColumns: SortingColumn[] = [
-      this.stateSortData,
+      this.persistentSortData,
       this.idSortData,
       this.remotePkSortData,
       this.typeSortData,
@@ -163,14 +193,6 @@ export class TransportListComponent implements OnDestroy {
     this.dataFiltererSubscription = this.dataFilterer.dataFiltered.subscribe(data => {
       this.filteredTransports = data;
 
-      // Check if there are offline transports.
-      this.hasOfflineTransports = false;
-      this.filteredTransports.forEach(transport => {
-        if (!transport.isUp) {
-          this.hasOfflineTransports = true;
-        }
-      });
-
       this.dataSorter.setData(this.filteredTransports);
     });
 
@@ -191,7 +213,7 @@ export class TransportListComponent implements OnDestroy {
     // Refresh the data after languaje changes, to ensure the labels used for filtering
     // are updated.
     this.languageSubscription = this.translateService.onLangChange.subscribe(() => {
-      this.transports = this.allTransports;
+      this.node = this.currentNode;
     });
   }
 
@@ -205,33 +227,9 @@ export class TransportListComponent implements OnDestroy {
 
     this.dataFiltererSubscription.unsubscribe();
     this.dataFilterer.dispose();
-  }
-
-  /**
-   * Returns the scss class to be used to show the current status of the transport.
-   * @param forDot If true, returns a class for creating a colored dot. If false,
-   * returns a class for a colored text.
-   */
-  transportStatusClass(transport: Transport, forDot: boolean): string {
-    switch (transport.isUp) {
-      case true:
-        return forDot ? 'dot-green' : 'green-clear-text';
-      default:
-        return forDot ? 'dot-red' : 'red-clear-text';
-    }
-  }
 
-  /**
-   * Returns the text to be used to indicate the current status of a transport.
-   * @param forTooltip If true, returns a text for a tooltip. If false, returns a
-   * text for the transport list shown on small screens.
-   */
-  transportStatusText(transport: Transport, forTooltip: boolean): string {
-    switch (transport.isUp) {
-      case true:
-        return 'transports.statuses.online' + (forTooltip ? '-tooltip' : '');
-      default:
-        return 'transports.statuses.offline' + (forTooltip ? '-tooltip' : '');
+    if (this.persistentTransportSubscription) {
+      this.persistentTransportSubscription.unsubscribe();
     }
   }
 
@@ -294,36 +292,6 @@ export class TransportListComponent implements OnDestroy {
     });
   }
 
-  /**
-   * Removes all offline transports.
-   */
-  removeOffline() {
-    let confirmationText = 'transports.remove-all-offline-confirmation';
-    if (this.dataFilterer.currentFiltersTexts && this.dataFilterer.currentFiltersTexts.length > 0) {
-      confirmationText = 'transports.remove-all-filtered-offline-confirmation';
-    }
-
-    const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, confirmationText);
-
-    confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
-      // Prepare all offline transports to be removed.
-      const transportsToRemove: string[] = [];
-      this.filteredTransports.forEach(transport => {
-        if (!transport.isUp) {
-          transportsToRemove.push(transport.id);
-        }
-      });
-
-      if (transportsToRemove.length > 0) {
-        // Remove the transports.
-        confirmationDialog.componentInstance.showProcessing();
-        this.deleteRecursively(transportsToRemove, confirmationDialog);
-      } else {
-        confirmationDialog.close();
-      }
-    });
-  }
-
   /**
    * Shows the transport creation modal window.
    */
@@ -335,23 +303,142 @@ export class TransportListComponent implements OnDestroy {
    * Opens the modal window used on small screens with the options of an element.
    */
   showOptionsDialog(transport: Transport) {
-    const options: SelectableOption[] = [
-      {
+    const options: SelectableOption[] = [];
+    if (transport.isPersistent) {
+      options.push({
+        icon: 'star_outline',
+        label: 'transports.make-non-persistent',
+      });
+    } else {
+      options.push({
+        icon: 'star',
+        label: 'transports.make-persistent',
+      });
+    }
+
+    if (!transport.notFound) {
+      options.push({
         icon: 'visibility',
         label: 'transports.details.title',
-      },
-      {
+      });
+      options.push({
         icon: 'close',
         label: 'transports.delete',
-      }
-    ];
+      });
+    }
 
     SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
-        this.details(transport);
+        this.changeIfPersistent([transport], !transport.isPersistent);
       } else if (selectedOption === 2) {
-        this.delete(transport.id);
+        this.details(transport);
+      } else if (selectedOption === 3) {
+        this.delete(transport);
+      }
+    });
+  }
+
+  /**
+   * Adds or removes the selected transports from the persistent transports list.
+   */
+  changeIfPersistentOfSelected(makePersistent: boolean) {
+    const elementsToChange: Transport[] = [];
+    this.allTransports.forEach(t => {
+      if (this.selections.has(t.id) && this.selections.get(t.id)) {
+        elementsToChange.push(t);
+      }
+    });
+    this.changeIfPersistent(elementsToChange, makePersistent);
+  }
+
+  /**
+   * Adds or removes transports from the persistent transports list.
+   */
+  changeIfPersistent(transports: Transport[], makePersistent: boolean) {
+    if (transports.length < 1) {
+      return;
+    }
+
+    let confirmationText = 'transports.';
+    if (transports.length === 1) {
+      if (makePersistent) {
+        confirmationText += 'make-persistent-confirmation';
+      } else {
+        confirmationText += 'make' + (transports[0].notFound ? '-offline' : '') + '-non-persistent-confirmation';
       }
+    } else {
+      confirmationText += makePersistent ? 'make-selected-persistent-confirmation' : 'make-selected-non-persistent-confirmation';
+    }
+
+    const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, confirmationText);
+
+    confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
+      confirmationDialog.componentInstance.showProcessing();
+
+      this.persistentTransportSubscription = this.nodeService.getNode(this.nodePK).subscribe((nodeData: Node) => {
+        const dataToUse = nodeData.persistentTransports;
+        let nothingToDo = false;
+
+        const transportsMap: Map<String, Transport> = new Map<String, Transport>();
+        transports.forEach(t => transportsMap.set(this.getPersistentTransportID(t.remotePk, t.type), t));
+
+        if (makePersistent) {
+          // Remove al transports that already are persistent.
+          dataToUse.forEach(tp => {
+            if (transportsMap.has(this.getPersistentTransportID(tp.pk, tp.type))) {
+              transportsMap.delete(this.getPersistentTransportID(tp.pk, tp.type));
+            }
+          });
+
+          nothingToDo = transportsMap.size === 0;
+
+          // Add the new transports to the persistent transports list.
+          if (!nothingToDo) {
+            transportsMap.forEach(t => {
+              dataToUse.push({
+                pk: t.remotePk,
+                type: t.type,
+              });
+            });
+          }
+        } else {
+          nothingToDo = true;
+          // Remove all selected transports.
+          for (let i = 0; i < dataToUse.length; i++) {
+            if (transportsMap.has(this.getPersistentTransportID(dataToUse[i].pk, dataToUse[i].type))) {
+              dataToUse.splice(i);
+              nothingToDo = false;
+              i--;
+            }
+          }
+        }
+
+        if (!nothingToDo) {
+          // Update the list.
+          this.persistentTransportSubscription = this.transportService.savePersistentTransportsData(
+            NodeComponent.getCurrentNodeKey(),
+            dataToUse
+          ).subscribe(() => {
+            confirmationDialog.close();
+            // Make the parent page reload the data.
+            NodeComponent.refreshCurrentDisplayedData();
+            this.snackbarService.showDone('transports.changes-made');
+          }, (err: OperationError) => {
+            err = processServiceError(err);
+            confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
+          });
+        } else {
+          // The persistent transport list already has or not (as needed) the transport.
+          confirmationDialog.close();
+          this.snackbarService.showDone('transports.no-changes-needed');
+
+          // Make the parent page reload the data, to make sure the UI shows the correct values.
+          NodeComponent.refreshCurrentDisplayedData();
+        }
+      }, (err: OperationError) => {
+        err = processServiceError(err);
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
+      });
     });
   }
 
@@ -365,14 +452,15 @@ export class TransportListComponent implements OnDestroy {
   /**
    * Deletes a specific element.
    */
-  delete(id: string) {
-    const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, 'transports.delete-confirmation');
+  delete(transport: Transport) {
+    const confirmationMsg = 'transports.delete-' + (transport.isPersistent ? 'persistent-' : '') + 'confirmation';
+    const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, confirmationMsg);
 
     confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
       confirmationDialog.componentInstance.showProcessing();
 
       // Start the operation and save it for posible cancellation.
-      this.operationSubscriptionsGroup.push(this.startDeleting(id).subscribe(() => {
+      this.operationSubscriptionsGroup.push(this.startDeleting(transport.id).subscribe(() => {
         confirmationDialog.close();
         // Make the parent page reload the data.
         NodeComponent.refreshCurrentDisplayedData();
@@ -391,6 +479,10 @@ export class TransportListComponent implements OnDestroy {
     NodeComponent.refreshCurrentDisplayedData();
   }
 
+  private getPersistentTransportID(pk: string, type: string): string {
+    return pk.toUpperCase() + type.toUpperCase();
+  }
+
   /**
    * Recalculates which elements should be shown on the UI.
    */
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..ff20c54b6d 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -602,7 +602,7 @@ export class NodeService {
   /**
    * Gets the details of a specific node.
    */
-  private getNode(nodeKey: string): Observable<Node> {
+  public getNode(nodeKey: string): Observable<Node> {
     // Get the node data.
     return this.apiService.get(`visors/${nodeKey}/summary`).pipe(
       map((response: any) => {
@@ -641,7 +641,6 @@ export class NodeService {
         if (response.overview.transports) {
           (response.overview.transports as any[]).forEach(transport => {
             node.transports.push({
-              isUp: transport.is_up,
               id: transport.id,
               localPk: transport.local_pk,
               remotePk: transport.remote_pk,
@@ -652,6 +651,17 @@ export class NodeService {
           });
         }
 
+        // Persistent Transports.
+        node.persistentTransports = [];
+        if (response.persistent_transports) {
+          (response.persistent_transports as any[]).forEach(persistentTransport => {
+            node.persistentTransports.push({
+              pk: persistentTransport.pk,
+              type: persistentTransport.type,
+            });
+          });
+        }
+
         // Routes.
         node.routes = [];
         if (response.routes) {
diff --git a/static/skywire-manager-src/src/app/services/transport.service.ts b/static/skywire-manager-src/src/app/services/transport.service.ts
index d4c6e59596..818a91d4cf 100644
--- a/static/skywire-manager-src/src/app/services/transport.service.ts
+++ b/static/skywire-manager-src/src/app/services/transport.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { PersistentTransport } from '../app.datatypes';
 
 import { ApiService } from './api.service';
 
@@ -37,6 +38,10 @@ export class TransportService {
     return this.apiService.delete(`visors/${nodeKey}/transports/${transportId}`);
   }
 
+  savePersistentTransportsData(nodeKey: string, newData: PersistentTransport[]) {
+    return this.apiService.put(`visors/${nodeKey}/persistent-transports`, newData);
+  }
+
   /**
    * Gets the list of the transport types the node can work with.
    */
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index 299f9f3bb7..a4121f0970 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."
@@ -451,34 +453,41 @@
 
   "transports": {
     "title": "Transports",
-    "remove-all-offline": "Remove all offline transports",
-    "remove-all-offline-confirmation": "Are you sure you want to remove all offline transports?",
-    "remove-all-filtered-offline-confirmation": "All offline transports satisfying the current filtering criteria will be removed. Are you sure you want to continue?",
     "info": "Connections you have with remote Skywire visors, to allow local Skywire apps to communicate with apps running on those remote visors.",
     "list-title": "Transport list",
-    "state": "State",
-    "state-tooltip": "Current state",
+    "offline": "Offline",
+    "persistent": "Persistent",
+    "persistent-tooltip": "Persistent transports, which are created automatically when the visor is turned on and are automatically recreated in case of disconnection.",
+    "persistent-transport-tooltip": "This transport is persistent, so it is created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+    "persistent-transport-button-tooltip": "This transport is persistent, so it is created automatically when the visor is turned on and automatically recreated in case of disconnection. Press to make non-persistent.",
+    "non-persistent-transport-button-tooltip": "Press to make this transport persistent. Persistent transports are created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+    "make-persistent": "Make persistent",
+    "make-non-persistent": "Make non-persistent",
+    "make-selected-persistent": "Make all selected persistent",
+    "make-selected-non-persistent": "Make all selected non-persistent",
+    "changes-made": "Changes made.",
+    "no-changes-needed": "No changes were needed.",
     "id": "ID",
     "remote-node": "Remote",
     "type": "Type",
     "create": "Create transport",
+    "make-persistent-confirmation": "Are you sure you want to make the transport persistent?",
+    "make-non-persistent-confirmation": "Are you sure you want to make the transport non-persistent?",
+    "make-selected-persistent-confirmation": "Are you sure you want to make the selected transports persistent?",
+    "make-selected-non-persistent-confirmation": "Are you sure you want to make the selected transports non-persistent?",
+    "make-offline-non-persistent-confirmation": "Are you sure you want to make the transport non-persistent? It will not be shown in the list while offline anymore.",
     "delete-confirmation": "Are you sure you want to delete the transport?",
+    "delete-persistent-confirmation": "This transport is persistent, so it may be recreated shortly after deletion. Are you sure you want to delete it?",
     "delete-selected-confirmation": "Are you sure you want to delete the selected transports?",
     "delete": "Delete transport",
     "deleted": "Delete operation completed.",
     "empty": "Visor doesn't have any transports.",
     "empty-with-filter": "No transport matches the selected filtering criteria.",
-    "statuses": {
-      "online": "Online",
-      "online-tooltip": "Transport is online",
-      "offline": "Offline",
-      "offline-tooltip": "Transport is offline"
-    },
     "details": {
       "title": "Details",
       "basic": {
         "title": "Basic info",
-        "state": "State:",
+        "persistent": "Persistent:",
         "id": "ID:",
         "local-pk": "Local public key:",
         "remote-pk": "Remote public key:",
@@ -503,14 +512,14 @@
       }
     },
     "filter-dialog": {
-      "online": "The transport must be",
+      "persistent": "The transport must be",
       "id": "The id must contain",
       "remote-node": "The remote key must contain",
 
-      "online-options": {
-        "any": "Online or offline",
-        "online": "Online",
-        "offline": "Offline"
+      "persistent-options": {
+        "any": "Any",
+        "persistent": "Persistent",
+        "non-persistent": "Non-persistent"
       }
     }
   },
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index 96e25b4e1d..0700f5f379 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": "Sí",
+    "no": "No",
     "unknown": "Desconocido",
     "close": "Cerrar",
     "window-size-error": "La ventana es demasiado estrecha para el contenido."
@@ -451,34 +453,41 @@
 
   "transports": {
     "title": "Transportes",
-    "remove-all-offline": "Remover todos los transportes offline",
-    "remove-all-offline-confirmation": "¿Seguro que desea remover todos los transportes offline?",
-    "remove-all-filtered-offline-confirmation": "Todos los transportes offline que satisfagan los criterios de filtrado actuales serán removidos. ¿Seguro que desea continuar?",
     "info": "Conexiones que tiene con visores remotos de Skywire, para permitir que las aplicaciones Skywire locales se comuniquen con las aplicaciones que se ejecutan en esos visores remotos.",
     "list-title": "Lista de transportes",
-    "state": "Estado",
-    "state-tooltip": "Estado actual",
+    "offline": "Offline",
+    "persistent": "Persistente",
+    "persistent-tooltip": "Transportes persistentes, los cuales son creados automáticamente al iniciar el visor y son recreados automáticamente en caso de desconexión.",
+    "persistent-transport-tooltip": "Este transporte es persistente, así que es creado automáticamente al iniciar el visor y es recreado automáticamente en caso de desconexión.",
+    "persistent-transport-button-tooltip": "Este transporte es persistente, así que es creado automáticamente al iniciar el visor y es recreado automáticamente en caso de desconexión. Presione aquí para volverlo no persistente.",
+    "non-persistent-transport-button-tooltip": "Presione aquí para volver persistente el transporte. Los transportes persistentes son creados automáticamente al iniciar el visor y son recreados automáticamente en caso de desconexión.",
+    "make-persistent": "Volver persistente",
+    "make-non-persistent": "Volver no persistente",
+    "make-selected-persistent": "Volver persistentes los seleccionados",
+    "make-selected-non-persistent": "Volver no persistentes los seleccionados",
+    "changes-made": "Cambios hechos.",
+    "no-changes-needed": "Ningún cambio fue necesario.",
     "id": "ID",
     "remote-node": "Remoto",
     "type": "Tipo",
     "create": "Crear transporte",
+    "make-persistent-confirmation": "¿Seguro que desea volver persistente el transporte?",
+    "make-non-persistent-confirmation": "¿Seguro que desea volver no persistente el transporte?",
+    "make-selected-persistent-confirmation": "¿Seguro que desea volver persistentes los transportes seleccionados?",
+    "make-selected-non-persistent-confirmation": "¿Seguro que desea volver no persistentes los transportes seleccionados?",
+    "make-offline-non-persistent-confirmation": "¿Seguro que desea volver no persistente el transporte? No seguirá siendo mostrado en la lista mientras se encuentre offline.",
     "delete-confirmation": "¿Seguro que desea borrar el transporte?",
+    "delete-persistent-confirmation": "Este transporte es persistente, así que puede ser recreado poco después de ser borrado. ¿Seguro que desea borrarlo?",
     "delete-selected-confirmation": "¿Seguro que desea borrar los transportes seleccionados?",
     "delete": "Borrar transporte",
     "deleted": "Operación de borrado completada.",
     "empty": "El visor no tiene ningún transporte.",
     "empty-with-filter": "Ningun transporte coincide con los criterios de filtrado seleccionados.",
-    "statuses": {
-      "online": "Online",
-      "online-tooltip": "El transporte está online",
-      "offline": "Offline",
-      "offline-tooltip": "El transporte está offline"
-    },
     "details": {
       "title": "Detalles",
       "basic": {
         "title": "Información básica",
-        "state": "Estado:",
+        "persistent": "Persistente:",
         "id": "ID:",
         "local-pk": "Llave pública local:",
         "remote-pk": "Llave pública remota:",
@@ -503,14 +512,14 @@
       }
     },
     "filter-dialog": {
-      "online": "El transporte debe estar",
+      "persistent": "El transporte debe ser",
       "id": "El id debe contener",
       "remote-node": "La llave remota debe contener",
 
-      "online-options": {
-        "any": "Online u offline",
-        "online": "Online",
-        "offline": "Offline"
+      "persistent-options": {
+        "any": "Cualquiera",
+        "persistent": "Persistente",
+        "non-persistent": "No persistente"
       }
     }
   },
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..81241f8227 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."
@@ -451,34 +453,41 @@
 
   "transports": {
     "title": "Transports",
-    "remove-all-offline": "Remove all offline transports",
-    "remove-all-offline-confirmation": "Are you sure you want to remove all offline transports?",
-    "remove-all-filtered-offline-confirmation": "All offline transports satisfying the current filtering criteria will be removed. Are you sure you want to continue?",
     "info": "Connections you have with remote Skywire visors, to allow local Skywire apps to communicate with apps running on those remote visors.",
     "list-title": "Transport list",
-    "state": "State",
-    "state-tooltip": "Current state",
+    "offline": "Offline",
+    "persistent": "Persistent",
+    "persistent-tooltip": "Persistent transports, which are created automatically when the visor is turned on and are automatically recreated in case of disconnection.",
+    "persistent-transport-tooltip": "This transport is persistent, so it is created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+    "persistent-transport-button-tooltip": "This transport is persistent, so it is created automatically when the visor is turned on and automatically recreated in case of disconnection. Press to make non-persistent.",
+    "non-persistent-transport-button-tooltip": "Press to make this transport persistent. Persistent transports are created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+    "make-persistent": "Make persistent",
+    "make-non-persistent": "Make non-persistent",
+    "make-selected-persistent": "Make all selected persistent",
+    "make-selected-non-persistent": "Make all selected non-persistent",
+    "changes-made": "Changes made.",
+    "no-changes-needed": "No changes were needed.",
     "id": "ID",
     "remote-node": "Remote",
     "type": "Type",
     "create": "Create transport",
+    "make-persistent-confirmation": "Are you sure you want to make the transport persistent?",
+    "make-non-persistent-confirmation": "Are you sure you want to make the transport non-persistent?",
+    "make-selected-persistent-confirmation": "Are you sure you want to make the selected transports persistent?",
+    "make-selected-non-persistent-confirmation": "Are you sure you want to make the selected transports non-persistent?",
+    "make-offline-non-persistent-confirmation": "Are you sure you want to make the transport non-persistent? It will not be shown in the list while offline anymore.",
     "delete-confirmation": "Are you sure you want to delete the transport?",
+    "delete-persistent-confirmation": "This transport is persistent, so it may be recreated shortly after deletion. Are you sure you want to delete it?",
     "delete-selected-confirmation": "Are you sure you want to delete the selected transports?",
     "delete": "Delete transport",
     "deleted": "Delete operation completed.",
     "empty": "Visor doesn't have any transports.",
     "empty-with-filter": "No transport matches the selected filtering criteria.",
-    "statuses": {
-      "online": "Online",
-      "online-tooltip": "Transport is online",
-      "offline": "Offline",
-      "offline-tooltip": "Transport is offline"
-    },
     "details": {
       "title": "Details",
       "basic": {
         "title": "Basic info",
-        "state": "State:",
+        "persistent": "Persistent:",
         "id": "ID:",
         "local-pk": "Local public key:",
         "remote-pk": "Remote public key:",
@@ -503,14 +512,14 @@
       }
     },
     "filter-dialog": {
-      "online": "The transport must be",
+      "persistent": "The transport must be",
       "id": "The id must contain",
       "remote-node": "The remote key must contain",
 
-      "online-options": {
-        "any": "Online or offline",
-        "online": "Online",
-        "offline": "Offline"
+      "persistent-options": {
+        "any": "Any",
+        "persistent": "Persistent",
+        "non-persistent": "Non-persistent"
       }
     }
   },
diff --git a/static/skywire-manager-src/src/assets/scss/_text.scss b/static/skywire-manager-src/src/assets/scss/_text.scss
index 012e6c80b7..fe2c883c00 100644
--- a/static/skywire-manager-src/src/assets/scss/_text.scss
+++ b/static/skywire-manager-src/src/assets/scss/_text.scss
@@ -45,3 +45,7 @@ span {
 .red-clear-text {
   color: $red-clear;
 }
+
+.grey-text {
+  color: $light-gray !important;
+}

From 2e81d689b4020172fbd0527e84171ea6f9a3a059 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sat, 28 Aug 2021 22:05:52 -0400
Subject: [PATCH 12/19] Allow to create persistent transports from the popup

---
 .../create-transport.component.html           |   9 ++
 .../create-transport.component.ts             | 126 ++++++++++++++----
 .../src/assets/i18n/en.json                   |   3 +
 .../src/assets/i18n/es.json                   |   3 +
 .../src/assets/i18n/es_base.json              |   3 +
 5 files changed, 120 insertions(+), 24 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html
index cf9b9a931e..fc01da9c8e 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html
@@ -39,6 +39,15 @@
         {{ 'transports.dialog.errors.transport-type-error' | translate }}
       </mat-error>
     </mat-form-field>
+
+    <mat-checkbox
+      color="primary"
+      [checked]="makePersistent"
+      (change)="setMakePersistent($event)"
+    >
+      {{ 'transports.dialog.make-persistent' | translate }}
+      <mat-icon [inline]="true" class="help-icon" [matTooltip]="'transports.dialog.persistent-tooltip' | translate">help</mat-icon>
+    </mat-checkbox>
   </form>
 
   <app-button
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
index e34f2de727..93ff5117ca 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
@@ -12,6 +12,8 @@ import { AppConfig } from 'src/app/app.config';
 import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
 import { LabeledElementTypes, StorageService } from 'src/app/services/storage.service';
+import { NodeService } from 'src/app/services/node.service';
+import { PersistentTransport } from 'src/app/app.datatypes';
 
 /**
  * Modal window used for creating trnasports. It creates the transport and shows a
@@ -28,6 +30,8 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
   types: string[];
   form: FormGroup;
 
+  makePersistent = false;
+
   private shouldShowError = true;
   private dataSubscription: Subscription;
   private operationSubscription: Subscription;
@@ -49,6 +53,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
     private dialogRef: MatDialogRef<CreateTransportComponent>,
     private snackbarService: SnackbarService,
     private storageService: StorageService,
+    private nodeService: NodeService,
   ) { }
 
   ngOnInit() {
@@ -74,6 +79,13 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Used by the checkbox for the persistent setting.
+   */
+   setMakePersistent(event) {
+    this.makePersistent = event.checked ? true : false;
+  }
+
   /**
    * Creates the transport.
    */
@@ -84,37 +96,103 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
 
     this.button.showLoading();
 
-    this.operationSubscription = this.transportService.create(
-      // The node pk is obtained from the currently openned node page.
+    const newTransportPk: string = this.form.get('remoteKey').value;
+    const newTransportType: string = this.form.get('type').value;
+    const newTransportLabel: string = this.form.get('label').value;
+
+    if (this.makePersistent) {
+      // Check the current visor config.
+      this.operationSubscription = this.nodeService.getNode(NodeComponent.getCurrentNodeKey()).subscribe(nodeData => {
+        let noNeedToAddToPersistents = false;
+
+        // Check if the transport is already in the persistent list.
+        nodeData.persistentTransports.forEach(t => {
+          if (t.pk.toUpperCase() === newTransportPk.toUpperCase() && t.type.toUpperCase() === newTransportType.toUpperCase()) {
+            noNeedToAddToPersistents = true;
+          }
+        });
+
+        if (noNeedToAddToPersistents) {
+          this.createTransport(newTransportPk, newTransportType, newTransportLabel, true);
+        } else {
+          this.createPersistent(nodeData.persistentTransports, newTransportPk, newTransportType, newTransportLabel);
+        }
+      }, err => {
+        this.onError(err);
+      });
+    } else {
+      this.createTransport(newTransportPk, newTransportType, newTransportLabel, false);
+    }
+  }
+
+  /**
+   * Updates the persistent transports list.
+   * @param currentList Current persistent transports list.
+   * @param newTransportPk Public key of the new transport.
+   * @param newTransportType Type of the new transport.
+   */
+  private createPersistent(
+    currentList: PersistentTransport[],
+    newTransportPk: string,
+    newTransportType: string,
+    newTransportLabel: string
+  ) {
+    // Add the new transport.
+    currentList.push({
+      pk: newTransportPk,
+      type: newTransportType,
+    });
+
+    this.operationSubscription = this.transportService.savePersistentTransportsData(
       NodeComponent.getCurrentNodeKey(),
-      this.form.get('remoteKey').value,
-      this.form.get('type').value,
-    ).subscribe({
-      next: this.onSuccess.bind(this),
-      error: this.onError.bind(this)
+      currentList
+    ).subscribe(() => {
+      this.createTransport(newTransportPk, newTransportType, newTransportLabel, true);
+    }, err => {
+      this.onError(err);
     });
   }
 
-  private onSuccess(response: any) {
-    // Save the label.
-    const label = this.form.get('label').value;
-    let errorSavingLabel = false;
-    if (label) {
-      if (response && response.id) {
-        this.storageService.saveLabel(response.id, label, LabeledElementTypes.Transport);
-      } else {
-        errorSavingLabel = true;
+  /**
+   * Creates a transport with the data entered in the form.
+   * @param newTransportPk Public key of the new transport.
+   * @param newTransportType Type of the new transport.
+   */
+  private createTransport(newTransportPk: string, newTransportType: string, newTransportLabel: string, creatingAfterPersistent: boolean) {
+    this.operationSubscription = this.transportService.create(
+      // The node pk is obtained from the currently openned node page.
+      NodeComponent.getCurrentNodeKey(),
+      newTransportPk,
+      newTransportType,
+    ).subscribe(response => {
+      // Save the label.
+      let errorSavingLabel = false;
+      if (newTransportLabel) {
+        if (response && response.id) {
+          this.storageService.saveLabel(response.id, newTransportLabel, LabeledElementTypes.Transport);
+        } else {
+          errorSavingLabel = true;
+        }
       }
-    }
 
-    NodeComponent.refreshCurrentDisplayedData();
-    this.dialogRef.close();
+      NodeComponent.refreshCurrentDisplayedData();
+      this.dialogRef.close();
 
-    if (!errorSavingLabel) {
-      this.snackbarService.showDone('transports.dialog.success');
-    } else {
-      this.snackbarService.showWarning('transports.dialog.success-without-label');
-    }
+      if (!errorSavingLabel) {
+        this.snackbarService.showDone('transports.dialog.success');
+      } else {
+        this.snackbarService.showWarning('transports.dialog.success-without-label');
+      }
+    }, err => {
+      if (!creatingAfterPersistent) {
+        this.onError(err);
+      } else {
+        NodeComponent.refreshCurrentDisplayedData();
+        this.dialogRef.close();
+
+        this.snackbarService.showWarning('transports.dialog.only-persistent-created');
+      }
+    });
   }
 
   private onError(err: OperationError) {
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index a4121f0970..c3114dd5f6 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -503,6 +503,9 @@
       "remote-key": "Remote public key",
       "label": "Identification name (optional)",
       "transport-type": "Transport type",
+      "make-persistent": "Make persistent",
+      "persistent-tooltip": "Persistent transports are created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+      "only-persistent-created": "The persistent transport was created, but it may have not been activated.",
       "success": "Transport created.",
       "success-without-label": "The transport was created, but it was not possible to save the label.",
       "errors": {
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index 0700f5f379..275447f717 100644
--- a/static/skywire-manager-src/src/assets/i18n/es.json
+++ b/static/skywire-manager-src/src/assets/i18n/es.json
@@ -503,6 +503,9 @@
       "remote-key": "Llave pública remota",
       "label": "Nombre del transporte (opcional)",
       "transport-type": "Tipo de transporte",
+      "make-persistent": "Hacer persistente",
+      "persistent-tooltip": "Los transportes persistentes son creados automáticamente al iniciar el visor y son recreados automáticamente en caso de desconexión.",
+      "only-persistent-created": "El transporte persistente fue creado, pero podría no haber sido activado.",
       "success": "Transporte creado.",
       "success-without-label": "El transporte fue creado, pero no fue posible guardar la etiqueta.",
       "errors": {
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 81241f8227..32fce6fe03 100644
--- a/static/skywire-manager-src/src/assets/i18n/es_base.json
+++ b/static/skywire-manager-src/src/assets/i18n/es_base.json
@@ -503,6 +503,9 @@
       "remote-key": "Remote public key",
       "label": "Identification name (optional)",
       "transport-type": "Transport type",
+      "make-persistent": "Make persistent",
+      "persistent-tooltip": "Persistent transports are created automatically when the visor is turned on and automatically recreated in case of disconnection.",
+      "only-persistent-created": "The persistent transport was created, but it may have not been activated.",
       "success": "Transport created.",
       "success-without-label": "The transport was created, but it was not possible to save the label.",
       "errors": {

From 06dadba6367e3c5de8e87140054ae061226ec1d8 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Tue, 31 Aug 2021 18:34:07 +0530
Subject: [PATCH 13/19] Add depricated public field to reqBody

---
 pkg/visor/hypervisor.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/visor/hypervisor.go b/pkg/visor/hypervisor.go
index 1b926f0573..e565884ab5 100644
--- a/pkg/visor/hypervisor.go
+++ b/pkg/visor/hypervisor.go
@@ -778,6 +778,7 @@ func (hv *Hypervisor) postTransport() http.HandlerFunc {
 		var reqBody struct {
 			TpType string        `json:"transport_type"`
 			Remote cipher.PubKey `json:"remote_pk"`
+			Public bool          `json:"public"` // Depricated, remove it from the UI request first.
 		}
 
 		if err := httputil.ReadJSON(r, &reqBody); err != nil {

From e1150dd120acffefea4237cc7617499e1d14c8f1 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Thu, 2 Sep 2021 17:00:04 +0530
Subject: [PATCH 14/19] Remove public field from postTransport

---
 pkg/visor/hypervisor.go | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pkg/visor/hypervisor.go b/pkg/visor/hypervisor.go
index e565884ab5..1b926f0573 100644
--- a/pkg/visor/hypervisor.go
+++ b/pkg/visor/hypervisor.go
@@ -778,7 +778,6 @@ func (hv *Hypervisor) postTransport() http.HandlerFunc {
 		var reqBody struct {
 			TpType string        `json:"transport_type"`
 			Remote cipher.PubKey `json:"remote_pk"`
-			Public bool          `json:"public"` // Depricated, remove it from the UI request first.
 		}
 
 		if err := httputil.ReadJSON(r, &reqBody); err != nil {

From 7aee67162e4403955fd30ef0a38f75fac20fc97a Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 2 Sep 2021 07:39:45 -0400
Subject: [PATCH 15/19] Fix creating transports from the UI

---
 static/skywire-manager-src/src/app/services/transport.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/static/skywire-manager-src/src/app/services/transport.service.ts b/static/skywire-manager-src/src/app/services/transport.service.ts
index d4c6e59596..aebb5dc0be 100644
--- a/static/skywire-manager-src/src/app/services/transport.service.ts
+++ b/static/skywire-manager-src/src/app/services/transport.service.ts
@@ -23,7 +23,6 @@ export class TransportService {
   create(nodeKey: string, remoteKey: string, type: string): Observable<any> {
     const data = {
       remote_pk: remoteKey,
-      public: true,
     };
 
     if (type) {

From 4fc3a18d30514e77edd9610fed3664281d019994 Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Thu, 2 Sep 2021 17:13:05 +0530
Subject: [PATCH 16/19] Add GetPersistentTransports

---
 pkg/visor/api.go        |  6 ++++++
 pkg/visor/hypervisor.go | 12 ++++++++++++
 pkg/visor/rpc_client.go | 12 ++++++++++++
 3 files changed, 30 insertions(+)

diff --git a/pkg/visor/api.go b/pkg/visor/api.go
index 0240605687..744ff20dd4 100644
--- a/pkg/visor/api.go
+++ b/pkg/visor/api.go
@@ -76,6 +76,7 @@ type API interface {
 
 	SetMinHops(uint16) error
 
+	GetPersistentTransports() ([]transport.PersistentTransports, error)
 	SetPersistentTransports([]transport.PersistentTransports) error
 }
 
@@ -787,3 +788,8 @@ func (v *Visor) SetMinHops(in uint16) error {
 func (v *Visor) SetPersistentTransports(pts []transport.PersistentTransports) error {
 	return v.conf.UpdatePersistentTransports(pts)
 }
+
+// GetPersistentTransports sets min_hops routing config of visor
+func (v *Visor) GetPersistentTransports() ([]transport.PersistentTransports, error) {
+	return v.conf.GetPersistentTransports()
+}
diff --git a/pkg/visor/hypervisor.go b/pkg/visor/hypervisor.go
index 1b926f0573..03320cf629 100644
--- a/pkg/visor/hypervisor.go
+++ b/pkg/visor/hypervisor.go
@@ -262,6 +262,7 @@ func (hv *Hypervisor) makeMux() chi.Router {
 				r.Get("/visors/{pk}/update/available/{channel}", hv.visorUpdateAvailable())
 				r.Get("/visors/{pk}/runtime-logs", hv.getRuntimeLogs())
 				r.Post("/visors/{pk}/min-hops", hv.postMinHops())
+				r.Get("/visors/{pk}/persistent-transports", hv.getPersistentTransports())
 				r.Put("/visors/{pk}/persistent-transports", hv.putPersistentTransports())
 			})
 		})
@@ -1342,6 +1343,17 @@ func (hv *Hypervisor) putPersistentTransports() http.HandlerFunc {
 	})
 }
 
+func (hv *Hypervisor) getPersistentTransports() http.HandlerFunc {
+	return hv.withCtx(hv.visorCtx, func(w http.ResponseWriter, r *http.Request, ctx *httpCtx) {
+		pts, err := ctx.API.GetPersistentTransports()
+		if err != nil {
+			httputil.WriteJSON(w, r, http.StatusInternalServerError, err)
+			return
+		}
+		httputil.WriteJSON(w, r, http.StatusOK, pts)
+	})
+}
+
 /*
 	<<< Helper functions >>>
 */
diff --git a/pkg/visor/rpc_client.go b/pkg/visor/rpc_client.go
index 575e669041..6a8f993e0e 100644
--- a/pkg/visor/rpc_client.go
+++ b/pkg/visor/rpc_client.go
@@ -350,6 +350,13 @@ func (rc *rpcClient) SetPersistentTransports(pts []transport.PersistentTransport
 	return err
 }
 
+// GetPersistentTransports gets the persistent_transports from visor routing config
+func (rc *rpcClient) GetPersistentTransports() ([]transport.PersistentTransports, error) {
+	var tps []transport.PersistentTransports
+	err := rc.Call("GetPersistentTransports", &struct{}{}, &tps)
+	return tps, err
+}
+
 // StatusMessage defines a status of visor update.
 type StatusMessage struct {
 	Text    string
@@ -949,3 +956,8 @@ func (mc *mockRPCClient) SetMinHops(_ uint16) error {
 func (mc *mockRPCClient) SetPersistentTransports(_ []transport.PersistentTransports) error {
 	return nil
 }
+
+// GetPersistentTransports implements API
+func (mc *mockRPCClient) GetPersistentTransports() ([]transport.PersistentTransports, error) {
+	return []transport.PersistentTransports{}, nil
+}

From fbc4527d4d198661599aa0306ca74ad6cb442683 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 2 Sep 2021 10:41:26 -0400
Subject: [PATCH 17/19] Improvements for the persistent transports in the UI

---
 .../routing/transport-list/transport-list.component.ts |  6 +++---
 .../src/app/services/transport.service.ts              | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
index 896db8c09c..70c95b344c 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
@@ -375,8 +375,8 @@ export class TransportListComponent implements OnDestroy {
     confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
       confirmationDialog.componentInstance.showProcessing();
 
-      this.persistentTransportSubscription = this.nodeService.getNode(this.nodePK).subscribe((nodeData: Node) => {
-        const dataToUse = nodeData.persistentTransports;
+      this.persistentTransportSubscription = this.transportService.getPersistentTransports(this.nodePK).subscribe((list: any[]) => {
+        const dataToUse = list;
         let nothingToDo = false;
 
         const transportsMap: Map<String, Transport> = new Map<String, Transport>();
@@ -406,7 +406,7 @@ export class TransportListComponent implements OnDestroy {
           // Remove all selected transports.
           for (let i = 0; i < dataToUse.length; i++) {
             if (transportsMap.has(this.getPersistentTransportID(dataToUse[i].pk, dataToUse[i].type))) {
-              dataToUse.splice(i);
+              dataToUse.splice(i, 1);
               nothingToDo = false;
               i--;
             }
diff --git a/static/skywire-manager-src/src/app/services/transport.service.ts b/static/skywire-manager-src/src/app/services/transport.service.ts
index 818a91d4cf..d4498e2607 100644
--- a/static/skywire-manager-src/src/app/services/transport.service.ts
+++ b/static/skywire-manager-src/src/app/services/transport.service.ts
@@ -38,10 +38,20 @@ export class TransportService {
     return this.apiService.delete(`visors/${nodeKey}/transports/${transportId}`);
   }
 
+  /**
+   * Rewrites the list of persistent transports.
+   */
   savePersistentTransportsData(nodeKey: string, newData: PersistentTransport[]) {
     return this.apiService.put(`visors/${nodeKey}/persistent-transports`, newData);
   }
 
+  /**
+   * Gets the persistent transports list
+   */
+  getPersistentTransports(nodeKey: string) {
+    return this.apiService.get(`visors/${nodeKey}/persistent-transports`);
+  }
+
   /**
    * Gets the list of the transport types the node can work with.
    */

From c95c6b88db91033c21d1dccd44c9a963f11262fe Mon Sep 17 00:00:00 2001
From: ersonp <ersonpereiracr7@gmail.com>
Date: Thu, 2 Sep 2021 22:33:03 +0530
Subject: [PATCH 18/19] Remove extra dailing logs

---
 pkg/transport/network/client.go | 2 --
 1 file changed, 2 deletions(-)

diff --git a/pkg/transport/network/client.go b/pkg/transport/network/client.go
index 53f1810269..7c5fb47c5d 100644
--- a/pkg/transport/network/client.go
+++ b/pkg/transport/network/client.go
@@ -308,12 +308,10 @@ type dialFunc func(ctx context.Context, addr string) (net.Conn, error)
 // and dials that visor address(es)
 // dial process is specific to transport type and is provided by the client
 func (c *resolvedClient) dialVisor(ctx context.Context, rPK cipher.PubKey, dial dialFunc) (net.Conn, error) {
-	c.log.Infof("Dialing PK %v", rPK)
 	visorData, err := c.ar.Resolve(ctx, string(c.netType), rPK)
 	if err != nil {
 		return nil, fmt.Errorf("resolve PK: %w", err)
 	}
-	c.log.Infof("Resolved PK %v to visor data %v", rPK, visorData)
 
 	if visorData.IsLocal {
 		for _, host := range visorData.Addresses {

From efc1c68f00b21184488909a13e248d770ccb1cb7 Mon Sep 17 00:00:00 2001
From: Alexander Adhyatma <alexadhyatma@mailbox.org>
Date: Fri, 3 Sep 2021 21:48:09 +0700
Subject: [PATCH 19/19] added missing skysocks-client

---
 docker/images/visor/Dockerfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker/images/visor/Dockerfile b/docker/images/visor/Dockerfile
index 2576d49260..3ad3b669e2 100644
--- a/docker/images/visor/Dockerfile
+++ b/docker/images/visor/Dockerfile
@@ -20,6 +20,7 @@ RUN apk add --no-cache make git && \
     cp ./apps/vpn-server /apps/ && \
     cp ./apps/vpn-client /apps/ && \
 	cp ./apps/skysocks /apps/ && \
+	cp ./apps/skysocks-client /apps/ && \
 	cp ./apps/skychat /apps/
 
 ## Resulting image