Improvements for the manager UI

go.mod

@@ -7,7 +7,6 @@ require (
 	github.com/VictoriaMetrics/metrics v1.17.2
 	github.com/armon/go-socks5 v0.0.0-20160902184237-e75332964ef5
 	github.com/ccding/go-stun/stun v0.0.0-20200514191101-4dc67bcdb029
-	github.com/creack/pty v1.1.11 // indirect
 	github.com/gen2brain/dlgs v0.0.0-20210609125024-bf6c92aaa984
 	github.com/getlantern/golog v0.0.0-20201105130739-9586b8bde3a9 // indirect
 	github.com/getlantern/hidden v0.0.0-20201229170000-e66e7f878730 // indirect
@@ -19,7 +18,6 @@ require (
 	github.com/gorilla/securecookie v1.1.1
 	github.com/json-iterator/go v1.1.11 // indirect
 	github.com/klauspost/reedsolomon v1.9.9 // indirect
-	github.com/mattn/go-isatty v0.0.13 // indirect
 	github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d // indirect
 	github.com/mholt/archiver/v3 v3.3.0
 	github.com/mmcloughlin/avo v0.0.0-20200523190732-4439b6b2c061 // indirect
@@ -28,7 +26,7 @@ require (
 	github.com/schollz/progressbar/v2 v2.15.0
 	github.com/shirou/gopsutil/v3 v3.21.4
 	github.com/sirupsen/logrus v1.8.1
-	github.com/skycoin/dmsg v0.0.0-20210915195912-2f9b055f39fe
+	github.com/skycoin/dmsg v0.0.0-20211007145032-962409e5845f
 	github.com/skycoin/skycoin v0.27.1
 	github.com/skycoin/yamux v0.0.0-20200803175205-571ceb89da9f
 	github.com/songgao/water v0.0.0-20200317203138-2b4b6d7c09d8
@@ -44,7 +42,7 @@ require (
 	go.etcd.io/bbolt v1.3.5
 	golang.org/x/crypto v0.0.0-20210513164829-c07d793c2f9a // indirect
 	golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4
-	golang.org/x/sys v0.0.0-20210608053332-aa57babbf139
+	golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6
 	golang.org/x/term v0.0.0-20210503060354-a79de5458b56 // indirect
 	golang.org/x/text v0.3.6 // indirect
 	golang.org/x/tools v0.1.2 // indirect

go.sum

@@ -48,9 +48,8 @@ github.com/coreos/pkg v0.0.0-20180928190104-399ea9e2e55f/go.mod h1:E3G3o1h8I7cfc
 github.com/cpuguy83/go-md2man v1.0.10/go.mod h1:SmD6nW6nTyfqj6ABTjUi3V3JVMnlJmwcJI5acqYI6dE=
 github.com/cpuguy83/go-md2man/v2 v2.0.0/go.mod h1:maD7wRr/U5Z6m/iR4s+kqSMx2CaBsrgA7czyZG/E6dU=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
-github.com/creack/pty v1.1.10/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
-github.com/creack/pty v1.1.11 h1:07n33Z8lZxZ2qwegKbObQohDhXDQxiMMz1NOUGYlesw=
-github.com/creack/pty v1.1.11/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
+github.com/creack/pty v1.1.15 h1:cKRCLMj3Ddm54bKSpemfQ8AtYFBhAI2MPmdys22fBdc=
+github.com/creack/pty v1.1.15/go.mod h1:MOBLtS5ELjhRRrroQr9kyvTxUAFNvYEK993ew/Vr4O4=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -208,9 +207,8 @@ github.com/marten-seemann/qtls-go1-15 v0.1.4 h1:RehYMOyRW8hPVEja1KBVsFVNSm35Jj9M
 github.com/marten-seemann/qtls-go1-15 v0.1.4/go.mod h1:GyFwywLKkRt+6mfU99csTEY1joMZz5vmB1WNZH3P81I=
 github.com/mattn/go-colorable v0.1.8 h1:c1ghPdyEDarC70ftn0y+A/Ee++9zz8ljHG1b13eJ0s8=
 github.com/mattn/go-colorable v0.1.8/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
+github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
 github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
-github.com/mattn/go-isatty v0.0.13 h1:qdl+GuBjcsKKDco5BsxPJlId98mSWNKqYA+Co0SC1yA=
-github.com/mattn/go-isatty v0.0.13/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
 github.com/matttproud/golang_protobuf_extensions v1.0.1/go.mod h1:D8He9yQNgCq6Z5Ld7szi9bcBfOoFv/3dc6xSMkL2PC0=
 github.com/mgutz/ansi v0.0.0-20170206155736-9520e82c474b/go.mod h1:01TrycV0kFyexm33Z7vhZRXopbI8J3TDReVlkTgMUxE=
 github.com/mgutz/ansi v0.0.0-20200706080929-d51e80ef957d h1:5PJl274Y63IEHC+7izoQE9x6ikvDFZS2mDVS3drnohI=
@@ -308,8 +306,8 @@ github.com/shurcooL/webdavfs v0.0.0-20170829043945-18c3829fa133/go.mod h1:hKmq5k
 github.com/sirupsen/logrus v1.2.0/go.mod h1:LxeOpSwHxABJmUn/MG1IvRgCAasNZTLOkJPxbbu5VWo=
 github.com/sirupsen/logrus v1.8.1 h1:dJKuHgqk1NNQlqoA6BTlM1Wf9DOH3NBjQyu0h9+AZZE=
 github.com/sirupsen/logrus v1.8.1/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=
-github.com/skycoin/dmsg v0.0.0-20210915195912-2f9b055f39fe h1:3mNjtnypa8DC4kNiuLOJ1mqMdXPIAI6Se4k8fNNU2P0=
-github.com/skycoin/dmsg v0.0.0-20210915195912-2f9b055f39fe/go.mod h1:qs+tELY7/gHRHqCK0iPp62BuYlu10OcV5zN0lpa1Scc=
+github.com/skycoin/dmsg v0.0.0-20211007145032-962409e5845f h1:0/PJaqsGvkfuf4I/Jg2ayQq0AJg5qhIhK4YzevX72Bg=
+github.com/skycoin/dmsg v0.0.0-20211007145032-962409e5845f/go.mod h1:p9RQVoY18Rpi5mrbIfE55z7XcKTscIUiNh8nv1ou1/8=
 github.com/skycoin/noise v0.0.0-20180327030543-2492fe189ae6 h1:1Nc5EBY6pjfw1kwW0duwyG+7WliWz5u9kgk1h5MnLuA=
 github.com/skycoin/noise v0.0.0-20180327030543-2492fe189ae6/go.mod h1:UXghlricA7J3aRD/k7p/zBObQfmBawwCxIVPVjz2Q3o=
 github.com/skycoin/skycoin v0.26.0/go.mod h1:78nHjQzd8KG0jJJVL/j0xMmrihXi70ti63fh8vXScJw=
@@ -478,8 +476,8 @@ golang.org/x/sys v0.0.0-20210124154548-22da62e12c0c/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20210217105451-b926d437f341/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210330210617-4fbd30eecc44/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210510120138-977fb7262007/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210608053332-aa57babbf139 h1:C+AwYEtBp/VQwoLntUmQ/yx3MS9vmZaKNdw5eOpoQe8=
-golang.org/x/sys v0.0.0-20210608053332-aa57babbf139/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6 h1:foEbQz/B0Oz6YIqu/69kfXPYeFQAuuMYFkjaqXzl5Wo=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210406210042-72f3dc4e9b72/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210503060354-a79de5458b56 h1:b8jxX3zqjpqb2LklXPzKSGJhzyxCOZSz8ncv8Nv+y7w=

pkg/visor/dmsgtracker/dmsg_tracker_test.go

@@ -16,8 +16,11 @@ import (
 	"github.com/skycoin/skywire/pkg/skyenv"
 )
 
+const (
+	timeout = time.Second * 10
+)
+
 func TestDmsgTracker_Update(t *testing.T) {
-	const timeout = time.Second * 5
 	const nServers = 1
 	conf := dmsg.Config{MinSessions: 1}
 
@@ -48,7 +51,6 @@ func TestDmsgTracker_Update(t *testing.T) {
 }
 
 func TestDmsgTrackerManager_MustGet(t *testing.T) {
-	const timeout = time.Second * 5
 	const nServers = 1
 	conf := dmsg.Config{MinSessions: 1}
 

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);