RTL/src/app/lnd/routing/routing-peers/routing-peers.component.html

<div fxLayout="column">
  <mat-card fxLayout="column" fxLayoutAlign.gt-sm="space-between start" fxLayoutAlign.lt-md="space-between stretch" fxLayout.gt-sm="row wrap">
    <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="table-card-content">
      <div perfectScrollbar class="table-container">
        <table mat-table #tableIn [dataSource]="RoutingPeersIncoming" matSort fxFlex="100" class="overflow-auto incoming-table">
          <ng-container matColumnDef="incoming">
            <th mat-header-cell *matHeaderCellDef colspan="10">Incoming Traffic</th>
          </ng-container>
          <ng-container matColumnDef="chan_id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
            <td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
          </ng-container>
          <ng-container matColumnDef="alias">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
            <td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
          </ng-container>
          <ng-container matColumnDef="events">
            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
            <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
            </td>
          </ng-container>
          <ng-container matColumnDef="total_amount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
            <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
          </ng-container>
          <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
            <td mat-cell *matCellDef="let rPeer" class="pl-4">
              <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')">View Info</button>
            </td>
          </ng-container>
          <ng-container matColumnDef="no_incoming_event">
            <td mat-footer-cell *matFooterCellDef colspan="4">
              <p *ngIf="!RoutingPeersIncoming.data || RoutingPeersIncoming.data.length<1">No incoming routing peer available.</p>
            </td>
          </ng-container>
          <tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': RoutingPeersIncoming.data && RoutingPeersIncoming.data.length>0}"></tr>
          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
          <tr mat-header-row *matHeaderRowDef="displayIncomingHeader"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
    </div>
    <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
      <mat-card-content class="table-card-content" fxFlex="100">
        <div perfectScrollbar class="table-container">
          <table mat-table #tableOut [dataSource]="RoutingPeersOutgoing" class="overflow-auto outgoing-table">
            <ng-container matColumnDef="outgoing">
              <th mat-header-cell *matHeaderCellDef colspan="10">Outgoing Traffic</th>
            </ng-container>
            <ng-container matColumnDef="chan_id">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
              <td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
            </ng-container>
            <ng-container matColumnDef="alias">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
              <td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
            </ng-container>
            <ng-container matColumnDef="events">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
              <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
              </td>
            </ng-container>
            <ng-container matColumnDef="total_amount">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
              <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
            </ng-container>
            <ng-container matColumnDef="actions">
              <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
              <td mat-cell *matCellDef="let rPeer" class="pl-4">
                <button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')">View Info</button>
              </td>
            </ng-container>
            <ng-container matColumnDef="no_outgoing_event">
              <td mat-footer-cell *matFooterCellDef colspan="4">
                <p *ngIf="!RoutingPeersOutgoing.data || RoutingPeersOutgoing.data.length<1">No outgoing routing peer available.</p>
              </td>
            </ng-container>
            <tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': RoutingPeersOutgoing.data && RoutingPeersOutgoing.data.length>0}"></tr>
            <tr mat-header-row *matHeaderRowDef="displayOutgoingHeader"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </div>
      </mat-card-content>
    </div>
  </mat-card>
</div>