UI for the FWD and REV

static/skywire-manager-src/src/app/app-routing.module.ts

@@ -19,6 +19,8 @@ import { VpnStatusComponent } from './components/vpn/pages/vpn-status/vpn-status
 import { VpnErrorComponent } from './components/vpn/pages/vpn-error/vpn-error.component';
 import { VpnSettingsComponent } from './components/vpn/pages/vpn-settings/vpn-settings.component';
 import { VpnAuthGuardService } from './services/vpn-auth-guard.service';
+import { AllRemoteRevPortsComponent } from './components/pages/node/routing/all-remote-rev-ports/all-remote-rev-ports.component';
+import { AllLocalFwdPortsComponent } from './components/pages/node/routing/all-local-fwd-ports/all-local-fwd-ports.component';
 
 const routes: Routes = [
   {
@@ -96,6 +98,24 @@ const routes: Routes = [
             path: 'routes/:page',
             component: AllRoutesComponent
           },
+          {
+            path: 'local-ports',
+            redirectTo: 'local-ports/1',
+            pathMatch: 'full'
+          },
+          {
+            path: 'local-ports/:page',
+            component: AllLocalFwdPortsComponent
+          },
+          {
+            path: 'remote-ports',
+            redirectTo: 'remote-ports/1',
+            pathMatch: 'full'
+          },
+          {
+            path: 'remote-ports/:page',
+            component: AllRemoteRevPortsComponent
+          },
           {
             path: 'apps-list/:showOfficialApps/:page',
             component: AllAppsComponent

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

@@ -11,6 +11,8 @@ export class Node {
   routesCount: number;
   minHops: number;
   routes?: Route[];
+  localForwardedPorts: LocalFwdPort[];
+  remoteConnectedPorts: RemoteRevPort[];
   online?: boolean;
   secondsOnline?: number;
   health?: HealthInfo;
@@ -94,3 +96,13 @@ export class ProxyDiscoveryEntry {
   region?: string;
   location?: string;
 }
+
+export class LocalFwdPort {
+  portNumber: number
+}
+
+export class RemoteRevPort {
+  connectionID: string;
+  remotePortNumber: number
+  localPortNumber: number
+}

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

@@ -101,6 +101,12 @@ import { RewardsAddressComponent } from './components/pages/node/node-info/node-
 import { BulkRewardAddressChangerComponent } from './components/layout/bulk-reward-address-changer/bulk-reward-address-changer.component';
 import { UserAppSettingsComponent } from './components/pages/node/apps/node-apps/user-app-settings/user-app-settings.component';
 import { NodeLogsComponent } from './components/pages/node/actions/node-logs/node-logs.component';
+import { LocalFwdPortsListComponent } from './components/pages/node/routing/local-fwd-ports-list/local-fwd-ports-list.component';
+import { RemoteRevPortsListComponent } from './components/pages/node/routing/remote-rev-ports-list/remote-rev-ports-list.component';
+import { CreateRemoteRevPortComponent } from './components/pages/node/routing/remote-rev-ports-list/create-remote-rev-port/create-remote-rev-port.component';
+import { CreateLocalFwdPortComponent } from './components/pages/node/routing/local-fwd-ports-list/create-local-fwd-port/create-local-fwd-port.component';
+import { AllLocalFwdPortsComponent } from './components/pages/node/routing/all-local-fwd-ports/all-local-fwd-ports.component';
+import { AllRemoteRevPortsComponent } from './components/pages/node/routing/all-remote-rev-ports/all-remote-rev-ports.component';
 import { SkychatSettingsComponent } from './components/pages/node/apps/node-apps/skychat-settings/skychat-settings.component';
 import { TabSelectorComponent } from './components/layout/tab-selector/tab-selector.component';
 
@@ -180,6 +186,12 @@ const globalRippleConfig: RippleGlobalOptions = {
     BulkRewardAddressChangerComponent,
     UserAppSettingsComponent,
     NodeLogsComponent,
+    LocalFwdPortsListComponent,
+    RemoteRevPortsListComponent,
+    CreateRemoteRevPortComponent,
+    CreateLocalFwdPortComponent,
+    AllLocalFwdPortsComponent,
+    AllRemoteRevPortsComponent,
     SkychatSettingsComponent,
     TabSelectorComponent,
   ],

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

@@ -229,6 +229,8 @@ export class NodeComponent extends PageBaseComponent implements OnInit, OnDestro
     } else if (
       this.lastUrl && (this.lastUrl.includes('/transports') ||
       this.lastUrl.includes('/routes') ||
+      this.lastUrl.includes('/local-ports') ||
+      this.lastUrl.includes('/remote-ports') ||
       this.lastUrl.includes('/apps-list'))) {
 
       this.showingFullList = true;
@@ -243,6 +245,10 @@ export class NodeComponent extends PageBaseComponent implements OnInit, OnDestro
       let prefix = 'transports';
       if (this.lastUrl.includes('/routes')) {
         prefix = 'routes';
+      } else if (this.lastUrl.includes('/local-ports')) {
+        prefix = 'local-fwd-ports';
+      } else if (this.lastUrl.includes('/remote-ports')) {
+        prefix = 'remote-rev-ports';
       } else if (this.lastUrl.includes('/apps-list')) {
         prefix = 'apps.apps-list';
       }

static/skywire-manager-src/src/app/components/pages/node/routing/all-local-fwd-ports/all-local-fwd-ports.component.html

@@ -0,0 +1,5 @@
+<app-local-fwd-ports-list
+  *ngIf="node"
+  [node]="node"
+  [showShortList]="false">
+</app-local-fwd-ports-list>

static/skywire-manager-src/src/app/components/pages/node/routing/all-local-fwd-ports/all-local-fwd-ports.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { Node } from '../../../../../app.datatypes';
+import { NodeComponent } from '../../node.component';
+import { PageBaseComponent } from 'src/app/utils/page-base';
+
+/**
+ * Page for showing the complete list of the local shared ports of a node.
+ */
+@Component({
+  selector: 'app-all-local-fwd-ports',
+  templateUrl: './all-local-fwd-ports.component.html',
+  styleUrls: ['./all-local-fwd-ports.component.scss']
+})
+export class AllLocalFwdPortsComponent extends PageBaseComponent implements OnInit, OnDestroy {
+  node: Node;
+
+  private dataSubscription: Subscription;
+
+  ngOnInit() {
+    // Get the node data from the parent page.
+    this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => this.node = node);
+
+    return super.ngOnInit();
+  }
+
+  ngOnDestroy() {
+    this.dataSubscription.unsubscribe();
+  }
+}

static/skywire-manager-src/src/app/components/pages/node/routing/all-remote-rev-ports/all-remote-rev-ports.component.html

@@ -0,0 +1,5 @@
+<app-remote-rev-ports-list
+  *ngIf="node"
+  [node]="node"
+  [showShortList]="false">
+</app-remote-rev-ports-list>

static/skywire-manager-src/src/app/components/pages/node/routing/all-remote-rev-ports/all-remote-rev-ports.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+
+import { Node } from '../../../../../app.datatypes';
+import { NodeComponent } from '../../node.component';
+import { PageBaseComponent } from 'src/app/utils/page-base';
+
+/**
+ * Page for showing the complete list of the remote connected ports of a node.
+ */
+@Component({
+  selector: 'app-all-remote-rev-ports',
+  templateUrl: './all-remote-rev-ports.component.html',
+  styleUrls: ['./all-remote-rev-ports.component.scss']
+})
+export class AllRemoteRevPortsComponent extends PageBaseComponent implements OnInit, OnDestroy {
+  node: Node;
+
+  private dataSubscription: Subscription;
+
+  ngOnInit() {
+    // Get the node data from the parent page.
+    this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => this.node = node);
+
+    return super.ngOnInit();
+  }
+
+  ngOnDestroy() {
+    this.dataSubscription.unsubscribe();
+  }
+}

static/skywire-manager-src/src/app/components/pages/node/routing/local-fwd-ports-list/create-local-fwd-port/create-local-fwd-port.component.html

@@ -0,0 +1,28 @@
+<app-dialog [headline]="'local-fwd-ports.create' | translate" [dialog]="dialogRef" [disableDismiss]="disableDismiss">
+  <form [formGroup]="form">
+    <mat-form-field  [ngClass]="{'element-disabled' : disableDismiss}">
+      <div class="field-container">
+        <label class="field-label" for="localPort">{{ 'local-fwd-ports.dialog.local-port' | translate }}</label>
+        <input
+          #firstInput
+          formControlName="localPort"
+          type="number"
+          matInput
+        >
+      </div>
+      <mat-error>
+        <span>{{ 'local-fwd-ports.dialog.errors.port-error' | translate }}</span>
+      </mat-error>
+    </mat-form-field>
+  </form>
+
+  <app-button
+    #button
+    (action)="create()"
+    [disabled]="!form.valid"
+    color="primary"
+    class="float-right"
+  >
+    {{ 'local-fwd-ports.dialog.proceed' | translate }}
+  </app-button>
+</app-dialog>

static/skywire-manager-src/src/app/components/pages/node/routing/local-fwd-ports-list/create-local-fwd-port/create-local-fwd-port.component.ts

@@ -0,0 +1,96 @@
+import { Component, OnInit, ViewChild, OnDestroy, ElementRef } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
+
+import { ButtonComponent } from '../../../../../layout/button/button.component';
+import { NodeComponent } from '../../../node.component';
+import { SnackbarService } from '../../../../../../services/snackbar.service';
+import { AppConfig } from 'src/app/app.config';
+import { processServiceError } from 'src/app/utils/errors';
+import { FwdService } from 'src/app/services/fwd.service';
+
+/**
+ * Modal window used for sharing local ports. It opens the port and shows a
+ * confirmation msg by itself.
+ */
+@Component({
+  selector: 'app-create-local-fwd-port',
+  templateUrl: './create-local-fwd-port.component.html',
+  styleUrls: ['./create-local-fwd-port.component.scss']
+})
+export class CreateLocalFwdPortComponent implements OnInit, OnDestroy {
+  @ViewChild('button') button: ButtonComponent;
+  @ViewChild('firstInput') firstInput: ElementRef;
+  form: UntypedFormGroup;
+
+  private operationSubscription: Subscription;
+
+  /**
+   * Opens the modal window. Please use this function instead of opening the window "by hand".
+   */
+  public static openDialog(dialog: MatDialog): MatDialogRef<CreateLocalFwdPortComponent, any> {
+    const config = new MatDialogConfig();
+    config.autoFocus = false;
+    config.width = AppConfig.mediumModalWidth;
+
+    return dialog.open(CreateLocalFwdPortComponent, config);
+  }
+
+  constructor(
+    private fwdService: FwdService,
+    private formBuilder: UntypedFormBuilder,
+    public dialogRef: MatDialogRef<CreateLocalFwdPortComponent>,
+    private snackbarService: SnackbarService,
+  ) { }
+
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      localPort: ['', Validators.compose([Validators.required, Validators.min(1025), Validators.max(65536)])],
+    });
+
+    setTimeout(() => (this.firstInput.nativeElement as HTMLElement).focus());
+  }
+
+  ngOnDestroy() {
+    if (this.operationSubscription) {
+      this.operationSubscription.unsubscribe();
+    }
+  }
+
+  /**
+   * If true, all the ways provided by default by the UI for closing the modal window are disabled.
+   */
+  get disableDismiss(): boolean {
+    return this.button ? this.button.isLoading : false;
+  }
+
+  /**
+   * Creates shares the port.
+   */
+  create() {
+    if (!this.form.valid || this.button.disabled) {
+      return;
+    }
+
+    this.button.showLoading();
+
+    const localPort: number = this.form.get('localPort').value;
+
+    this.operationSubscription = this.fwdService.createLocal(
+      // The node pk is obtained from the currently openned node page.
+      NodeComponent.getCurrentNodeKey(),
+      localPort
+    ).subscribe(response => {
+      NodeComponent.refreshCurrentDisplayedData();
+      this.dialogRef.close();
+
+      this.snackbarService.showDone('local-fwd-ports.dialog.success');
+    }, err => {
+      this.button.showError();
+      err = processServiceError(err);
+
+      this.snackbarService.showError(err);
+    });
+  }
+}