CLN Forwarding History Page Layout

pull/1127/head
ShahanaFarooqui 2 years ago
parent c0c9d798a1
commit 4f6cebc98d

@ -9,40 +9,60 @@
<div *ngIf="errorMessage === ''" [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 [dataSource]="forwardingHistoryEvents" fxFlex="100" matSort class="overflow-auto">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.status}}</td>
</ng-container>
<ng-container matColumnDef="received_time">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Received Time</th>
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.received_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="resolved_time">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Resolved Time</th>
<td mat-cell *matCellDef="let fhEvent">{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Resolved Time</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{(fhEvent?.resolved_time * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="in_channel">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.in_channel_alias}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">In Channel Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.in_channel}}</td>
</ng-container>
<ng-container matColumnDef="in_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">In Channel</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="out_channel">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.out_channel_alias}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Out Channel Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.out_channel}}</td>
</ng-container>
<ng-container matColumnDef="out_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Out Channel</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="payment_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{fhEvent?.payment_hash}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="in_msatoshi">
<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?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</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?.in_msatoshi/1000 | number:fhEvent?.in_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="out_msatoshi">
<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?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</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?.out_msatoshi/1000 | number:fhEvent?.out_msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="fee">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (mSat)</th>
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.fee | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">Fee (mSat)</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1"><span fxLayoutAlign="end center">{{fhEvent?.fee | number}}</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>
@ -50,7 +70,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-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>
</td>
</ng-container>

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

@ -9,15 +9,16 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ForwardingEvent, ListForwards } from '../../../shared/models/clnModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, CLNForwardingEventsStatusEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, CLNForwardingEventsStatusEnum, SortOrderEnum, CLN_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 { forwardingHistory } from '../../store/cln.selector';
import { clnPageSettings, forwardingHistory } from '../../store/cln.selector';
import { getForwardingHistory } from '../../store/cln.actions';
import { PageSettingsCLN, TableSetting } from '../../../shared/models/pageSettings';
@Component({
selector: 'rtl-cln-forwarding-history',
@ -33,6 +34,8 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
@Input() eventsData = [];
@Input() filterValue = '';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING };
public successfulEvents: ForwardingEvent[] = [];
public displayedColumns: any[] = [];
public forwardingHistoryEvents: any;
@ -48,24 +51,34 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe, private router: Router) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['in_msatoshi', 'out_msatoshi', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['received_time', 'in_msatoshi', 'out_msatoshi', 'fee', 'actions'];
} else {
this.displayedColumns = ['received_time', 'resolved_time', 'in_channel', 'out_channel', 'in_msatoshi', 'out_msatoshi', 'fee', 'actions'];
}
}
ngOnInit() {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettingsCLN[], 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.logger.info(this.displayedColumns);
});
this.store.pipe(take(1)).subscribe((state) => {
if (state.cln.apisCallStatus.FetchForwardingHistoryS.status === APICallStatusEnum.UN_INITIATED && !state.cln.forwardingHistory.listForwards?.length) {
this.store.dispatch(getForwardingHistory({ payload: { status: CLNForwardingEventsStatusEnum.SETTLED } }));
}
});
this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[0])).
this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).
subscribe((fhSeletor: { forwardingHistory: ListForwards, apiCallStatus: ApiCallStatusPayload }) => {
this.errorMessage = '';
this.apiCallStatus = fhSeletor.apiCallStatus;
@ -132,6 +145,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
this.forwardingHistoryEvents = new MatTableDataSource<ForwardingEvent>([...forwardingEvents]);
this.forwardingHistoryEvents.sort = this.sort;
this.forwardingHistoryEvents.sortingDataAccessor = (data: any, sortHeaderId: string) => ((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 = (event: ForwardingEvent, fltr: string) => {
const newEvent = (event.received_time ? this.datePipe.transform(new Date(event.received_time * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() + ' ' : '') +
(event.resolved_time ? this.datePipe.transform(new Date(event.resolved_time * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() + ' ' : '') +

@ -279,6 +279,7 @@ export interface LocalFailedEvent {
in_msat?: string;
status?: string;
received_time?: number;
resolved_time?: number;
failcode?: number;
failreason?: string;
}

@ -712,6 +712,20 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettingsCLN[] = [
{ tableId: 'offer_bookmarks', recordsPerPage: PAGE_SIZE, sortBy: 'lastUpdatedAt', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['lastUpdatedAt', 'amountMSat'],
columnSelection: ['lastUpdatedAt', 'title', 'amountMSat', 'description'] }
] },
{ pageId: 'routing', tables: [
{ tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['received_time', 'in_msatoshi', 'out_msatoshi'],
columnSelection: ['received_time', 'resolved_time', 'in_channel_alias', 'out_channel_alias', 'in_msatoshi', 'out_msatoshi', 'fee'] }
// { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'expires_at', sortOrder: SortOrderEnum.DESCENDING,
// columnSelectionSM: ['expires_at', 'msatoshi'],
// columnSelection: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received'] },
// { tableId: 'failed', recordsPerPage: PAGE_SIZE, sortBy: 'offer_id', sortOrder: SortOrderEnum.DESCENDING,
// columnSelectionSM: ['offer_id', 'single_use'],
// columnSelection: ['offer_id', 'single_use', 'used'] },
// { tableId: 'local_failed', recordsPerPage: PAGE_SIZE, sortBy: 'lastUpdatedAt', sortOrder: SortOrderEnum.DESCENDING,
// columnSelectionSM: ['lastUpdatedAt', 'amountMSat'],
// columnSelection: ['lastUpdatedAt', 'title', 'amountMSat', 'description'] }
] }
];
@ -755,5 +769,9 @@ export const CLN_TABLES_DEF = {
offer_bookmarks: {
maxColumns: 5,
allowedColumns: ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'vendor', 'bolt12']
},
forwarding_history: {
maxColumns: 8,
allowedColumns: ['received_time', 'resolved_time', 'in_channel', 'in_channel_alias', 'out_channel', 'out_channel_alias', 'payment_hash', 'in_msatoshi', 'out_msatoshi', 'fee']
}
};

Loading…
Cancel
Save