Save data in the UI per Hypervisor PK

static/skywire-manager-src/src/app/app.component.html

@@ -7,5 +7,6 @@
 </div>
 <div class="flex-1 content container-fluid">
   <div [ngClass]="{'background': inVpnClient}"></div>
-  <router-outlet></router-outlet>
+  <router-outlet *ngIf="hypervisorPkObtained"></router-outlet>
+  <app-loading-indicator class="h-100" *ngIf="!hypervisorPkObtained"></app-loading-indicator>
 </div>

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

@@ -1,11 +1,14 @@
 import { Component } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
-import { Location } from '@angular/common';
 import { MatDialog } from '@angular/material/dialog';
+import { of } from 'rxjs';
+import { delay, flatMap } from 'rxjs/operators';
 
 import { StorageService } from './services/storage.service';
 import { SnackbarService } from './services/snackbar.service';
 import { LanguageService } from './services/language.service';
+import { ApiService } from './services/api.service';
+import { processServiceError } from './utils/errors';
 
 /**
  * Root app component.
@@ -19,14 +22,18 @@ export class AppComponent {
   // If the app is showing the VPN client.
   inVpnClient = false;
 
+  // If the pk of the hypervisor has been obtained.
+  hypervisorPkObtained = false;
+  pkErrorShown = false;
+
   constructor(
     // Imported to call its constructor right after opening the app.
-    storage: StorageService,
-    location: Location,
+    private storage: StorageService,
     router: Router,
-    snackbarService: SnackbarService,
     dialog: MatDialog,
-    languageService: LanguageService,
+    private snackbarService: SnackbarService,
+    private languageService: LanguageService,
+    private apiService: ApiService,
   ) {
     // Close the snackbar when opening a modal window.
     dialog.afterOpened.subscribe(() => snackbarService.closeCurrent());
@@ -45,9 +52,6 @@ export class AppComponent {
     // as modal windows can open the snackbar for showing messages that should stay open.
     dialog.afterAllClosed.subscribe(() => snackbarService.closeCurrentIfTemporaryError());
 
-    // Initialize the language configuration.
-    languageService.loadLanguageSettings();
-
     // Check if the app is showing the VPN client.
     router.events.subscribe(() => {
       this.inVpnClient = router.url.includes('/vpn/') || router.url.includes('vpnlogin');
@@ -61,5 +65,39 @@ export class AppComponent {
         }
       }
     });
+
+    // Initialize the language configuration.
+    this.languageService.loadLanguageSettings();
+
+    this.checkHypervisorPk(0);
+  }
+
+  /**
+   * Gets the pk of the hypervisor. After that, it initializes services and allows the app to start working.
+   */
+  private checkHypervisorPk(delayMs: number) {
+    of(1).pipe(delay(delayMs), flatMap(() => this.apiService.get('about'))).subscribe(result => {
+      if (result.public_key) {
+        this.finishStartup(result.public_key);
+        this.hypervisorPkObtained = true;
+      } else {
+        if (!this.pkErrorShown) {
+          this.snackbarService.showError('start.loading-error', null, true);
+          this.pkErrorShown = true;
+        }
+        this.checkHypervisorPk(1000);
+      }
+    }, err => {
+      if (!this.pkErrorShown) {
+        const e = processServiceError(err);
+        this.snackbarService.showError('start.loading-error', null, true, e);
+        this.pkErrorShown = true;
+      }
+      this.checkHypervisorPk(1000);
+    });
+  }
+
+  private finishStartup(hypervisorPk: string) {
+    this.storage.initialize(hypervisorPk);
   }
 }

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

@@ -167,7 +167,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
       sortableColumns.push(this.pingSortData);
     }
     this.dataSorter = new DataSorter(
-      this.dialog, this.translateService, sortableColumns, 3, this.showDmsgInfo ? this.dmsgListId : this.nodesListId
+      this.dialog, this.translateService, this.storageService, sortableColumns, 3, this.showDmsgInfo ? this.dmsgListId : this.nodesListId
     );
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allNodes has already been sorted.

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

@@ -3,6 +3,8 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Observable, Subscription } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
+import { map } from 'rxjs/operators';
+import { StorageService } from 'src/app/services/storage.service';
 
 import { Application } from '../../../../../app.datatypes';
 import { AppsService } from '../../../../../services/apps.service';
@@ -20,7 +22,6 @@ import { SkysocksClientSettingsComponent } from '../node-apps/skysocks-client-se
 import { FilterProperties, FilterFieldTypes } from 'src/app/utils/filters';
 import { SortingColumn, SortingModes, DataSorter } from 'src/app/utils/lists/data-sorter';
 import { DataFilterer } from 'src/app/utils/lists/data-filterer';
-import { map } from 'rxjs/operators';
 
 /**
  * Shows the list of applications of a node. I can be used to show a short preview, with just some
@@ -158,6 +159,7 @@ export class NodeAppsListComponent implements OnDestroy {
     private router: Router,
     private snackbarService: SnackbarService,
     private translateService: TranslateService,
+    private storageService: StorageService,
   ) {
     // Initialize the data sorter.
     const sortableColumns: SortingColumn[] = [
@@ -166,7 +168,7 @@ export class NodeAppsListComponent implements OnDestroy {
       this.portSortData,
       this.autoStartSortData,
     ];
-    this.dataSorter = new DataSorter(this.dialog, this.translateService, sortableColumns, 1, this.listId);
+    this.dataSorter = new DataSorter(this.dialog, this.translateService, this.storageService, sortableColumns, 1, this.listId);
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allApps has already been sorted.
       this.recalculateElementsToShow();

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

@@ -23,6 +23,7 @@ import {
 import { countriesList } from 'src/app/utils/countries-list';
 import { SkysocksClientPasswordComponent } from './skysocks-client-password/skysocks-client-password.component';
 import { ClipboardService } from 'src/app/services/clipboard.service';
+import { StorageService } from 'src/app/services/storage.service';
 
 /**
  * Data of the entries from the history.
@@ -135,13 +136,16 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     private dialog: MatDialog,
     private proxyDiscoveryService: ProxyDiscoveryService,
     private clipboardService: ClipboardService,
+    private storageService: StorageService,
   ) {
     if (data.name.toLocaleLowerCase().indexOf('vpn') !== -1) {
       this.configuringVpn = true;
     }
   }
 
   ngOnInit() {
+    this.migrateDataToHvStorage();
+
     // Get the proxies or vpn servers from the discovery service.
     this.discoverySubscription = this.proxyDiscoveryService.getServices(!this.configuringVpn).subscribe(response => {
       this.proxiesFromDiscovery = response;
@@ -158,7 +162,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     });
 
     // Get the history.
-    const retrievedHistory = localStorage.getItem(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey);
+    const retrievedHistory = this.storageService.getDataForHv(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey);
     if (retrievedHistory) {
       this.history = JSON.parse(retrievedHistory);
     } else {
@@ -199,10 +203,29 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * It checks if there is data saved from a previous version of the app, without being assigned to a
+   * hypervisor. If the functions finds old data, it is migrated to the new format and assigned to the
+   * current hypervisor.
+   */
+  private migrateDataToHvStorage() {
+    const oldSavedSocksHistory = localStorage.getItem(this.socksHistoryStorageKey);
+    if (oldSavedSocksHistory) {
+      this.storageService.setDataForHv(this.socksHistoryStorageKey, oldSavedSocksHistory);
+      localStorage.removeItem(this.socksHistoryStorageKey);
+    }
+
+    const oldSavedVpnHistory = localStorage.getItem(this.vpnHistoryStorageKey);
+    if (oldSavedVpnHistory) {
+      this.storageService.setDataForHv(this.vpnHistoryStorageKey, oldSavedVpnHistory);
+      localStorage.removeItem(this.vpnHistoryStorageKey);
+    }
+  }
+
   /**
    * If true, all the ways provided by default by the UI for closing the modal window are disabled.
    */
-   get disableDismiss(): boolean {
+  get disableDismiss(): boolean {
     return this.button && this.settingsButton ? (this.button.isLoading || this.settingsButton.isLoading) : false;
   }
 
@@ -406,7 +429,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
       this.history = this.history.filter(value => value.key !== key);
       const dataToSave = JSON.stringify(this.history);
-      localStorage.setItem(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
+      this.storageService.setDataForHv(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
 
       confirmationDialog.close();
     });
@@ -428,7 +451,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
 
         // Save the changes..
         const dataToSave = JSON.stringify(this.history);
-        localStorage.setItem(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
+        this.storageService.setDataForHv(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
 
         if (!response) {
           this.snackbarService.showWarning('apps.vpn-socks-client-settings.default-note-warning');
@@ -615,7 +638,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     this.form.get('pk').setValue(publicKey);
 
     const dataToSave = JSON.stringify(this.history);
-    localStorage.setItem(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
+    this.storageService.setDataForHv(this.configuringVpn ? this.vpnHistoryStorageKey : this.socksHistoryStorageKey, dataToSave);
 
     NodeComponent.refreshCurrentDisplayedData();
     this.snackbarService.showDone('apps.vpn-socks-client-settings.changes-made');

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

@@ -169,7 +169,7 @@ export class RouteListComponent implements OnDestroy {
       this.sourceSortData,
       this.destinationSortData,
     ];
-    this.dataSorter = new DataSorter(this.dialog, this.translateService, sortableColumns, 0, this.listId);
+    this.dataSorter = new DataSorter(this.dialog, this.translateService, this.storageService, sortableColumns, 0, this.listId);
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allRoutes has already been sorted.
       this.recalculateElementsToShow();

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

@@ -183,7 +183,7 @@ export class TransportListComponent implements OnDestroy {
       this.uploadedSortData,
       this.downloadedSortData,
     ];
-    this.dataSorter = new DataSorter(this.dialog, this.translateService, sortableColumns, 1, this.listId);
+    this.dataSorter = new DataSorter(this.dialog, this.translateService, this.storageService, sortableColumns, 1, this.listId);
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allTransports has already been sorted.
       this.recalculateElementsToShow();

static/skywire-manager-src/src/app/components/pages/settings/all-labels/label-list/label-list.component.ts

@@ -118,7 +118,7 @@ export class LabelListComponent implements OnDestroy {
       this.idSortData,
       this.typeSortData,
     ];
-    this.dataSorter = new DataSorter(this.dialog, this.translateService, sortableColumns, 0, this.listId);
+    this.dataSorter = new DataSorter(this.dialog, this.translateService, this.storageService, sortableColumns, 0, this.listId);
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allLabels has already been sorted.
       this.recalculateElementsToShow();

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

@@ -16,6 +16,7 @@ import { AddVpnServerComponent } from './add-vpn-server/add-vpn-server.component
 import { VpnSavedDataService, LocalServerData, ServerFlags } from 'src/app/services/vpn-saved-data.service';
 import GeneralUtils from 'src/app/utils/generalUtils';
 import { EnterVpnServerPasswordComponent } from './enter-vpn-server-password/enter-vpn-server-password.component';
+import { StorageService } from 'src/app/services/storage.service';
 
 /**
  * Server lists VpnServerListComponent can show.
@@ -226,6 +227,7 @@ export class VpnServerListComponent implements OnDestroy {
     private vpnClientService: VpnClientService,
     private vpnSavedDataService: VpnSavedDataService,
     private snackbarService: SnackbarService,
+    private storageService: StorageService,
   ) {
     this.navigationsSubscription = route.paramMap.subscribe(params => {
       // Get which list must be shown.
@@ -597,7 +599,7 @@ export class VpnServerListComponent implements OnDestroy {
       defaultColumn = this.currentList === Lists.History ? 0 : 1;
       tieBreakerColumn = this.currentList === Lists.History ? 2 : 3;
     }
-    this.dataSorter = new DataSorter(this.dialog, this.translateService, sortableColumns, defaultColumn, this.listId);
+    this.dataSorter = new DataSorter(this.dialog, this.translateService, this.storageService, sortableColumns, defaultColumn, this.listId);
     this.dataSorter.setTieBreakerColumnIndex(tieBreakerColumn);
     this.dataSortedSubscription = this.dataSorter.dataSorted.subscribe(() => {
       // When this happens, the data in allServers has already been sorted.