mirrors/Ride-The-Lightning-RTL
1
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL.git synced 2024-11-19 01:40:29 +01:00
Code Issues Projects Releases Wiki Activity

ECL UI incomplete

Browse Source
This commit is contained in:
ShahanaFarooqui 2022-10-20 21:08:55 -07:00
parent 64034aa017
commit 815446587e
30 changed files with 633 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html
View File

@ -15,18 +15,18 @@
[ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date/Time </th>
<td mat-cell *matCellDef="let transaction">{{(transaction.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
<td mat-cell *matCellDef="let transaction">{{(transaction?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let transaction">
<span fxLayoutAlign="end center" *ngIf="transaction.amount > 0 || transaction.amount === 0">{{transaction.amount | number}}</span>
<span fxLayoutAlign="end center" class="red" *ngIf="transaction.amount < 0">({{transaction.amount * -1 | number}})</span>
<span fxLayoutAlign="end center" *ngIf="transaction?.amount > 0 || transaction?.amount === 0">{{transaction?.amount | number}}</span>
<span fxLayoutAlign="end center" class="red" *ngIf="transaction?.amount < 0">({{transaction?.amount * -1 | number}})</span>
</td>
</ng-container>
<ng-container matColumnDef="fees">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Fees (Sats) </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction.fees | number}}</span></td>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction?.fees | number}}</span></td>
</ng-container>
<ng-container matColumnDef="confirmations">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pr-2"> Confirmations </th>
@ -35,7 +35,23 @@
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let transaction">{{transaction.address}}</td>
<td mat-cell *matCellDef="let transaction">{{transaction?.address}}</td>
</ng-container>
<ng-container matColumnDef="blockHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Blockhash </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{transaction?.blockHash}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Id </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{transaction?.txid}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">

8
src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.scss
View File

@ -1,3 +1,11 @@
.mat-column-blockHash, .mat-column-txid {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

40
src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.ts
View File

@ -10,14 +10,15 @@ import { MatTableDataSource } from '@angular/material/table';
import { Transaction } from '../../../shared/models/eclModels';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { RTLState } from '../../../store/rtl.state';
import { openAlert } from '../../../store/rtl.actions';
import { fetchTransactions } from '../../store/ecl.actions';
import { transactions } from '../../store/ecl.selector';
import { eclPageSettings, transactions } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-on-chain-transaction-history',
@ -32,6 +33,8 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public PAGE_ID = 'on_chain';
public tableSetting: TableSetting = { tableId: 'transaction', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
public listTransactions: any;
public pageSize = PAGE_SIZE;
@ -42,24 +45,32 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
public selFilter = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['timestamp', 'amount', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['timestamp', 'amount', 'confirmations', 'fees', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'actions'];
} else {
this.displayedColumns = ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'actions'];
}
}
ngOnInit() {
this.store.dispatch(fetchTransactions());
this.store.select(transactions).pipe(takeUntil(this.unsub[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(transactions).pipe(takeUntil(this.unSubs[1])).
subscribe((transactionsSelector: { transactions: Transaction[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = transactionsSelector.apiCallStatus;
@ -102,6 +113,7 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
this.listTransactions = new MatTableDataSource<Transaction>([...transactions]);
this.listTransactions.sort = this.sort;
this.listTransactions.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.listTransactions.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.listTransactions.filterPredicate = (rowData: Transaction, fltr: string) => {
const newRowData = ((rowData.timestamp) ? this.datePipe.transform(new Date(rowData.timestamp * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
return newRowData.includes(fltr);
@ -118,7 +130,7 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
}
ngOnDestroy() {
this.unsub.forEach((completeSub) => {
this.unSubs.forEach((completeSub) => {
completeSub.next(<any>null);
completeSub.complete();
});

49
src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.html
View File

@ -8,20 +8,29 @@
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="announceChannel">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
<span class="ellipsis-child">{{channel?.state | titlecase}}</span>
</div>
</td>
<td mat-cell *matCellDef="let channel">{{channel?.state | titlecase}}</td>
</ng-container>
<ng-container matColumnDef="shortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Short Channel ID </th>
<td mat-cell *matCellDef="let channel">{{channel?.shortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
@ -30,6 +39,22 @@
</div>
</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="isFunder">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funder </th>
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="buried">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Buried </th>
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="toLocal">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
@ -40,6 +65,16 @@
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.toRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwLocal">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Fee/KW</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwLocal | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwRemote">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Fee/KW </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">

10
src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.scss
View File

@ -1,14 +1,10 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-state {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
.mat-column-announceChannel {
width: 2rem;
}
.mat-column-alias {
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {

48
src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.ts
View File

@ -8,7 +8,7 @@ import { MatTableDataSource } from '@angular/material/table';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { Channel, ChannelsStatus, GetInfo, LightningBalance, OnChainBalance, Peer } from '../../../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, AlertTypeEnum, APICallStatusEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, AlertTypeEnum, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
@ -18,7 +18,8 @@ import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPaylo
import { openAlert, openConfirmation } from '../../../../../store/rtl.actions';
import { RTLState } from '../../../../../store/rtl.state';
import { closeChannel } from '../../../../store/ecl.actions';
import { allChannelsInfo, eclNodeInformation, onchainBalance, peers } from '../../../../store/ecl.selector';
import { allChannelsInfo, eclNodeInformation, eclPageSettings, onchainBalance, peers } from '../../../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-channel-inactive-table',
@ -34,6 +35,8 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public inactiveChannels: Channel[];
public totalBalance = 0;
public displayedColumns: any[] = [];
@ -50,23 +53,32 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
public errorMessage = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'actions'];
} else {
this.displayedColumns = ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'balancedness', 'actions'];
}
}
ngOnInit() {
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).
subscribe((allChannelsSelector: ({ activeChannels: Channel[], pendingChannels: Channel[], inactiveChannels: Channel[], lightningBalance: LightningBalance, channelsStatus: ChannelsStatus, apiCallStatus: ApiCallStatusPayload })) => {
this.errorMessage = '';
this.apiCallStatus = allChannelsSelector.apiCallStatus;
@ -77,15 +89,15 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
this.loadChannelsTable();
this.logger.info(allChannelsSelector);
});
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[1])).
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[2])).
subscribe((nodeInfo: GetInfo) => {
this.information = nodeInfo;
});
this.store.select(peers).pipe(takeUntil(this.unSubs[2])).
this.store.select(peers).pipe(takeUntil(this.unSubs[3])).
subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
this.numPeers = (peersSelector.peers && peersSelector.peers.length) ? peersSelector.peers.length : 0;
});
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[3])).
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[4])).
subscribe((ocBalSelector: { onchainBalance: OnChainBalance, apiCallStatus: ApiCallStatusPayload }) => {
this.totalBalance = ocBalSelector.onchainBalance.total || 0;
});
@ -115,7 +127,7 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
}
}));
this.rtlEffects.closeConfirm.
pipe(takeUntil(this.unSubs[4])).
pipe(takeUntil(this.unSubs[5])).
subscribe((confirmRes) => {
if (confirmRes) {
this.store.dispatch(closeChannel({ payload: { channelId: channelToClose.channelId || '', force: forceClose } }));
@ -140,10 +152,10 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
}
loadChannelsTable() {
this.inactiveChannels.sort((a, b) => ((a.alias === b.alias) ? 0 : ((b.alias) ? 1 : -1)));
this.channels = new MatTableDataSource<Channel>([...this.inactiveChannels]);
this.channels.sort = this.sort;
this.channels.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.channels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.channels.filterPredicate = (channel: Channel, fltr: string) => JSON.stringify(channel).toLowerCase().includes(fltr);
this.channels.paginator = this.paginator;
this.applyFilter();

47
src/app/eclair/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html
View File

@ -8,13 +8,22 @@
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="announceChannel">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="!channel?.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="channel?.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
</td>
</ng-container>
<ng-container matColumnDef="shortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Short Channel ID </th>
<td mat-cell *matCellDef="let channel">{{channel?.shortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span *ngIf="!channel.announceChannel" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="channel.announceChannel" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
<span class="ellipsis-child">{{channel?.shortChannelId}}</span>
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
</ng-container>
@ -22,10 +31,26 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel.alias}}</span>
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="isFunder">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funder </th>
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="buried">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Buried </th>
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="feeBaseMsat">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Base Fee (mSats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
@ -46,13 +71,23 @@
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.toRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwLocal">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Fee/KW</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwLocal | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwRemote">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Fee/KW </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
</div>
<mat-progress-bar mode="determinate" value="{{channel.toLocal && channel.toLocal > 0 ? ((+channel.toLocal/((+channel.toLocal)+(+channel.toRemote)))*100) : 0}}"></mat-progress-bar>
<mat-progress-bar mode="determinate" value="{{channel?.toLocal && channel?.toLocal > 0 ? ((+channel?.toLocal/((+channel?.toLocal)+(+channel?.toRemote)))*100) : 0}}"></mat-progress-bar>
</td>
</ng-container>
<ng-container matColumnDef="actions">
@ -79,7 +114,7 @@
</ng-container>
<ng-container matColumnDef="no_peer">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No peers connected. Add a peer in order to open a channel.</p>
<p *ngIf="numPeers<1 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No peers connected. Add a peer in order to open a channel?.</p>
<p *ngIf="numPeers>0 && (!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No channel available.</p>
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED">Getting channels...</p>
<p *ngIf="(!channels?.data || channels?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR">{{errorMessage}}</p>

27
src/app/eclair/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.scss
View File

@ -1,6 +1,10 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-shortChannelId {
.mat-column-announceChannel {
width: 2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
@ -8,21 +12,6 @@
}
}
.mat-column-alias {
padding-left: 1rem;
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-balancedness {
padding-left: 2rem;
flex: 0 0 17%;
width: 17%;
}
.mat-column-state, .mat-column-feeBaseMsat, .mat-column-feeProportionalMillionths, .mat-column-toLocal, .mat-column-toRemote {
flex: 1 1 10%;
width: 10%;
@ -39,6 +28,12 @@
}
}
.mat-column-balancedness {
padding-left: 2rem;
flex: 0 0 17%;
width: 17%;
}
.mat-column-actions {
min-height: 4.8rem;
}

50
src/app/eclair/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.ts
View File

@ -9,7 +9,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Channel, ChannelsStatus, GetInfo, LightningBalance, OnChainBalance, Peer } from '../../../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, AlertTypeEnum, APICallStatusEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, AlertTypeEnum, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
@ -19,7 +19,8 @@ import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPaylo
import { openAlert, openConfirmation } from '../../../../../store/rtl.actions';
import { RTLState } from '../../../../../store/rtl.state';
import { closeChannel, updateChannel } from '../../../../store/ecl.actions';
import { allChannelsInfo, eclNodeInformation, onchainBalance, peers } from '../../../../store/ecl.selector';
import { allChannelsInfo, eclNodeInformation, eclPageSettings, onchainBalance, peers } from '../../../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-channel-open-table',
@ -35,6 +36,8 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public activeChannels: Channel[];
public totalBalance = 0;
public displayedColumns: any[] = [];
@ -51,24 +54,33 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
public errorMessage = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private commonService: CommonService, private router: Router) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['alias', 'toLocal', 'toRemote', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['shortChannelId', 'alias', 'toLocal', 'toRemote', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'actions'];
} else {
this.displayedColumns = ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'balancedness', 'actions'];
}
this.selFilter = this.router.getCurrentNavigation()?.extras?.state?.filter ? this.router.getCurrentNavigation()?.extras?.state?.filter : '';
}
ngOnInit() {
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).
subscribe((allChannelsSelector: ({ activeChannels: Channel[], pendingChannels: Channel[], inactiveChannels: Channel[], lightningBalance: LightningBalance, channelsStatus: ChannelsStatus, apiCallStatus: ApiCallStatusPayload })) => {
this.errorMessage = '';
this.apiCallStatus = allChannelsSelector.apiCallStatus;
@ -81,15 +93,15 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
}
this.logger.info(allChannelsSelector);
});
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[1])).
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[2])).
subscribe((nodeInfo: any) => {
this.information = nodeInfo;
});
this.store.select(peers).pipe(takeUntil(this.unSubs[2])).
this.store.select(peers).pipe(takeUntil(this.unSubs[3])).
subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
this.numPeers = (peersSelector.peers && peersSelector.peers.length) ? peersSelector.peers.length : 0;
});
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[3])).
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[4])).
subscribe((ocBalSelector: { onchainBalance: OnChainBalance, apiCallStatus: ApiCallStatusPayload }) => {
this.totalBalance = ocBalSelector.onchainBalance.total || 0;
});
@ -126,7 +138,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
}
}));
this.rtlEffects.closeConfirm.
pipe(takeUntil(this.unSubs[4])).
pipe(takeUntil(this.unSubs[5])).
subscribe((confirmRes) => {
if (confirmRes) {
const base_fee = confirmRes[0].inputValue;
@ -183,7 +195,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
}
}));
this.rtlEffects.closeConfirm.
pipe(takeUntil(this.unSubs[5])).
pipe(takeUntil(this.unSubs[6])).
subscribe((confirmRes) => {
if (confirmRes) {
this.store.dispatch(closeChannel({ payload: { channelId: channelToClose.channelId, force: forceClose } }));
@ -208,10 +220,10 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
}
loadChannelsTable() {
this.activeChannels.sort((a, b) => ((a.alias === b.alias) ? 0 : ((b.alias) ? 1 : -1)));
this.channels = new MatTableDataSource<Channel>([...this.activeChannels]);
this.channels.sort = this.sort;
this.channels.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.channels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.channels.filterPredicate = (channel: Channel, fltr: string) => JSON.stringify(channel).toLowerCase().includes(fltr);
this.channels.paginator = this.paginator;
this.applyFilter();

38
src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html
View File

@ -12,10 +12,38 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let channel"> {{channel?.state | titlecase}}</td>
</ng-container>
<ng-container matColumnDef="shortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Short Channel ID </th>
<td mat-cell *matCellDef="let channel">{{channel?.shortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">{{channel?.alias}}</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="isFunder">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funder </th>
<td mat-cell *matCellDef="let channel">{{channel?.isFunder ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="buried">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Buried </th>
<td mat-cell *matCellDef="let channel">{{channel?.buried ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="toLocal">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
@ -26,6 +54,16 @@
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.toRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwLocal">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Fee/KW</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwLocal | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="feeRatePerKwRemote">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Fee/KW </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.feeRatePerKwRemote | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">

8
src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.scss
View File

@ -1,3 +1,11 @@
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

43
src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.ts
View File

@ -8,7 +8,7 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Channel, ChannelsStatus, GetInfo, LightningBalance, OnChainBalance, Peer } from '../../../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, APICallStatusEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, FEE_RATE_TYPES, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPayload';
import { ECLChannelInformationComponent } from '../../channel-information-modal/channel-information.component';
import { LoggerService } from '../../../../../shared/services/logger.service';
@ -16,7 +16,8 @@ import { CommonService } from '../../../../../shared/services/common.service';
import { openAlert } from '../../../../../store/rtl.actions';
import { RTLState } from '../../../../../store/rtl.state';
import { allChannelsInfo, eclNodeInformation, onchainBalance, peers } from '../../../../store/ecl.selector';
import { allChannelsInfo, eclNodeInformation, eclPageSettings, onchainBalance, peers } from '../../../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
@Component({
@ -31,6 +32,8 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public pendingChannels: Channel[];
public totalBalance = 0;
public displayedColumns: any[] = [];
@ -51,19 +54,27 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['state', 'alias', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
} else {
this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
}
}
ngOnInit() {
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).
subscribe((allChannelsSelector: ({ activeChannels: Channel[], pendingChannels: Channel[], inactiveChannels: Channel[], lightningBalance: LightningBalance, channelsStatus: ChannelsStatus, apiCallStatus: ApiCallStatusPayload })) => {
this.errorMessage = '';
this.apiCallStatus = allChannelsSelector.apiCallStatus;
@ -74,15 +85,15 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
this.loadChannelsTable();
this.logger.info(allChannelsSelector);
});
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[1])).
this.store.select(eclNodeInformation).pipe(takeUntil(this.unSubs[2])).
subscribe((nodeInfo: GetInfo) => {
this.information = nodeInfo;
});
this.store.select(peers).pipe(takeUntil(this.unSubs[4])).
this.store.select(peers).pipe(takeUntil(this.unSubs[3])).
subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
this.numPeers = (peersSelector.peers && peersSelector.peers.length) ? peersSelector.peers.length : 0;
});
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[5])).
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[4])).
subscribe((oCBalanceSelector: { onchainBalance: OnChainBalance, apiCallStatus: ApiCallStatusPayload }) => {
this.totalBalance = oCBalanceSelector.onchainBalance.total || 0;
});
@ -111,10 +122,10 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
}
loadChannelsTable() {
this.pendingChannels.sort((a, b) => ((a.alias === b.alias) ? 0 : ((b.alias) ? 1 : -1)));
this.channels = new MatTableDataSource<Channel>([...this.pendingChannels]);
this.channels.sort = this.sort;
this.channels.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.channels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.channels.filterPredicate = (channel: Channel, fltr: string) => JSON.stringify(channel).toLowerCase().includes(fltr);
this.channels.paginator = this.paginator;
this.applyFilter();

41
src/app/eclair/peers-channels/peers/peers.component.html
View File

@ -17,36 +17,41 @@
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
{{peer?.nodeId}}
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<td mat-cell *matCellDef="let peer">
<span *ngIf="peer.state === 'CONNECTED'" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="peer.state === 'DISCONNECTED'" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="px-3"> Alias </th>
<td mat-cell *matCellDef="let peer" class="px-3" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span *ngIf="peer.state === 'CONNECTED'" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="peer.state === 'DISCONNECTED'" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
{{peer?.alias}}
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let peer"> {{peer?.state}} </td>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> ID </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{peer?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
<td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Network Address </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
{{peer?.address}}
</td>
</ng-container>
<ng-container matColumnDef="channels">
<th mat-header-cell class="px-2" *matHeaderCellDef mat-sort-header> Channels </th>
<td mat-cell class="px-2" *matCellDef="let peer"> {{peer?.channels}} </td>
<th mat-header-cell class="pl-1" *matHeaderCellDef mat-sort-header> Channels </th>
<td mat-cell class="pl-1" *matCellDef="let peer"> {{peer?.channels}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef class="px-1">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>
@ -54,7 +59,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="px-3">
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="px-1">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>

25
src/app/eclair/peers-channels/peers/peers.component.scss
View File

@ -1,22 +1,13 @@
.mat-column-alias {
flex: 1 1 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mat-column-state {
width: 2rem;
}
.mat-column-nodeId {
flex: 1 1 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2rem;
}
.mat-column-address {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mat-column-alias, .mat-column-nodeId, .mat-column-address {
flex: 0 0 20%;
width: 20%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {

46
src/app/eclair/peers-channels/peers/peers.component.ts
View File

@ -10,7 +10,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Peer, GetInfo, OnChainBalance } from '../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, ScreenSizeEnum, APICallStatusEnum, ECLActions } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, ScreenSizeEnum, APICallStatusEnum, ECLActions, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@ -21,7 +21,8 @@ import { RTLEffects } from '../../../store/rtl.effects';
import { RTLState } from '../../../store/rtl.state';
import { openAlert, openConfirmation } from '../../../store/rtl.actions';
import { disconnectPeer } from '../../store/ecl.actions';
import { eclNodeInformation, onchainBalance, peers } from '../../store/ecl.selector';
import { eclNodeInformation, eclPageSettings, onchainBalance, peers } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-peers',
@ -35,6 +36,8 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public faUsers = faUsers;
public newlyAddedPeer = '';
public displayedColumns: any[] = [];
@ -51,19 +54,10 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
public selFilter = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private actions: Actions, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['alias', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['alias', 'nodeId', 'address', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['alias', 'nodeId', 'address', 'channels', 'actions'];
} else {
this.displayedColumns = ['alias', 'nodeId', 'address', 'channels', 'actions'];
}
}
ngOnInit() {
@ -71,7 +65,26 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
subscribe((nodeInfo: any) => {
this.information = nodeInfo;
});
this.store.select(peers).pipe(takeUntil(this.unSubs[1])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[1])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.unshift('state');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(peers).pipe(takeUntil(this.unSubs[2])).
subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = peersSelector.apiCallStatus;
@ -82,11 +95,11 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.loadPeersTable(this.peersData);
this.logger.info(peersSelector);
});
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[2])).
this.store.select(onchainBalance).pipe(takeUntil(this.unSubs[3])).
subscribe((oCBalanceSelector: { onchainBalance: OnChainBalance, apiCallStatus: ApiCallStatusPayload }) => {
this.availableBalance = oCBalanceSelector.onchainBalance.total || 0;
});
this.actions.pipe(takeUntil(this.unSubs[3]), filter((action) => action.type === ECLActions.SET_PEERS_ECL)).
this.actions.pipe(takeUntil(this.unSubs[4]), filter((action) => action.type === ECLActions.SET_PEERS_ECL)).
subscribe((setPeers: any) => {
this.peerAddress = null;
});
@ -177,7 +190,7 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
}));
}
this.rtlEffects.closeConfirm.
pipe(takeUntil(this.unSubs[4])).
pipe(takeUntil(this.unSubs[5])).
subscribe((confirmRes) => {
if (confirmRes) {
this.store.dispatch(disconnectPeer({ payload: { nodeId: (peerToDetach.nodeId || '') } }));
@ -193,6 +206,7 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.peers = (peers) ? new MatTableDataSource<Peer>([...peers]) : new MatTableDataSource([]);
this.peers.sort = this.sort;
this.peers.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.peers.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.peers.filterPredicate = (peer: Peer, fltr: string) => JSON.stringify(peer).toLowerCase().includes(fltr);
this.peers.paginator = this.paginator;
this.applyFilter();

2
src/app/eclair/reports/routing/routing-report.component.html
View File

@ -37,7 +37,7 @@
</ngx-charts-bar-vertical>
</div>
<div class="mt-1">
<rtl-ecl-forwarding-history *ngIf="filteredEventsBySelectedPeriod.length > 0" [eventsData]="filteredEventsBySelectedPeriod" [filterValue]="eventFilterValue"></rtl-ecl-forwarding-history>
<rtl-ecl-forwarding-history *ngIf="filteredEventsBySelectedPeriod.length > 0" [pageId]="'reports'" [tableId]="'routing'"[eventsData]="filteredEventsBySelectedPeriod" [filterValue]="eventFilterValue"></rtl-ecl-forwarding-history>
</div>
</div>
</div>

2
src/app/eclair/reports/transactions/transactions-report.component.html
View File

@ -35,7 +35,7 @@
</ngx-charts-bar-vertical-2d>
</div>
<div class="mt-1">
<rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [filterValue]="transactionFilterValue"></rtl-transactions-report-table>
<rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [filterValue]="transactionFilterValue"></rtl-transactions-report-table>
</div>
</div>
</div>

34
src/app/eclair/reports/transactions/transactions-report.component.ts
View File

@ -5,13 +5,14 @@ import { Store } from '@ngrx/store';
import { PaymentSent, Invoice, Payments } from '../../../shared/models/eclModels';
import { CommonService } from '../../../shared/services/common.service';
import { MONTHS, ScreenSizeEnum, SCROLL_RANGES } from '../../../shared/services/consts-enums-functions';
import { APICallStatusEnum, ECL_DEFAULT_PAGE_SETTINGS, MONTHS, PAGE_SIZE, ScreenSizeEnum, SCROLL_RANGES, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
import { fadeIn } from '../../../shared/animation/opacity-animation';
import { RTLState } from '../../../store/rtl.state';
import { invoices, payments } from '../../store/ecl.selector';
import { eclPageSettings, invoices, payments } from '../../store/ecl.selector';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
import { LoggerService } from '../../../shared/services/logger.service';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-transactions-report',
@ -26,6 +27,9 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
public secondsInADay = 24 * 60 * 60;
public payments: PaymentSent[] = [];
public invoices: Invoice[] = [];
public PAGE_ID = 'reports';
public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
public transactionsReportSummary = { paymentsSelectedPeriod: 0, invoicesSelectedPeriod: 0, amountPaidSelectedPeriod: 0, amountReceivedSelectedPeriod: 0 };
public transactionFilterValue = '';
public today = new Date(Date.now());
@ -41,14 +45,34 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
public showYAxisLabel = true;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) { }
ngOnInit() {
this.screenSize = this.commonService.getScreenSize();
this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM);
this.store.select(payments).pipe(takeUntil(this.unSubs[0]),
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
if (settings.apiCallStatus.status === APICallStatusEnum.ERROR) {
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['date', 'amount_paid', 'amount_received'];
} else {
this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
}
} else {
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
}
this.displayedColumns.push('actions');
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1]),
withLatestFrom(this.store.select(invoices))).
subscribe(([paymentsSelector, invoicesSelector]: [({ payments: Payments, apiCallStatus: ApiCallStatusPayload }), ({ invoices: Invoice[], apiCallStatus: ApiCallStatusPayload })]) => {
this.payments = paymentsSelector.payments.sent ? paymentsSelector.payments.sent : [];
@ -58,7 +82,7 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
this.transactionsNonZeroReportData = this.prepareTableData();
}
});
this.commonService.containerSizeUpdated.pipe(takeUntil(this.unSubs[1])).subscribe((CONTAINER_SIZE) => {
this.commonService.containerSizeUpdated.pipe(takeUntil(this.unSubs[2])).subscribe((CONTAINER_SIZE) => {
switch (this.screenSize) {
case ScreenSizeEnum.MD:
this.screenPaddingX = CONTAINER_SIZE.width / 10;

36
src/app/eclair/routing/forwarding-history/forwarding-history.component.html
View File

@ -16,28 +16,48 @@
{{fhEvent?.timestamp | date:'dd/MMM/y HH:mm'}}
</td>
</ng-container>
<ng-container matColumnDef="fromChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel Id</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.fromChannelId}}</td>
</ng-container>
<ng-container matColumnDef="fromShortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">In Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.fromShortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="fromChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.fromChannelAlias}}</td>
</ng-container>
<ng-container matColumnDef="toChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel Id</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.toChannelId}}</td>
</ng-container>
<ng-container matColumnDef="toShortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Out Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.toShortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="toChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.toChannelAlias}}</td>
</ng-container>
<ng-container matColumnDef="amountIn">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount In (Sats)</th>
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.amountIn | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">Amount In (Sats)</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1"><span fxLayoutAlign="end center">{{fhEvent?.amountIn | number}}</span></td>
</ng-container>
<ng-container matColumnDef="amountOut">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount Out (Sats)</th>
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.amountOut | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">Amount Out (Sats)</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1"><span fxLayoutAlign="end center">{{fhEvent?.amountOut | number}}</span></td>
</ng-container>
<ng-container matColumnDef="fee">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee Earned (Sats)</th>
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">Fee Earned (Sats)</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1"><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
</ng-container>
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.paymentHash}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>
@ -45,7 +65,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" class="pl-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
</td>
</ng-container>

15
src/app/eclair/routing/forwarding-history/forwarding-history.component.scss
View File

@ -1,16 +1,7 @@
.mat-column-fromAlias {
padding-left: 2rem;
flex: 1 1 20%;
width: 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-toAlias {
.mat-column-fromChannelId, .mat-column-fromAlias, .mat-column-toChannelId, .mat-column-toAlias, .mat-column-paymentHash {
padding-left: 1rem;
flex: 1 1 20%;
width: 20%;
flex: 1 1 15%;
width: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

38
src/app/eclair/routing/forwarding-history/forwarding-history.component.ts
View File

@ -8,14 +8,15 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { PaymentRelayed, Payments } from '../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { RTLState } from '../../../store/rtl.state';
import { openAlert } from '../../../store/rtl.actions';
import { payments } from '../../store/ecl.selector';
import { eclPageSettings, payments } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-forwarding-history',
@ -29,8 +30,11 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
@Input() pageId = 'routing';
@Input() tableId = 'forwarding_history';
@Input() eventsData: PaymentRelayed[] = [];
@Input() filterValue = '';
public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
public forwardingHistoryEvents: any;
public pageSize = PAGE_SIZE;
@ -44,19 +48,28 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['timestamp', 'amountIn', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['timestamp', 'amountIn', 'fee', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['timestamp', 'amountIn', 'amountOut', 'fee', 'actions'];
} else {
this.displayedColumns = ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee', 'actions'];
}
}
ngOnInit() {
this.store.select(payments).pipe(takeUntil(this.unSubs[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting.tableId = this.tableId;
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.pageId)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.pageId)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1])).
subscribe((paymentsSelector: { payments: Payments, apiCallStatus: ApiCallStatusPayload }) => {
if (this.eventsData.length === 0) {
this.errorMessage = '';
@ -132,6 +145,7 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
return (data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null;
}
};
this.forwardingHistoryEvents.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.forwardingHistoryEvents.filterPredicate = (rowData: PaymentRelayed, fltr: string) => {
const newRowData = ((rowData.timestamp) ? this.datePipe.transform(new Date(rowData.timestamp), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
return newRowData.includes(fltr);

37
src/app/eclair/routing/routing-peers/routing-peers.component.ts
View File

@ -7,13 +7,14 @@ import { MatSort } from '@angular/material/sort';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { PaymentRelayed, Payments, RoutingPeers } from '../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { RTLState } from '../../../store/rtl.state';
import { payments } from '../../store/ecl.selector';
import { eclPageSettings, payments } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-routing-peers',
@ -29,6 +30,8 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
@ViewChild('tableOut', { read: MatSort, static: false }) sortOut: MatSort;
@ViewChild('paginatorIn', { static: false }) paginatorIn: MatPaginator | undefined;
@ViewChild('paginatorOut', { static: false }) paginatorOut: MatPaginator | undefined;
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'totalFee', sortOrder: SortOrderEnum.DESCENDING };
public routingPeersData: PaymentRelayed[] = [];
public displayedColumns: any[] = [];
public RoutingPeersIncoming: any;
@ -46,20 +49,26 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['alias', 'totalFee'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['alias', 'events', 'totalFee'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['alias', 'events', 'totalAmount', 'totalFee'];
} else {
this.displayedColumns = ['channelId', 'alias', 'events', 'totalAmount', 'totalFee'];
}
}
ngOnInit() {
this.store.select(payments).
pipe(takeUntil(this.unSubs[0])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1])).
subscribe((paymentsSelector: { payments: Payments, apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = paymentsSelector.apiCallStatus;
@ -85,11 +94,13 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
const results = this.groupRoutingPeers(forwardingEvents);
this.RoutingPeersIncoming = new MatTableDataSource<RoutingPeers>(results[0]);
this.RoutingPeersIncoming.sort = this.sortIn;
this.RoutingPeersIncoming.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.RoutingPeersIncoming.filterPredicate = (rpIn: RoutingPeers, fltr: string) => JSON.stringify(rpIn).toLowerCase().includes(fltr);
this.RoutingPeersIncoming.paginator = this.paginatorIn;
this.logger.info(this.RoutingPeersIncoming);
this.RoutingPeersOutgoing = new MatTableDataSource<RoutingPeers>(results[1]);
this.RoutingPeersOutgoing.sort = this.sortOut;
this.RoutingPeersOutgoing.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.RoutingPeersOutgoing.filterPredicate = (rpOut: RoutingPeers, fltr: string) => JSON.stringify(rpOut).toLowerCase().includes(fltr);
this.RoutingPeersOutgoing.paginator = this.paginatorOut;
this.logger.info(this.RoutingPeersOutgoing);

63
src/app/eclair/transactions/invoices/lightning-invoices.component.html
View File

@ -30,41 +30,64 @@
<div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.status === 'received'" class="dot green" matTooltip="Received" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!invoice.status || invoice.status === 'expired' || invoice.status === 'unknown'" class="dot red" matTooltip="Expired/Unknown" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
{{(invoice.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}
<span *ngIf="invoice?.status === 'received'" class="dot green" matTooltip="Received" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!invoice?.status || invoice?.status === 'expired' || invoice?.status === 'unknown'" class="dot red" matTooltip="Expired/Unknown" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
</td>
</ng-container>
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Created </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{(invoice?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="expiresAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Expiry </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{((invoice?.expiresAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
</ng-container>
<ng-container matColumnDef="receivedAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Settled </th>
<td mat-cell *matCellDef="let invoice">{{((invoice.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Settled </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{((invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Node Id </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '32rem'}">
<span class="ellipsis-child">{{invoice.description}}</span>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Description </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.description}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Payment Hash </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.paymentHash}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pr-3"> Amount (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pr-3">
<span fxLayoutAlign="end center"> {{invoice.amount ? (invoice.amount | number:'1.0-0') : '-'}}</span>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<span fxLayoutAlign="end center"> {{invoice?.amount ? (invoice?.amount | number:'1.0-0') : '-'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="amountSettled">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pr-3"> Amount Settled (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pr-3">
<span fxLayoutAlign="end center"> {{invoice.amountSettled ? (invoice.amountSettled | number:'1.0-0') : '-'}}</span>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="p1-3"> Amount Settled (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<span fxLayoutAlign="end center"> {{invoice?.amountSettled ? (invoice?.amountSettled | number:'1.0-0') : '-'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef class="pl-1 pr-3">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>
@ -72,7 +95,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let invoice" [ngClass]="{'px-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let invoice" [ngClass]="{'pl-1 pr-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

6
src/app/eclair/transactions/invoices/lightning-invoices.component.scss
View File

@ -1,4 +1,8 @@
.mat-column-description {
.mat-column-status {
width: 2rem;
}
.mat-column-nodeId, .mat-column-paymentHash, .mat-column-description {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {

43
src/app/eclair/transactions/invoices/lightning-invoices.component.ts
View File

@ -9,7 +9,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, ECLActions } from '../../../shared/services/consts-enums-functions';
import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, ECLActions, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { SelNodeChild } from '../../../shared/models/RTLconfig';
import { GetInfo, Invoice } from '../../../shared/models/eclModels';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@ -22,7 +22,8 @@ import { ECLInvoiceInformationComponent } from '../invoice-information-modal/inv
import { RTLState } from '../../../store/rtl.state';
import { openAlert } from '../../../store/rtl.actions';
import { createInvoice, invoiceLookup } from '../../store/ecl.actions';
import { eclNodeInformation, eclNodeSettings, invoices } from '../../store/ecl.selector';
import { eclNodeInformation, eclNodeSettings, eclPageSettings, invoices } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-lightning-invoices',
@ -38,6 +39,8 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'expiresAt', sortOrder: SortOrderEnum.DESCENDING };
public selNode: SelNodeChild | null = {};
public newlyAddedInvoiceMemo: string | null = '';
public newlyAddedInvoiceValue: number | null = 0;
@ -58,19 +61,10 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
public errorMessage = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<RTLState>, private decimalPipe: DecimalPipe, private commonService: CommonService, private datePipe: DatePipe, private actions: Actions) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['timestamp', 'amount', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['timestamp', 'amount', 'amountSettled', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['timestamp', 'amount', 'amountSettled', 'actions'];
} else {
this.displayedColumns = ['timestamp', 'receivedAt', 'description', 'amount', 'amountSettled', 'actions'];
}
}
ngOnInit() {
@ -82,7 +76,25 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
subscribe((nodeInfo: any) => {
this.information = <GetInfo>nodeInfo;
});
this.store.select(invoices).pipe(takeUntil(this.unSubs[2])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[2])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(invoices).pipe(takeUntil(this.unSubs[3])).
subscribe((invoicesSelector: { invoices: Invoice[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = invoicesSelector.apiCallStatus;
@ -95,7 +107,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
}
this.logger.info(invoicesSelector);
});
this.actions.pipe(takeUntil(this.unSubs[3]), filter((action) => (action.type === ECLActions.SET_LOOKUP_ECL || action.type === ECLActions.UPDATE_API_CALL_STATUS_ECL))).
this.actions.pipe(takeUntil(this.unSubs[4]), filter((action) => (action.type === ECLActions.SET_LOOKUP_ECL || action.type === ECLActions.UPDATE_API_CALL_STATUS_ECL))).
subscribe((resLookup: any) => {
if (resLookup.type === ECLActions.SET_LOOKUP_ECL) {
if (this.invoiceJSONArr.length > 0 && this.sort && this.paginator && resLookup.payload) {
@ -164,6 +176,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
this.invoices = invs ? new MatTableDataSource<Invoice>([...invs]) : new MatTableDataSource<Invoice>([]);
this.invoices.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.invoices.sort = this.sort;
this.invoices.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.invoices.filterPredicate = (rowData: Invoice, fltr: string) => {
const newRowData = ((rowData.timestamp) ? this.datePipe.transform(new Date(rowData.timestamp * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
return newRowData.includes(fltr);
@ -187,7 +200,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
if (this.selNode && this.selNode.fiatConversion && this.invoiceValue && this.invoiceValue > 99) {
this.invoiceValueHint = '';
this.commonService.convertCurrency(this.invoiceValue, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.currencyUnits && this.selNode.currencyUnits.length > 2 ? this.selNode.currencyUnits[2] : ''), this.selNode.fiatConversion).
pipe(takeUntil(this.unSubs[4])).
pipe(takeUntil(this.unSubs[5])).
subscribe({
next: (data) => {
this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;

62
src/app/eclair/transactions/payments/lightning-payments.component.html
View File

@ -34,16 +34,24 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span class="ellipsis-child">{{payment.id}}</span>
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="recipientNodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Destination Node Id</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.recipientNodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="recipientNodeAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Destination</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span class="ellipsis-child">{{payment.recipientNodeAlias}}</span>
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.recipientNodeAlias}}</span>
</div>
</td>
</ng-container>
@ -51,6 +59,30 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{(payment?.recipientAmount) | number}}</span></td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Description</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.description}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.paymentHash}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentPreimage">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Preimage</th>
<td mat-cell *matCellDef="let payment">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.paymentPreimage}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
@ -78,7 +110,7 @@
<span fxLayoutAlign="start center" class="part-row-span">
Total Attempts: {{payment?.parts?.length}}
</span>
<ng-container *ngIf="payment.is_expanded">
<ng-container *ngIf="payment?.is_expanded">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="start center" class="part-row-span pl-3">
{{part.timestamp | date:'dd/MMM/y HH:mm'}}
</span>
@ -87,12 +119,12 @@
</ng-container>
<ng-container matColumnDef="groupId">
<td mat-cell *matCellDef="let payment">
<div fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span class="ellipsis-child">{{payment.id}}</span>
<div fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.id}}</span>
</div>
<span *ngIf="payment.is_expanded">
<span *ngIf="payment?.is_expanded">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="start center" class="part-row-span">
<span fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{part.id}}</span>
</span>
</span>
@ -101,12 +133,12 @@
</ng-container>
<ng-container matColumnDef="groupChannelAlias">
<td mat-cell *matCellDef="let payment">
<div fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{payment?.recipientNodeAlias}}</span>
</div>
<span *ngIf="payment.is_expanded">
<span *ngIf="payment?.is_expanded">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="start center" class="part-row-span">
<span fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span fxLayoutAlign="start center" class="ellipsis-parent part-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{part.toChannelAlias}}</span>
</span>
</span>
@ -116,7 +148,7 @@
<ng-container matColumnDef="groupAmount">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end center" class="part-row-span">{{payment?.recipientAmount | number:'1.0-0'}}</span>
<span *ngIf="payment.is_expanded">
<span *ngIf="payment?.is_expanded">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="end center" class="part-row-span">
{{part.amount | number:'1.0-0'}}
</span>
@ -126,9 +158,9 @@
<ng-container matColumnDef="groupActions">
<td mat-cell *matCellDef="let payment" class="px-3">
<span fxLayoutAlign="end start">
<button mat-flat-button class="btn-part-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
<button mat-flat-button class="btn-part-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment?.is_expanded ? 'Hide' : 'Show'}}</button>
</span>
<div *ngIf="payment.is_expanded">
<div *ngIf="payment?.is_expanded">
<div *ngFor="let part of payment?.parts; index as i" fxLayoutAlign="end start">
<button mat-stroked-button class="btn-part-info" color="primary" type="button" tabindex="6" (click)="onPartClick(part, payment)">View {{i + 1}}</button>
</div>

7
src/app/eclair/transactions/payments/lightning-payments.component.scss
View File

@ -1,8 +1,9 @@
.mat-column-id, .mat-column-recipientNodeAlias,
.mat-column-recipientNodeId, .mat-column-description,
.mat-column-paymentHash, .mat-column-paymentPreimage,
.mat-column-groupId, .mat-column-groupChannelAlias {
padding: 0 1rem;
flex: 0 0 25%;
width: 25%;
flex: 1 1 12%;
width: 12%;
& .ellipsis-parent {
display: flex;
}

55
src/app/eclair/transactions/payments/lightning-payments.component.ts
View File

@ -9,7 +9,7 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { GetInfo, PayRequest, PaymentSent, PaymentSentPart, Payments } from '../../../shared/models/eclModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, SortOrderEnum, ECL_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
@ -23,7 +23,8 @@ import { RTLEffects } from '../../../store/rtl.effects';
import { RTLState } from '../../../store/rtl.state';
import { openAlert, openConfirmation } from '../../../store/rtl.actions';
import { sendPayment } from '../../store/ecl.actions';
import { eclNodeInformation, eclNodeSettings, payments } from '../../store/ecl.selector';
import { eclNodeInformation, eclNodeSettings, eclPageSettings, payments } from '../../store/ecl.selector';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-ecl-lightning-payments',
@ -39,6 +40,8 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
@ViewChild('sendPaymentForm', { static: false }) form;
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'firstPartTimestamp', sortOrder: SortOrderEnum.DESCENDING };
public faHistory = faHistory;
public newlyAddedPayment = '';
public selNode: SelNodeChild | null = {};
@ -58,23 +61,19 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
public selFilter = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe, private dataService: DataService, private datePipe: DatePipe) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['firstPartTimestamp', 'actions'];
this.partColumns = ['groupTotal', 'groupActions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['firstPartTimestamp', 'recipientAmount', 'actions'];
this.partColumns = ['groupTotal', 'groupAmount', 'groupActions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['firstPartTimestamp', 'id', 'recipientAmount', 'actions'];
this.partColumns = ['groupTotal', 'groupId', 'groupAmount', 'groupActions'];
} else {
this.displayedColumns = ['firstPartTimestamp', 'id', 'recipientNodeAlias', 'recipientAmount', 'actions'];
this.partColumns = ['groupTotal', 'groupId', 'groupChannelAlias', 'groupAmount', 'groupActions'];
}
// if (this.screenSize === ScreenSizeEnum.XS) {
// this.partColumns = ['groupTotal', 'groupActions'];
// } else if (this.screenSize === ScreenSizeEnum.SM) {
// this.partColumns = ['groupTotal', 'groupAmount', 'groupActions'];
// } else if (this.screenSize === ScreenSizeEnum.MD) {
// this.partColumns = ['groupTotal', 'groupId', 'groupAmount', 'groupActions'];
// } else {
// this.partColumns = ['groupTotal', 'groupId', 'groupChannelAlias', 'groupAmount', 'groupActions'];
// }
}
ngOnInit() {
@ -86,7 +85,24 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
subscribe((nodeInfo: GetInfo) => {
this.information = nodeInfo;
});
this.store.select(payments).pipe(takeUntil(this.unSubs[2])).
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[2])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = settings.apiCallStatus;
if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
this.errorMessage = this.apiCallStatus.message || '';
}
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[3])).
subscribe((paymentsSeletor: { payments: Payments, apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = paymentsSeletor.apiCallStatus;
@ -152,6 +168,7 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
return (data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null;
}
};
this.payments.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
this.payments.filterPredicate = (rowData: PaymentSent, fltr: string) => {
const newRowData = ((rowData.firstPartTimestamp) ? this.datePipe.transform(new Date(rowData.firstPartTimestamp), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
return newRowData.includes(fltr);
@ -261,7 +278,7 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
if (this.paymentDecoded.amount) {
if (this.selNode && this.selNode.fiatConversion) {
this.commonService.convertCurrency(+this.paymentDecoded.amount, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.currencyUnits && this.selNode.currencyUnits.length > 2 ? this.selNode.currencyUnits[2] : ''), this.selNode.fiatConversion).
pipe(takeUntil(this.unSubs[3])).
pipe(takeUntil(this.unSubs[4])).
subscribe({
next: (data) => {
this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.amount ? this.paymentDecoded.amount : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
@ -385,7 +402,7 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
return paymentReqs;
}, '');
this.dataService.decodePayments(paymentRequests).
pipe(takeUntil(this.unSubs[4])).
pipe(takeUntil(this.unSubs[5])).
subscribe((decodedPayments: any[][]) => {
decodedPayments.forEach((decodedPayment, idx) => {
if (decodedPayment.length > 0 && decodedPayment[0].paymentRequest && decodedPayment[0].paymentRequest.description && decodedPayment[0].paymentRequest.description !== '') {

6
src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.ts
View File

@ -42,7 +42,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
public selFilter = '';
public apiCallStatus: ApiCallStatusPayload | null = null;
public apiCallStatusEnum = APICallStatusEnum;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
@ -56,7 +56,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
}
ngOnInit() {
this.store.select(closedChannels).pipe(takeUntil(this.unsub[0])).
this.store.select(closedChannels).pipe(takeUntil(this.unSubs[0])).
subscribe((closedChannelsSelector: { closedChannels: ClosedChannel[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = closedChannelsSelector.apiCallStatus;
@ -122,7 +122,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
}
ngOnDestroy() {
this.unsub.forEach((completeSub) => {
this.unSubs.forEach((completeSub) => {
completeSub.next(<any>null);
completeSub.complete();
});

16
src/app/shared/services/consts-enums-functions.ts
View File

@ -889,11 +889,11 @@ export const ECL_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
{ tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['alias', 'toLocal', 'toRemote'],
columnSelection: ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'balancedness'] },
{ tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
{ tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'alias', 'toLocal'],
columnSelection: ['state', 'alias', 'toLocal', 'toRemote'] },
{ tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'alias', 'toLocal', 'toRemote'],
{ tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'alias', 'toLocal'],
columnSelection: ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'balancedness'] },
{ tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.ASCENDING,
columnSelectionSM: ['alias', 'nodeId'],
@ -935,7 +935,7 @@ export const ECL_TABLES_DEF = {
peers_channels: {
open_channels: {
maxColumns: 8,
allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
allowedColumns: ['shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
},
pending_channels: {
maxColumns: 8,
@ -962,8 +962,8 @@ export const ECL_TABLES_DEF = {
},
routing: {
forwarding_history: {
maxColumns: 8,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
maxColumns: 7,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'fee', 'paymentHash']
},
routing_peers: {
maxColumns: 5,
@ -972,8 +972,8 @@ export const ECL_TABLES_DEF = {
},
reports: {
routing: {
maxColumns: 8,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
maxColumns: 7,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'fee', 'paymentHash']
},
transactions: {
maxColumns: 5,