Multiple improvements for the manager

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

@@ -1,29 +1,12 @@
-<ng-template #contentTpl>
-  <mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
-  <mat-icon *ngIf="state === buttonStates.Success">done</mat-icon>
-  <mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
-  <ng-content></ng-content>
-  <i *ngIf="notification" class="dot-red sm"></i>
-</ng-template>
-
-<button
-  *ngIf="type === 'mat-button'"
-  mat-button
-  (click)="click()"
-  [disabled]="disabled"
-  [color]="color"
-  [ngClass]="{'grey-button-background': !disabled}"
-  #button1
->
-  <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
-</button>
 <button
-  *ngIf="type === 'mat-raised-button'"
   mat-raised-button
   (click)="click()"
   [disabled]="disabled"
   [color]="color"
+  [ngClass]="{'for-dark-background': forDarkBackground}"
   #button2
 >
-  <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+  <mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
+  <mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
+  <ng-content></ng-content>
 </button>

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

@@ -9,10 +9,6 @@ button {
   mat-spinner ::ng-deep circle {
     stroke: $white;
   }
-
-  .dot-red {
-    margin-left: 10px;
-  }
 }
 
 mat-icon, mat-spinner {
@@ -21,3 +17,9 @@ mat-icon, mat-spinner {
   position: relative;
   top: -2px;
 }
+
+.for-dark-background:disabled {
+  background-color: #000000 !important;
+  color: white !important;
+  opacity: 0.3;
+}

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

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output, ViewChild, OnDestroy } from '@a
 import { MatButton } from '@angular/material/button';
 
 enum ButtonStates {
-  Normal, Success, Error, Loading
+  Normal, Error, Loading
 }
 
 /**
@@ -17,20 +17,17 @@ export class ButtonComponent implements OnDestroy {
   @ViewChild('button1') button1: MatButton;
   @ViewChild('button2') button2: MatButton;
 
-  // Should be be 'mat-button' or 'mat-raised-button'.
-  @Input() type = 'mat-button';
+  // If the button will be in front of the dark background.
+  @Input() forDarkBackground = false;
   @Input() disabled = false;
   // Must be one of the colors defined on the default theme.
   @Input() color = '';
   @Input() loadingSize = 24;
   // Click event.
   @Output() action = new EventEmitter();
-  notification = false;
   state = ButtonStates.Normal;
   buttonStates = ButtonStates;
 
-  private readonly successDuration = 3000;
-
   ngOnDestroy() {
     this.action.complete();
   }
@@ -45,7 +42,6 @@ export class ButtonComponent implements OnDestroy {
   reset() {
     this.state = ButtonStates.Normal;
     this.disabled = false;
-    this.notification = false;
   }
 
   focus() {
@@ -70,19 +66,8 @@ export class ButtonComponent implements OnDestroy {
     this.disabled = true;
   }
 
-  showSuccess() {
-    this.state = ButtonStates.Success;
-    this.disabled = false;
-
-    setTimeout(() => this.state = ButtonStates.Normal, this.successDuration);
-  }
-
   showError() {
     this.state = ButtonStates.Error;
     this.disabled = false;
   }
-
-  notify(notification: boolean) {
-    this.notification = notification;
-  }
 }

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html

@@ -14,15 +14,13 @@
   <div class="buttons">
     <app-button
       #cancelButton
-      type="mat-raised-button"
       color="accent"
       (action)="closeModal()"
       *ngIf="data.cancelButtonText && state !== confirmationStates.Done">
       {{ data.cancelButtonText | translate }}
     </app-button>
     <app-button
       #confirmButton
-      type="mat-raised-button"
       color="primary"
       (action)="state === confirmationStates.Asking ? sendOperationAcceptedEvent() : closeModal()">
       {{ (state !== confirmationStates.Done ? data.confirmButtonText : 'confirmation.close') | translate }}

static/skywire-manager-src/src/app/components/layout/edit-label/edit-label.component.html

@@ -3,6 +3,6 @@
     <mat-form-field>
       <input #firstInput [placeholder]="'edit-label.label' | translate" formControlName="label" maxlength="66" matInput>
     </mat-form-field>
-    <app-button class="float-right" color="primary" type="mat-raised-button" (action)="save()">{{ 'common.save' | translate }}</app-button>
+    <app-button class="float-right" color="primary" (action)="save()">{{ 'common.save' | translate }}</app-button>
   </form>
 </app-dialog>

static/skywire-manager-src/src/app/components/layout/filters-selection/filters-selection.component.html

@@ -26,7 +26,6 @@
     <app-button
       #button
       (action)="apply()"
-      type="mat-raised-button"
       color="primary"
       class="float-right"
     >

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

@@ -29,15 +29,14 @@
 
     <!-- Header. -->
     <div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': numberOfPages > 1}">
-      <div class="title ml-3.5">
+      <div class="title">
         <div class="filter-label subtle-transparent-button cursor-pointer" (click)="dataFilterer.removeFilters()" *ngIf="dataFilterer.currentFiltersTexts && dataFilterer.currentFiltersTexts.length > 0">
-          {{ 'filters.active-filters' | translate }}
           <div *ngFor="let filterTexts of dataFilterer.currentFiltersTexts" class="item">
             <span>{{ filterTexts.filterName | translate }}: </span>
             <ng-container *ngIf="filterTexts.translatableValue">{{ filterTexts.translatableValue | translate }}</ng-container>
             <ng-container *ngIf="filterTexts.value">{{ filterTexts.value }}</ng-container>
           </div>
-          <div>{{ 'filters.press-to-remove' | translate }}</div>
+          <div class="transparent-50">{{ 'filters.press-to-remove' | translate }}</div>
         </div>
       </div>
       <div class="options">
@@ -93,7 +92,10 @@
           </th>
           <th *ngIf="showDmsgInfo" class="sortable-column" (click)="dataSorter.changeSortingOrder(dmsgServerSortData)">
             {{ 'nodes.dmsg-server' | translate }}
-            <mat-icon *ngIf="dataSorter.currentSortingColumn === dmsgServerSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+            <ng-container *ngIf="dataSorter.currentSortingColumn === dmsgServerSortData">
+              <mat-icon [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+              <ng-container *ngIf="dataSorter.currentlySortingByLabel">*</ng-container>
+            </ng-container>
           </th>
           <th *ngIf="showDmsgInfo" class="sortable-column" (click)="dataSorter.changeSortingOrder(pingSortData)">
             {{ 'nodes.ping' | translate }}
@@ -177,7 +179,8 @@
             <div class="left-part">
               <div class="title">{{ 'tables.sorting-title' | translate }}</div>
               <div>{{ dataSorter.currentSortingColumn.label | translate }}
-                {{ (!dataSorter.sortingInReverseOrder ? 'tables.ascending-order' : 'tables.descending-order') | translate }}
+                <ng-container *ngIf="dataSorter.currentlySortingByLabel">{{ 'tables.label' | translate }}</ng-container>
+                <ng-container *ngIf="dataSorter.sortingInReverseOrder">{{ 'tables.inverted-order' | translate }}</ng-container>
               </div>
             </div>
             <div class="right-part">

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

@@ -42,7 +42,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
   stateSortData = new SortingColumn(['online'], 'transports.state', SortingModes.Boolean);
   labelSortData = new SortingColumn(['label'], 'nodes.label', SortingModes.Text);
   keySortData = new SortingColumn(['local_pk'], 'nodes.key', SortingModes.Text);
-  dmsgServerSortData = new SortingColumn(['dmsgServerPk'], 'nodes.dmsg-server', SortingModes.Text);
+  dmsgServerSortData = new SortingColumn(['dmsgServerPk'], 'nodes.dmsg-server', SortingModes.Text, ['dmsgServerPk_label']);
   pingSortData = new SortingColumn(['roundTripPing'], 'nodes.ping', SortingModes.Number);
 
   private dataSortedSubscription: Subscription;
@@ -324,7 +324,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
             if (result.data) {
               this.allNodes = result.data as Node[];
               if (this.showDmsgInfo) {
-                // Add the label data to the array, to be able to use it for filtering.
+                // Add the label data to the array, to be able to use it for filtering and sorting.
                 this.allNodes.forEach(node => {
                   node['dmsgServerPk_label'] =
                     LabeledElementTextComponent.getCompleteLabel(this.storageService, this.translateService, node.dmsgServerPk);
@@ -394,10 +394,16 @@ export class NodeListComponent implements OnInit, OnDestroy {
   }
 
   logout() {
-    this.authService.logout().subscribe(
-      () => this.router.navigate(['login']),
-      () => this.snackbarService.showError('common.logout-error')
-    );
+    const confirmationDialog = GeneralUtils.createConfirmationDialog(this.dialog, 'common.logout-confirmation');
+
+    confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
+      confirmationDialog.componentInstance.closeModal();
+
+      this.authService.logout().subscribe(
+        () => this.router.navigate(['login']),
+        () => this.snackbarService.showError('common.logout-error')
+      );
+    });
   }
 
   // Updates all visors.

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

@@ -1,15 +1,14 @@
 <!-- Header. -->
 <div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
-  <div class="title ml-3.5">
+  <div class="title">
     <span *ngIf="showShortList_" class="uppercase">{{ 'apps.apps-list.title' | translate }}</span>
     <div class="filter-label subtle-transparent-button cursor-pointer" (click)="dataFilterer.removeFilters()" *ngIf="dataFilterer.currentFiltersTexts && dataFilterer.currentFiltersTexts.length > 0">
-      {{ 'filters.active-filters' | translate }}
       <div *ngFor="let filterTexts of dataFilterer.currentFiltersTexts" class="item">
         <span>{{ filterTexts.filterName | translate }}: </span>
         <ng-container *ngIf="filterTexts.translatableValue">{{ filterTexts.translatableValue | translate }}</ng-container>
         <ng-container *ngIf="filterTexts.value">{{ filterTexts.value }}</ng-container>
       </div>
-      <div>{{ 'filters.press-to-remove' | translate }}</div>
+      <div class="transparent-50">{{ 'filters.press-to-remove' | translate }}</div>
     </div>
   </div>
   <div class="options">
@@ -160,7 +159,8 @@
         <div class="left-part">
           <div class="title">{{ 'tables.sorting-title' | translate }}</div>
           <div>{{ dataSorter.currentSortingColumn.label | translate }}
-            {{ (!dataSorter.sortingInReverseOrder ? 'tables.ascending-order' : 'tables.descending-order') | translate }}
+            <ng-container *ngIf="dataSorter.currentlySortingByLabel">{{ 'tables.label' | translate }}</ng-container>
+            <ng-container *ngIf="dataSorter.sortingInReverseOrder">{{ 'tables.inverted-order' | translate }}</ng-container>
           </div>
         </div>
         <div class="right-part">

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

@@ -25,7 +25,6 @@
         <app-button
           #button
           (action)="saveChanges()"
-          type="mat-raised-button"
           [disabled]="!form.valid"
           color="primary"
           class="float-right"

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

@@ -29,7 +29,6 @@
     <app-button
       #button
       (action)="saveChanges()"
-      type="mat-raised-button"
       [disabled]="!form.valid"
       color="primary"
       class="float-right"

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

@@ -1,15 +1,17 @@
 <!-- Header. -->
 <div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
-  <div class="title ml-3.5">
-    <span *ngIf="showShortList_"  class="uppercase">{{ 'routes.title' | translate }}</span>
+  <div class="title">
+    <span *ngIf="showShortList_"  class="uppercase">
+      {{ 'routes.title' | translate }}
+      <mat-icon [inline]="true" class="help d-none d-md-inline" [matTooltip]="'routes.info' | translate">help</mat-icon>
+    </span>
     <div class="filter-label subtle-transparent-button cursor-pointer" (click)="dataFilterer.removeFilters()" *ngIf="dataFilterer.currentFiltersTexts && dataFilterer.currentFiltersTexts.length > 0">
-      {{ 'filters.active-filters' | translate }}
       <div *ngFor="let filterTexts of dataFilterer.currentFiltersTexts" class="item">
         <span>{{ filterTexts.filterName | translate }}: </span>
         <ng-container *ngIf="filterTexts.translatableValue">{{ filterTexts.translatableValue | translate }}</ng-container>
         <ng-container *ngIf="filterTexts.value">{{ filterTexts.value }}</ng-container>
       </div>
-      <div>{{ 'filters.press-to-remove' | translate }}</div>
+      <div class="transparent-50">{{ 'filters.press-to-remove' | translate }}</div>
     </div>
   </div>
   <div class="options">
@@ -118,7 +120,8 @@
         <div class="left-part">
           <div class="title">{{ 'tables.sorting-title' | translate }}</div>
           <div>{{ dataSorter.currentSortingColumn.label | translate }}
-            {{ (!dataSorter.sortingInReverseOrder ? 'tables.ascending-order' : 'tables.descending-order') | translate }}
+            <ng-container *ngIf="dataSorter.currentlySortingByLabel">{{ 'tables.label' | translate }}</ng-container>
+            <ng-container *ngIf="dataSorter.sortingInReverseOrder">{{ 'tables.inverted-order' | translate }}</ng-container>
           </div>
         </div>
         <div class="right-part">

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

@@ -34,7 +34,6 @@
     <app-button
       #button
       (action)="create()"
-      type="mat-raised-button"
       [disabled]="!form.valid"
       color="primary"
       class="float-right"

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

@@ -1,28 +1,28 @@
 <!-- Header. -->
 <div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
-  <div class="title ml-3.5">
-    <span *ngIf="showShortList_" class="uppercase">{{ 'transports.title' | translate }}</span>
+  <div class="title">
+    <span *ngIf="showShortList_" class="uppercase">
+      {{ 'transports.title' | translate }}
+      <mat-icon [inline]="true" class="help d-none d-md-inline" [matTooltip]="'transports.info' | translate">help</mat-icon>
+    </span>
     <div class="filter-label subtle-transparent-button cursor-pointer" (click)="dataFilterer.removeFilters()" *ngIf="dataFilterer.currentFiltersTexts && dataFilterer.currentFiltersTexts.length > 0">
-      {{ 'filters.active-filters' | translate }}
       <div *ngFor="let filterTexts of dataFilterer.currentFiltersTexts" class="item">
         <span>{{ filterTexts.filterName | translate }}: </span>
         <ng-container *ngIf="filterTexts.translatableValue">{{ filterTexts.translatableValue | translate }}</ng-container>
         <ng-container *ngIf="filterTexts.value">{{ filterTexts.value }}</ng-container>
       </div>
-      <div>{{ 'filters.press-to-remove' | translate }}</div>
+      <div class="transparent-50">{{ 'filters.press-to-remove' | translate }}</div>
     </div>
   </div>
   <div class="options">
     <div class="options-container">
       <mat-icon
         [inline]="true"
         (click)="create()"
-        [matTooltip]="'transports.create' | translate"
       >add</mat-icon>
       <mat-icon
         [inline]="true"
         (click)="dataFilterer.changeFilters()"
-        [matTooltip]="'filters.filter-action' | translate"
         class="small-icon"
         *ngIf="allTransports && allTransports.length > 0"
       >filter_list</mat-icon>
@@ -73,11 +73,17 @@
       </th>
       <th class="sortable-column" (click)="dataSorter.changeSortingOrder(idSortData)">
         {{ 'transports.id' | translate }}
-        <mat-icon *ngIf="dataSorter.currentSortingColumn === idSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+        <ng-container *ngIf="dataSorter.currentSortingColumn === idSortData">
+          <mat-icon [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+          <ng-container *ngIf="dataSorter.currentlySortingByLabel">*</ng-container>
+        </ng-container>
       </th>
       <th class="sortable-column" (click)="dataSorter.changeSortingOrder(remotePkSortData)">
         {{ 'transports.remote-node' | translate }}
-        <mat-icon *ngIf="dataSorter.currentSortingColumn === remotePkSortData" [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+        <ng-container *ngIf="dataSorter.currentSortingColumn === remotePkSortData">
+          <mat-icon [inline]="true">{{ dataSorter.sortingArrow }}</mat-icon>
+          <ng-container *ngIf="dataSorter.currentlySortingByLabel">*</ng-container>
+        </ng-container>
       </th>
       <th class="sortable-column" (click)="dataSorter.changeSortingOrder(typeSortData)">
         {{ 'transports.type' | translate }}
@@ -163,7 +169,8 @@
         <div class="left-part">
           <div class="title">{{ 'tables.sorting-title' | translate }}</div>
           <div>{{ dataSorter.currentSortingColumn.label | translate }}
-            {{ (!dataSorter.sortingInReverseOrder ? 'tables.ascending-order' : 'tables.descending-order') | translate }}
+            <ng-container *ngIf="dataSorter.currentlySortingByLabel">{{ 'tables.label' | translate }}</ng-container>
+            <ng-container *ngIf="dataSorter.sortingInReverseOrder">{{ 'tables.inverted-order' | translate }}</ng-container>
           </div>
         </div>
         <div class="right-part">

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

@@ -39,8 +39,8 @@ export class TransportListComponent implements OnDestroy {
 
   // Vars with the data of the columns used for sorting the data.
   stateSortData = new SortingColumn(['is_up'], 'transports.state', SortingModes.Boolean);
-  idSortData = new SortingColumn(['id'], 'transports.id', SortingModes.Text);
-  remotePkSortData = new SortingColumn(['remote_pk'], 'transports.remote-node', SortingModes.Text);
+  idSortData = new SortingColumn(['id'], 'transports.id', SortingModes.Text, ['id_label']);
+  remotePkSortData = new SortingColumn(['remote_pk'], 'transports.remote-node', SortingModes.Text, ['remote_pk_label']);
   typeSortData = new SortingColumn(['type'], 'transports.type', SortingModes.Text);
   uploadedSortData = new SortingColumn(['log', 'sent'], 'common.uploaded', SortingModes.NumberReversed);
   downloadedSortData = new SortingColumn(['log', 'recv'], 'common.downloaded', SortingModes.NumberReversed);
@@ -79,7 +79,7 @@ export class TransportListComponent implements OnDestroy {
   @Input() set transports(val: Transport[]) {
     this.allTransports = val;
 
-    // Add the label data to the array, to be able to use it for filtering.
+    // Add the label data to the array, to be able to use it for filtering and sorting.
     this.allTransports.forEach(transport => {
       transport['id_label'] =
         LabeledElementTextComponent.getCompleteLabel(this.storageService, this.translateService, transport.id);