mirror of
https://github.com/everoddandeven/monerod-gui.git
synced 2024-10-30 02:37:36 +00:00
Fix dashboard spans table
This commit is contained in:
parent
96f0acad5a
commit
126891dfdc
3 changed files with 94 additions and 39 deletions
|
@ -46,13 +46,14 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="m-3">
|
||||||
<table
|
<table
|
||||||
id="table"
|
id="peersTable"
|
||||||
data-toggle="table"
|
data-toggle="peersTable"
|
||||||
data-toolbar="#toolbar"
|
data-toolbar="#toolbar"
|
||||||
data-height="460"
|
data-height="460"
|
||||||
|
data-pagination="true"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -67,6 +68,28 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</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 class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
|
||||||
</div>
|
</div>
|
|
@ -4,6 +4,7 @@ import { NavbarLink } from '../../shared/components/navbar/navbar.model';
|
||||||
import { NavbarService } from '../../shared/components/navbar/navbar.service';
|
import { NavbarService } from '../../shared/components/navbar/navbar.service';
|
||||||
import { DaemonService, DaemonDataService } from '../../core/services';
|
import { DaemonService, DaemonDataService } from '../../core/services';
|
||||||
import { Subscription } from 'rxjs';
|
import { Subscription } from 'rxjs';
|
||||||
|
import { Connection, Span } from '../../../common';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-detail',
|
selector: 'app-detail',
|
||||||
|
@ -118,7 +119,7 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
this.navbarLinks = [
|
this.navbarLinks = [
|
||||||
new NavbarLink('pills-home-tab', '#pills-home', 'pills-home', false, 'Overview', true),
|
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)
|
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(() => {
|
this.subscriptions.push(this.daemonData.syncInfoRefreshEnd.subscribe(() => {
|
||||||
const $table = $('#table');
|
this.refreshTables();
|
||||||
//$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.cards = this.createCards();
|
this.cards = this.createCards();
|
||||||
}));
|
}));
|
||||||
|
@ -157,16 +148,7 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
|
||||||
console.log('DetailComponent AFTER VIEW INIT');
|
console.log('DetailComponent AFTER VIEW INIT');
|
||||||
this.navbarService.setLinks(this.navbarLinks);
|
this.navbarService.setLinks(this.navbarLinks);
|
||||||
this.ngZone.run(() => {
|
this.ngZone.run(() => {
|
||||||
|
this.initTables();
|
||||||
const $table = $('#table');
|
|
||||||
$table.bootstrapTable({});
|
|
||||||
|
|
||||||
$table.bootstrapTable('refreshOptions', {
|
|
||||||
classes: 'table table-bordered table-hover table-dark table-striped'
|
|
||||||
});
|
|
||||||
|
|
||||||
$table.bootstrapTable('showLoading');
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -175,6 +157,57 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
|
||||||
this.subscriptions = [];
|
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[] {
|
private createLoadingCards(): Card[] {
|
||||||
return [
|
return [
|
||||||
new Card('Connection Status', this.connectionStatus, true),
|
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 [];
|
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({
|
return infos;
|
||||||
'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 peers;
|
public getSpans(): Span[] {
|
||||||
|
if (!this.daemonData.syncInfo) return [];
|
||||||
|
return this.daemonData.syncInfo.spans;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,7 +26,7 @@ export class SyncInfo {
|
||||||
const peers: Peer[] = [];
|
const peers: Peer[] = [];
|
||||||
const spans: Span[] = [];
|
const spans: Span[] = [];
|
||||||
const rawPeers: any[] = syncInfo.peers;
|
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 (rawPeers) rawPeers.forEach((peer: any) => peers.push(Peer.parse(peer)));
|
||||||
if (rawSpans) rawSpans.forEach((span: any) => spans.push(Span.parse(span)));
|
if (rawSpans) rawSpans.forEach((span: any) => spans.push(Span.parse(span)));
|
||||||
|
|
Loading…
Reference in a new issue