lnd all routing & reports page layout

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

@@ -12,11 +12,59 @@
       <table mat-table #table [dataSource]="NonRoutingPeers" matSort class="overflow-auto">
         <ng-container matColumnDef="chan_id">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
-          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}">{{nonRPeer.chan_id}}</td>
+          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{nonRPeer.chan_id}}</td>
         </ng-container>
         <ng-container matColumnDef="remote_alias">
           <th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
-          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}">{{nonRPeer.remote_alias}}</td>
+          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{nonRPeer.remote_alias}}</td>
+        </ng-container>
+        <ng-container matColumnDef="remote_pubkey">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Pubkey</th>
+          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{nonRPeer.remote_pubkey}}</td>
+        </ng-container>
+        <ng-container matColumnDef="channel_point">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
+          <td mat-cell *matCellDef="let nonRPeer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{nonRPeer.channel_point}}</td>
+        </ng-container>
+        <ng-container matColumnDef="uptime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Uptime ({{timeUnit}})</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.uptime_str}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="lifetime">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Lifetime ({{timeUnit}})</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.lifetime_str}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="commit_fee">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats)</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.commit_fee | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="commit_weight">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Weight</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.commit_weight | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="fee_per_kw">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.fee_per_kw | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="num_updates">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Updates</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.num_updates | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="unsettled_balance">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Unsettled Balance (Sats)</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.unsettled_balance | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="capacity">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.capacity | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="local_chan_reserve_sat">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.local_chan_reserve_sat | number}} </span></td>
+        </ng-container>
+        <ng-container matColumnDef="remote_chan_reserve_sat">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
+          <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.remote_chan_reserve_sat | number}} </span></td>
         </ng-container>
         <ng-container matColumnDef="total_satoshis_sent">
           <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent</th>

src/app/lnd/routing/non-routing-peers/non-routing-peers.component.scss

@@ -1,10 +1,33 @@
-.mat-column-chan_id, .mat-column-alias {
+@import "../../../shared/theme/styles/mixins.scss";
-  flex: 1 1 25%;
+
+.mat-column-chan_id, .mat-column-remote_alias, .mat-column-remote_pubkey, .mat-column-channel_point {
+  flex: 1 1 20%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.mat-column-uptime, .mat-column-lifetime, .mat-column-local_balance, .mat-column-remote_balance, .mat-column-total_satoshis_sent, .mat-column-total_satoshis_received {
+  flex: 1 1 10%;
+  width: 10%;
+  white-space: nowrap;
+  overflow: hidden;  
+  text-overflow: ellipsis;
+  @include for_screensize(tab-land) {
+    white-space: unset;
+    flex: 1 1 25%;
+    width: 25%;
+  }
+  @include for_screensize(tab-port) {
+    flex: 0 0 15%;
+    width: 15%;
+  }
+  @include for_screensize(phone) {
+    white-space: unset;
+  }
+}
+
+
 .mat-column-actions {
   min-height: 4.8rem;
 }

src/app/lnd/routing/non-routing-peers/non-routing-peers.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -40,11 +41,12 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   public errorMessage = '';
   public filter = '';
   public activeChannels: Channel[] = [];
+  public timeUnit = 'mins:secs';
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
   private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
-  constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private router: Router, private activatedRoute: ActivatedRoute) {
+  constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private router: Router, private activatedRoute: ActivatedRoute, private decimalPipe: DecimalPipe) {
     this.screenSize = this.commonService.getScreenSize();
   }
 
@@ -102,6 +104,57 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
     }
   }
 
+  calculateUptime(channels: Channel[]) {
+    const minutesDivider = 60;
+    const hoursDivider = minutesDivider * 60;
+    const daysDivider = hoursDivider * 24;
+    const yearsDivider = daysDivider * 365;
+    let maxDivider = minutesDivider;
+    let minDivider = 1;
+    let max_uptime = 0;
+    channels.forEach((channel) => {
+      if (channel.uptime && +channel.uptime > max_uptime) {
+        max_uptime = +channel.uptime;
+      }
+    });
+    switch (true) {
+      case max_uptime < hoursDivider:
+        this.timeUnit = 'Mins:Secs';
+        maxDivider = minutesDivider;
+        minDivider = 1;
+        break;
+
+      case max_uptime >= hoursDivider && max_uptime < daysDivider:
+        this.timeUnit = 'Hrs:Mins';
+        maxDivider = hoursDivider;
+        minDivider = minutesDivider;
+        break;
+
+      case max_uptime >= daysDivider && max_uptime < yearsDivider:
+        this.timeUnit = 'Days:Hrs';
+        maxDivider = daysDivider;
+        minDivider = hoursDivider;
+        break;
+
+      case max_uptime > yearsDivider:
+        this.timeUnit = 'Yrs:Days';
+        maxDivider = yearsDivider;
+        minDivider = daysDivider;
+        break;
+
+      default:
+        this.timeUnit = 'Mins:Secs';
+        maxDivider = minutesDivider;
+        minDivider = 1;
+        break;
+    }
+    channels.forEach((channel) => {
+      channel.uptime_str = channel.uptime ? (this.decimalPipe.transform(Math.floor(+channel.uptime / maxDivider), '2.0-0') + ':' + this.decimalPipe.transform(Math.round((+channel.uptime % maxDivider) / minDivider), '2.0-0')) : '---';
+      channel.lifetime_str = channel.lifetime ? (this.decimalPipe.transform(Math.floor(+channel.lifetime / maxDivider), '2.0-0') + ':' + this.decimalPipe.transform(Math.round((+channel.lifetime % maxDivider) / minDivider), '2.0-0')) : '---';
+    });
+    return channels;
+  }
+
   onManagePeer(selNonRoutingChannel: Channel) {
     this.router.navigate(['../../', 'connections', 'channels', 'open'], { relativeTo: this.activatedRoute, state: { filter: selNonRoutingChannel.chan_id } });
   }
@@ -134,7 +187,7 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   loadNonRoutingPeersTable(forwardingEvents: ForwardingEvent[]) {
     if (forwardingEvents.length > 0) {
       // const grpdRoutingPeers = this.groupRoutingPeers(forwardingEvents);
-      const filteredNonRoutingChannels = this.activeChannels?.filter((actvChnl) => forwardingEvents.findIndex((evnt) => (evnt.chan_id_in === actvChnl.chan_id || evnt.chan_id_out === actvChnl.chan_id)) < 0);
+      const filteredNonRoutingChannels = this.calculateUptime(this.activeChannels?.filter((actvChnl) => forwardingEvents.findIndex((evnt) => (evnt.chan_id_in === actvChnl.chan_id || evnt.chan_id_out === actvChnl.chan_id)) < 0));
       this.NonRoutingPeers = new MatTableDataSource<Channel>(filteredNonRoutingChannels);
       this.NonRoutingPeers.sort = this.sort;
       this.NonRoutingPeers.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });

src/app/shared/services/consts-enums-functions.ts

@@ -998,8 +998,8 @@ export const LND_TABLES_DEF = {
       allowedColumns: ['chan_id', 'alias', 'events', 'total_amount']
     },
     non_routing_peers: {
-      maxColumns: 6,
+      maxColumns: 8,
-      allowedColumns: ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance']
+      allowedColumns: ['chan_id', 'remote_alias', 'remote_pubkey', 'channel_point', 'uptime', 'lifetime', 'commit_fee', 'commit_weight', 'fee_per_kw', 'num_updates', 'unsettled_balance', 'capacity', 'local_chan_reserve_sat', 'remote_chan_reserve_sat', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance']
     }
   },
   reports: {