Archives/RTL
2
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL synced 2024-11-15 18:13:00 +00:00
Code Issues Releases Wiki Activity

peerswap peers filter

Browse Source
This commit is contained in:
ShahanaFarooqui 2023-08-22 17:07:35 -07:00
parent 882ce7f1a7
commit 4f348c7f24
4 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/shared/components/ln-services/peerswap/swap-peers/swap-peers.component.html
View File

@ -6,9 +6,18 @@
</div>
<div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch" class="page-sub-title-container">
<div fxFlex="70"></div>
<mat-form-field fxFlex="30">
<input matInput placeholder="Filter" [(ngModel)]="selFilter" (keyup)="applyFilter()">
</mat-form-field>
<div fxFlex.gt-xs="30" fxLayoutAlign.gt-xs="space-between center" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter By</mat-label>
<mat-select tabindex="1" name="filterBy" [(ngModel)]="selFilterBy" (selectionChange)="selFilter=''; applyFilter()">
<perfect-scrollbar><mat-option *ngFor="let column of ['all'].concat(displayedColumns.slice(0, -1))" [value]="column">{{getLabel(column)}}</mat-option></perfect-scrollbar>
</mat-select>
</mat-form-field>
<mat-form-field fxLayout="column" fxFlex="49">
<mat-label>Filter</mat-label>
<input matInput name="filter" [(ngModel)]="selFilter" (input)="applyFilter()" (keyup)="applyFilter()">
</mat-form-field>
</div>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container" [perfectScrollbar]>
@ -20,7 +29,11 @@
</ng-container>
<ng-container matColumnDef="alias">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Node Alias</th>
<td *matCellDef="let sPeer" mat-cell>{{sPeer?.alias}}</td>
<td *matCellDef="let sPeer" mat-cell>
<div class="ellipsis-parent" [ngStyle]="{'width': (screenSize === screenSizeEnum.XS) ? '6rem' : colWidth}">
<span class="ellipsis-child">{{sPeer?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="swaps_allowed">
<th *matHeaderCellDef mat-header-cell mat-sort-header>Swaps Allowed</th>
@ -72,7 +85,7 @@
<tr *matFooterRowDef="['no_swap_peer']" mat-footer-row
[ngClass]="{'display-none': swapPeers?.data && swapPeers?.data?.length && swapPeers?.data?.length>0}">
</tr>
<tr *matHeaderRowDef="displayedColumns; sticky: flgSticky;" mat-header-row></tr>
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>
</table>
</div>

87
src/app/shared/components/ln-services/peerswap/swap-peers/swap-peers.component.ts
View File

@ -8,7 +8,7 @@ import { MatTableDataSource } from '@angular/material/table';
import { faPeopleGroup } from '@fortawesome/free-solid-svg-icons';
import { SwapPeerChannelsFlattened } from '../../../../models/peerswapModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, DataTypeEnum, AlertTypeEnum } from '../../../../services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, DataTypeEnum, AlertTypeEnum, CLN_PAGE_DEFS, SortOrderEnum, CLN_DEFAULT_PAGE_SETTINGS } from '../../../../services/consts-enums-functions';
import { ApiCallStatusPayload } from '../../../../models/apiCallsPayload';
import { LoggerService } from '../../../../services/logger.service';
import { CommonService } from '../../../../services/common.service';
@ -16,10 +16,12 @@ import { CommonService } from '../../../../services/common.service';
import { RTLState } from '../../../../../store/rtl.state';
import { openAlert } from '../../../../../store/rtl.actions';
import { fetchSwapPeers } from '../../../../../cln/store/cln.actions';
import { swapPeers } from '../../../../../cln/store/cln.selector';
import { clnPageSettings, swapPeers } from '../../../../../cln/store/cln.selector';
import { PSSwapOutModalComponent } from '../swap-out-modal/swap-out-modal.component';
import { PSSwapInModalComponent } from '../swap-in-modal/swap-in-modal.component';
import { MAT_SELECT_CONFIG } from '@angular/material/select';
import { ColumnDefinition, PageSettings, TableSetting } from 'src/app/shared/models/pageSettings';
import { CamelCaseWithReplacePipe } from 'src/app/shared/pipes/app.pipe';
@Component({
selector: 'rtl-peerswap-peers',
@ -35,11 +37,15 @@ export class PSPeersComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faPeopleGroup = faPeopleGroup;
public nodePageDefs = CLN_PAGE_DEFS;
public selFilterBy = 'all';
public colWidth = '20rem';
public PAGE_ID = 'peerswap';
public tableSetting: TableSetting = { tableId: 'pspeers', recordsPerPage: PAGE_SIZE, sortBy: 'swaps_allowed', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
public totalSwapPeers = 0;
public peersData: SwapPeerChannelsFlattened[] = [];
public swapPeers: any;
public flgSticky = false;
public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
@ -50,25 +56,31 @@ export class PSPeersComponent implements OnInit, OnDestroy {
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private camelCaseWithReplace: CamelCaseWithReplacePipe) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = ['alias', 'short_channel_id', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = ['short_channel_id', 'alias', 'swaps_allowed', 'local_balance', 'remote_balance', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['short_channel_id', 'alias', 'swaps_allowed', 'local_balance', 'remote_balance', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['short_channel_id', 'alias', 'swaps_allowed', 'local_balance', 'remote_balance', 'actions'];
}
}
ngOnInit() {
this.store.dispatch(fetchSwapPeers());
this.store.select(clnPageSettings).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) || CLN_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.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 14) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(swapPeers).pipe(takeUntil(this.unSubs[1])).
subscribe((spSeletor: { totalSwapPeers: number, swapPeers: SwapPeerChannelsFlattened[], apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
@ -91,11 +103,11 @@ export class PSPeersComponent implements OnInit, OnDestroy {
onSwapPeerClick(selSPeer: SwapPeerChannelsFlattened) {
const reorderedSPeer = [
[{ key: 'nodeid', value: selSPeer.nodeid, title: 'Node Id', width: 100, type: DataTypeEnum.STRING }],
[{ key: 'alias', value: selSPeer.alias, title: 'Alias', width: 50, type: DataTypeEnum.STRING },
[{ key: 'alias', value: (selSPeer.alias === selSPeer.nodeid ? selSPeer.alias.substring(0, 17) + '...' : selSPeer.alias), title: 'Alias', width: 50, type: DataTypeEnum.STRING },
{ key: 'short_channel_id', value: selSPeer.short_channel_id, title: 'Short Channel ID', width: 50, type: DataTypeEnum.STRING }],
[{ key: 'local_balance', value: selSPeer.local_balance, title: 'Local Balance (Sats)', width: 50, type: DataTypeEnum.NUMBER },
{ key: 'remote_balance', value: selSPeer.remote_balance, title: 'Remote Balance (Sats)', width: 50, type: DataTypeEnum.NUMBER }],
[{ key: 'total_fee_paid', value: selSPeer.total_fee_paid, title: 'Total Fee Paid (Sats)', width: 40, type: DataTypeEnum.NUMBER },
[{ key: 'total_fee_paid', value: selSPeer.total_fee_paid || 0, title: 'Total Fee Paid (Sats)', width: 40, type: DataTypeEnum.NUMBER },
{ key: 'swaps_allowed', value: selSPeer.swaps_allowed ? 'Yes' : 'No', title: 'Swaps Allowed', width: 30, type: DataTypeEnum.STRING },
{ key: 'total_channels', value: selSPeer.channels?.length, title: 'Channels With Peer', width: 30, type: DataTypeEnum.NUMBER }],
[{ key: 'sent_total_swaps_out', value: selSPeer.sent?.total_swaps_out, title: 'Swap Out Sent', width: 25, type: DataTypeEnum.NUMBER },
@ -140,21 +152,33 @@ export class PSPeersComponent implements OnInit, OnDestroy {
}));
}
setFilterPredicate() {
this.swapPeers.filterPredicate = (rowData: SwapPeerChannelsFlattened, fltr: string) => {
let rowToFilter = '';
switch (this.selFilterBy) {
case 'all':
rowToFilter = (rowData.nodeid ? rowData.nodeid : '') +
(rowData.alias ? rowData.alias.toLowerCase() : '') +
(rowData.swaps_allowed ? 'yes' : 'no') +
(rowData.short_channel_id ? rowData.short_channel_id : '') +
(rowData.local_balance ? rowData.local_balance : '') +
(rowData.remote_balance ? rowData.remote_balance : '');
break;
default:
rowToFilter = typeof rowData[this.selFilterBy] === 'undefined' ? '' : typeof rowData[this.selFilterBy] === 'string' ? rowData[this.selFilterBy].toLowerCase() : typeof rowData[this.selFilterBy] === 'boolean' ? (rowData[this.selFilterBy] ? 'yes' : 'no') : rowData[this.selFilterBy].toString();
break;
}
return this.selFilterBy === 'connected' ? rowToFilter.indexOf(fltr) === 0 : rowToFilter.includes(fltr);
};
}
loadSwapPeersTable(swapPeers: SwapPeerChannelsFlattened[]) {
this.swapPeers = new MatTableDataSource<SwapPeerChannelsFlattened>([...swapPeers]);
this.swapPeers.sort = this.sort;
this.swapPeers.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.swapPeers.filterPredicate = (sPeer: SwapPeerChannelsFlattened, fltr: string) => {
const newSPeer =
(sPeer.nodeid ? sPeer.nodeid : '') +
(sPeer.alias ? sPeer.alias.toLowerCase() : '') +
(sPeer.swaps_allowed ? 'yes' : 'no') +
(sPeer.short_channel_id ? sPeer.short_channel_id : '') +
(sPeer.local_balance ? sPeer.local_balance : '') +
(sPeer.remote_balance ? sPeer.remote_balance : '');
return newSPeer?.includes(fltr) || false;
};
this.swapPeers.paginator = this.paginator;
this.setFilterPredicate();
this.applyFilter();
this.logger.info(this.swapPeers);
}
@ -169,6 +193,11 @@ export class PSPeersComponent implements OnInit, OnDestroy {
this.swapPeers.filter = this.selFilter.trim().toLowerCase();
}
getLabel(column: string) {
const returnColumn: ColumnDefinition = this.nodePageDefs[this.PAGE_ID][this.tableSetting.tableId].allowedColumns.find((col) => col.column === column);
return returnColumn ? returnColumn.label ? returnColumn.label : this.camelCaseWithReplace.transform((returnColumn.column || ''), '_') : this.commonService.titleCase(column);
}
ngOnDestroy() {
this.unSubs.forEach((completeSub) => {
completeSub.next(<any>null);

1
src/app/shared/models/pageSettings.ts
View File

@ -138,6 +138,7 @@ export class CLNPageDefinitions {
query_routes: TableDefinition;
};
peerswap: {
pspeers: TableDefinition;
psout: TableDefinition;
psin: TableDefinition;
pscanceled: TableDefinition;

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

@ -812,6 +812,9 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
columnSelection: ['alias', 'channel', 'direction', 'delay', 'msatoshi'] }
] },
{ pageId: 'peerswap', tables: [
{ tableId: 'pspeers', recordsPerPage: PAGE_SIZE, sortBy: 'swaps_allowed', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['alias', 'short_channel_id'],
columnSelection: ['short_channel_id', 'alias', 'swaps_allowed', 'local_balance', 'remote_balance'] },
{ tableId: 'psout', recordsPerPage: PAGE_SIZE, sortBy: 'created_at', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'created_at', 'amount'],
columnSelection: ['state', 'created_at', 'swap_id', 'alias', 'short_channel_id', 'amount'] },
@ -929,6 +932,10 @@ export const CLN_PAGE_DEFS: CLNPageDefinitions = {
}
},
peerswap: {
pspeers: {
maxColumns: 5,
allowedColumns: [{ column:'short_channel_id' }, { column:'alias' }, { column:'swaps_allowed' }, { column:'local_balance' }, { column:'remote_balance' }]
},
psout: {
maxColumns: 6,
allowedColumns: [{ column:'state' }, { column:'created_at' }, { column:'swap_id' }, { column:'alias' }, { column:'short_channel_id' }, { column:'amount' }]