From 6625e65f32d84952cf2b0062cde29c344c1c5871 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 2 Jul 2020 08:48:55 -0400
Subject: [PATCH 1/4] Add DMSG info to the manager

---
 .../src/app/app.datatypes.ts                  |   2 +
 .../pages/node-list/node-list.component.html  |  39 +++++-
 .../pages/node-list/node-list.component.ts    | 120 +++++++++++++++---
 .../node-info-content.component.html          |   8 ++
 .../src/app/services/node.service.ts          |  41 +++++-
 .../src/assets/i18n/en.json                   |   8 ++
 .../src/assets/scss/_responsive_tables.scss   |  40 +++++-
 7 files changed, 232 insertions(+), 26 deletions(-)

diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts
index a65271220f..3ee9ba6de1 100644
--- a/static/skywire-manager-src/src/app/app.datatypes.ts
+++ b/static/skywire-manager-src/src/app/app.datatypes.ts
@@ -16,6 +16,8 @@ export class Node {
   online?: boolean;
   seconds_online?: number;
   health?: HealthInfo;
+  dmsgServerPk?: string;
+  roundTripPing?: number;
 }
 
 export interface Application {
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 f581f016ee..a386805402 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
@@ -26,7 +26,17 @@
     ></app-tab-bar>
   </div>
   <div class="col-12">
-    <div class="node-list-container mt-4.5">
+    <!-- Dmsg info button area. -->
+    <div class="generic-title-container mt-4.5 d-flex">
+      <div class="title ml-3.5"></div>
+      <button class="icon-button" (click)="toggleDmsgInfo()">
+        <mat-icon>
+          {{ showDmsgInfo ? 'visibility_off' : 'visibility' }}
+        </mat-icon>
+        {{ (showDmsgInfo ? 'nodes.hide-dmsg-info' : 'nodes.show-dmsg-info') | translate }}
+      </button>
+    </div>
+    <div class="node-list-container mt-3">
       <!-- Table for large screens. -->
       <table
         class="responsive-table-white container-elevated-white d-none d-md-table"
@@ -47,6 +57,14 @@
             {{ 'nodes.key' | translate }}
             <mat-icon *ngIf="sortBy === sortableColumns.Key" [inline]="true">{{ sortingArrow }}</mat-icon>
           </th>
+          <th *ngIf="showDmsgInfo" class="sortable-column" (click)="changeSortingOrder(sortableColumns.DmsgServer)">
+            {{ 'nodes.dmsg-server' | translate }}
+            <mat-icon *ngIf="sortBy === sortableColumns.DmsgServer" [inline]="true">{{ sortingArrow }}</mat-icon>
+          </th>
+          <th *ngIf="showDmsgInfo" class="sortable-column" (click)="changeSortingOrder(sortableColumns.Ping)">
+            {{ 'nodes.ping' | translate }}
+            <mat-icon *ngIf="sortBy === sortableColumns.Ping" [inline]="true">{{ sortingArrow }}</mat-icon>
+          </th>
           <th class="actions"></th>
         </tr>
 
@@ -61,12 +79,17 @@
           <td>
             {{ node.local_pk }}
           </td>
+          <td *ngIf="showDmsgInfo">
+            {{ node.dmsgServerPk }}
+          </td>
+          <td *ngIf="showDmsgInfo">
+            {{ node.roundTripPing }}
+          </td>
           <td (click)="$event.stopPropagation()" class="actions">
             <button
-              [clipboard]="node.local_pk"
-              (copyEvent)="onCopyToClipboardClicked()"
+              (click)="copyToClipboard(node)"
               mat-icon-button
-              [matTooltip]="'nodes.copy-key' | translate"
+              [matTooltip]="(showDmsgInfo ? 'nodes.copy-data' : 'nodes.copy-key') | translate"
               class="grey-button-background"
             >
               <mat-icon class="small-icon">filter_none</mat-icon>
@@ -137,6 +160,14 @@
                 <span class="title">{{ 'nodes.key' | translate }}</span>:
                 {{ node.local_pk }}
               </div>
+              <div class="list-row long-content" *ngIf="showDmsgInfo">
+                <span class="title">{{ 'nodes.dmsg-server' | translate }}</span>:
+                {{ node.dmsgServerPk }}
+              </div>
+              <div class="list-row" *ngIf="showDmsgInfo">
+                <span class="title">{{ 'nodes.ping' | translate }}</span>:
+                {{ node.roundTripPing }}
+              </div>
             </div>
             <div class="margin-part"></div>
             <div class="right-part">
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 9081a7fa91..c6acd1df76 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
@@ -29,6 +29,8 @@ enum SortableColumns {
   State = 'transports.state',
   Label = 'nodes.label',
   Key = 'nodes.key',
+  DmsgServer = 'nodes.dmsg-server',
+  Ping = 'nodes.ping',
 }
 
 /**
@@ -40,7 +42,8 @@ enum SortableColumns {
   styleUrls: ['./node-list.component.scss'],
 })
 export class NodeListComponent implements OnInit, OnDestroy {
-  private static sortByInternal = SortableColumns.Key;
+  private static defaultSortableColumn = SortableColumns.Key;
+  private static sortByInternal = NodeListComponent.defaultSortableColumn;
   private static sortReverseInternal = false;
 
   // Vars for keeping track of the column used for sorting the data.
@@ -56,7 +59,9 @@ export class NodeListComponent implements OnInit, OnDestroy {
   loading = true;
   dataSource: Node[];
   tabsData: TabButtonData[] = [];
+  showDmsgInfo = false;
 
+  private readonly dmsgInfoStorageKey = 'show-dmsg-info';
   private dataSubscription: Subscription;
   private updateTimeSubscription: Subscription;
   private menuSubscription: Subscription;
@@ -80,6 +85,9 @@ export class NodeListComponent implements OnInit, OnDestroy {
     private clipboardService: ClipboardService,
     private translateService: TranslateService,
   ) {
+    // We only need to check if the key exists.
+    this.showDmsgInfo = !!localStorage.getItem(this.dmsgInfoStorageKey);
+
     // Data for populating the tab bar.
     this.tabsData = [
       {
@@ -143,6 +151,24 @@ export class NodeListComponent implements OnInit, OnDestroy {
     }
   }
 
+  /**
+   * Makes the dmsg info to be shown or hidden.
+   */
+  toggleDmsgInfo() {
+    this.showDmsgInfo = !this.showDmsgInfo;
+    // Create or remove an entry in the local storage, to be able to recover the setting later.
+    if (this.showDmsgInfo) {
+      localStorage.setItem(this.dmsgInfoStorageKey, '-');
+    } else {
+      localStorage.removeItem(this.dmsgInfoStorageKey);
+    }
+
+    // Do not allow to sort the list using a dmsg column while no dmsg data is being shown.
+    if (this.sortBy === SortableColumns.DmsgServer || this.sortBy === SortableColumns.Ping) {
+      this.changeSortingOrder(NodeListComponent.defaultSortableColumn);
+    }
+  }
+
   /**
    * Returns the scss class to be used to show the current status of the node.
    * @param forDot If true, returns a class for creating a colored dot. If false,
@@ -192,13 +218,19 @@ export class NodeListComponent implements OnInit, OnDestroy {
     // Get the list of sortable columns.
     const enumKeys = Object.keys(SortableColumns);
     const columnsMap = new Map<string, SortableColumns>();
-    const columns = enumKeys.map(key => {
-      const val = SortableColumns[key as any];
-      columnsMap.set(val, SortableColumns[key]);
+    let columns = enumKeys.map(key => {
+      // Ignore all dmsg columns if the dmsg data is not being shown.
+      if (this.showDmsgInfo || (SortableColumns[key] !== SortableColumns.DmsgServer && SortableColumns[key] !== SortableColumns.Ping)) {
+        const val = SortableColumns[key as any];
+        columnsMap.set(val, SortableColumns[key]);
 
-      return val;
+        return val;
+      }
     });
 
+    // Remove all empty entries.
+    columns = columns.filter(val => val);
+
     SelectColumnComponent.openDialog(this.dialog, columns).afterClosed().subscribe((result: SelectedColumn) => {
       if (result) {
         if (columnsMap.has(result.label) && (result.sortReverse !== this.sortReverse || columnsMap.get(result.label) !== this.sortBy)) {
@@ -294,6 +326,10 @@ 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.DmsgServer) {
+        response = !this.sortReverse ? a.dmsgServerPk.localeCompare(b.dmsgServerPk) : b.dmsgServerPk.localeCompare(a.dmsgServerPk);
+      } else if (this.sortBy === SortableColumns.Ping) {
+        response = !this.sortReverse ? a.roundTripPing - b.roundTripPing : b.roundTripPing - a.roundTripPing;
       } else if (this.sortBy === SortableColumns.State) {
         if (a.online && !b.online) {
           response = -1;
@@ -479,13 +515,21 @@ export class NodeListComponent implements OnInit, OnDestroy {
       {
         icon: 'filter_none',
         label: 'nodes.copy-key',
-      },
-      {
-        icon: 'short_text',
-        label: 'edit-label.title',
       }
     ];
 
+    if (this.showDmsgInfo) {
+      options.push({
+        icon: 'filter_none',
+        label: 'nodes.copy-dmsg',
+      });
+    }
+
+    options.push({
+      icon: 'short_text',
+      label: 'edit-label.title',
+    });
+
     if (!node.online) {
       options.push({
         icon: 'close',
@@ -495,22 +539,62 @@ export class NodeListComponent implements OnInit, OnDestroy {
 
     SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
-        if (this.clipboardService.copy(node.local_pk)) {
-          this.onCopyToClipboardClicked();
+        this.copySpecificTextToClipboard(node.local_pk);
+      } else if (this.showDmsgInfo) {
+        if (selectedOption === 2) {
+          this.copySpecificTextToClipboard(node.dmsgServerPk);
+        } else if (selectedOption === 3) {
+          this.showEditLabelDialog(node);
+        } else if (selectedOption === 4) {
+          this.deleteNode(node);
+        }
+      } else {
+        if (selectedOption === 2) {
+          this.showEditLabelDialog(node);
+        } else if (selectedOption === 3) {
+          this.deleteNode(node);
         }
-      } else if (selectedOption === 2) {
-        this.showEditLabelDialog(node);
-      } else if (selectedOption === 3) {
-        this.deleteNode(node);
       }
     });
   }
 
   /**
-   * Called after copying the public key of a node.
+   * Copies the public key of a visor. If the dmsg data is being shown, it allows the user to
+   * select between copying the public key of the node or the dmsg server.
+   */
+  copyToClipboard(node: Node) {
+    if (!this.showDmsgInfo) {
+      this.copySpecificTextToClipboard(node.local_pk);
+    } else {
+      const options: SelectableOption[] = [
+        {
+          icon: 'filter_none',
+          label: 'nodes.key',
+        },
+        {
+          icon: 'filter_none',
+          label: 'nodes.dmsg-server',
+        }
+      ];
+
+      SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+        if (selectedOption === 1) {
+          this.copySpecificTextToClipboard(node.local_pk);
+        } else if (selectedOption === 2) {
+          this.copySpecificTextToClipboard(node.dmsgServerPk);
+        }
+      });
+    }
+  }
+
+  /**
+   * Copies a text to the clipboard.
+   * @param text Text to copy.
    */
-  onCopyToClipboardClicked() {
-    this.snackbarService.showDone('copy.copied');
+  private copySpecificTextToClipboard(text: string) {
+    if (this.clipboardService.copy(text)) {
+      this.snackbarService.showDone('copy.copied');
+    }
   }
 
   /**
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 7246ddca83..a7c565f0ca 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
@@ -17,6 +17,14 @@
       <span class="title">{{ 'node.details.node-info.port' | translate }}&nbsp;</span>
       <app-copy-to-clipboard-text text="{{ node.port }}"></app-copy-to-clipboard-text>
     </span>
+    <span class="info-line">
+      <span class="title">{{ 'node.details.node-info.dmsg-server' | translate }}&nbsp;</span>
+      <app-copy-to-clipboard-text text="{{ node.dmsgServerPk }}"></app-copy-to-clipboard-text>
+    </span>
+    <span class="info-line">
+      <span class="title">{{ 'node.details.node-info.ping' | translate }}&nbsp;</span>
+      {{ node.roundTripPing }}
+    </span>
     <span class="info-line">
       <span class="title">{{ 'node.details.node-info.node-version' | translate }}</span>
       {{ node.build_info.version }}
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 a7abac6a42..784a0835b8 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { flatMap, map } from 'rxjs/operators';
+import { flatMap, map, mergeMap } from 'rxjs/operators';
 
 import { StorageService } from './storage.service';
 import { Node, Transport, Route, HealthInfo } from '../app.datatypes';
@@ -26,12 +26,30 @@ export class NodeService {
    * Get the list of the nodes connected to the hypervisor.
    */
   getNodes(): Observable<Node[]> {
-    return this.apiService.get('visors').pipe(map((nodes: Node[]) => {
-      nodes = nodes || [];
+    let nodes: Node[];
+
+    return this.apiService.get('visors').pipe(mergeMap((result: Node[]) => {
+      // Save the visor list.
+      nodes = result || [];
+
+      // Get the dmsg info.
+      return this.apiService.get('dmsg');
+    }), map((dmsgInfo: any[]) => {
+      // Create a map to associate the dmsg info with the visors.
+      const dmsgInfoMap = new Map<string, any>();
+      dmsgInfo.forEach(info => dmsgInfoMap.set(info.public_key, info));
 
       // Process the node data and create a helper map.
       const obtainedNodes = new Map<string, Node>();
       nodes.forEach(node => {
+        if (dmsgInfoMap.has(node.local_pk)) {
+          node.dmsgServerPk = dmsgInfoMap.get(node.local_pk).server_public_key;
+          node.roundTripPing = dmsgInfoMap.get(node.local_pk).round_trip;
+        } else {
+          node.dmsgServerPk = '-';
+          node.roundTripPing = -1;
+        }
+
         node.ip = this.getAddressPart(node.tcp_addr, 0);
         node.port = this.getAddressPart(node.tcp_addr, 1);
         node.label = this.storageService.getNodeLabel(node.local_pk);
@@ -94,6 +112,23 @@ export class NodeService {
           });
         }
 
+        // Get the dmsg info.
+        return this.apiService.get('dmsg');
+      }),
+      flatMap((dmsgInfo: any[]) => {
+        for (let i = 0; i < dmsgInfo.length; i++) {
+          if (dmsgInfo[i].public_key === currentNode.local_pk) {
+            currentNode.dmsgServerPk = dmsgInfo[i].server_public_key;
+            currentNode.roundTripPing = dmsgInfo[i].round_trip;
+
+            // Get the health info.
+            return this.apiService.get(`visors/${nodeKey}/health`);
+          }
+        }
+
+        currentNode.dmsgServerPk = '-';
+        currentNode.roundTripPing = -1;
+
         // 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 66d7f9a182..c9e0606bca 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -53,6 +53,8 @@
         "label": "Label:",
         "public-key": "Public key:",
         "port": "Port:",
+        "dmsg-server": "DMSG server:",
+        "ping": "Ping:",
         "node-version": "Visor version:",
         "app-protocol-version": "App protocol version:",
         "time": {
@@ -89,11 +91,17 @@
   "nodes": {
     "title": "Visor list",
     "update-all": "Update all",
+    "show-dmsg-info": "Show DMSG info",
+    "hide-dmsg-info": "Hide DMSG info",
     "state": "State",
     "state-tooltip": "Current state",
     "label": "Label",
     "key": "Key",
+    "dmsg-server": "DMSG server",
+    "ping": "Ping",
     "copy-key": "Copy key",
+    "copy-dmsg": "Copy DMSG server key",
+    "copy-data": "Copy data",
     "view-node": "View visor",
     "delete-node": "Remove visor",
     "error-load": "An error occurred while refreshing the list. Retrying...",
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 1c97ebe050..3558da3355 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -204,7 +204,45 @@ $responsive-table-colors: (
     margin-right: auto;
   }
 
-  mat-icon {
+  .icon-button {
+    display: flex;
+    line-height: 18px !important;
+    margin-right: 15px;
+    background: $white;
+    color: $blue-dark;
+    border-radius: 1000px;
+    cursor: pointer;
+    opacity: 0.9;
+    padding: 1px 7px;
+    font-weight: normal;
+    border: 0;
+    font-size: $font-size-smaller;
+    align-items: center;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    mat-icon {
+      margin-right: 2px;
+      font-size: 18px;
+      height: auto;
+      width: auto;
+    }
+
+    @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+      padding: 1px 10px;
+      line-height: 24px !important;
+      font-size: $font-size-sm !important;
+
+      mat-icon {
+        margin-right: 3px;
+        font-size: 22px;
+      }
+    }
+  }
+
+  > mat-icon {
     width: 18px !important;
     height: 18px !important;
     line-height: 18px !important;

From cf4bb4eecb6a88570368070705bd656350c53f65 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Tue, 7 Jul 2020 09:49:00 -0400
Subject: [PATCH 2/4] Show the ping in ms

---
 .../src/app/app.datatypes.ts                  |  2 +-
 .../pages/node-list/node-list.component.html  |  4 +--
 .../pages/node-list/node-list.component.ts    |  3 ++-
 .../node-info-content.component.html          |  2 +-
 .../src/app/services/node.service.ts          | 25 ++++++++++++++++---
 .../src/assets/i18n/en.json                   |  3 ++-
 6 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/static/skywire-manager-src/src/app/app.datatypes.ts b/static/skywire-manager-src/src/app/app.datatypes.ts
index 3ee9ba6de1..c9d2ee0f90 100644
--- a/static/skywire-manager-src/src/app/app.datatypes.ts
+++ b/static/skywire-manager-src/src/app/app.datatypes.ts
@@ -17,7 +17,7 @@ export class Node {
   seconds_online?: number;
   health?: HealthInfo;
   dmsgServerPk?: string;
-  roundTripPing?: number;
+  roundTripPing?: string;
 }
 
 export interface Application {
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 a386805402..40269d3a08 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
@@ -83,7 +83,7 @@
             {{ node.dmsgServerPk }}
           </td>
           <td *ngIf="showDmsgInfo">
-            {{ node.roundTripPing }}
+            {{ 'common.time-in-ms' | translate:{ time: node.roundTripPing } }}
           </td>
           <td (click)="$event.stopPropagation()" class="actions">
             <button
@@ -166,7 +166,7 @@
               </div>
               <div class="list-row" *ngIf="showDmsgInfo">
                 <span class="title">{{ 'nodes.ping' | translate }}</span>:
-                {{ node.roundTripPing }}
+                {{ 'common.time-in-ms' | translate:{ time: node.roundTripPing } }}
               </div>
             </div>
             <div class="margin-part"></div>
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 c6acd1df76..73df4bf420 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
@@ -329,7 +329,8 @@ export class NodeListComponent implements OnInit, OnDestroy {
       } else if (this.sortBy === SortableColumns.DmsgServer) {
         response = !this.sortReverse ? a.dmsgServerPk.localeCompare(b.dmsgServerPk) : b.dmsgServerPk.localeCompare(a.dmsgServerPk);
       } else if (this.sortBy === SortableColumns.Ping) {
-        response = !this.sortReverse ? a.roundTripPing - b.roundTripPing : b.roundTripPing - a.roundTripPing;
+        response =
+          !this.sortReverse ? Number(a.roundTripPing) - Number(b.roundTripPing) : Number(b.roundTripPing) - Number(a.roundTripPing);
       } else if (this.sortBy === SortableColumns.State) {
         if (a.online && !b.online) {
           response = -1;
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 a7c565f0ca..e4d1ce7279 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
@@ -23,7 +23,7 @@
     </span>
     <span class="info-line">
       <span class="title">{{ 'node.details.node-info.ping' | translate }}&nbsp;</span>
-      {{ node.roundTripPing }}
+      {{ 'common.time-in-ms' | translate:{ time: node.roundTripPing } }}
     </span>
     <span class="info-line">
       <span class="title">{{ 'node.details.node-info.node-version' | translate }}</span>
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 784a0835b8..c7a3367d89 100644
--- a/static/skywire-manager-src/src/app/services/node.service.ts
+++ b/static/skywire-manager-src/src/app/services/node.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { flatMap, map, mergeMap } from 'rxjs/operators';
+import BigNumber from 'bignumber.js';
 
 import { StorageService } from './storage.service';
 import { Node, Transport, Route, HealthInfo } from '../app.datatypes';
@@ -44,10 +45,10 @@ export class NodeService {
       nodes.forEach(node => {
         if (dmsgInfoMap.has(node.local_pk)) {
           node.dmsgServerPk = dmsgInfoMap.get(node.local_pk).server_public_key;
-          node.roundTripPing = dmsgInfoMap.get(node.local_pk).round_trip;
+          node.roundTripPing = this.nsToMs(dmsgInfoMap.get(node.local_pk).round_trip);
         } else {
           node.dmsgServerPk = '-';
-          node.roundTripPing = -1;
+          node.roundTripPing = '-1';
         }
 
         node.ip = this.getAddressPart(node.tcp_addr, 0);
@@ -90,6 +91,22 @@ export class NodeService {
     }));
   }
 
+  /**
+   * Converts a ns value to a ms string. It includes 2 decimals is the final value is less than 10.
+   * @param time Value to convert.
+   */
+  private nsToMs(time: number) {
+    let value = new BigNumber(time).dividedBy(1000000);
+
+    if (value.isLessThan(10)) {
+      value = value.decimalPlaces(2);
+    } else {
+      value = value.decimalPlaces(0);
+    }
+
+    return value.toString(10);
+  }
+
   /**
    * Gets the details of a specific node.
    */
@@ -119,7 +136,7 @@ export class NodeService {
         for (let i = 0; i < dmsgInfo.length; i++) {
           if (dmsgInfo[i].public_key === currentNode.local_pk) {
             currentNode.dmsgServerPk = dmsgInfo[i].server_public_key;
-            currentNode.roundTripPing = dmsgInfo[i].round_trip;
+            currentNode.roundTripPing = this.nsToMs(dmsgInfo[i].round_trip);
 
             // Get the health info.
             return this.apiService.get(`visors/${nodeKey}/health`);
@@ -127,7 +144,7 @@ export class NodeService {
         }
 
         currentNode.dmsgServerPk = '-';
-        currentNode.roundTripPing = -1;
+        currentNode.roundTripPing = '-1';
 
         // 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 c9e0606bca..d4385fdaea 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -17,7 +17,8 @@
     "refreshed": "Data refreshed.",
     "options": "Options",
     "logout": "Logout",
-    "logout-error": "Error logging out."
+    "logout-error": "Error logging out.",
+    "time-in-ms": "{{ time }}ms"
   },
 
   "tables": {

From 44c36e168c97b306cbb73ef3d53d5d7c75d4acef Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Tue, 7 Jul 2020 10:19:52 -0400
Subject: [PATCH 3/4] Small style fix

---
 .../src/assets/scss/_responsive_tables.scss                  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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 0fc65dcb41..ec93043656 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -197,16 +197,13 @@ $responsive-table-colors: (
     color: $blue-dark;
     border-radius: 1000px;
     cursor: pointer;
-    opacity: 0.9;
     padding: 1px 7px;
     font-weight: normal;
     border: 0;
     font-size: $font-size-smaller;
     align-items: center;
 
-    &:hover {
-      opacity: 1;
-    }
+    @extend .subtle-transparent-button;
 
     mat-icon {
       margin-right: 2px;

From d0dd56ccfc978a275e62d7c27ecf2dfcf4581563 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Tue, 7 Jul 2020 15:32:22 -0400
Subject: [PATCH 4/4] Move the node list with dmsg info to another tab

---
 .../src/app/app-routing.module.ts             |  4 +++
 .../pages/node-list/node-list.component.html  | 24 ++++++----------
 .../pages/node-list/node-list.component.scss  |  4 +++
 .../pages/node-list/node-list.component.ts    | 28 +++++--------------
 .../src/assets/i18n/en.json                   |  3 +-
 5 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/static/skywire-manager-src/src/app/app-routing.module.ts b/static/skywire-manager-src/src/app/app-routing.module.ts
index 6cfbe5946a..8ef84a6928 100644
--- a/static/skywire-manager-src/src/app/app-routing.module.ts
+++ b/static/skywire-manager-src/src/app/app-routing.module.ts
@@ -30,6 +30,10 @@ const routes: Routes = [
         path: '',
         component: NodeListComponent
       },
+      {
+        path: 'dmsg',
+        component: NodeListComponent
+      },
       {
         path: ':key',
         component: NodeComponent,
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 eee1d30d68..9b623e8176 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
@@ -4,7 +4,7 @@
     <app-tab-bar
       [titleParts]="['start.title']"
       [tabsData]="tabsData"
-      [selectedTabIndex]="0"
+      [selectedTabIndex]="!showDmsgInfo ? 0 : 1"
       [showUpdateButton]="false"
     ></app-tab-bar>
   </div>
@@ -17,7 +17,7 @@
     <app-tab-bar
       [titleParts]="['start.title']"
       [tabsData]="tabsData"
-      [selectedTabIndex]="0"
+      [selectedTabIndex]="!showDmsgInfo ? 0 : 1"
       [secondsSinceLastUpdate]="secondsSinceLastUpdate" 
       [showLoading]="updating"
       [showAlert]="errorsUpdating"
@@ -26,16 +26,6 @@
     ></app-tab-bar>
   </div>
   <div class="col-12">
-    <!-- Dmsg info button area. -->
-    <div class="generic-title-container mt-4.5 d-flex"  *ngIf="dataSource.length !== 0">
-      <div class="title ml-3.5"></div>
-      <button class="icon-button" (click)="toggleDmsgInfo()">
-        <mat-icon>
-          {{ showDmsgInfo ? 'visibility_off' : 'visibility' }}
-        </mat-icon>
-        {{ (showDmsgInfo ? 'nodes.hide-dmsg-info' : 'nodes.show-dmsg-info') | translate }}
-      </button>
-    </div>
     <div class="rounded-elevated-box mt-4.5" *ngIf="dataSource.length !== 0"><div class="box-internal-container overflow full-node-list-margins">
       <!-- Table for large screens. -->
       <table
@@ -49,7 +39,7 @@
             <span class="dot-outline-gray"></span>
             <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
           </th>
-          <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Label)">
+          <th class="sortable-column labels" (click)="changeSortingOrder(sortableColumns.Label)">
             {{ 'nodes.label' | translate }}
             <mat-icon *ngIf="sortBy === sortableColumns.Label" [inline]="true">{{ sortingArrow }}</mat-icon>
           </th>
@@ -78,9 +68,11 @@
           </td>
           <td>
             {{ node.local_pk }}
+            <!--<app-copy-to-clipboard-text [short]="true" text="{{ node.local_pk }}" shortTextLength="5"></app-copy-to-clipboard-text>-->
           </td>
           <td *ngIf="showDmsgInfo">
             {{ node.dmsgServerPk }}
+            <!--<app-copy-to-clipboard-text [short]="true" text="{{ node.dmsgServerPk }}" shortTextLength="5"></app-copy-to-clipboard-text>-->
           </td>
           <td *ngIf="showDmsgInfo">
             {{ 'common.time-in-ms' | translate:{ time: node.roundTripPing } }}
@@ -158,11 +150,13 @@
               </div>
               <div class="list-row long-content">
                 <span class="title">{{ 'nodes.key' | translate }}</span>:
-                {{ node.local_pk }}
+                <app-copy-to-clipboard-text [short]="true" text="{{ node.local_pk }}" shortTextLength="5"></app-copy-to-clipboard-text>
+                <!--{{ node.local_pk }}-->
               </div>
               <div class="list-row long-content" *ngIf="showDmsgInfo">
                 <span class="title">{{ 'nodes.dmsg-server' | translate }}</span>:
-                {{ node.dmsgServerPk }}
+                <!--{{ node.dmsgServerPk }}-->
+                <app-copy-to-clipboard-text [short]="true" text="{{ node.dmsgServerPk }}" shortTextLength="5"></app-copy-to-clipboard-text>
               </div>
               <div class="list-row" *ngIf="showDmsgInfo">
                 <span class="title">{{ 'nodes.ping' | translate }}</span>:
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
index 3df08e97dd..bcdfb1069d 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
@@ -1,3 +1,7 @@
+.labels {
+  width: 15%;
+}
+
 .actions {
   text-align: right;
   width: 120px;
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 ef1c53b222..a980173595 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
@@ -60,7 +60,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
   tabsData: TabButtonData[] = [];
   showDmsgInfo = false;
 
-  private readonly dmsgInfoStorageKey = 'show-dmsg-info';
   private dataSubscription: Subscription;
   private updateTimeSubscription: Subscription;
   private menuSubscription: Subscription;
@@ -84,8 +83,8 @@ export class NodeListComponent implements OnInit, OnDestroy {
     private clipboardService: ClipboardService,
     private translateService: TranslateService,
   ) {
-    // We only need to check if the key exists.
-    this.showDmsgInfo = !!localStorage.getItem(this.dmsgInfoStorageKey);
+    // Show the dmsg info if the dmsg url was used.
+    this.showDmsgInfo = this.router.url.indexOf('dmsg') !== -1;
 
     // Data for populating the tab bar.
     this.tabsData = [
@@ -94,6 +93,11 @@ export class NodeListComponent implements OnInit, OnDestroy {
         label: 'nodes.title',
         linkParts: ['/nodes'],
       },
+      {
+        icon: 'language',
+        label: 'nodes.dmsg-title',
+        linkParts: ['/nodes', 'dmsg'],
+      },
       {
         icon: 'settings',
         label: 'settings.title',
@@ -150,24 +154,6 @@ export class NodeListComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Makes the dmsg info to be shown or hidden.
-   */
-  toggleDmsgInfo() {
-    this.showDmsgInfo = !this.showDmsgInfo;
-    // Create or remove an entry in the local storage, to be able to recover the setting later.
-    if (this.showDmsgInfo) {
-      localStorage.setItem(this.dmsgInfoStorageKey, '-');
-    } else {
-      localStorage.removeItem(this.dmsgInfoStorageKey);
-    }
-
-    // Do not allow to sort the list using a dmsg column while no dmsg data is being shown.
-    if (this.sortBy === SortableColumns.DmsgServer || this.sortBy === SortableColumns.Ping) {
-      this.changeSortingOrder(NodeListComponent.defaultSortableColumn);
-    }
-  }
-
   /**
    * Returns the scss class to be used to show the current status of the node.
    * @param forDot If true, returns a class for creating a colored dot. If false,
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index b597a43379..7929c82b97 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -93,9 +93,8 @@
 
   "nodes": {
     "title": "Visor list",
+    "dmsg-title": "DMSG",
     "update-all": "Update all",
-    "show-dmsg-info": "Show DMSG info",
-    "hide-dmsg-info": "Hide DMSG info",
     "state": "State",
     "state-tooltip": "Current state",
     "label": "Label",