lnd open channels page layout

pull/1127/head
ShahanaFarooqui 2 years ago
parent 65e4c35226
commit b1b1de5add

@ -25,15 +25,83 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : (screenSize === screenSizeEnum.MD) ? '15rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="remote_pubkey">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{channel.remote_pubkey}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{channel.channel_point}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel Id</th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{channel.chan_id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="initiator">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Initiator</th>
<td mat-cell *matCellDef="let channel">{{channel.initiator ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="static_remote_key">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Static Remote Key</th>
<td mat-cell *matCellDef="let channel">{{channel.static_remote_key ? 'Yes' : 'No'}}</td>
</ng-container>
<ng-container matColumnDef="uptime">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Uptime ({{timeUnit}})</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.uptime_str}} </span></td>
</ng-container>
<ng-container matColumnDef="lifetime">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Lifetime ({{timeUnit}})</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.lifetime_str}} </span></td>
</ng-container>
<ng-container matColumnDef="commit_fee">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats)</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.commit_fee | number}} </span></td>
</ng-container>
<ng-container matColumnDef="commit_weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Weight</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.commit_weight | number}} </span></td>
</ng-container>
<ng-container matColumnDef="fee_per_kw">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee/KW</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.fee_per_kw | number}} </span></td>
</ng-container>
<ng-container matColumnDef="num_updates">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Updates</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.num_updates | number}} </span></td>
</ng-container>
<ng-container matColumnDef="unsettled_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Unsettled Balance (Sats)</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.unsettled_balance | number}} </span></td>
</ng-container>
<ng-container matColumnDef="capacity">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.capacity | number}} </span></td>
</ng-container>
<ng-container matColumnDef="local_chan_reserve_sat">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Reserve (Sats)</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.local_chan_reserve_sat | number}} </span></td>
</ng-container>
<ng-container matColumnDef="remote_chan_reserve_sat">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Reserve (Sats)</th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.remote_chan_reserve_sat | number}} </span></td>
</ng-container>
<ng-container matColumnDef="total_satoshis_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.total_satoshis_sent | number}} </span></td>

@ -1,6 +1,6 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-remote_alias {
.mat-column-remote_alias, .mat-column-remote_pubkey, .mat-column-channel_point, .mat-column-chan_id {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
@ -21,7 +21,7 @@
}
}
.mat-column-uptime, .mat-column-local_balance, .mat-column-remote_balance, .mat-column-total_satoshis_sent, .mat-column-total_satoshis_received {
.mat-column-uptime, .mat-column-lifetime, .mat-column-local_balance, .mat-column-remote_balance, .mat-column-total_satoshis_sent, .mat-column-total_satoshis_received {
flex: 1 1 10%;
width: 10%;
white-space: nowrap;

@ -361,6 +361,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
}
channels.forEach((channel) => {
channel.uptime_str = channel.uptime ? (this.decimalPipe.transform(Math.floor(+channel.uptime / maxDivider), '2.0-0') + ':' + this.decimalPipe.transform(Math.round((+channel.uptime % maxDivider) / minDivider), '2.0-0')) : '---';
channel.lifetime_str = channel.lifetime ? (this.decimalPipe.transform(Math.floor(+channel.lifetime / maxDivider), '2.0-0') + ':' + this.decimalPipe.transform(Math.round((+channel.lifetime % maxDivider) / minDivider), '2.0-0')) : '---';
});
return channels;
}

@ -80,6 +80,7 @@ export interface Channel {
uptime?: string;
uptime_str?: string;
lifetime?: string;
lifetime_str?: string;
static_remote_key?: boolean;
balancedness?: number; // Between 0-1-0
}

@ -946,8 +946,8 @@ export const LND_TABLES_DEF = {
},
peers_channels: {
open: {
maxColumns: 7,
allowedColumns: ['remote_alias', 'uptime', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness']
maxColumns: 8,
allowedColumns: ['remote_alias', 'remote_pubkey', 'channel_point', 'chan_id', 'initiator', 'static_remote_key', 'uptime', 'lifetime', 'commit_fee', 'commit_weight', 'fee_per_kw', 'num_updates', 'unsettled_balance', 'capacity', 'local_chan_reserve_sat', 'remote_chan_reserve_sat', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness']
},
pending_open: {
maxColumns: 7,

Loading…
Cancel
Save