Fix dashboard spans table

src/app/pages/detail/detail.component.html

@@ -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>

src/app/pages/detail/detail.component.ts

@@ -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;
   }
 
 }

src/common/SyncInfo.ts

@@ -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)));