From b848fb2bb2ed396cfb59bb3a76e35628da24c1dc Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Mon, 27 Feb 2023 15:04:36 -0400
Subject: [PATCH] Improvements for the UI code

---
 .../layout/button/button.component.scss       |   2 +-
 .../initial-setup.component.html              |   8 +-
 .../initial-setup/initial-setup.component.ts  |   5 +
 .../pages/node-list/node-list.component.ts    |  21 +-
 .../skysocks-client-settings.component.html   |   7 +-
 .../pages/node/charts/charts.component.html   |  16 +-
 .../pages/node/charts/charts.component.ts     |  25 +-
 .../node-info-content.component.html          |   2 +-
 .../node-info-content.component.ts            |   3 +
 .../node/node-info/node-info.component.html   |   2 +-
 .../node/node-info/node-info.component.ts     |  15 +-
 .../components/pages/node/node.component.html |   2 +-
 .../components/pages/node/node.component.ts   |  40 +-
 .../settings/password/password.component.ts   |   9 +-
 .../services/multiple-node-data.service.ts    | 141 ++++++
 .../src/app/services/node.service.ts          | 433 +-----------------
 .../app/services/single-node-data.service.ts  | 360 +++++++++++++++
 17 files changed, 600 insertions(+), 491 deletions(-)
 create mode 100644 static/skywire-manager-src/src/app/services/multiple-node-data.service.ts
 create mode 100644 static/skywire-manager-src/src/app/services/single-node-data.service.ts

diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.scss b/static/skywire-manager-src/src/app/components/layout/button/button.component.scss
index 97a9c8ce3e..0da36d1fe0 100644
--- a/static/skywire-manager-src/src/app/components/layout/button/button.component.scss
+++ b/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;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.html b/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.html
index 9eea902cfc..f8a81befa1 100644
--- a/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.ts b/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.ts
index e92434192f..bd566e3968 100644
--- a/static/skywire-manager-src/src/app/components/pages/login/initial-setup/initial-setup.component.ts
+++ b/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".
    */
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
index f84389ca2d..1985675820 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
+++ b/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 {
             }
           }
         });
-      }));
+      });
     });
   }
 
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html
index 33303987c6..8b10fff89b 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html b/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html
index dbafee7b93..33143c7eca 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.ts b/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.ts
index e063d6c1ac..5dba797f6f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.ts
+++ b/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;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
index 20bddf50af..2db343a131 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.ts b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.ts
index a62a6ebefe..1cf6565179 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.ts
+++ b/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;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.html b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.html
index 56b43149eb..e6966aa0e7 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.ts b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.ts
index af83be0bf3..2f3f3a60a0 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info.component.ts
+++ b/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();
   }
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.html b/static/skywire-manager-src/src/app/components/pages/node/node.component.html
index 13a5e333bf..c2f43d21f2 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts b/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
index 625b19411d..e0e40bcb85 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
@@ -5,12 +5,12 @@ import { Observable, of, ReplaySubject, timer } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
 import { delay } from 'rxjs/operators';
 
-import { NodeService, BackendData } from '../../../services/node.service';
 import { Node } from '../../../app.datatypes';
 import { StorageService } from '../../../services/storage.service';
 import { TabButtonData } from '../../layout/top-bar/top-bar.component';
 import { SnackbarService } from '../../../services/snackbar.service';
 import { NodeActionsHelper } from './actions/node-actions-helper';
+import { SingleNodeBackendData, SingleNodeDataService, TrafficData } from 'src/app/services/single-node-data.service';
 
 /**
  * Main page used for showing the details of a node. It is in charge of loading
@@ -35,8 +35,13 @@ export class NodeComponent implements OnInit, OnDestroy {
    * Lastest node data downloaded by the currently active instance of this page.
    */
   private static nodeSubject: ReplaySubject<Node>;
+  /**
+   * Lastest node traffic data downloaded by the currently active instance of this page.
+   */
+  private static trafficDataSubject: ReplaySubject<TrafficData>;
 
   node: Node;
+  trafficData: TrafficData;
   notFound = false;
 
   // Values for the tab bar.
@@ -103,9 +108,16 @@ export class NodeComponent implements OnInit, OnDestroy {
     return NodeComponent.nodeSubject.asObservable();
   }
 
+  /**
+   * Gets the lastest node traffic data downloaded by the currently active instance of this page.
+   */
+  public static get currentTrafficData(): Observable<TrafficData> {
+    return NodeComponent.trafficDataSubject.asObservable();
+  }
+
   constructor(
     public storageService: StorageService,
-    private nodeService: NodeService,
+    private singleNodeDataService: SingleNodeDataService,
     private route: ActivatedRoute,
     private ngZone: NgZone,
     private snackbarService: SnackbarService,
@@ -113,6 +125,7 @@ export class NodeComponent implements OnInit, OnDestroy {
     router: Router,
   ) {
     NodeComponent.nodeSubject = new ReplaySubject<Node>(1);
+    NodeComponent.trafficDataSubject = new ReplaySubject<TrafficData>(1);
     NodeComponent.currentInstanceInternal = this;
 
     this.navigationsSubscription = router.events.subscribe(event => {
@@ -150,7 +163,6 @@ export class NodeComponent implements OnInit, OnDestroy {
     this.navigationsSubscription.unsubscribe();
 
     // Load the data.
-    this.nodeService.startRequestingSpecificNode(NodeComponent.currentNodeKey);
     this.startGettingData();
   }
 
@@ -260,25 +272,26 @@ export class NodeComponent implements OnInit, OnDestroy {
       this.lastUpdateRequestedManually = true;
     }
 
-    this.nodeService.forceSpecificNodeRefresh();
+    this.singleNodeDataService.forceSpecificNodeRefresh(NodeComponent.currentNodeKey);
   }
 
   /**
    * Starts getting the data from the backend.
    */
   private startGettingData() {
-    // Detect when the service is updating the data.
-    this.dataSubscription = this.nodeService.updatingSpecificNode.subscribe(val => this.updating = val);
-
     this.ngZone.runOutsideAngular(() => {
       // Get the node info.
-      this.dataSubscription.add(this.nodeService.specificNode.subscribe((result: BackendData) => {
+      this.dataSubscription = this.singleNodeDataService.startRequestingData(NodeComponent.currentNodeKey).subscribe((result: SingleNodeBackendData) => {
         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.node = result.data as Node;
+              this.node = result.data;
+              this.trafficData = result.trafficData;
               NodeComponent.nodeSubject.next(this.node);
+              NodeComponent.trafficDataSubject.next(this.trafficData);
               if (this.nodeActionsHelper) {
                 this.nodeActionsHelper.setCurrentNode(this.node);
               }
@@ -319,12 +332,12 @@ export class NodeComponent implements OnInit, OnDestroy {
             }
           }
         });
-      }));
+      });
     });
   }
 
   ngOnDestroy() {
-    this.nodeService.stopRequestingSpecificNode();
+    this.singleNodeDataService.stopRequestingSpecificNode(NodeComponent.currentNodeKey);
 
     this.dataSubscription.unsubscribe();
     this.updateTimeSubscription.unsubscribe();
@@ -337,6 +350,9 @@ export class NodeComponent implements OnInit, OnDestroy {
     NodeComponent.nodeSubject.complete();
     NodeComponent.nodeSubject = undefined;
 
+    NodeComponent.trafficDataSubject.complete();
+    NodeComponent.trafficDataSubject = undefined;
+
     this.nodeActionsHelper.dispose();
   }
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts
index 76d3c69cca..4592c9349d 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -21,6 +21,7 @@ import { processServiceError } from '../../../../utils/errors';
 export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('button') button: ButtonComponent;
   @ViewChild('firstInput') firstInput: ElementRef;
+  @Output() workingState = new EventEmitter<boolean>();
 
   /**
    * If true, the control is used for setting the password for the first time. If false,
@@ -76,6 +77,7 @@ export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
   changePassword() {
     if (this.form.valid && !this.button.disabled) {
       this.button.showLoading();
+      this.workingState.next(true);
 
       if (!this.forInitialConfig) {
         this.subscription = this.authService.changePassword(this.form.get('oldPassword').value, this.form.get('newPassword').value)
@@ -83,11 +85,13 @@ export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
             () => {
               this.router.navigate(['nodes']);
               this.snackbarService.showDone('settings.password.password-changed');
+              this.workingState.next(false);
             }, (err: OperationError) => {
               this.button.showError();
               err = processServiceError(err);
 
               this.snackbarService.showError(err);
+              this.workingState.next(false);
             },
           );
       } else {
@@ -95,12 +99,15 @@ export class PasswordComponent implements OnInit, AfterViewInit, OnDestroy {
           () => {
             this.dialog.closeAll();
             this.snackbarService.showDone('settings.password.initial-config.done');
+            this.workingState.next(false);
           }, err => {
             this.button.showError();
             err = processServiceError(err);
 
             // The errors are marked as temporary to close the snackbar when closing the modal window.
             this.snackbarService.showError(err, null, true);
+
+            this.workingState.next(false);
           },
         );
       }
diff --git a/static/skywire-manager-src/src/app/services/multiple-node-data.service.ts b/static/skywire-manager-src/src/app/services/multiple-node-data.service.ts
new file mode 100644
index 0000000000..b27a62ec21
--- /dev/null
+++ b/static/skywire-manager-src/src/app/services/multiple-node-data.service.ts
@@ -0,0 +1,141 @@
+import { Injectable } from '@angular/core';
+import { Observable, Subscription, BehaviorSubject, of } from 'rxjs';
+import { delay, tap, mergeMap } from 'rxjs/operators';
+
+import { StorageService } from './storage.service';
+import { Node } from '../app.datatypes';
+import { processServiceError } from '../utils/errors';
+import { OperationError } from '../utils/operation-error';
+import { AppConfig } from '../app.config';
+import { NodeService } from './node.service';
+
+/**
+ * Data about the node list, returned by MultipleNodeDataService.
+ */
+export class MultipleNodesBackendData {
+  /**
+   * Node list. If the last operation for getting the data ended in an error, this property
+   * may still have a previously obtained value. If no data has already been obtained, it
+   * is null
+   */
+  data: Node[];
+  /**
+   * Error found while trying to get the data. It will only have a value if the last
+   * try ended in an error.
+   */
+  error: OperationError;
+  /**
+   * Time (Date.now()) in which the data returned in the data property was obtained. If
+   * the error proterty has a value, this property will still have a valid value if valid
+   * data was previously found.
+   */
+  momentOfLastCorrectUpdate: number;
+  /**
+   * If the service is currently updating the data.
+   */
+  updating: boolean;
+}
+
+/**
+ * Allows to get the list of nodes the current hypervisor is managing. It takes care of getting
+ * the data and refreshing it in the intervals defined in the settings. After
+ * startRequestingData() is called, it is constantly refreshing the data.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class MultipleNodeDataService {
+  // Intervals (in ms) in which the service must refresh the data automatically.
+  private dataRefreshDelay: number;
+  // Subject for sending the data updates.
+  dataSubject = new BehaviorSubject<MultipleNodesBackendData>(null);
+  // Subscription for refreshing the data periodically.
+  updateSubscription: Subscription;
+  // Last data sent by dataSubject.
+  lastEmitedData = new MultipleNodesBackendData();
+  // If the getData function has already been called.
+  firstCallToGetDataMade = false;
+
+  constructor(
+    private storageService: StorageService,
+    private nodeService: NodeService,
+  ) {
+    // Get the data refresing time set by the user.
+    this.storageService.getRefreshTimeObservable().subscribe(val => {
+      this.dataRefreshDelay = val * 1000;
+
+      // Refresh all data inmediatelly.
+      this.forceRefresh();
+    });
+  }
+
+  /**
+   * Makes the service start returning the node list. Returns an observable for
+   * getting the data.
+   */
+  startRequestingData(): Observable<MultipleNodesBackendData> {
+    if (!this.firstCallToGetDataMade) {
+      this.getData(0);
+    }
+
+    return this.dataSubject.asObservable();
+  }
+
+  /**
+   * Starts periodically getting the node list.
+   * @param delayMs Delay before loading the data.
+   */
+  private getData(delayMs: number) {
+    this.firstCallToGetDataMade = true;
+
+    if (this.updateSubscription) {
+      this.updateSubscription.unsubscribe();
+    }
+
+    this.updateSubscription = of(1).pipe(
+      // Wait the requested delay.
+      delay(delayMs),
+      // Additional steps for making sure the UI shows the animation (important in case of quick errors).
+      tap(() => {
+        this.lastEmitedData.updating = true;
+        this.dataSubject.next(this.lastEmitedData);
+      }),
+      delay(120),
+      // Load the data.
+      mergeMap(() => this.nodeService.getNodes()))
+    .subscribe(result => {
+      // Send the event.
+      this.lastEmitedData = {
+        data: result,
+        error: null,
+        momentOfLastCorrectUpdate: Date.now(),
+        updating: false
+      };
+      this.dataSubject.next(this.lastEmitedData);
+
+      // Schedule the next update.
+      this.getData(this.dataRefreshDelay);
+    }, err => {
+      err = processServiceError(err);
+
+      // Send the event.
+      this.lastEmitedData = {
+        data: this.lastEmitedData.data,
+        error: err,
+        momentOfLastCorrectUpdate: this.lastEmitedData.momentOfLastCorrectUpdate,
+        updating: false
+      };
+      this.dataSubject.next(this.lastEmitedData);
+
+      // Schedule the next update.
+      this.getData(AppConfig.connectionRetryDelay);
+    });
+  }
+
+  /**
+   * Makes the service immediately refresh the node list.
+   */
+  forceRefresh() {
+    this.getData(0);
+  }
+}
diff --git a/static/skywire-manager-src/src/app/services/node.service.ts b/static/skywire-manager-src/src/app/services/node.service.ts
index 0882476e5c..492ffe2d30 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -1,15 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
-import { Observable, Subscription, BehaviorSubject, of } from 'rxjs';
-import { map, delay, tap, mergeMap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import BigNumber from 'bignumber.js';
 
 import { StorageService } from './storage.service';
-import { Node, Transport } from '../app.datatypes';
+import { Node } from '../app.datatypes';
 import { ApiService } from './api.service';
-import { processServiceError } from '../utils/errors';
-import { OperationError } from '../utils/operation-error';
-import { AppConfig } from '../app.config';
 
 /**
  * Known statuses the API returns in the health property of the visors.
@@ -20,57 +16,10 @@ export enum KnownHealthStatuses {
   Healthy = 'healthy',
 }
 
-/**
- * Response returned by the node and node list observables.
- */
-export interface BackendData {
-  /**
-   * Last obtained node or node list. If the last operation for getting the data ended in an
-   * error, this property may still have an previously obtained value.
-   */
-  data: Node[] | Node;
-  /**
-   * Error found while trying to get the data. If will only have a value if the last
-   * try ended in an error.
-   */
-  error: OperationError;
-  /**
-   * Unix time in which the data returned in the data property was obtained. If
-   * OperationError has a value, this property will still have a valid value if valid
-   * data was previously found.
-   */
-  momentOfLastCorrectUpdate: number;
-}
-
-/**
- * Response returned by specificNodeTrafficData.
- */
-export class TrafficData {
-  /**
-   * Total amount of data sent by the node since it was started.
-   */
-  totalSent = 0;
-  /**
-   * Total amount of data received by the node since it was started.
-   */
-  totalReceived = 0;
-  /**
-   * Array with historic values of the totalSent property. Each value will be separeted by
-   * the amount of time selected by the user for refreshing the data. It is not an exact history,
-   * but the service will try it best to provided good data.
-   */
-  sentHistory: number[] = [];
-  /**
-   * Array with historic values of the totalReceived property. Each value will be separeted by
-   * the amount of time selected by the user for refreshing the data. It is not an exact history,
-   * but the service will try it best to provided good data.
-   */
-  receivedHistory: number[] = [];
-}
-
 /**
  * Keys for saving custom settings for the calls to the updater API endpoints.
  */
+// TODO: remove after removing the old updater.
 export enum UpdaterStorageKeys {
   /**
    * If has a value, at least one of the other keys have a value.
@@ -89,385 +38,15 @@ export enum UpdaterStorageKeys {
   providedIn: 'root'
 })
 export class NodeService {
-
-  // How long the history arrays of the TrafficData instances will be.
-  private readonly maxTrafficHistorySlots = 10;
-
-  // Delay the service waits before requesting data.
-  private dataRefreshDelay: number;
-
-  // Vars related to the node list.
-  private nodeListSubject = new BehaviorSubject<BackendData>(null);
-  private updatingNodeListSubject = new BehaviorSubject<boolean>(false);
-  /**
-   * Subscription for getting the node list. If it has a value, indicates that the
-   * service is automatically refreshing the node list.
-   */
-  private nodeListRefreshSubscription: Subscription;
-  /**
-   * Subscription for the timer to stop refresing the node list. If it is valid, it means
-   * a call to stop updating the data was made, but it is still pending.
-   */
-  private nodeListStopSubscription: Subscription;
-
-  // Vars related to the specific node.
-  private specificNodeSubject = new BehaviorSubject<BackendData>(null);
-  private updatingSpecificNodeSubject = new BehaviorSubject<boolean>(false);
-  private specificNodeTrafficDataSubject = new BehaviorSubject<TrafficData>(null);
-  /**
-   * Public key of the specific node this service must retrieve.
-   */
-  private specificNodeKey = '';
-  /**
-   * Last moment in which the specific node info was obtained following the specific intervals
-   * defined by the user for updating the data. It allows to update the history data in a
-   * consistent way.
-   */
-  private lastScheduledHistoryUpdateTime = 0;
-
-  /**
-   * Subscription for getting the specific node. If it has a value, indicates that the
-   * service is automatically refreshing the node info.
-   */
-  private specificNodeRefreshSubscription: Subscription;
-  /**
-   * Subscription for the timer to stop refresing the specific node. If it is valid, it means
-   * a call to stop updating the data was made, but it is still pending.
-   */
-  private specificNodeStopSubscription: Subscription;
-
-  /**
-   * Allows to get the node list. The list is periodically updated. It may emit null.
-   */
-  get nodeList(): Observable<BackendData> {
-    return this.nodeListSubject.asObservable();
-  }
-  /**
-   * Allows to know if the service is currently updating the node list.
-   */
-  get updatingNodeList(): Observable<boolean> {
-    return this.updatingNodeListSubject.asObservable();
-  }
-  /**
-   * Allows to get the specific node. The info is periodically updated. It may emit null.
-   */
-  get specificNode(): Observable<BackendData> {
-    return this.specificNodeSubject.asObservable();
-  }
-  /**
-   * Allows to know if the service is currently updating the specific node.
-   */
-  get updatingSpecificNode(): Observable<boolean> {
-    return this.updatingSpecificNodeSubject.asObservable();
-  }
-  /**
-   * Allows to get details about the data traffic of the specific node. The info is
-   * periodically updated.
-   */
-  get specificNodeTrafficData(): Observable<TrafficData> {
-    return this.specificNodeTrafficDataSubject.asObservable();
-  }
-
   constructor(
     private apiService: ApiService,
     private storageService: StorageService,
-  ) {
-    // Get the data refresing time set by the user.
-    this.storageService.getRefreshTimeObservable().subscribe(val => {
-      this.dataRefreshDelay = val * 1000;
-
-      // If the service is currently automatically refreshing the data, restart the process.
-      if (this.nodeListRefreshSubscription) {
-        this.forceNodeListRefresh();
-      }
-      if (this.specificNodeRefreshSubscription) {
-        this.forceSpecificNodeRefresh();
-      }
-    });
-  }
-
-  /**
-   * Makes the service start updating the node list. You must call this function before
-   * using the nodeList observable.
-   */
-  startRequestingNodeList() {
-    // If the previous procedure is still valid, continue it.
-    if (this.nodeListStopSubscription && !this.nodeListStopSubscription.closed) {
-      this.nodeListStopSubscription.unsubscribe();
-      this.nodeListStopSubscription = null;
-
-      return;
-    }
-
-    // Get for how many ms the saved data is still valid.
-    const momentOfLastCorrectUpdate = this.nodeListSubject.value ? this.nodeListSubject.value.momentOfLastCorrectUpdate : 0;
-    let remainingTime = this.calculateRemainingTime(momentOfLastCorrectUpdate);
-    remainingTime = remainingTime > 0 ? remainingTime : 0;
-
-    // Use the data obtained the last time and schedule an update after the appropriate time.
-    this.startDataSubscription(remainingTime, true);
-  }
-
-  /**
-   * Makes the service start updating a specific node. You must call this function before
-   * using the specificNode observable.
-   * @param publicKey Public key of the specific node to consult.
-   */
-  startRequestingSpecificNode(publicKey: string) {
-    // If the previous procedure is still valid, continue it.
-    if (this.specificNodeStopSubscription && !this.specificNodeStopSubscription.closed && this.specificNodeKey === publicKey) {
-      this.specificNodeStopSubscription.unsubscribe();
-      this.specificNodeStopSubscription = null;
-
-      return;
-    }
-
-    // Get for how many ms the saved data is still valid.
-    const momentOfLastCorrectUpdate = this.specificNodeSubject.value ? this.specificNodeSubject.value.momentOfLastCorrectUpdate : 0;
-    const remainingTime = this.calculateRemainingTime(momentOfLastCorrectUpdate);
-
-    // Reset the predefined data update intervals.
-    this.lastScheduledHistoryUpdateTime = 0;
-
-    if (this.specificNodeKey !== publicKey || remainingTime === 0) {
-      // Get the data from the backend.
-      this.specificNodeKey = publicKey;
-      this.specificNodeTrafficDataSubject.next(new TrafficData());
-      this.specificNodeSubject.next(null);
-      this.startDataSubscription(0, false);
-    } else {
-      // Use the data obtained the last time and schedule an update after the appropriate time.
-      this.startDataSubscription(remainingTime, false);
-    }
-  }
-
-  /**
-   * Calculates for how many ms the saved data is still valid before an update should be made.
-   * @param momentOfLastCorrectUpdate Moment in which the data was saved.
-   */
-  private calculateRemainingTime(momentOfLastCorrectUpdate: number): number {
-    if (momentOfLastCorrectUpdate < 1) {
-      return 0;
-    }
-
-    let refreshDelay = this.dataRefreshDelay - (Date.now() - momentOfLastCorrectUpdate);
-    if (refreshDelay < 0) {
-      refreshDelay = 0;
-    }
-
-    return refreshDelay;
-  }
-
-  /**
-   * Makes the service stop updating the node list.
-   */
-  stopRequestingNodeList() {
-    if (this.nodeListRefreshSubscription) {
-      this.nodeListStopSubscription = of(1).pipe(delay(4000)).subscribe(() => {
-        this.nodeListRefreshSubscription.unsubscribe();
-        this.nodeListRefreshSubscription = null;
-      });
-    }
-  }
-
-  /**
-   * Makes the service stop updating the specific node.
-   */
-  stopRequestingSpecificNode() {
-    if (this.specificNodeRefreshSubscription) {
-      // The delay allows to recover the connection if the user returns to the node page.
-      this.specificNodeStopSubscription = of(1).pipe(delay(4000)).subscribe(() => {
-        this.specificNodeRefreshSubscription.unsubscribe();
-        this.specificNodeRefreshSubscription = null;
-      });
-    }
-  }
-
-  /**
-   * Starts periodically updating the node list or the specific node.
-   * @param delayMs Delay before loading the data.
-   * @param gettingNodeList True for getting the node list and false for getting the specific node.
-   */
-  private startDataSubscription(delayMs: number, gettingNodeList: boolean) {
-    let updatingSubject: BehaviorSubject<boolean>;
-    let dataSubject: BehaviorSubject<BackendData>;
-    let operation: Observable<any>;
-
-    if (gettingNodeList) {
-      updatingSubject = this.updatingNodeListSubject;
-      dataSubject = this.nodeListSubject;
-      operation = this.getNodes();
-
-      if (this.nodeListRefreshSubscription) {
-        this.nodeListRefreshSubscription.unsubscribe();
-      }
-    } else {
-      updatingSubject = this.updatingSpecificNodeSubject;
-      dataSubject = this.specificNodeSubject;
-      operation = this.getNode(this.specificNodeKey);
-
-      // Cancel any pending stop operation.
-      if (this.specificNodeStopSubscription) {
-        this.specificNodeStopSubscription.unsubscribe();
-        this.specificNodeStopSubscription = null;
-      }
-
-      if (this.specificNodeRefreshSubscription) {
-        this.specificNodeRefreshSubscription.unsubscribe();
-      }
-    }
-
-    const subscription = of(1).pipe(
-      // Wait the requested delay.
-      delay(delayMs),
-      // Additional steps for making sure the UI shows the animation (important in case of quick errors).
-      tap(() => updatingSubject.next(true)),
-      delay(120),
-      // Load the data.
-      mergeMap(() => operation))
-    .subscribe(result => {
-      updatingSubject.next(false);
-
-      // Calculate the delay for the next update.
-      let refrestTime: number;
-      if (!gettingNodeList) {
-        // Update the history values.
-        this.updateTrafficData((result as Node).transports);
-
-        // Wait for the amount of time pending for the next scheduled data update. This is needed
-        // in case the data was updated before that by any reason.
-        refrestTime = this.calculateRemainingTime(this.lastScheduledHistoryUpdateTime);
-        if (refrestTime < 1000) {
-          // Wait the normal time if there is just very lite or no time left for the next update.
-          this.lastScheduledHistoryUpdateTime = Date.now();
-          refrestTime = this.dataRefreshDelay;
-        }
-      } else {
-        // Wait the normal time.
-        refrestTime = this.dataRefreshDelay;
-      }
-
-      const newData: BackendData = {
-        data: result,
-        error: null,
-        momentOfLastCorrectUpdate: Date.now(),
-      };
-
-      dataSubject.next(newData);
-
-      // Schedule the next update.
-      this.startDataSubscription(refrestTime, gettingNodeList);
-    }, err => {
-      updatingSubject.next(false);
-
-      err = processServiceError(err);
-      const newData: BackendData = {
-        data: dataSubject.value && dataSubject.value.data ? dataSubject.value.data : null,
-        error: err,
-        momentOfLastCorrectUpdate: dataSubject.value ? dataSubject.value.momentOfLastCorrectUpdate : -1,
-      };
-
-      // If the specific node was not found, stop updating the data.
-      const stopUpdating = !gettingNodeList && err.originalError && ((err.originalError as HttpErrorResponse).status === 400);
-
-      // Schedule the next update.
-      if (!stopUpdating) {
-        this.startDataSubscription(AppConfig.connectionRetryDelay, gettingNodeList);
-      }
-
-      dataSubject.next(newData);
-    });
-
-    if (gettingNodeList) {
-      this.nodeListRefreshSubscription = subscription;
-    } else {
-      this.specificNodeRefreshSubscription = subscription;
-    }
-  }
-
-  /**
-   * Updates the traffic data of the specific node.
-   * @param transports Transports of the specific node.
-   */
-  private updateTrafficData(transports: Transport[]) {
-    const currentData = this.specificNodeTrafficDataSubject.value;
-
-    // Update the total data values.
-    currentData.totalSent = 0;
-    currentData.totalReceived = 0;
-    if (transports && transports.length > 0) {
-      currentData.totalSent = transports.reduce((total, transport) => total + transport.sent, 0);
-      currentData.totalReceived = transports.reduce((total, transport) => total + transport.recv, 0);
-    }
-
-    // Update the history.
-    if (currentData.sentHistory.length === 0) {
-      // If the array is empty, just initialice the array with the only known value.
-      for (let i = 0; i < this.maxTrafficHistorySlots; i++) {
-        currentData.sentHistory[i] = currentData.totalSent;
-        currentData.receivedHistory[i] = currentData.totalReceived;
-      }
-    } else {
-      // Calculate how many slots should we move since the last time the history was updated.
-      // This makes the intervals work well in case of normal updates, forced updates and
-      // late updates due to errors.
-      const TimeSinceLastHistoryUpdate = Date.now() - this.lastScheduledHistoryUpdateTime;
-      let newSlotsNeeded =
-        new BigNumber(TimeSinceLastHistoryUpdate).dividedBy(this.dataRefreshDelay).decimalPlaces(0, BigNumber.ROUND_FLOOR).toNumber();
-
-      if (newSlotsNeeded > this.maxTrafficHistorySlots) {
-        newSlotsNeeded = this.maxTrafficHistorySlots;
-      }
-
-      // Save the data in the correct slots.
-      if (newSlotsNeeded === 0) {
-        currentData.sentHistory[currentData.sentHistory.length - 1] = currentData.totalSent;
-        currentData.receivedHistory[currentData.receivedHistory.length - 1] = currentData.totalReceived;
-      } else {
-        for (let i = 0; i < newSlotsNeeded; i++) {
-          currentData.sentHistory.push(currentData.totalSent);
-          currentData.receivedHistory.push(currentData.totalReceived);
-        }
-      }
-
-      // Limit the history elements.
-      if (currentData.sentHistory.length > this.maxTrafficHistorySlots) {
-        currentData.sentHistory.splice(0, currentData.sentHistory.length - this.maxTrafficHistorySlots);
-        currentData.receivedHistory.splice(0, currentData.receivedHistory.length - this.maxTrafficHistorySlots);
-      }
-    }
-
-    this.specificNodeTrafficDataSubject.next(currentData);
-  }
-
-  /**
-   * Makes the service immediately refresh the node list.
-   */
-  forceNodeListRefresh() {
-    if (this.nodeListSubject.value) {
-      // Make sure the current data is invalidated.
-      this.nodeListSubject.value.momentOfLastCorrectUpdate = -1;
-    }
-
-    this.startDataSubscription(0, true);
-  }
-
-  /**
-   * Makes the service immediately refresh the specific node.
-   */
-  forceSpecificNodeRefresh() {
-    if (this.specificNodeSubject.value) {
-      // Make sure the current data is invalidated.
-      this.specificNodeSubject.value.momentOfLastCorrectUpdate = -1;
-    }
-
-    this.startDataSubscription(0, false);
-  }
+  ) { }
 
   /**
    * Gets the list of the nodes connected to the hypervisor.
    */
-  private getNodes(): Observable<Node[]> {
+  public getNodes(): Observable<Node[]> {
     let nodes: Node[] = [];
 
     return this.apiService.get('visors-summary').pipe(map((result: any[]) => {
diff --git a/static/skywire-manager-src/src/app/services/single-node-data.service.ts b/static/skywire-manager-src/src/app/services/single-node-data.service.ts
new file mode 100644
index 0000000000..c909b75308
--- /dev/null
+++ b/static/skywire-manager-src/src/app/services/single-node-data.service.ts
@@ -0,0 +1,360 @@
+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Observable, Subscription, BehaviorSubject, of } from 'rxjs';
+import { delay, tap, mergeMap } from 'rxjs/operators';
+import BigNumber from 'bignumber.js';
+
+import { StorageService } from './storage.service';
+import { Node, Transport } from '../app.datatypes';
+import { processServiceError } from '../utils/errors';
+import { OperationError } from '../utils/operation-error';
+import { AppConfig } from '../app.config';
+import { NodeService } from './node.service';
+
+/**
+ * Data about a node, returned by SingleNodeDataService.
+ */
+export class SingleNodeBackendData {
+  /**
+   * Basic node data. If the last operation for getting the data ended in an
+   * error, this property may still have a previously obtained value. If no data has already
+   * been obtained, it is null
+   */
+  data: Node;
+  /**
+   * Error found while trying to get the data. It will only have a value if the last
+   * try ended in an error.
+   */
+  error: OperationError;
+  /**
+   * Time (Date.now()) in which the data returned in the data property was obtained. If
+   * the error proterty has a value, this property will still have a valid value if valid
+   * data was previously found.
+   */
+  momentOfLastCorrectUpdate: number;
+  /**
+   * If the service is currently updating the data.
+   */
+  updating: boolean;
+  /**
+   * Stats about the data the node has sent and received.
+   */
+  trafficData = new TrafficData();
+}
+
+/**
+ * Stats about the data a node has sent and received.
+ */
+export class TrafficData {
+  /**
+   * Total amount of data sent by the node since it was started.
+   */
+  totalSent = 0;
+  /**
+   * Total amount of data received by the node since it was started.
+   */
+  totalReceived = 0;
+  /**
+   * Array with historic values of the totalSent property. Each value will be separeted by
+   * the amount of time selected by the user for refreshing the data. It is not an exact history,
+   * but the service will try it best to provided good data.
+   */
+  sentHistory: number[] = [];
+  /**
+   * Array with historic values of the totalReceived property. Each value will be separeted by
+   * the amount of time selected by the user for refreshing the data. It is not an exact history,
+   * but the service will try it best to provided good data.
+   */
+  receivedHistory: number[] = [];
+}
+
+/**
+ * Data about a node for internal use inside SingleNodeDataService.
+ */
+export class NodeData {
+  /**
+   * Public key of the node.
+   */
+  pk: string;
+  /**
+   * Last SingleNodeBackendData instance that was emited with dataSubject.
+   */
+  lastEmitedData = new SingleNodeBackendData();
+  /**
+   * Subscription used for refreshing the node data periodically. Unsubscribe to
+   * stop automatic refreshes.
+   */
+  updateSubscription: Subscription;
+  /**
+   * Subject used for sending events with data about this node.
+   */
+  dataSubject = new BehaviorSubject<SingleNodeBackendData>(null);
+  /**
+   * Moment in which the last automatic data refresh was scheduled. It is not the same as the
+   * last moment in which the data was obtained, as the data could have not been obtained via
+   * an automatic refresh (like when the user requests an update manually).
+   */
+  whenUpdateWasScheduled = 0;
+  /**
+   * Moment (Date.now()) in which a call to stop refreshing the node data and drop it from
+   * the cache was made. If -1, no such call has been made.
+   */
+  stopRequestedDate = -1;
+}
+
+/**
+ * Allows to get the data of a specific node. It takes care of getting the data and refreshing
+ * it in the intervals defined in the settings. It also contains a cache that maintains node
+ * data saved for some time, to avoid getting the data multiple times during navigation if not needed.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class SingleNodeDataService {
+  // How long the history arrays of the TrafficData instances will be.
+  private readonly maxTrafficHistorySlots = 10;
+  // How much time entries should remain inside nodesMap after a stop request is made.
+  private readonly expirationTime = 60000;
+
+  // Intervals (in ms) in which the service must refresh the node data automatically.
+  private dataRefreshDelay: number;
+
+  // Map that works as cache, containing the data of the nodes this service has requested
+  // data for. Entries here are updated automatically, even if a stop request was made, and
+  // are purged after some time if a stop request was made.
+  nodesMap = new Map<string, NodeData>();
+
+  constructor(
+    private storageService: StorageService,
+    private nodeService: NodeService,
+  ) {
+    // Get the data refresing time set by the user.
+    this.storageService.getRefreshTimeObservable().subscribe(val => {
+      this.dataRefreshDelay = val * 1000;
+
+      // Refresh all data inmediatelly.
+      this.nodesMap.forEach(n => {
+        this.forceSpecificNodeRefresh(n.pk);
+      });
+    });
+
+    this.checkForExpired();
+  }
+
+  /**
+   * Periodically checks all entries in nodesMap and removes all expired ones. Must be
+   * called one tim e only, it calls itself automatically after that,
+   */
+  private checkForExpired() {
+    of(1).pipe(delay(5000)).subscribe(() => {
+      try {
+        this.nodesMap.forEach(n => {
+          this.finishIfExpired(n);
+        });
+      } catch (e) {}
+
+      this.checkForExpired();
+    });
+  }
+
+  /**
+   * Makes the service start returning data for a specific node. Returns an observable for
+   * getting the data.
+   * @param publicKey Public key of the specific node to check.
+   */
+  startRequestingData(publicKey: string): Observable<SingleNodeBackendData> {
+    // If the cache has info about the node, use the cached info. If not, create a
+    // new entry.
+    let nodeData = this.nodesMap.get(publicKey);
+    if (!nodeData) {
+      nodeData = new NodeData();
+      nodeData.pk = publicKey;
+
+      this.nodesMap.set(publicKey, nodeData);
+
+      this.startDataSubscription(0, nodeData);
+    } else {
+      // Cancel any previous stop request.
+      nodeData.stopRequestedDate = -1;
+    }
+
+    return nodeData.dataSubject.asObservable();
+  }
+
+  /**
+   * Makes the service stop updating the data of a specific node. It is just a request, the
+   * data will still be refreshed and maintained in cache for some time, to be able to access
+   * it quickly if needed shortly after.
+   */
+  stopRequestingSpecificNode(publicKey: string) {
+    const nodeData = this.nodesMap.get(publicKey);
+    if (nodeData) {
+      nodeData.stopRequestedDate = Date.now();
+    }
+  }
+
+  /**
+   * Starts periodically getting the data of a specific node.
+   * @param delayMs Delay before loading the data.
+   * @param nodeData Data about the node.
+   */
+  private startDataSubscription(delayMs: number, nodeData: NodeData) {
+    if (nodeData.updateSubscription) {
+      nodeData.updateSubscription.unsubscribe();
+    }
+
+    nodeData.updateSubscription = of(1).pipe(
+      // Wait the requested delay.
+      delay(delayMs),
+      // Additional steps for making sure the UI shows the animation (important in case of quick errors).
+      tap(() => {
+        nodeData.lastEmitedData.updating = true;
+        nodeData.dataSubject.next(nodeData.lastEmitedData);
+      }),
+      delay(120),
+      // Load the data.
+      mergeMap(() => this.nodeService.getNode(nodeData.pk)))
+    .subscribe(result => {
+      // Update the history values.
+      this.updateTrafficData((result as Node).transports, nodeData.lastEmitedData.trafficData, nodeData.whenUpdateWasScheduled);
+
+      // Wait for the amount of time pending for the next scheduled data update. This is needed
+      // in case the data was updated before than expected for any reason.
+      let refreshTime = this.calculateRemainingTime(nodeData.whenUpdateWasScheduled);
+      if (refreshTime < 1000) {
+        // Wait the normal time if there is just very lite or no time left for the next update.
+        nodeData.whenUpdateWasScheduled = Date.now();
+        refreshTime = this.dataRefreshDelay;
+      }
+
+      // Send the event.
+      nodeData.lastEmitedData = {
+        data: result,
+        error: null,
+        momentOfLastCorrectUpdate: Date.now(),
+        updating: false,
+        trafficData: nodeData.lastEmitedData.trafficData
+      };
+      nodeData.dataSubject.next(nodeData.lastEmitedData);
+
+      // Schedule the next update.
+      this.startDataSubscription(refreshTime, nodeData);
+    }, err => {
+      err = processServiceError(err);
+
+      // Send the event.
+      nodeData.lastEmitedData = {
+        data: nodeData.lastEmitedData.data,
+        error: err,
+        momentOfLastCorrectUpdate: nodeData.lastEmitedData.momentOfLastCorrectUpdate,
+        updating: false,
+        trafficData: nodeData.lastEmitedData.trafficData
+      };
+      nodeData.dataSubject.next(nodeData.lastEmitedData);
+
+      // If the specific node was not found, stop updating the data.
+      const stopUpdating = err.originalError && ((err.originalError as HttpErrorResponse).status === 400);
+      if (!stopUpdating) {
+        // Schedule the next update.
+        this.startDataSubscription(AppConfig.connectionRetryDelay, nodeData);
+      } else {
+        nodeData.dataSubject.complete();
+        nodeData.updateSubscription.unsubscribe();
+        this.nodesMap.delete(nodeData.pk);
+      }
+    });
+  }
+
+  /**
+   * Calculates for how many ms a saved data is still valid before an update should be made.
+   * @param momentOfLastCorrectUpdate Moment in which the data was saved.
+   */
+  private calculateRemainingTime(momentOfLastCorrectUpdate: number): number {
+    if (momentOfLastCorrectUpdate < 1) {
+      return 0;
+    }
+
+    let refreshDelay = this.dataRefreshDelay - (Date.now() - momentOfLastCorrectUpdate);
+    if (refreshDelay < 0) {
+      refreshDelay = 0;
+    }
+
+    return refreshDelay;
+  }
+
+  /**
+   * Updates the traffic data.
+   * @param transports Transports of the specific node.
+   */
+  private updateTrafficData(transports: Transport[], currentData: TrafficData, lastScheduledHistoryUpdateTime: number) {
+    // Update the total data values.
+    currentData.totalSent = 0;
+    currentData.totalReceived = 0;
+    if (transports && transports.length > 0) {
+      currentData.totalSent = transports.reduce((total, transport) => total + transport.sent, 0);
+      currentData.totalReceived = transports.reduce((total, transport) => total + transport.recv, 0);
+    }
+
+    // Update the history.
+    if (currentData.sentHistory.length === 0) {
+      // If the array is empty, just initialice the array with the only known value.
+      for (let i = 0; i < this.maxTrafficHistorySlots; i++) {
+        currentData.sentHistory[i] = currentData.totalSent;
+        currentData.receivedHistory[i] = currentData.totalReceived;
+      }
+    } else {
+      // Calculate how many slots should we move since the last time the history was updated.
+      // This makes the intervals work well in case of normal updates, forced updates and
+      // late updates due to errors.
+      const TimeSinceLastHistoryUpdate = Date.now() - lastScheduledHistoryUpdateTime;
+      let newSlotsNeeded =
+        new BigNumber(TimeSinceLastHistoryUpdate).dividedBy(this.dataRefreshDelay).decimalPlaces(0, BigNumber.ROUND_FLOOR).toNumber();
+
+      if (newSlotsNeeded > this.maxTrafficHistorySlots) {
+        newSlotsNeeded = this.maxTrafficHistorySlots;
+      }
+
+      // Save the data in the correct slots.
+      if (newSlotsNeeded === 0) {
+        currentData.sentHistory[currentData.sentHistory.length - 1] = currentData.totalSent;
+        currentData.receivedHistory[currentData.receivedHistory.length - 1] = currentData.totalReceived;
+      } else {
+        for (let i = 0; i < newSlotsNeeded; i++) {
+          currentData.sentHistory.push(currentData.totalSent);
+          currentData.receivedHistory.push(currentData.totalReceived);
+        }
+      }
+
+      // Limit the history elements.
+      if (currentData.sentHistory.length > this.maxTrafficHistorySlots) {
+        currentData.sentHistory.splice(0, currentData.sentHistory.length - this.maxTrafficHistorySlots);
+        currentData.receivedHistory.splice(0, currentData.receivedHistory.length - this.maxTrafficHistorySlots);
+      }
+    }
+  }
+
+  /**
+   * Makes the service immediately refresh the specific node.
+   */
+  forceSpecificNodeRefresh(publicKey: string) {
+    const nodeData = this.nodesMap.get(publicKey);
+    if (nodeData) {
+      this.startDataSubscription(0, nodeData);
+    }
+  }
+
+  /**
+   * Checks a node to see if a call for stopping updates was made and if it is already expired.
+   * If so, the updates are stopped and the node is removed form nodesMap.
+   */
+  private finishIfExpired(nodeData: NodeData) {
+    if (nodeData.stopRequestedDate > 0) {
+      if (Date.now() - nodeData.stopRequestedDate > this.expirationTime) {
+        nodeData.dataSubject.complete();
+        nodeData.updateSubscription.unsubscribe();
+
+        this.nodesMap.delete(nodeData.pk);
+      }
+    }
+  }
+}