Merge pull request #315 from Senyoret1/improvements1

Improvements for the manager

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

@@ -23,6 +23,7 @@ export interface Application {
   autostart: boolean;
   port: number;
   status: number;
+  args?: any[];
 }
 
 export interface Transport {
@@ -31,6 +32,7 @@ export interface Transport {
   remote_pk: string;
   type: string;
   log?: TransportLog;
+  is_up: boolean;
 }
 
 export interface TransportLog {

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

@@ -35,7 +35,10 @@
       >
         <!-- Column names. -->
         <tr>
-          <th></th>
+          <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
+            <span class="dot-outline-gray" [matTooltip]="'nodes.state-tooltip' | translate"></span>
+            <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
+          </th>
           <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Label)">
             {{ 'nodes.label' | translate }}
             <mat-icon *ngIf="sortBy === sortableColumns.Label" [inline]="true">{{ sortingArrow }}</mat-icon>

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

@@ -21,6 +21,7 @@ import { processServiceError } from 'src/app/utils/errors';
  * List of the columns that can be used to sort the data.
  */
 enum SortableColumns {
+  State = 'transports.state',
   Label = 'nodes.label',
   Key = 'nodes.key',
 }
@@ -275,6 +276,13 @@ export class NodeListComponent implements OnInit, OnDestroy {
       let response: number;
       if (this.sortBy === SortableColumns.Key) {
         response = !this.sortReverse ? a.local_pk.localeCompare(b.local_pk) : b.local_pk.localeCompare(a.local_pk);
+      } else if (this.sortBy === SortableColumns.State) {
+        if (a.online && !b.online) {
+          response = -1;
+        } else if (!a.online && b.online) {
+          response = 1;
+        }
+        response = response * (this.sortReverse ? -1 : 1);
       } else if (this.sortBy === SortableColumns.Label) {
         response = !this.sortReverse ? a.label.localeCompare(b.label) : b.label.localeCompare(a.label);
       } else {

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

@@ -51,6 +51,10 @@
     <!-- Column names. -->
     <tr>
       <th></th>
+      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
+        <span class="dot-outline-white" [matTooltip]="'apps.apps-list.state-tooltip' | translate"></span>
+        <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
+      </th>
       <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Name)">
         {{ 'apps.apps-list.app-name' | translate }}
         <mat-icon *ngIf="sortBy === sortableColumns.Name" [inline]="true">{{ sortingArrow }}</mat-icon>
@@ -59,10 +63,6 @@
         {{ 'apps.apps-list.port' | translate }}
         <mat-icon *ngIf="sortBy === sortableColumns.Port" [inline]="true">{{ sortingArrow }}</mat-icon>
       </th>
-      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Status)">
-        {{ 'apps.apps-list.status' | translate }}
-        <mat-icon *ngIf="sortBy === sortableColumns.Status" [inline]="true">{{ sortingArrow }}</mat-icon>
-      </th>
       <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.AutoStart)">
         {{ 'apps.apps-list.auto-start' | translate }}
         <mat-icon *ngIf="sortBy === sortableColumns.AutoStart" [inline]="true">{{ sortingArrow }}</mat-icon>
@@ -77,18 +77,18 @@
           (change)="changeSelection(app)">
         </mat-checkbox>
       </td>
-      <td>
-        {{ app.name }}
-      </td>
-      <td>
-        {{ app.port }}
-      </td>
       <td>
         <i
           [class]="app.status === 1 ? 'dot-green' : 'dot-red'"
           [matTooltip]="(app.status === 1 ? 'apps.status-running-tooltip' : 'apps.status-stopped-tooltip') | translate"
         ></i>
       </td>
+      <td>
+        {{ app.name }}
+      </td>
+      <td>
+        {{ app.port }}
+      </td>
       <td>
         <button
           (click)="changeAppAutostart(app)"
@@ -168,7 +168,7 @@
             {{ app.port }}
           </div>
           <div class="list-row">
-            <span class="title">{{ 'apps.apps-list.status' | translate }}</span>:
+            <span class="title">{{ 'apps.apps-list.state' | translate }}</span>:
             <span [class]="(app.status === 1 ? 'green-text' : 'red-text') + ' title'">
               {{ (app.status === 1 ? 'apps.status-running' : 'apps.status-stopped') | translate }}
             </span>

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

@@ -22,9 +22,9 @@ import { SkysocksClientSettingsComponent } from '../skysocks-client-settings/sky
  * List of the columns that can be used to sort the data.
  */
 enum SortableColumns {
+  State = 'apps.apps-list.state',
   Name = 'apps.apps-list.app-name',
   Port = 'apps.apps-list.port',
-  Status = 'apps.apps-list.status',
   AutoStart = 'apps.apps-list.auto-start',
 }
 
@@ -335,9 +335,9 @@ export class NodeAppsListComponent implements OnDestroy {
    */
   config(app: Application): void {
     if (app.name === 'skysocks') {
-      SkysocksSettingsComponent.openDialog(this.dialog, app.name);
+      SkysocksSettingsComponent.openDialog(this.dialog, app);
     } else if (app.name === 'skysocks-client') {
-      SkysocksClientSettingsComponent.openDialog(this.dialog, app.name);
+      SkysocksClientSettingsComponent.openDialog(this.dialog, app);
     } else {
       this.snackbarService.showError('apps.error');
     }
@@ -401,7 +401,7 @@ export class NodeAppsListComponent implements OnDestroy {
           response = !this.sortReverse ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
         } else if (this.sortBy === SortableColumns.Port) {
           response = !this.sortReverse ? a.port - b.port : b.port - a.port;
-        } else if (this.sortBy === SortableColumns.Status) {
+        } else if (this.sortBy === SortableColumns.State) {
           response = !this.sortReverse ? b.status - a.status : a.status - b.status;
         } else if (this.sortBy === SortableColumns.AutoStart) {
           response = !this.sortReverse ? (b.autostart ? 1 : 0) - (a.autostart ? 1 : 0) : (a.autostart ? 1 : 0) - (b.autostart ? 1 : 0);

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

@@ -11,6 +11,7 @@ import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
 import { AppsService } from 'src/app/services/apps.service';
 import GeneralUtils from 'src/app/utils/generalUtils';
+import { Application } from 'src/app/app.datatypes';
 
 /**
  * Modal window used for configuring the Skysocks-client app.
@@ -41,17 +42,17 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
    */
-  public static openDialog(dialog: MatDialog, appName: string): MatDialogRef<SkysocksClientSettingsComponent, any> {
+  public static openDialog(dialog: MatDialog, app: Application): MatDialogRef<SkysocksClientSettingsComponent, any> {
     const config = new MatDialogConfig();
-    config.data = appName;
+    config.data = app;
     config.autoFocus = false;
     config.width = AppConfig.mediumModalWidth;
 
     return dialog.open(SkysocksClientSettingsComponent, config);
   }
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) private data: string,
+    @Inject(MAT_DIALOG_DATA) private data: Application,
     private dialogRef: MatDialogRef<SkysocksClientSettingsComponent>,
     private appsService: AppsService,
     private formBuilder: FormBuilder,
@@ -68,8 +69,18 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
       this.history = [];
     }
 
+    // Get the current value saved on the visor, if it was returned by the API.
+    let currentVal = '';
+    if (this.data.args && this.data.args.length > 0) {
+      for (let i = 0; i < this.data.args.length; i++) {
+        if (this.data.args[i] === '-srv' && i + 1 < this.data.args.length) {
+          currentVal = this.data.args[i + 1];
+        }
+      }
+    }
+
     this.form = this.formBuilder.group({
-      'pk': ['', Validators.compose([
+      'pk': [currentVal, Validators.compose([
         Validators.required,
         Validators.minLength(66),
         Validators.maxLength(66),
@@ -112,7 +123,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
     this.operationSubscription = this.appsService.changeAppSettings(
       // The node pk is obtained from the currently openned node page.
       NodeComponent.getCurrentNodeKey(),
-      this.data,
+      this.data.name,
       { pk: this.lastPublicKey },
     ).subscribe({
       next: this.onSuccess.bind(this),

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

@@ -11,6 +11,7 @@ import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
 import { AppsService } from 'src/app/services/apps.service';
 import GeneralUtils from 'src/app/utils/generalUtils';
+import { Application } from 'src/app/app.datatypes';
 
 /**
  * Modal window used for configuring the Skysocks app.
@@ -31,17 +32,17 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
    */
-  public static openDialog(dialog: MatDialog, appName: string): MatDialogRef<SkysocksSettingsComponent, any> {
+  public static openDialog(dialog: MatDialog, app: Application): MatDialogRef<SkysocksSettingsComponent, any> {
     const config = new MatDialogConfig();
-    config.data = appName;
+    config.data = app;
     config.autoFocus = false;
     config.width = AppConfig.mediumModalWidth;
 
     return dialog.open(SkysocksSettingsComponent, config);
   }
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) private data: string,
+    @Inject(MAT_DIALOG_DATA) private data: Application,
     private appsService: AppsService,
     private formBuilder: FormBuilder,
     private dialogRef: MatDialogRef<SkysocksSettingsComponent>,
@@ -95,7 +96,7 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
     this.operationSubscription = this.appsService.changeAppSettings(
       // The node pk is obtained from the currently openned node page.
       NodeComponent.getCurrentNodeKey(),
-      this.data,
+      this.data.name,
       { passcode: this.form.get('password').value },
     ).subscribe({
       next: this.onSuccess.bind(this),

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

@@ -23,7 +23,6 @@ export class StartupConfigComponent implements OnInit {
 
   public constructor(
     public dialogRef: MatDialogRef<StartupConfigComponent>,
-    private nodeService: NodeService,
   ) {}
 
   save() {

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

@@ -3,6 +3,12 @@
     <div class="title mt-0">
       {{ 'transports.details.basic.title' | translate }}
     </div>
+    <div class="item">
+      <span>{{ 'transports.details.basic.state' | translate }}</span>
+      <div [class]="'d-inline ' + (data.is_up ? 'green-text' : 'red-text')">
+        {{ ('transports.statuses.' + (data.is_up ? 'online' : 'offline')) | translate }}
+      </div>
+    </div>
     <div class="item">
       <span>{{ 'transports.details.basic.id' | translate }}</span> {{ data.id }}
     </div>

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

@@ -46,6 +46,10 @@
     <!-- Column names. -->
     <tr>
       <th></th>
+      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
+        <span class="dot-outline-white" [matTooltip]="'transports.state-tooltip' | translate"></span>
+        <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
+      </th>
       <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Id)">
         {{ 'transports.id' | translate }}
         <mat-icon *ngIf="sortBy === sortableColumns.Id" [inline]="true">{{ sortingArrow }}</mat-icon>
@@ -77,10 +81,13 @@
         </mat-checkbox>
       </td>
       <td>
-        <app-copy-to-clipboard-text [short]="true" text="{{ transport.id }}"></app-copy-to-clipboard-text>
+        <span [class]="transportStatusClass(transport, true)" [matTooltip]="transportStatusText(transport, true) | translate"></span>
+      </td>
+      <td>
+        <app-copy-to-clipboard-text [short]="true" text="{{ transport.id }}" shortTextLength="4"></app-copy-to-clipboard-text>
       </td>
       <td>
-        <app-copy-to-clipboard-text [short]="true" text="{{ transport.remote_pk }}"></app-copy-to-clipboard-text>
+        <app-copy-to-clipboard-text [short]="true" text="{{ transport.remote_pk }}" shortTextLength="4"></app-copy-to-clipboard-text>
       </td>
       <td>
         {{ transport.type }}
@@ -142,6 +149,10 @@
           </mat-checkbox>
         </div>
         <div class="left-part">
+          <div class="list-row">
+            <span class="title">{{ 'transports.state' | translate }}</span>:
+            <span [class]="transportStatusClass(transport, false) + ' title'">{{ transportStatusText(transport, false) | translate }}</span>
+          </div>
           <div class="list-row long-content">
             <span class="title">{{ 'transports.id' | translate }}</span>:
             <app-copy-to-clipboard-text text="{{ transport.id }}"></app-copy-to-clipboard-text>

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

@@ -21,6 +21,7 @@ import { OperationError } from 'src/app/utils/operation-error';
  * List of the columns that can be used to sort the data.
  */
 enum SortableColumns {
+  State = 'transports.state',
   Id = 'transports.id',
   RemotePk = 'transports.remote',
   Type = 'transports.type',
@@ -109,6 +110,34 @@ export class TransportListComponent implements OnDestroy {
     this.operationSubscriptionsGroup.forEach(sub => sub.unsubscribe());
   }
 
+  /**
+   * Returns the scss class to be used to show the current status of the transport.
+   * @param forDot If true, returns a class for creating a colored dot. If false,
+   * returns a class for a colored text.
+   */
+  transportStatusClass(transport: Transport, forDot: boolean): string {
+    switch (transport.is_up) {
+      case true:
+        return forDot ? 'dot-green' : 'green-text';
+      default:
+        return forDot ? 'dot-red' : 'red-text';
+    }
+  }
+
+  /**
+   * Returns the text to be used to indicate the current status of a transport.
+   * @param forTooltip If true, returns a text for a tooltip. If false, returns a
+   * text for the transport list shown on small screens.
+   */
+  transportStatusText(transport: Transport, forTooltip: boolean): string {
+    switch (transport.is_up) {
+      case true:
+        return 'transports.statuses.online' + (forTooltip ? '-tooltip' : '');
+      default:
+        return 'transports.statuses.offline' + (forTooltip ? '-tooltip' : '');
+    }
+  }
+
   /**
    * Changes the selection state of an entry (modifies the state of its checkbox).
    */
@@ -284,6 +313,13 @@ export class TransportListComponent implements OnDestroy {
         let response: number;
         if (this.sortBy === SortableColumns.Id) {
           response = !this.sortReverse ? a.id.localeCompare(b.id) : b.id.localeCompare(a.id);
+        } else if (this.sortBy === SortableColumns.State) {
+          if (a.is_up && !b.is_up) {
+            response = -1;
+          } else if (!a.is_up && b.is_up) {
+            response = 1;
+          }
+          response = response * (this.sortReverse ? -1 : 1);
         } else if (this.sortBy === SortableColumns.RemotePk) {
           response = !this.sortReverse ? a.remote_pk.localeCompare(b.remote_pk) : b.remote_pk.localeCompare(a.remote_pk);
         } else if (this.sortBy === SortableColumns.Type) {

static/skywire-manager-src/src/app/services/auth.service.ts

@@ -42,17 +42,18 @@ export class AuthService {
    * Checks if the user is logged in.
    */
   checkLogin(): Observable<AuthStates> {
-    return this.apiService.get('user', new RequestOptions({ responseType: ResponseTypes.Text, ignoreAuth: true }))
+    return this.apiService.get('user', new RequestOptions({ ignoreAuth: true }))
       .pipe(
-        map(() => AuthStates.Logged),
+        map(response => {
+          if (response.username) {
+            return AuthStates.Logged;
+          } else {
+            return AuthStates.AuthDisabled;
+          }
+        }),
         catchError((err: OperationError) => {
           err = processServiceError(err);
 
-          // The auth options are disabled in the backend.
-          if (err.originalError && (err.originalError as HttpErrorResponse).status === 504) {
-            return of(AuthStates.AuthDisabled);
-          }
-
           // The user is not logged.
           if (err.originalError && (err.originalError as HttpErrorResponse).status === 401) {
             return of(AuthStates.NotLogged);