From 71863e4f48b77fadda73c3f9f4be4637c43612b6 Mon Sep 17 00:00:00 2001 From: Mononaut Date: Tue, 5 Mar 2024 23:16:20 +0000 Subject: [PATCH] Polish /nodes and /network pages --- .../server-health.component.html | 18 +++++---- .../server-health.component.scss | 40 ++++++++++++++++++- .../server-health/server-health.component.ts | 23 ++++++++++- .../server-status.component.html | 12 +++--- .../server-health/server-status.component.ts | 4 +- .../src/app/interfaces/websocket.interface.ts | 1 + 6 files changed, 81 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/components/server-health/server-health.component.html b/frontend/src/app/components/server-health/server-health.component.html index f376b4314..0350997e1 100644 --- a/frontend/src/app/components/server-health/server-health.component.html +++ b/frontend/src/app/components/server-health/server-health.component.html @@ -7,18 +7,22 @@
- +
- + + - + + - - - - + + + + + + diff --git a/frontend/src/app/components/server-health/server-health.component.scss b/frontend/src/app/components/server-health/server-health.component.scss index ebc6a883c..572628a9d 100644 --- a/frontend/src/app/components/server-health/server-health.component.scss +++ b/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; + } + } } } } \ No newline at end of file diff --git a/frontend/src/app/components/server-health/server-health.component.ts b/frontend/src/app/components/server-health/server-health.component.ts index b1008a4a5..363b28111 100644 --- a/frontend/src/app/components/server-health/server-health.component.ts +++ b/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 ''; + } + } } diff --git a/frontend/src/app/components/server-health/server-status.component.html b/frontend/src/app/components/server-health/server-status.component.html index 484d774a0..23ca16a61 100644 --- a/frontend/src/app/components/server-health/server-status.component.html +++ b/frontend/src/app/components/server-health/server-status.component.html @@ -1,9 +1,11 @@ -
-
- Status - Live +
+
+
+ Status + Live +
+

Live Network

-

Live Network

diff --git a/frontend/src/app/components/server-health/server-status.component.ts b/frontend/src/app/components/server-health/server-status.component.ts index 8c893988d..2e522b805 100644 --- a/frontend/src/app/components/server-health/server-status.component.ts +++ b/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'; diff --git a/frontend/src/app/interfaces/websocket.interface.ts b/frontend/src/app/interfaces/websocket.interface.ts index 72fd8c419..d085c22fa 100644 --- a/frontend/src/app/interfaces/websocket.interface.ts +++ b/frontend/src/app/interfaces/websocket.interface.ts @@ -134,4 +134,5 @@ export interface HealthCheckHost { checked: boolean; link?: string; statusPage?: SafeResourceUrl; + flag?: string; } \ No newline at end of file
HostRTTRTTRTT Height
⭐️{{ host.host }}{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? 'πŸ”₯' : 'βœ…') }}
{{ i + 1 }}{{ host.active ? '⭐️' : host.flag }}{{ host.link }}{{ (host.rtt / 1000) | number : '1.1-1' }} {{ host.rtt == null ? '' : 's'}} {{ !host.checked ? '⏳' : (host.unreachable ? 'πŸ”₯' : 'βœ…') }}{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? 'πŸ”₯' : 'βœ…') }} {{ host.latestHeight }} {{ !host.checked ? '⏳' : (host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < tip ? '🟧' : 'βœ…')) }}