lnd forwarding history page layout

src/app/lnd/reports/routing/routing-report.component.html

@@ -41,7 +41,7 @@
   </div>
   <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100" class="padding-gap-x">
     <div class="mt-1">
-      <rtl-forwarding-history *ngIf="events && events?.forwarding_events && events.forwarding_events.length && events.forwarding_events.length > 0" [eventsData]="events?.forwarding_events" [filterValue]="eventFilterValue"></rtl-forwarding-history>
+      <rtl-forwarding-history *ngIf="events && events?.forwarding_events && events.forwarding_events.length && events.forwarding_events.length > 0" [pageId]="'reports'" [tableId]="'routing'" [eventsData]="events?.forwarding_events" [filterValue]="eventFilterValue"></rtl-forwarding-history>
     </div>
   </div>
 </div>

src/app/lnd/routing/forwarding-history/forwarding-history.component.html

@@ -14,12 +14,20 @@
       <td mat-cell *matCellDef="let fhEvent">{{(fhEvent.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
     </ng-container>
     <ng-container matColumnDef="alias_in">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Channel</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Inbound Alias</th>
-      <td mat-cell *matCellDef="let fhEvent">{{fhEvent.alias_in}}</td>
+      <td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.alias_in}}</td>
+    </ng-container>
+    <ng-container matColumnDef="chan_id_in">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Inbound Channel</th>
+      <td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.chan_id_in}}</td>
     </ng-container>
     <ng-container matColumnDef="alias_out">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Channel</th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Outbound Alias</th>
-      <td mat-cell *matCellDef="let fhEvent">{{fhEvent.alias_out}}</td>
+      <td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.alias_out}}</td>
+    </ng-container>
+    <ng-container matColumnDef="chan_id_out">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Outbound Channel</th>
+      <td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.chan_id_out}}</td>
     </ng-container>
     <ng-container matColumnDef="amt_in">
       <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Inbound Amount (Sats)</th>

src/app/lnd/routing/forwarding-history/forwarding-history.component.scss

@@ -1,3 +1,10 @@
+.mat-column-alias_in, .mat-column-alias_out, .mat-column-chan_id_in, .mat-column-chan_id_out {
+  flex: 1 1 20%;
+  white-space: nowrap;
+  overflow: hidden;  
+  text-overflow: ellipsis;
+}
+
 .mat-column-actions {
   min-height: 4.8rem;
 }

src/app/lnd/routing/forwarding-history/forwarding-history.component.ts

@@ -30,6 +30,8 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  @Input() pageId = 'routing';
+  @Input() tableId = 'forwarding_history';
   @Input() eventsData = [];
   @Input() filterValue = '';
   public PAGE_ID = 'routing';
@@ -58,7 +60,8 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
         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) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        this.tableSetting.tableId = this.tableId;
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.pageId)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_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 {

src/app/shared/services/consts-enums-functions.ts

@@ -991,7 +991,7 @@ export const LND_TABLES_DEF = {
   routing: {
     forwarding_history: {
       maxColumns: 6,
-      allowedColumns: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat']
+      allowedColumns: ['timestamp', 'alias_in', 'chan_id_in', 'alias_out', 'chan_id_out', 'amt_in', 'amt_out', 'fee_msat']
     },
     routing_peers: {
       maxColumns: 4,
@@ -1005,7 +1005,7 @@ export const LND_TABLES_DEF = {
   reports: {
     routing: {
       maxColumns: 6,
-      allowedColumns: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat']
+      allowedColumns: ['timestamp', 'alias_in', 'chan_id_in', 'alias_out', 'chan_id_out', 'amt_in', 'amt_out', 'fee_msat']
     },
     transactions: {
       maxColumns: 5,