Fix dashboard spans table

This commit is contained in:
everoddandeven 2024-10-15 23:23:07 +02:00
parent 96f0acad5a
commit 126891dfdc
3 changed files with 94 additions and 39 deletions

View file

@ -46,13 +46,14 @@
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
<div class="tab-pane fade" id="pills-peers" role="tabpanel" aria-labelledby="pills-peers-tab" tabindex="0">
<div class="m-3">
<table
id="table"
data-toggle="table"
id="peersTable"
data-toggle="peersTable"
data-toolbar="#toolbar"
data-height="460"
data-pagination="true"
>
<thead>
<tr>
@ -67,6 +68,28 @@
</table>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Spans</div>
<div class="tab-pane fade" id="pills-spans" role="tabpanel" aria-labelledby="pills-spans-tab" tabindex="0">
<div class="m-3">
<table
id="spansTable"
data-toggle="spansTable"
data-toolbar="#toolbar"
data-height="460"
data-pagination="true"
>
<thead>
<tr>
<th data-field="connectionId">Connection ID</th>
<th data-field="nBlocks">Blocks</th>
<th data-field="remoteAddress">Remote Address</th>
<th data-field="size">Size</th>
<th data-field="speed">Speed</th>
<th data-field="rate">Rate</th>
<th data-field="startBlockHeight">Start Block Height</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

View file

@ -4,6 +4,7 @@ import { NavbarLink } from '../../shared/components/navbar/navbar.model';
import { NavbarService } from '../../shared/components/navbar/navbar.service';
import { DaemonService, DaemonDataService } from '../../core/services';
import { Subscription } from 'rxjs';
import { Connection, Span } from '../../../common';
@Component({
selector: 'app-detail',
@ -118,7 +119,7 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
this.navbarLinks = [
new NavbarLink('pills-home-tab', '#pills-home', 'pills-home', false, 'Overview', true),
new NavbarLink('pills-profile-tab', '#pills-profile', 'pills-profile', false, 'Peers', true),
new NavbarLink('pills-peers-tab', '#pills-peers', 'pills-peers', false, 'Peers', true),
new NavbarLink('pills-spans-tab', '#pills-spans', 'pills-spans', false, 'Spans', true)
];
@ -136,17 +137,7 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
}));
this.subscriptions.push(this.daemonData.syncInfoRefreshEnd.subscribe(() => {
const $table = $('#table');
//$table.bootstrapTable({});
$table.bootstrapTable('refreshOptions', {
classes: 'table table-bordered table-hover table-dark table-striped'
});
if (this.getPeers().length == 0) $table.bootstrapTable('showLoading');
else
{
$table.bootstrapTable('load', this.getPeers());
$table.bootstrapTable('hideLoading');
}
this.refreshTables();
this.cards = this.createCards();
}));
@ -157,16 +148,7 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
console.log('DetailComponent AFTER VIEW INIT');
this.navbarService.setLinks(this.navbarLinks);
this.ngZone.run(() => {
const $table = $('#table');
$table.bootstrapTable({});
$table.bootstrapTable('refreshOptions', {
classes: 'table table-bordered table-hover table-dark table-striped'
});
$table.bootstrapTable('showLoading');
this.initTables();
});
}
@ -175,6 +157,57 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
this.subscriptions = [];
}
private initTable(table: string): void {
const $table = $(`#${table}Table`);
$table.bootstrapTable({});
$table.bootstrapTable('refreshOptions', {
classes: 'table table-bordered table-hover table-dark table-striped'
});
$table.bootstrapTable('showLoading');
}
private initPeerTable(): void {
this.initTable('peers');
}
private initSpansTable(): void {
this.initTable('spans');
}
private initTables() {
this.initPeerTable();
this.initSpansTable();
}
private refreshTable(table: string, data: any[]): void {
const $peersTable = $(`#${table}Table`);
//$table.bootstrapTable({});
$peersTable.bootstrapTable('refreshOptions', {
classes: 'table table-bordered table-hover table-dark table-striped'
});
if (this.getPeers().length == 0) $peersTable.bootstrapTable('showLoading');
else
{
$peersTable.bootstrapTable('load', data);
$peersTable.bootstrapTable('hideLoading');
}
}
private refreshPeersTable(): void {
this.refreshTable('peers', this.getPeers());
}
private refreshSpansTable(): void {
this.refreshTable('spans', this.getSpans());
}
private refreshTables(): void {
this.refreshPeersTable();
this.refreshSpansTable();
}
private createLoadingCards(): Card[] {
return [
new Card('Connection Status', this.connectionStatus, true),
@ -215,21 +248,20 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
];
}
public getPeers(): any[] {
public getPeers(): Connection[] {
if (!this.daemonData.syncInfo) return [];
const infos: Connection[] = [];
const peers: any[] = [];
this.daemonData.syncInfo.peers.forEach((peer: Peer) => {
infos.push(peer.info);
});
this.daemonData.syncInfo.peers.forEach((peer: Peer) => peers.push({
'address': peer.info.address,
'peerId': peer.info.peerId,
'height': peer.info.height,
'pruningSeed': peer.info.pruningSeed,
'state': peer.info.state,
'currentDownload': `${peer.info.currentDownload / 1000} kB/s`
}));
return infos;
}
return peers;
public getSpans(): Span[] {
if (!this.daemonData.syncInfo) return [];
return this.daemonData.syncInfo.spans;
}
}

View file

@ -26,7 +26,7 @@ export class SyncInfo {
const peers: Peer[] = [];
const spans: Span[] = [];
const rawPeers: any[] = syncInfo.peers;
const rawSpans: any[] | undefined = syncInfo.rawSpans;
const rawSpans: any[] | undefined = syncInfo.spans;
if (rawPeers) rawPeers.forEach((peer: any) => peers.push(Peer.parse(peer)));
if (rawSpans) rawSpans.forEach((span: any) => spans.push(Span.parse(span)));