lnd all routing & reports page layout

pull/1127/head
ShahanaFarooqui 2 years ago
parent 381be53e40
commit 76afb82dae

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

@ -1,10 +1,33 @@
.mat-column-chan_id, .mat-column-alias {
flex: 1 1 25%;
@import "../../../shared/theme/styles/mixins.scss";
.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;
}

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

@ -998,8 +998,8 @@ export const LND_TABLES_DEF = {
allowedColumns: ['chan_id', 'alias', 'events', 'total_amount']
},
non_routing_peers: {
maxColumns: 6,
allowedColumns: ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance']
maxColumns: 8,
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: {

Loading…
Cancel
Save