GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6200 from mempool/mononaut/monitoring-responsive

Browse source 
improve responsiveness of monitoring page
This commit is contained in:
wiz 2026-01-12 05:50:07 -08:00 • committed by GitHub
commit f8c999b51f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 69 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/app/components/server-health/server-health.component.html
View file

@ -15,31 +15,32 @@
<th class="rank"></th>
<th class="flag"></th>
<th class="host">Host</th>
<th class="updated">Updated</th>
<th class="updated only-large">Updated</th>
<th class="rtt only-small">RTT</th>
<th class="rtt only-large">RTT</th>
<th class="height">Height</th>
<th class="hybrid only-large">Hybrid</th>
<th class="frontend only-large">Front</th>
<th class="backend only-large">Back</th>
<th class="electrs only-large">Electrs</th>
<th class="ssr only-large">SSR</th>
<th class="core only-large">Core</th>
<th class="hybrid hash">Hybrid</th>
<th class="frontend hash">Front</th>
<th class="backend hash">Back</th>
<th class="electrs hash">Electrs</th>
<th class="ssr hash">SSR</th>
<th class="core">Core</th>
</tr>
<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="updated">{{ getLastUpdateSeconds(host) }}</td>
<td class="updated only-large">{{ getLastUpdateSeconds(host) }}</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 < maxHeight ? '🟧' : '✅')) }}</td>
<ng-container *ngFor="let type of ['hybrid', 'frontend', 'backend', 'electrs', 'ssr', 'core']">
<td class="{{type}} only-large" [style.background-color]="type !== 'core' && host.hashes?.[type] ? '#' + host.hashes[type].slice(0, 6) : ''">
<td class="{{type}}" [class.hash]="type !== 'core'" [style.background-color]="type !== 'core' && host.hashes?.[type] ? '#' + host.hashes[type].slice(0, 6) : ''">
@if (type !== 'core' && host.hashes?.[type]) {
<a [style.color]="'white'" href="https://github.com/mempool/{{repoMap[type]}}/commit/{{ host.hashes[type] }}" target="_blank">{{ host.hashes[type].slice(0, 8) || '?' }}</a>
} @else if (host.hashes?.[type]) {
<span [style.color]="'white'" style="font-size: 10px;">{{ host.hashes[type] || '?' }}</span>
<span [style.color]="'white'" class="only-large" style="font-size: 10px;">{{ host.hashes[type] || '?' }}</span>
<span [style.color]="'white'" class="only-small" style="font-size: 10px;">{{ host.hashes[type]?.slice(9) || '?' }}</span>
} @else {
<span>?</span>
}

61
frontend/src/app/components/server-health/server-health.component.scss
View file

@ -50,10 +50,16 @@
white-space: nowrap;
}
@media (min-width: 576px) {
&.updated {
display: table-cell;
span {
&.only-small {
display: none;
}
&.only-large {
display: inline;
}
}
@media (min-width: 576px) {
&.only-small {
display: none;
}
@ -62,5 +68,54 @@
}
}
}
@media (max-width: 1080px) {
th {
font-size: 11px;
}
td, th {
&.updated {
display: none;
}
&.hash {
max-width: 50px;
overflow: hidden;
}
span {
&.only-small {
display: inline;
}
&.only-large {
display: none;
}
}
}
}
@media (max-width: 800px) {
th {
font-size: 10px;
}
td, th {
&.hash {
max-width: 38px;
overflow: hidden;
}
}
}
@media (max-width: 670px) {
font-size: 11px;
td, th {
&.hash {
max-width: 30px;
overflow: hidden;
}
}
}
}
}