From 22d0a4bac3b416b6906ab3acad5e1ae9068e8630 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 9 Apr 2020 18:58:58 -0400
Subject: [PATCH] Improvements for the manager

---
 .../src/app/app.datatypes.ts                  |  2 ++
 .../pages/node-list/node-list.component.html  |  5 ++-
 .../pages/node-list/node-list.component.ts    |  8 +++++
 .../node-apps-list.component.html             | 22 ++++++------
 .../node-apps-list.component.ts               |  8 ++---
 .../skysocks-client-settings.component.ts     | 21 ++++++++---
 .../skysocks-settings.component.ts            |  9 ++---
 .../startup-config.component.ts               |  1 -
 .../transport-details.component.html          |  6 ++++
 .../transport-list.component.html             | 15 ++++++--
 .../transport-list.component.ts               | 36 +++++++++++++++++++
 .../src/app/services/auth.service.ts          | 15 ++++----
 .../src/app/services/node.service.ts          | 10 +++++-
 .../src/assets/i18n/en.json                   | 13 ++++++-
 .../src/assets/i18n/es.json                   | 13 ++++++-
 .../src/assets/i18n/es_base.json              | 13 ++++++-
 .../src/assets/scss/_icons.scss               | 25 ++++++++++++-
 .../src/assets/scss/_responsive_tables.scss   |  4 +++
 18 files changed, 186 insertions(+), 40 deletions(-)

diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts
index d782d62ef..a65271220 100644
--- a/static/skywire-manager-src/src/app/app.datatypes.ts
+++ b/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 {
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
index b5ea44c7b..0daae8ee4 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
+++ b/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>
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 dcdbf67b4..8c2c18ab2 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
@@ -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 {
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html
index 3950e0b23..898701b7f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
index 73469fba2..7ee7717f4 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
+++ b/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);
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts
index 09384021d..ae0986b42 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component.ts
+++ b/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,9 +42,9 @@ 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;
 
@@ -51,7 +52,7 @@ export class SkysocksClientSettingsComponent implements OnInit, OnDestroy {
   }
 
   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),
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts
index a1cab20e0..469031f29 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component.ts
+++ b/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,9 +32,9 @@ 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;
 
@@ -41,7 +42,7 @@ export class SkysocksSettingsComponent implements OnInit, OnDestroy {
   }
 
   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),
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.ts
index c8d9adb1b..ea89b50dd 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.ts
+++ b/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() {
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
index ff5783266..cfc63eea0 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
index 8d2cc2320..ab3fcad3b 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
index 539567997..8eb981c93 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
+++ b/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) {
diff --git a/static/skywire-manager-src/src/app/services/auth.service.ts b/static/skywire-manager-src/src/app/services/auth.service.ts
index aae15c62c..c4cea6fcb 100644
--- a/static/skywire-manager-src/src/app/services/auth.service.ts
+++ b/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);
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 b6ad21020..7d5b04ea6 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { flatMap, map } from 'rxjs/operators';
-import { StorageService } from './storage.service';
 
+import { StorageService } from './storage.service';
 import { Node, Transport, Route, HealthInfo } from '../app.datatypes';
 import { ApiService } from './api.service';
 import { TransportService } from './transport.service';
@@ -86,6 +86,14 @@ export class NodeService {
         node.label = this.storageService.getNodeLabel(node.local_pk);
         currentNode = node;
 
+        // Needed for a change made to the names on the backend.
+        if (node.apps) {
+          node.apps.forEach(app => {
+            app.name = (app as any).app;
+            app.autostart = (app as any).auto_start;
+          });
+        }
+
         // Get the health info.
         return this.apiService.get(`visors/${nodeKey}/health`);
       }),
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index d51e3cd75..74f40df3b 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -89,6 +89,7 @@
   "nodes": {
     "title": "Visor list",
     "state": "State",
+    "state-tooltip": "Current state",
     "label": "Label",
     "key": "Key",
     "view-node": "View visor",
@@ -248,7 +249,8 @@
       "list-title": "Application list",
       "app-name": "Name",
       "port": "Port",
-      "status": "Status",
+      "state": "State",
+      "state-tooltip": "Current state",
       "auto-start": "Auto start",
       "empty": "Visor doesn't have any applications.",
       "disable-autostart": "Disable autostart",
@@ -302,6 +304,8 @@
   "transports": {
     "title": "Transports",
     "list-title": "Transport list",
+    "state": "State",
+    "state-tooltip": "Current state",
     "id": "ID",
     "remote-node": "Remote",
     "type": "Type",
@@ -311,10 +315,17 @@
     "delete": "Delete transport",
     "deleted": "Delete operation completed.",
     "empty": "Visor doesn't have any transports.",
+    "statuses": {
+      "online": "Online",
+      "online-tooltip": "Transport is online",
+      "offline": "Offline",
+      "offline-tooltip": "Transport is offline"
+    },
     "details": {
       "title": "Details",
       "basic": {
         "title": "Basic info",
+        "state": "State:",
         "id": "ID:",
         "local-pk": "Local public key:",
         "remote-pk": "Remote public key:",
diff --git a/static/skywire-manager-src/src/assets/i18n/es.json b/static/skywire-manager-src/src/assets/i18n/es.json
index 44b63f584..98b428f21 100644
--- a/static/skywire-manager-src/src/assets/i18n/es.json
+++ b/static/skywire-manager-src/src/assets/i18n/es.json
@@ -89,6 +89,7 @@
   "nodes": {
     "title": "Lista de visores",
     "state": "Estado",
+    "state-tooltip": "Estado actual",
     "label": "Etiqueta",
     "key": "Llave",
     "view-node": "Ver visor",
@@ -248,7 +249,8 @@
       "list-title": "Lista de aplicaciones",
       "app-name": "Nombre",
       "port": "Puerto",
-      "status": "Estatus",
+      "state": "Estado",
+      "state-tooltip": "Estado actual",
       "auto-start": "Autoinicio",
       "empty": "El visor no tiene ninguna aplicación.",
       "disable-autostart": "Deshabilitar autoinicio",
@@ -302,6 +304,8 @@
   "transports": {
     "title": "Transportes",
     "list-title": "Lista de transportes",
+    "state": "Estado",
+    "state-tooltip": "Estado actual",
     "id": "ID",
     "remote-node": "Remoto",
     "type": "Tipo",
@@ -311,10 +315,17 @@
     "delete": "Borrar transporte",
     "deleted": "Operación de borrado completada.",
     "empty": "El visor no tiene ningún transporte.",
+    "statuses": {
+      "online": "Online",
+      "online-tooltip": "El transporte está online",
+      "offline": "Offline",
+      "offline-tooltip": "El transporte está offline"
+    },
     "details": {
       "title": "Detalles",
       "basic": {
         "title": "Información básica",
+        "state": "Estado:",
         "id": "ID:",
         "local-pk": "Llave pública local:",
         "remote-pk": "Llave pública remota:",
diff --git a/static/skywire-manager-src/src/assets/i18n/es_base.json b/static/skywire-manager-src/src/assets/i18n/es_base.json
index d51e3cd75..74f40df3b 100644
--- a/static/skywire-manager-src/src/assets/i18n/es_base.json
+++ b/static/skywire-manager-src/src/assets/i18n/es_base.json
@@ -89,6 +89,7 @@
   "nodes": {
     "title": "Visor list",
     "state": "State",
+    "state-tooltip": "Current state",
     "label": "Label",
     "key": "Key",
     "view-node": "View visor",
@@ -248,7 +249,8 @@
       "list-title": "Application list",
       "app-name": "Name",
       "port": "Port",
-      "status": "Status",
+      "state": "State",
+      "state-tooltip": "Current state",
       "auto-start": "Auto start",
       "empty": "Visor doesn't have any applications.",
       "disable-autostart": "Disable autostart",
@@ -302,6 +304,8 @@
   "transports": {
     "title": "Transports",
     "list-title": "Transport list",
+    "state": "State",
+    "state-tooltip": "Current state",
     "id": "ID",
     "remote-node": "Remote",
     "type": "Type",
@@ -311,10 +315,17 @@
     "delete": "Delete transport",
     "deleted": "Delete operation completed.",
     "empty": "Visor doesn't have any transports.",
+    "statuses": {
+      "online": "Online",
+      "online-tooltip": "Transport is online",
+      "offline": "Offline",
+      "offline-tooltip": "Transport is offline"
+    },
     "details": {
       "title": "Details",
       "basic": {
         "title": "Basic info",
+        "state": "State:",
         "id": "ID:",
         "local-pk": "Local public key:",
         "remote-pk": "Remote public key:",
diff --git a/static/skywire-manager-src/src/assets/scss/_icons.scss b/static/skywire-manager-src/src/assets/scss/_icons.scss
index ee43fdd8b..456d9d5a2 100644
--- a/static/skywire-manager-src/src/assets/scss/_icons.scss
+++ b/static/skywire-manager-src/src/assets/scss/_icons.scss
@@ -15,7 +15,6 @@ $dot-size-sm: 7px;
   {
     height: $dot-size;
     width: $dot-size;
-    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2);
     background-color: $color-value;
     border-radius: 50%;
     display: inline-block;
@@ -27,3 +26,27 @@ $dot-size-sm: 7px;
     }
   }
 }
+
+// Circle outlines
+$outlines: (
+  white: theme-color(white),
+  gray: theme-color(light-gray)
+);
+
+@each $color-name, $color-value in $outlines
+{
+  .dot-outline-#{$color-name}
+  {
+    height: $dot-size;
+    width: $dot-size;
+    border-radius: 50%;
+    border: solid 1px $color-value;
+    display: inline-block;
+
+    &.sm
+    {
+      height: $dot-size-sm;
+      width: $dot-size-sm;
+    }
+  }
+}
diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
index 125796a64..1c97ebe05 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -62,6 +62,10 @@ $responsive-table-colors: (
     // Column used for the check boxes.
     .selection-col {
       width: 30px;
+      
+      .mat-checkbox {
+        vertical-align: super;
+      }
     }
 
     .action-button {