CLN Query Routes Page Layout

pull/1127/head
ShahanaFarooqui 2 years ago
parent 5abe432a2d
commit 6a19acb351

@ -39,10 +39,12 @@
<td mat-cell *matCellDef="let address"> {{address?.port}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1"><span fxLayoutAlign="end center">Actions</span></th>
<th mat-header-cell *matHeaderCellDef class="pl-1">
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let address" class="pl-1">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
<button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
</span>
</td>
</ng-container>

@ -0,0 +1,9 @@
div.bordered-box.table-actions-select.btn-action {
min-width: 13rem;
width: 13rem;
}
button.mat-stroked-button.btn-action-copy {
min-width: 13rem;
width: 13rem;
}

@ -28,38 +28,44 @@
<table mat-table #table [dataSource]="qrHops" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let hop"> {{hop?.id}} </td>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{hop?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let hop"> {{hop?.alias}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let hop" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{hop?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="channel">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let hop"> {{hop?.channel}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
<td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.channel}} </td>
</ng-container>
<ng-container matColumnDef="direction">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Direction </th>
<td mat-cell *matCellDef="let hop"> {{hop?.direction}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Direction </th>
<td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.direction}} </td>
</ng-container>
<ng-container matColumnDef="delay">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Delay </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Delay </th>
<td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
</td>
</ng-container>
<ng-container matColumnDef="msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
<td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
</span></td>
</ng-container>
<ng-container matColumnDef="amount_msat">
<th mat-header-cell class="pl-4" *matHeaderCellDef mat-sort-header> Amount mSat </th>
<td mat-cell class="pl-4" *matCellDef="let hop"> {{hop?.amount_msat}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let hop" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)"class="table-actions-button">View Info</button>
<th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let hop" class="pl-2 pr-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

@ -1,10 +1,11 @@
.mat-column-actions {
min-height: 4.8rem;
.mat-column-id, .mat-column-alias {
flex: 0 0 22%;
width: 22%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-pubkey_alias {
flex: 1 1 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.mat-column-actions {
min-height: 4.8rem;
}

@ -7,13 +7,16 @@ import { MatTableDataSource } from '@angular/material/table';
import { faRoute, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { Routes } from '../../../shared/models/clnModels';
import { AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { AlertTypeEnum, CLN_DEFAULT_PAGE_SETTINGS, DataTypeEnum, PAGE_SIZE, ScreenSizeEnum, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
import { CommonService } from '../../../shared/services/common.service';
import { CLNEffects } from '../../store/cln.effects';
import { RTLState } from '../../../store/rtl.state';
import { openAlert } from '../../../store/rtl.actions';
import { getQueryRoutes } from '../../store/cln.actions';
import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
import { clnPageSettings } from '../../store/cln.selector';
import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
@Component({
selector: 'rtl-cln-query-routes',
@ -24,6 +27,8 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild('queryRoutesForm', { static: true }) form: any;
public PAGE_ID = 'graph_lookup';
public tableSetting: TableSetting = { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'id', sortOrder: SortOrderEnum.ASCENDING };
public destinationPubkey = '';
public amount: number | null = null;
public qrHops: any;
@ -33,22 +38,23 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
public faExclamationTriangle = faExclamationTriangle;
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 store: Store<RTLState>, private clnEffects: CLNEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['alias', 'msatoshi', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['alias', 'direction', 'msatoshi', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['alias', 'direction', 'delay', 'msatoshi', 'actions'];
} else {
this.displayedColumns = ['alias', 'channel', 'direction', 'delay', 'msatoshi', 'actions'];
}
}
ngOnInit() {
this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
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.clnEffects.setQueryRoutesCL.pipe(takeUntil(this.unSubs[1])).subscribe((queryRoute) => {
this.qrHops = new MatTableDataSource([]);
this.qrHops.data = [];
@ -61,6 +67,7 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
}
this.qrHops.sort = this.sort;
this.qrHops.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
this.qrHops.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
});
}

@ -80,7 +80,7 @@
</div>
</th>
<td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onUTXOClick(utxo, $event)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onUTXOClick(utxo, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_utxo">

@ -26,20 +26,26 @@
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
{{peer?.alias}}
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef class="px-3" mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer" class="px-3" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
{{peer?.id}}
<th mat-header-cell *matHeaderCellDef class="pl-2" mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer" class="pl-2">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{peer?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="netaddr">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
<td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<span *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2"> Network Address </th>
<td mat-cell *matCellDef="let peer" class="pl-2">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child" *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">

@ -2,25 +2,13 @@
width: 2rem;
}
.mat-column-alias {
flex: 1 1 20%;
.mat-column-alias, .mat-column-id, .mat-column-netaddr {
flex: 0 0 20%;
width: 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-id {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 2rem;
}
.mat-column-netaddr {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {

@ -69,7 +69,7 @@
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_event">

@ -71,7 +71,7 @@
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1 pr-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>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_event">

@ -53,7 +53,7 @@
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_event">

@ -102,7 +102,7 @@
</div>
</th>
<td mat-cell *matCellDef="let payment" class="pr-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_payment">

@ -48,7 +48,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let hop" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

@ -47,7 +47,7 @@
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_transaction">

@ -36,7 +36,7 @@
</div>
</th>
<td mat-cell *matCellDef="let channel" class="pl-1" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_channel">

@ -46,7 +46,7 @@
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-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>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_event">

@ -61,7 +61,7 @@
</div>
</th>
<td mat-cell *matCellDef="let payment" class="px-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_payment">

@ -55,7 +55,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let hop" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

@ -46,7 +46,7 @@
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_transaction">

@ -47,7 +47,7 @@
</th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)" class="table-actions-button">View Info</button>
</span>
</td>
</ng-container>

@ -80,7 +80,7 @@
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)" class="table-actions-button">View Info</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="no_pending_force_closing">
@ -128,10 +128,10 @@
</ng-container>
<ng-container matColumnDef="actions">
<mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)" class="table-actions-button">View Info</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="no_pending_closing">
@ -188,7 +188,7 @@
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)" class="table-actions-button">View Info</button>
</mat-cell>
</ng-container>
<ng-container matColumnDef="no_pending_wait_closing">

@ -43,7 +43,7 @@
</div>
</th>
<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>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_event">

@ -31,7 +31,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let rPeer" class="pl-2" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_incoming_event">
@ -78,7 +78,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let rPeer" class="pl-2">
<button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_outgoing_event">

@ -65,7 +65,7 @@
</div>
</th>
<td mat-cell *matCellDef="let payment" class="px-2" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_payment">

@ -117,7 +117,7 @@
</th>
<td mat-cell *matCellDef="let swap" class="pl-1" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4"
(click)="onSwapClick(swap, $event)"class="table-actions-button">View Info</button>
(click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_swap">

@ -78,7 +78,7 @@
</th>
<td mat-cell *matCellDef="let swap" class="pl-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4"
(click)="onSwapClick(swap, $event)"class="table-actions-button">View Info</button>
(click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_swap">

@ -69,11 +69,14 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
} else {
if (!nodeSettings?.enableOffers) {
const transactionsPage = updatedPageSettings.find((pg) => pg.pageId === 'transactions');
transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers'), 1);
transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offer_bookmarks'), 1);
const offerIdx = transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers');
const offerBookmarkIdx = transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offer_bookmarks');
if (offerIdx > -1) { transactionsPage?.tables.splice(offerIdx, 1); }
if (offerBookmarkIdx > -1) { transactionsPage?.tables.splice(offerBookmarkIdx, 1); }
}
if (!nodeSettings?.enablePeerswap) {
updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'peerswap'), 1);
const psIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'peerswap');
if (psIdx > -1) { updatedPageSettings.splice(psIdx, 1); }
}
this.pageSettings = updatedPageSettings;
this.initialPageSettings = updatedPageSettings;
@ -132,10 +135,12 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
this.initialPageSettings = updatedPageSettings;
} else {
if (!nodeSettings?.swapServerUrl || nodeSettings.swapServerUrl.trim() === '') {
updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'loop'), 1);
const loopIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'loop');
if (loopIdx > -1) { updatedPageSettings.splice(loopIdx, 1); }
}
if (!nodeSettings?.boltzServerUrl || nodeSettings.boltzServerUrl.trim() === '') {
updatedPageSettings.splice(updatedPageSettings.findIndex((pg) => pg.pageId === 'boltz'), 1);
const boltzIdx = updatedPageSettings.findIndex((pg) => pg.pageId === 'boltz');
if (boltzIdx > -1) { updatedPageSettings.splice(boltzIdx, 1); }
}
this.pageSettings = updatedPageSettings;
this.initialPageSettings = updatedPageSettings;

@ -39,7 +39,7 @@
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="px-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)"class="table-actions-button">View Info</button>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
</td>
</ng-container>
<ng-container matColumnDef="no_transaction">

@ -740,6 +740,16 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
{ tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] }
] },
{ pageId: 'graph_lookup', tables: [
{ tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'msatoshi', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['alias', 'direction', 'msatoshi'],
columnSelection: ['alias', 'channel', 'direction', 'delay', 'msatoshi'] }
] },
{ pageId: 'peerswap', tables: [
{ tableId: 'swaps', recordsPerPage: PAGE_SIZE, sortBy: '', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: [],
columnSelection: [] }
] }
];
@ -819,6 +829,18 @@ export const CLN_TABLES_DEF = {
maxColumns: 5,
allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices']
}
},
graph_lookup: {
query_routes: {
maxColumns: 6,
allowedColumns: ['id', 'alias', 'channel', 'direction', 'delay', 'msatoshi']
}
},
peerswap: {
swaps: {
maxColumns: 5,
allowedColumns: []
}
}
};

Loading…
Cancel
Save