Merge pull request #924 from Senyoret1/improvements-3

Improvements for the manager UI

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

@@ -18,6 +18,7 @@ export class Node {
   roundTripPing?: string;
   isHypervisor?: boolean;
   skybianBuildVersion?: string;
+  autoconnectTransports: boolean;
 }
 
 export interface Application {
@@ -79,12 +80,7 @@ interface RouteDescriptor {
 }
 
 export interface HealthInfo {
-  status: number;
-  transportDiscovery: number;
-  routeFinder: number;
-  setupNode: number;
-  uptimeTracker: number;
-  addressResolver: number;
+  servicesHealth?: String;
 }
 
 export class ProxyDiscoveryEntry {

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

@@ -5,7 +5,7 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { catchError, mergeMap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 
-import { NodeService, BackendData, HealthStatus } from '../../../services/node.service';
+import { NodeService, BackendData, KnownHealthStatuses } from '../../../services/node.service';
 import { Node } from '../../../app.datatypes';
 import { AuthService, AuthStates } from '../../../services/auth.service';
 import { EditLabelComponent } from '../../layout/edit-label/edit-label.component';
@@ -51,7 +51,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
 
   loading = true;
   dataSource: Node[];
-  nodesHealthInfo: Map<string, HealthStatus>;
   tabsData: TabButtonData[] = [];
   options: MenuOptionData[] = [];
   showDmsgInfo = false;
@@ -305,13 +304,16 @@ export class NodeListComponent implements OnInit, OnDestroy {
    * returns a class for a colored text.
    */
   nodeStatusClass(node: Node, forDot: boolean): string {
-    switch (node.online) {
-      case true:
-        return this.nodesHealthInfo.get(node.localPk).allServicesOk ?
-          (forDot ? 'dot-green' : 'green-text') :
-          (forDot ? 'dot-yellow blinking' : 'yellow-text');
-      default:
-        return forDot ? 'dot-red' : 'red-text';
+    if (node.online) {
+      if (node.health && node.health.servicesHealth === KnownHealthStatuses.Unhealthy) {
+        return forDot ? 'dot-yellow blinking' : 'yellow-text';
+      } else if (node.health && node.health.servicesHealth === KnownHealthStatuses.Healthy) {
+        return forDot ? 'dot-green' : 'green-text';
+      } else {
+        return forDot ? 'dot-outline-gray' : '';
+      }
+    } else {
+      return forDot ? 'dot-red' : 'red-text';
     }
   }
 
@@ -321,13 +323,18 @@ export class NodeListComponent implements OnInit, OnDestroy {
    * text for the node list shown on small screens.
    */
   nodeStatusText(node: Node, forTooltip: boolean): string {
-    switch (node.online) {
-      case true:
-        return this.nodesHealthInfo.get(node.localPk).allServicesOk ?
-          ('node.statuses.online' + (forTooltip ? '-tooltip' : '')) :
-          ('node.statuses.partially-online' + (forTooltip ? '-tooltip' : ''));
-      default:
-        return 'node.statuses.offline' + (forTooltip ? '-tooltip' : '');
+    if (node.online) {
+      if (node.health && node.health.servicesHealth === KnownHealthStatuses.Healthy) {
+        return 'node.statuses.online' + (forTooltip ? '-tooltip' : '');
+      } else if (node.health && node.health.servicesHealth === KnownHealthStatuses.Unhealthy) {
+        return 'node.statuses.partially-online' + (forTooltip ? '-tooltip' : '');
+      } else if (node.health && node.health.servicesHealth === KnownHealthStatuses.Connecting) {
+        return 'node.statuses.connecting' + (forTooltip ? '-tooltip' : '');
+      } else {
+        return 'node.statuses.unknown' + (forTooltip ? '-tooltip' : '');
+      }
+    } else {
+      return 'node.statuses.offline' + (forTooltip ? '-tooltip' : '');
     }
   }
 
@@ -427,12 +434,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
     }
 
     if (this.nodesToShow) {
-      // Get the health status of each node.
-      this.nodesHealthInfo = new Map<string, HealthStatus>();
-      this.nodesToShow.forEach(node => {
-        this.nodesHealthInfo.set(node.localPk, this.nodeService.getHealthStatus(node));
-      });
-
       this.dataSource = this.nodesToShow;
     }
   }

static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html

@@ -55,14 +55,29 @@
     </span>
   </div>
   <div class="separator"></div>
+  <!-- Transports info section. -->
+  <div class="d-flex flex-column">
+    <span class="section-title">{{ 'node.details.transports-info.title' | translate }}</span>
+    <span class="info-line">
+      <span class="title">{{ 'node.details.transports-info.autoconnect' | translate }}</span>
+      {{ ('node.details.transports-info.' + (node.autoconnectTransports ? 'enabled' : 'disabled')) | translate }}
+      <mat-icon [inline]="true" [matTooltip]="'node.details.transports-info.autoconnect-info' | translate">info</mat-icon>
+    </span>
+    <div class="config-button-container">
+      <app-button color="primary" (action)="changeTransportsConfig()" [forDarkBackground]="true">
+        {{ ('node.details.transports-info.' + (node.autoconnectTransports ? 'disable' : 'enable') + '-button') | translate }}
+      </app-button>
+    </div>
+  </div>
+  <div class="separator"></div>
   <!-- Router info section. -->
   <div class="d-flex flex-column">
     <span class="section-title">{{ 'node.details.router-info.title' | translate }}</span>
     <span class="info-line">
       <span class="title">{{ 'node.details.router-info.min-hops' | translate }}</span>
       {{ node.minHops }}
     </span>
-    <div class="router-button-container">
+    <div class="config-button-container">
       <app-button color="primary" (action)="changeRouterConfig()" [forDarkBackground]="true">
         {{ 'node.details.router-info.change-config-button' | translate }}
       </app-button>
@@ -72,16 +87,10 @@
   <!-- Health info section. -->
   <div class="d-flex flex-column">
     <span class="section-title">{{ 'node.details.node-health.title' | translate }}</span>
-    <span *ngFor="let service of nodeHealthInfo.services" class="info-line">
-      <span class="title">{{ service.name | translate }}</span>
-      <ng-container *ngIf="service.isOk">
-        <i class="dot-green"></i>
-        {{ 'common.ok' | translate }}
-      </ng-container>
-      <ng-container *ngIf="!service.isOk">
-        <i class="dot-red"></i>
-        {{ service.originalValue ? service.originalValue : ('node.details.node-health.element-offline' | translate) }}
-      </ng-container>
+    <span class="info-line">
+      <span class="title">{{ 'node.details.node-health.uptime-tracker' | translate }}</span>
+      <i [class]="nodeHealthClass"></i>
+      {{ nodeHealthText | translate }}
     </span>
   </div>
   <div class="separator"></div>

static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.scss

@@ -32,7 +32,7 @@
   border-top: 1px solid $separator;
 }
 
-.router-button-container {
+.config-button-container {
   margin-top: 10px;
   margin-left: -4px;
 }

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

@@ -1,13 +1,19 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Subscription } from 'rxjs';
 
 import { Node } from '../../../../../app.datatypes';
 import { EditLabelComponent } from 'src/app/components/layout/edit-label/edit-label.component';
 import { NodeComponent } from '../../node.component';
 import TimeUtils, { ElapsedTime } from 'src/app/utils/timeUtils';
 import { LabeledElementTypes, StorageService } from 'src/app/services/storage.service';
-import { NodeService, HealthStatus } from 'src/app/services/node.service';
+import { KnownHealthStatuses } from 'src/app/services/node.service';
 import { RouterConfigComponent, RouterConfigParams } from './router-config/router-config.component';
+import GeneralUtils from 'src/app/utils/generalUtils';
+import { TransportService } from 'src/app/services/transport.service';
+import { SnackbarService } from 'src/app/services/snackbar.service';
+import { OperationError } from 'src/app/utils/operation-error';
+import { processServiceError } from 'src/app/utils/errors';
 
 /**
  * Shows the basic info of a node.
@@ -17,23 +23,46 @@ import { RouterConfigComponent, RouterConfigParams } from './router-config/route
   templateUrl: './node-info-content.component.html',
   styleUrls: ['./node-info-content.component.scss']
 })
-export class NodeInfoContentComponent {
+export class NodeInfoContentComponent implements OnDestroy {
   @Input() set nodeInfo(val: Node) {
     this.node = val;
-    this.nodeHealthInfo = this.nodeService.getHealthStatus(val);
     this.timeOnline = TimeUtils.getElapsedTime(val.secondsOnline);
+
+    if (val.health && val.health.servicesHealth === KnownHealthStatuses.Healthy) {
+      this.nodeHealthText = 'node.statuses.online';
+      this.nodeHealthClass = 'dot-green';
+    } else if (val.health && val.health.servicesHealth === KnownHealthStatuses.Unhealthy) {
+      this.nodeHealthText = 'node.statuses.partially-online';
+      this.nodeHealthClass = 'dot-yellow blinking';
+    } else if (val.health && val.health.servicesHealth === KnownHealthStatuses.Connecting) {
+      this.nodeHealthText = 'node.statuses.connecting';
+      this.nodeHealthClass = 'dot-outline-gray';
+    } else {
+      this.nodeHealthText = 'node.statuses.unknown';
+      this.nodeHealthClass = 'dot-outline-gray';
+    }
   }
 
   node: Node;
-  nodeHealthInfo: HealthStatus;
   timeOnline: ElapsedTime;
+  nodeHealthClass: string;
+  nodeHealthText: string;
+
+  private autoconnectSubscription: Subscription;
 
   constructor(
     private dialog: MatDialog,
     public storageService: StorageService,
-    private nodeService: NodeService,
+    private transportService: TransportService,
+    private snackbarService: SnackbarService,
   ) { }
 
+  ngOnDestroy() {
+    if (this.autoconnectSubscription) {
+      this.autoconnectSubscription.unsubscribe();
+    }
+  }
+
   showEditLabelDialog() {
     let labelInfo =  this.storageService.getLabelInfo(this.node.localPk);
     if (!labelInfo) {
@@ -59,4 +88,32 @@ export class NodeInfoContentComponent {
       }
     });
   }
+
+  /**
+   * Enables or disables the transport.public_autoconnect setting.
+   */
+  changeTransportsConfig() {
+    const confirmationDialog = GeneralUtils.createConfirmationDialog(
+      this.dialog,
+      this.node.autoconnectTransports ? 'node.details.transports-info.disable-confirmation' : 'node.details.transports-info.enable-confirmation'
+    );
+
+    confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
+      confirmationDialog.componentInstance.showProcessing();
+
+      const operation = this.transportService.changeAutoconnectSetting(this.node.localPk, !this.node.autoconnectTransports);
+      this.autoconnectSubscription = operation.subscribe(() => {
+        confirmationDialog.close();
+        this.snackbarService.showDone(
+          this.node.autoconnectTransports ? 'node.details.transports-info.disable-done' : 'node.details.transports-info.enable-done'
+        );
+
+        NodeComponent.refreshCurrentDisplayedData();
+      }, (err: OperationError) => {
+        err = processServiceError(err);
+
+        confirmationDialog.componentInstance.showDone('confirmation.error-header-text', err.translatableErrorMsg);
+      });
+    });
+  }
 }

static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts

@@ -102,11 +102,14 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
 
     if (this.makePersistent) {
       // Check the current visor config.
-      this.operationSubscription = this.nodeService.getNode(NodeComponent.getCurrentNodeKey()).subscribe(nodeData => {
+      const operation = this.transportService.getPersistentTransports(NodeComponent.getCurrentNodeKey());
+      this.operationSubscription = operation.subscribe((list: any[]) => {
+        const dataToUse = list ? list : [];
+
         let noNeedToAddToPersistents = false;
 
         // Check if the transport is already in the persistent list.
-        nodeData.persistentTransports.forEach(t => {
+        dataToUse.forEach(t => {
           if (t.pk.toUpperCase() === newTransportPk.toUpperCase() && t.type.toUpperCase() === newTransportType.toUpperCase()) {
             noNeedToAddToPersistents = true;
           }
@@ -115,7 +118,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
         if (noNeedToAddToPersistents) {
           this.createTransport(newTransportPk, newTransportType, newTransportLabel, true);
         } else {
-          this.createPersistent(nodeData.persistentTransports, newTransportPk, newTransportType, newTransportLabel);
+          this.createPersistent(dataToUse, newTransportPk, newTransportType, newTransportLabel);
         }
       }, err => {
         this.onError(err);

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

@@ -376,7 +376,7 @@ export class TransportListComponent implements OnDestroy {
       confirmationDialog.componentInstance.showProcessing();
 
       this.persistentTransportSubscription = this.transportService.getPersistentTransports(this.nodePK).subscribe((list: any[]) => {
-        const dataToUse = list;
+        const dataToUse = list ? list : [];
         let nothingToDo = false;
 
         const transportsMap: Map<String, Transport> = new Map<String, Transport>();