lnd peers page layout

This commit is contained in:
ShahanaFarooqui 2022-10-25 16:43:16 -07:00
parent 5c79a078fa
commit 65e4c35226
6 changed files with 44 additions and 62 deletions

View File

@ -54,19 +54,11 @@ export class CLNTransactionsReportComponent implements OnInit, OnDestroy {
this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM); this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM);
this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])). this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => { subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
if (settings.apiCallStatus.status === APICallStatusEnum.ERROR) { 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) { if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['date', 'amount_paid', 'amount_received']; this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
}
} else { } else {
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)!; this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
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.displayedColumns.push('actions');
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);

View File

@ -54,19 +54,11 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM); this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM);
this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])). this.store.select(eclPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => { subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
if (settings.apiCallStatus.status === APICallStatusEnum.ERROR) { this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_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) { if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['date', 'amount_paid', 'amount_received']; this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
}
} else { } else {
this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || ECL_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!; this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
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.displayedColumns.push('actions');
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);

View File

@ -17,25 +17,44 @@
<table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}"> <table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<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) ? '12rem' : '25rem'}"> {{peer?.alias}} </td> <td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}"> {{peer?.alias}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="pub_key"> <ng-container matColumnDef="pub_key">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Public Key </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Public Key </th>
<td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '5rem' : '35rem'}"> {{peer?.pub_key}} </td> <td mat-cell *matCellDef="let peer" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}"> {{peer?.pub_key}} </td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Address </th>
<td mat-cell *matCellDef="let peer" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}"> {{peer?.address}} </td>
</ng-container>
<ng-container matColumnDef="sync_type">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Sync Type </th>
<td mat-cell *matCellDef="let peer" class="pl-1">{{peer?.sync_type | camelcaseWithReplace:'sync':'_'}}</td>
</ng-container>
<ng-container matColumnDef="inbound">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Inbound </th>
<td mat-cell *matCellDef="let peer" class="pl-1">{{peer?.inbound ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="bytes_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Bytes Sent </th>
<td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.bytes_sent | number}} </span></td>
</ng-container>
<ng-container matColumnDef="bytes_recv">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Bytes Received </th>
<td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.bytes_recv | number}} </span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="sat_sent"> <ng-container matColumnDef="sat_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Sats Sent </th>
Sats Sent </th> <td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="sat_recv"> <ng-container matColumnDef="sat_recv">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">
Sats Received </th> Sats Received </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td> <td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="ping_time"> <ng-container matColumnDef="ping_time">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Ping Time (<span>&#181;</span>s) </th> <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Ping Time (<span>&#181;</span>s) </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span> <td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">

View File

@ -1,23 +1,10 @@
.mat-column-alias { .mat-column-alias, .mat-column-address, .mat-column-pub_key {
flex: 1 1 25%; flex: 1 1 20%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mat-column-pub_key {
flex: 1 1 35%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 2rem;
}
.mat-column-actions { .mat-column-actions {
min-height: 4.8rem; min-height: 4.8rem;
} }
.mat-column-sat_sent, .mat-column-sat_recv, .mat-column-ping_time {
flex: 1 1 13%;
width: 13%;
}

View File

@ -59,19 +59,11 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM); this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM);
this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])). this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => { subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
if (settings.apiCallStatus.status === APICallStatusEnum.ERROR) { 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)!;
if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) { if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['date', 'amount_paid', 'amount_received']; this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
} else {
this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
}
} else { } else {
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.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
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.displayedColumns.push('actions');
this.logger.info(this.displayedColumns); this.logger.info(this.displayedColumns);

View File

@ -974,8 +974,8 @@ export const LND_TABLES_DEF = {
allowedColumns: ['amount', 'incoming', 'expiration_height', 'hash_lock'] allowedColumns: ['amount', 'incoming', 'expiration_height', 'hash_lock']
}, },
peers: { peers: {
maxColumns: 3, maxColumns: 8,
allowedColumns: ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time'] allowedColumns: ['alias', 'pub_key', 'address', 'sync_type', 'inbound', 'bytes_sent', 'bytes_recv', 'sat_sent', 'sat_recv', 'ping_time']
} }
}, },
transactions: { transactions: {