Merge pull request #4740 from mempool/mononaut/polish-nodes

Polish /nodes and /network pages

frontend/src/app/components/server-health/server-health.component.html

@@ -7,18 +7,22 @@
 
   <ng-container *ngIf="(hosts$ | async) as hosts">
     <div class="status-panel">
-      <table class="status-table table table-borderless table-striped" *ngIf="(tip$ | async) as tip">
+      <table class="status-table table table-fixed table-borderless table-striped" *ngIf="(tip$ | async) as tip">
         <tbody>
           <tr>
-            <th class="active"></th>
+            <th class="rank"></th>
+            <th class="flag"></th>
             <th class="host">Host</th>
-            <th class="rtt">RTT</th>
+            <th class="rtt only-small">RTT</th>
+            <th class="rtt only-large">RTT</th>
             <th class="height">Height</th>
           </tr>
-          <tr *ngFor="let host of hosts;">
-            <td class="active"><span *ngIf="host.active">⭐️</span></td>
-            <td class="host">{{ host.host }}</td>
-            <td class="rtt">{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
+          <tr *ngFor="let host of hosts; let i = index; trackBy: trackByFn">
+            <td class="rank">{{ i + 1 }}</td>
+            <td class="flag">{{ host.active ? '⭐️' : host.flag }}</td>
+            <td class="host">{{ host.link }}</td>
+            <td class="rtt only-small">{{ (host.rtt / 1000) | number : '1.1-1' }} {{ host.rtt == null ? '' : 's'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
+            <td class="rtt only-large">{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
             <td class="height">{{ host.latestHeight }} {{ !host.checked ? '⏳' : (host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < tip ? '🟧' : '✅')) }}</td>
           </tr>
         </tbody>

frontend/src/app/components/server-health/server-health.component.scss

@@ -26,9 +26,47 @@
 
     td, th {
       padding: 0.25em;
-      &.rtt, &.height {
+
+      &.rank, &.flag {
+        width: 28px;
         text-align: right;
       }
+      &.rtt, &.height {
+        width: 92px;
+        text-align: right;
+      }
+      &.only-small {
+        display: table-cell;
+        &.rtt {
+          width: 60px;
+        }
+      }
+      &.only-large {
+        display: none;
+      }
+      &.height {
+        padding-right: 0.5em;
+      }
+      &.host {
+        width: auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      @media (min-width: 576px) {
+        &.rank, &.flag {
+          width: 32px;
+        }
+        &.rtt, &.height {
+          width: 96px;
+        }
+        &.only-small {
+          display: none;
+        }
+        &.only-large {
+          display: table-cell;
+        }
+      }
     }
   }
 }

frontend/src/app/components/server-health/server-health.component.ts

@@ -29,8 +29,8 @@ export class ServerHealthComponent implements OnInit {
           let statusUrl = '';
           let linkHost = '';
           if (host.socket) {
-            statusUrl = window.location.host + subpath + '/status';
-            linkHost = window.location.host + subpath;
+            statusUrl = 'https://' + window.location.hostname + subpath + '/status';
+            linkHost = window.location.hostname + subpath;
           } else {
             const hostUrl = new URL(host.host);
             statusUrl = 'https://' + hostUrl.hostname + subpath + '/status';
@@ -38,6 +38,7 @@ export class ServerHealthComponent implements OnInit {
           }
           host.statusPage = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, statusUrl));
           host.link = linkHost;
+          host.flag = this.parseFlag(host.host);
         }
         return hosts;
       })
@@ -45,4 +46,22 @@ export class ServerHealthComponent implements OnInit {
     this.tip$ = this.stateService.chainTip$;
     this.websocketService.want(['blocks', 'tomahawk']);
   }
+
+  trackByFn(index: number, host: HealthCheckHost): string {
+    return host.host;
+  }
+
+  private parseFlag(host: string): string {
+    if (host.includes('.fra.')) {
+      return '🇩🇪';
+    } else if (host.includes('.tk7.')) {
+      return '🇯🇵';
+    } else if (host.includes('.fmt.')) {
+      return '🇺🇸';
+    } else if (host.includes('.va1.')) {
+      return '🇺🇸';
+    } else {
+      return '';
+    }
+  }
 }

frontend/src/app/components/server-health/server-status.component.html

@@ -1,9 +1,11 @@
-<div class="tomahawk container-xl dashboard-container">
-  <div class="links">
-    <a [routerLink]='"/nodes"'>Status</a>
-    <span>Live</span>
+<div class="tomahawk">
+  <div class="container-xl dashboard-container">
+    <div class="links">
+      <a [routerLink]='"/nodes"'>Status</a>
+      <span>Live</span>
+    </div>
+    <h1 class="dashboard-title">Live Network</h1>
   </div>
-  <h1 class="dashboard-title">Live Network</h1>
 
   <ng-container *ngFor="let host of hosts; trackBy: trackByFn">
     <h5 [id]="host.host" class="hostLink">

frontend/src/app/components/server-health/server-status.component.ts

@@ -31,8 +31,8 @@ export class ServerStatusComponent implements OnInit, OnDestroy {
           let statusUrl = '';
           let linkHost = '';
           if (host.socket) {
-            statusUrl = window.location.host + subpath + '/status';
-            linkHost = window.location.host + subpath;
+            statusUrl = 'https://' + window.location.hostname + subpath + '/status';
+            linkHost = window.location.hostname + subpath;
           } else {
             const hostUrl = new URL(host.host);
             statusUrl = 'https://' + hostUrl.hostname + subpath + '/status';

frontend/src/app/interfaces/websocket.interface.ts

@@ -134,4 +134,5 @@ export interface HealthCheckHost {
   checked: boolean;
   link?: string;
   statusPage?: SafeResourceUrl;
+  flag?: string;
 }