Merge pull request #866 from Senyoret1/persistent-transports

Add the persistent transports to the UI
skycoin · Sep 7, 2021 · 26404fe · 26404fe
2 parents 1e30372 + fbc4527
commit 26404fe
Show file tree

Hide file tree

Showing 20 changed files with 514 additions and 211 deletions.
diff --git 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
@@ -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
@@ -23,10 +23,6 @@
   color: $yellow;
 }
 
-.gray-text {
-  color: $light-gray !important;
-}
-
 .small-column {
   width: 1px;
 }
diff --git a/...er-src/src/app/components/pages/node/routing/all-transports/all-transports.component.html b/...er-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/...ager-src/src/app/components/pages/node/routing/all-transports/all-transports.component.ts b/...ager-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
@@ -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
@@ -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/...onents/pages/node/routing/transport-list/create-transport/create-transport.component.html b/...onents/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/...mponents/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/...mponents/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/...ents/pages/node/routing/transport-list/transport-details/transport-details.component.html b/...ents/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/...ents/pages/node/routing/transport-list/transport-details/transport-details.component.scss b/...ents/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;
+}