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> <td mat-cell *matCellDef="let address"> {{address?.port}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <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"> <td mat-cell *matCellDef="let address" class="pl-1">
<span fxLayoutAlign="end center"> <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> </span>
</td> </td>
</ng-container> </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}"> <table mat-table #table [dataSource]="qrHops" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="id"> <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th> <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>
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th> <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let hop"> {{hop?.alias}} </td> <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>
<ng-container matColumnDef="channel"> <ng-container matColumnDef="channel">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th> <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
<td mat-cell *matCellDef="let hop"> {{hop?.channel}} </td> <td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.channel}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="direction"> <ng-container matColumnDef="direction">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Direction </th> <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Direction </th>
<td mat-cell *matCellDef="let hop"> {{hop?.direction}} </td> <td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.direction}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="delay"> <ng-container matColumnDef="delay">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Delay </th> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Delay </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span> <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="msatoshi"> <ng-container matColumnDef="msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}} <td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}
</span></td> </span></td>
</ng-container> </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"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th> <th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
<td mat-cell *matCellDef="let hop" class="pl-4"> <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)"class="table-actions-button">View Info</button> </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> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@ -7,13 +7,16 @@ import { MatTableDataSource } from '@angular/material/table';
import { faRoute, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; import { faRoute, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { Routes } from '../../../shared/models/clnModels'; 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 { CommonService } from '../../../shared/services/common.service';
import { CLNEffects } from '../../store/cln.effects'; import { CLNEffects } from '../../store/cln.effects';
import { RTLState } from '../../../store/rtl.state'; import { RTLState } from '../../../store/rtl.state';
import { openAlert } from '../../../store/rtl.actions'; import { openAlert } from '../../../store/rtl.actions';
import { getQueryRoutes } from '../../store/cln.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({ @Component({
selector: 'rtl-cln-query-routes', selector: 'rtl-cln-query-routes',
@ -24,6 +27,8 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined; @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild('queryRoutesForm', { static: true }) form: any; @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 destinationPubkey = '';
public amount: number | null = null; public amount: number | null = null;
public qrHops: any; public qrHops: any;
@ -33,22 +38,23 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
public faExclamationTriangle = faExclamationTriangle; public faExclamationTriangle = faExclamationTriangle;
public screenSize = ''; public screenSize = '';
public screenSizeEnum = ScreenSizeEnum; 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) { constructor(private store: Store<RTLState>, private clnEffects: CLNEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize(); 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() { 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.clnEffects.setQueryRoutesCL.pipe(takeUntil(this.unSubs[1])).subscribe((queryRoute) => {
this.qrHops = new MatTableDataSource([]); this.qrHops = new MatTableDataSource([]);
this.qrHops.data = []; this.qrHops.data = [];
@ -61,6 +67,7 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
} }
this.qrHops.sort = this.sort; 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.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> </div>
</th> </th>
<td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_utxo"> <ng-container matColumnDef="no_utxo">

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

@ -2,25 +2,13 @@
width: 2rem; width: 2rem;
} }
.mat-column-alias { .mat-column-alias, .mat-column-id, .mat-column-netaddr {
flex: 1 1 20%; flex: 0 0 20%;
width: 20%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; & .ellipsis-parent {
text-overflow: ellipsis; display: flex;
} }
.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;
} }
.mat-column-actions { .mat-column-actions {

@ -69,7 +69,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_event"> <ng-container matColumnDef="no_event">

@ -71,7 +71,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1 pr-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_event"> <ng-container matColumnDef="no_event">

@ -53,7 +53,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_event"> <ng-container matColumnDef="no_event">

@ -102,7 +102,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let payment" class="pr-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_payment"> <ng-container matColumnDef="no_payment">

@ -48,7 +48,7 @@
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th> <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"> <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> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

@ -47,7 +47,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_transaction"> <ng-container matColumnDef="no_transaction">

@ -36,7 +36,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let channel" class="pl-1" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_channel"> <ng-container matColumnDef="no_channel">

@ -46,7 +46,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_event"> <ng-container matColumnDef="no_event">

@ -61,7 +61,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let payment" class="px-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_payment"> <ng-container matColumnDef="no_payment">

@ -55,7 +55,7 @@
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th> <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"> <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> </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

@ -46,7 +46,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_transaction"> <ng-container matColumnDef="no_transaction">

@ -47,7 +47,7 @@
</th> </th>
<td mat-cell *matCellDef="let channel" class="pl-1"> <td mat-cell *matCellDef="let channel" class="pl-1">
<span fxLayoutAlign="end center"> <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> </span>
</td> </td>
</ng-container> </ng-container>

@ -80,7 +80,7 @@
<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-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4"> <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> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="no_pending_force_closing"> <ng-container matColumnDef="no_pending_force_closing">
@ -128,10 +128,10 @@
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<mat-header-cell fxLayoutAlign="end center" class="pl-4 pr-3" *matHeaderCellDef> <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-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4"> <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> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="no_pending_closing"> <ng-container matColumnDef="no_pending_closing">
@ -188,7 +188,7 @@
<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-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-4"> <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> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="no_pending_wait_closing"> <ng-container matColumnDef="no_pending_wait_closing">

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

@ -31,7 +31,7 @@
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th> <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"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_incoming_event"> <ng-container matColumnDef="no_incoming_event">
@ -78,7 +78,7 @@
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th> <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let rPeer" class="pl-2"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_outgoing_event"> <ng-container matColumnDef="no_outgoing_event">

@ -65,7 +65,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let payment" class="px-2" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_payment"> <ng-container matColumnDef="no_payment">

@ -117,7 +117,7 @@
</th> </th>
<td mat-cell *matCellDef="let swap" class="pl-1" fxLayoutAlign="end center"> <td mat-cell *matCellDef="let swap" class="pl-1" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_swap"> <ng-container matColumnDef="no_swap">

@ -78,7 +78,7 @@
</th> </th>
<td mat-cell *matCellDef="let swap" class="pl-3" fxLayoutAlign="end center"> <td mat-cell *matCellDef="let swap" class="pl-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_swap"> <ng-container matColumnDef="no_swap">

@ -69,11 +69,14 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
} else { } else {
if (!nodeSettings?.enableOffers) { if (!nodeSettings?.enableOffers) {
const transactionsPage = updatedPageSettings.find((pg) => pg.pageId === 'transactions'); const transactionsPage = updatedPageSettings.find((pg) => pg.pageId === 'transactions');
transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers'), 1); const offerIdx = transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offers');
transactionsPage?.tables.splice(transactionsPage?.tables.findIndex((tb) => tb.tableId === 'offer_bookmarks'), 1); 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) { 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.pageSettings = updatedPageSettings;
this.initialPageSettings = updatedPageSettings; this.initialPageSettings = updatedPageSettings;
@ -132,10 +135,12 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
this.initialPageSettings = updatedPageSettings; this.initialPageSettings = updatedPageSettings;
} else { } else {
if (!nodeSettings?.swapServerUrl || nodeSettings.swapServerUrl.trim() === '') { 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() === '') { 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.pageSettings = updatedPageSettings;
this.initialPageSettings = updatedPageSettings; this.initialPageSettings = updatedPageSettings;

@ -39,7 +39,7 @@
</div> </div>
</th> </th>
<td mat-cell *matCellDef="let transaction" class="px-3" fxLayoutAlign="end center"> <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> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="no_transaction"> <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, { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['date', 'amount_paid', 'amount_received'], columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] } 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, maxColumns: 5,
allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] 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