Improvements for the UI code (#1498)

static/skywire-manager-src/src/app/components/layout/button/button.component.scss

@@ -11,7 +11,7 @@ button {
   }
 }
 
-mat-icon {
+mat-icon, mat-spinner {
   display: inline-block;
   margin-right: 15px;
 }

static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.html

@@ -1,3 +1,7 @@
-<app-dialog [headline]="'settings.password.initial-config.title' | translate" [dialog]="dialogRef">
-  <app-password [forInitialConfig]="true"></app-password>
+<app-dialog
+  [headline]="'settings.password.initial-config.title' | translate"
+  [dialog]="dialogRef"
+  [disableDismiss]="disableDismiss"
+>
+  <app-password [forInitialConfig]="true" (workingState)="disableDismiss=$event"></app-password>
 </app-dialog>

static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.ts

@@ -13,6 +13,11 @@ import { AppConfig } from 'src/app/app.config';
 })
 export class InitialSetupComponent {
 
+  /**
+   * If true, all the ways provided by default by the UI for closing the modal window are disabled.
+   */
+  disableDismiss = false;
+
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
    */

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, KnownHealthStatuses } from '../../../services/node.service';
+import { NodeService, 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';
@@ -22,6 +22,7 @@ import { SortingModes, SortingColumn, DataSorter } from 'src/app/utils/lists/dat
 import { DataFilterer } from 'src/app/utils/lists/data-filterer';
 import { NodeData, UpdateAllComponent } from '../../layout/update-all/update-all.component';
 import { BulkRewardAddressChangerComponent, BulkRewardAddressParams, NodeToEditData } from '../../layout/bulk-reward-address-changer/bulk-reward-address-changer.component';
+import { MultipleNodeDataService, MultipleNodesBackendData } from 'src/app/services/multiple-node-data.service';
 
 /**
  * Page for showing the node list.
@@ -129,6 +130,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
 
   constructor(
     private nodeService: NodeService,
+    private multipleNodeDataService: MultipleNodeDataService,
     private router: Router,
     private dialog: MatDialog,
     private authService: AuthService,
@@ -228,7 +230,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
     // Refresh the data after languaje changes, to ensure the labels used for filtering
     // are updated.
     this.languageSubscription = this.translateService.onLangChange.subscribe(() => {
-      this.nodeService.forceNodeListRefresh();
+      this.multipleNodeDataService.forceRefresh();
     });
   }
 
@@ -263,7 +265,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     // Load the data.
-    this.nodeService.startRequestingNodeList();
     this.startGettingData();
 
     // Procedure to keep updated the variable that indicates how long ago the data was updated.
@@ -276,7 +277,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.nodeService.stopRequestingNodeList();
     this.authVerificationSubscription.unsubscribe();
     this.dataSubscription.unsubscribe();
     this.updateTimeSubscription.unsubscribe();
@@ -358,21 +358,20 @@ export class NodeListComponent implements OnInit, OnDestroy {
       this.lastUpdateRequestedManually = true;
     }
 
-    this.nodeService.forceNodeListRefresh();
+    this.multipleNodeDataService.forceRefresh();
   }
 
   /**
    * Starts getting the data from the backend.
    */
   private startGettingData() {
-    // Detect when the service is updating the data.
-    this.dataSubscription = this.nodeService.updatingNodeList.subscribe(val => this.updating = val);
-
     this.ngZone.runOutsideAngular(() => {
       // Get the node list.
-      this.dataSubscription.add(this.nodeService.nodeList.subscribe((result: BackendData) => {
+      this.dataSubscription = this.multipleNodeDataService.startRequestingData().subscribe((result: MultipleNodesBackendData) => {
         this.ngZone.run(() => {
-          if (result) {
+          this.updating = result ? result.updating : true;
+
+          if (result && !result.updating) {
             // If the data was obtained.
             if (result.data && !result.error) {
               this.allNodes = result.data as Node[];
@@ -416,7 +415,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
             }
           }
         });
-      }));
+      });
     });
   }
 

static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html

@@ -104,6 +104,7 @@
           <button
             mat-button
             class="list-button grey-button-background w-100"
+            [ngClass]="{'element-disabled' : disableDismiss}"
             (click)="saveChanges(proxy.pk, null, false, proxy.location)"
           >
             <div class="button-content">
@@ -167,6 +168,7 @@
         <button
           mat-button
           class="list-button grey-button-background w-100 d-none d-md-inline"
+          [ngClass]="{'element-disabled' : disableDismiss}"
           (click)="useFromHistory(entry)"
         >
           <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -192,6 +194,7 @@
         <button
           mat-button
           class="list-button grey-button-background w-100 d-md-none"
+          [ngClass]="{'element-disabled' : disableDismiss}"
           (click)="openHistoryOptions(entry)"
         >
           <ng-container *ngTemplateOutlet="content"></ng-container>
@@ -238,7 +241,7 @@
     <mat-tab [label]="'apps.vpn-socks-client-settings.settings-tab' | translate" *ngIf="configuringVpn">
       <form [formGroup]="settingsForm">
         <!-- DNS option. -->
-        <mat-form-field>
+        <mat-form-field [ngClass]="{'element-disabled' : disableDismiss}">
           <div class="field-container">
             <label class="field-label" for="remoteKey">{{ 'apps.vpn-socks-client-settings.dns' | translate }}</label>
             <input
@@ -256,7 +259,7 @@
 
         <!-- Killswitch option. -->
         <div class="main-theme settings-option">
-          <mat-checkbox color="primary" formControlName="killswitch">
+          <mat-checkbox color="primary" formControlName="killswitch" [ngClass]="{'element-disabled' : disableDismiss}">
             {{ 'apps.vpn-socks-client-settings.killswitch-check' | translate }}
             <mat-icon [inline]="true" class="help-icon" [matTooltip]="'apps.vpn-socks-client-settings.killswitch-info' | translate">help</mat-icon>
           </mat-checkbox>

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

@@ -1,21 +1,21 @@
-<div class="small-rounded-elevated-box chart">
-  <app-line-chart [data]="data.sentHistory"></app-line-chart>
+<div class="small-rounded-elevated-box chart" *ngIf="trafficData">
+  <app-line-chart [data]="trafficData.sentHistory"></app-line-chart>
   <div class="info">
     <span class="text">{{ 'common.uploaded' | translate }}</span>
     <span class="rate">
-      <span class="value">{{ data.totalSent | autoScale:{ showValue: true } }}</span>
-      <span class="unit">{{ data.totalSent | autoScale:{ showUnit: true } }}</span>
+      <span class="value">{{ trafficData.totalSent | autoScale:{ showValue: true } }}</span>
+      <span class="unit">{{ trafficData.totalSent | autoScale:{ showUnit: true } }}</span>
     </span>
   </div>
 </div>
 
-<div class="small-rounded-elevated-box chart">
-  <app-line-chart [data]="data.receivedHistory"></app-line-chart>
+<div class="small-rounded-elevated-box chart" *ngIf="trafficData">
+  <app-line-chart [data]="trafficData.receivedHistory"></app-line-chart>
   <div class="info">
     <span class="text">{{ 'common.downloaded' | translate }}</span>
     <span class="rate">
-      <span class="value">{{ data.totalReceived | autoScale:{ showValue: true } }}</span>
-      <span class="unit">{{ data.totalReceived | autoScale:{ showUnit: true } }}</span>
+      <span class="value">{{ trafficData.totalReceived | autoScale:{ showValue: true } }}</span>
+      <span class="unit">{{ trafficData.totalReceived | autoScale:{ showUnit: true } }}</span>
     </span>
   </div>
 </div>

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

@@ -1,30 +1,15 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, Input } from '@angular/core';
 
-import { TrafficData, NodeService } from 'src/app/services/node.service';
+import { TrafficData } from 'src/app/services/single-node-data.service';
 
 /**
- * Shows 2 line graps with the recent data upload/download activity of a node.
+ * Shows 2 line graphs with the recent data upload/download activity of a node.
  */
 @Component({
   selector: 'app-charts',
   templateUrl: './charts.component.html',
   styleUrls: ['./charts.component.scss']
 })
-export class ChartsComponent implements OnInit, OnDestroy {
-  data: TrafficData;
-
-  private dataSubscription: Subscription;
-
-  constructor(private nodeService: NodeService) { }
-
-  ngOnInit() {
-    this.dataSubscription = this.nodeService.specificNodeTrafficData.subscribe(data => {
-      this.data = data;
-    });
-  }
-
-  ngOnDestroy() {
-    this.dataSubscription.unsubscribe();
-  }
+export class ChartsComponent {
+  @Input() trafficData: TrafficData;
 }

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

@@ -131,6 +131,6 @@
   <!-- Traffic info section. -->
   <div class="d-flex flex-column">
     <span class="section-title">{{ 'node.details.node-traffic-data' | translate }}</span>
-    <app-charts class="d-flex flex-column justify-content-end mt-3"></app-charts>
+    <app-charts [trafficData]="trafficData" class="d-flex flex-column justify-content-end mt-3"></app-charts>
   </div>
 </div>

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

@@ -15,6 +15,7 @@ import { SnackbarService } from 'src/app/services/snackbar.service';
 import { OperationError } from 'src/app/utils/operation-error';
 import { processServiceError } from 'src/app/utils/errors';
 import { RewardsAddressComponent, RewardsAddressConfigParams } from './rewards-address-config/rewards-address-config.component';
+import { TrafficData } from 'src/app/services/single-node-data.service';
 
 /**
  * Shows the basic info of a node.
@@ -44,6 +45,8 @@ export class NodeInfoContentComponent implements OnDestroy {
     }
   }
 
+  @Input() trafficData: TrafficData;
+
   node: Node;
   timeOnline: ElapsedTime;
   nodeHealthClass: string;

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

@@ -1 +1 @@
-<app-node-info-content [nodeInfo]="node"></app-node-info-content>
+<app-node-info-content [nodeInfo]="node" [trafficData]="trafficData"></app-node-info-content>

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

@@ -1,5 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { TrafficData } from 'src/app/services/single-node-data.service';
 
 import { Node } from '../../../../app.datatypes';
 import { NodeComponent } from '../node.component';
@@ -14,17 +15,23 @@ import { NodeComponent } from '../node.component';
 })
 export class NodeInfoComponent implements OnInit, OnDestroy {
   node: Node;
+  trafficData: TrafficData;
 
-  private dataSubscription: Subscription;
+  private nodeSubscription: Subscription;
+  private trafficDataSubscription: Subscription;
 
   ngOnInit() {
-    // Get the node data from the parent page.
-    this.dataSubscription = NodeComponent.currentNode.subscribe((node: Node) => {
+    // Get the node and data transmission data from the parent page.
+    this.nodeSubscription = NodeComponent.currentNode.subscribe((node: Node) => {
       this.node = node;
     });
+    this.trafficDataSubscription = NodeComponent.currentTrafficData.subscribe((data: TrafficData) => {
+      this.trafficData = data;
+    });
   }
 
   ngOnDestroy() {
-    this.dataSubscription.unsubscribe();
+    this.nodeSubscription.unsubscribe();
+    this.trafficDataSubscription.unsubscribe();
   }
 }

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

@@ -47,7 +47,7 @@
     </div>
     <!-- Right bar. -->
     <div class="right-bar" [ngClass]="{'d-none': showingInfo || showingFullList}">
-      <app-node-info-content *ngIf="!showingInfo && !showingFullList" [nodeInfo]="node"></app-node-info-content>
+      <app-node-info-content *ngIf="!showingInfo && !showingFullList" [nodeInfo]="node" [trafficData]="trafficData"></app-node-info-content>
     </div>
   </div>
 </div>