mirror of
https://github.com/mempool/mempool.git
synced 2025-04-22 14:34:47 +02:00
Polish /nodes and /network pages
This commit is contained in:
Mononaut
parent
c9b2ce3efb
commit
71863e4f48
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -134,4 +134,5 @@ export interface HealthCheckHost {
|
||||
checked: boolean;
|
||||
link?: string;
|
||||
statusPage?: SafeResourceUrl;
|
||||
flag?: string;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user