ECL Page Layout Default Settings

This commit is contained in:
ShahanaFarooqui 2022-10-20 14:51:06 -07:00
parent 6a19acb351
commit 64034aa017
18 changed files with 140 additions and 73 deletions

View File

@ -88,9 +88,6 @@ export const arrangePayments = (selNode, body) => {
relayedEle.amountOut = Math.round(relayedEle.amountOut / 1000);
}
});
payments.sent = common.sortDescByKey(payments.sent, 'firstPartTimestamp');
payments.received = common.sortDescByKey(payments.received, 'firstPartTimestamp');
payments.relayed = common.sortDescByKey(payments.relayed, 'timestamp');
logger.log({ selectedNode: selNode, level: 'DEBUG', fileName: 'Fees', msg: 'Arranged Payments Received', data: payments });
return payments;
};

View File

@ -71,10 +71,7 @@ export const listInvoices = (req, res, next) => {
const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
return Promise.all(invoices === null || invoices === void 0 ? void 0 : invoices.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
then((values) => {
body = common.sortDescByKey(invoices, 'expiresAt');
return res.status(200).json(invoices);
});
then((values) => res.status(200).json(invoices));
});
}
else {
@ -86,7 +83,6 @@ export const listInvoices = (req, res, next) => {
if (invoices && invoices.length > 0) {
return Promise.all(invoices === null || invoices === void 0 ? void 0 : invoices.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
then((values) => {
body = common.sortDescByKey(invoices, 'expiresAt');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Sorted Invoices List Received', data: invoices });
return res.status(200).json(invoices);
}).

View File

@ -66,9 +66,6 @@ export const getTransactions = (req, res, next) => {
};
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'Getting On Chain Transactions Options', data: options.form });
request.post(options).then((body) => {
if (body && body.length > 0) {
body = common.sortDescByKey(body, 'timestamp');
}
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'On Chain Transactions Received', data: body });
res.status(200).json(body);
}).catch((errRes) => {

View File

@ -37,7 +37,6 @@ export const getPeers = (req, res, next) => {
peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
return peer;
});
body = common.sortDescByStrKey(body, 'alias');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body });
res.status(200).json(body);
});
@ -90,8 +89,7 @@ export const connectPeer = (req, res, next) => {
peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
return peer;
});
let peers = (body) ? common.sortDescByStrKey(body, 'alias') : [];
peers = common.newestOnTop(peers, 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
const peers = common.newestOnTop(body || [], 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: peers });
res.status(201).json(peers);
});

View File

@ -72,9 +72,6 @@ export const arrangePayments = (selNode: CommonSelectedNode, body) => {
if (relayedEle.amountIn) { relayedEle.amountIn = Math.round(relayedEle.amountIn / 1000); }
if (relayedEle.amountOut) { relayedEle.amountOut = Math.round(relayedEle.amountOut / 1000); }
});
payments.sent = common.sortDescByKey(payments.sent, 'firstPartTimestamp');
payments.received = common.sortDescByKey(payments.received, 'firstPartTimestamp');
payments.relayed = common.sortDescByKey(payments.relayed, 'timestamp');
logger.log({ selectedNode: selNode, level: 'DEBUG', fileName: 'Fees', msg: 'Arranged Payments Received', data: payments });
return payments;
};

View File

@ -67,10 +67,7 @@ export const listInvoices = (req, res, next) => {
const invoices = (!body[0] || body[0].length <= 0) ? [] : body[0];
pendingInvoices = (!body[1] || body[1].length <= 0) ? [] : body[1];
return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
then((values) => {
body = common.sortDescByKey(invoices, 'expiresAt');
return res.status(200).json(invoices);
});
then((values) => res.status(200).json(invoices));
});
} else {
return Promise.all([request(options1), request(options2)]).
@ -81,7 +78,6 @@ export const listInvoices = (req, res, next) => {
if (invoices && invoices.length > 0) {
return Promise.all(invoices?.map((invoice) => getReceivedPaymentInfo(req.session.selectedNode.ln_server_url, invoice))).
then((values) => {
body = common.sortDescByKey(invoices, 'expiresAt');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoices', msg: 'Sorted Invoices List Received', data: invoices });
return res.status(200).json(invoices);
}).

View File

@ -59,7 +59,6 @@ export const getTransactions = (req, res, next) => {
};
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'Getting On Chain Transactions Options', data: options.form });
request.post(options).then((body) => {
if (body && body.length > 0) { body = common.sortDescByKey(body, 'timestamp'); }
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'OnChain', msg: 'On Chain Transactions Received', data: body });
res.status(200).json(body);
}).catch((errRes) => {

View File

@ -37,7 +37,6 @@ export const getPeers = (req, res, next) => {
peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
return peer;
});
body = common.sortDescByStrKey(body, 'alias');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body });
res.status(200).json(body);
});
@ -87,8 +86,7 @@ export const connectPeer = (req, res, next) => {
peer.alias = foundPeer ? foundPeer.alias : peer.nodeId.substring(0, 20);
return peer;
});
let peers = (body) ? common.sortDescByStrKey(body, 'alias') : [];
peers = common.newestOnTop(peers, 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
const peers = common.newestOnTop(body || [], 'nodeId', req.query.nodeId ? req.query.nodeId : req.query.uri ? req.query.uri.substring(0, req.query.uri.indexOf('@')) : '');
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: peers });
res.status(201).json(peers);
});

View File

@ -62,7 +62,7 @@
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</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>

View File

@ -143,7 +143,7 @@
<ng-container matColumnDef="group_type">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span>
<span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span></span>
<span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span"></span></span>
</td>
</ng-container>
<ng-container matColumnDef="group_payment_hash">
@ -165,7 +165,7 @@
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{mpp?.bolt11}}</span>
<span class="ellipsis-child"></span>
</span>
</span>
</td>
@ -177,7 +177,7 @@
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{mpp?.label}}</span>
<span class="ellipsis-child"></span>
</span>
</span>
</td>
@ -189,7 +189,7 @@
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{mpp?.destination}}</span>
<span class="ellipsis-child"></span>
</span>
</span>
</td>
@ -201,7 +201,7 @@
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{mpp?.memo}}</span>
<span class="ellipsis-child"></span>
</span>
</span>
</td>

View File

@ -38,10 +38,12 @@
<td mat-cell *matCellDef="let address"> {{address}} </td>
</ng-container>
<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">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeId + '@' + address" (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" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
</span>
</td>
</ng-container>

View File

@ -0,0 +1,10 @@
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;
}

View File

@ -43,11 +43,17 @@
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let hop"> {{hop?.nodeId}} </td>
<td mat-cell *matCellDef="let hop">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '20rem' : '60rem'}">
<span class="ellipsis-child">{{hop?.nodeId}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<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">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let hop" class="pl-4 pr-3" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)" class="table-actions-button">View Info</button>
</td>
</ng-container>

View File

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

View File

@ -26,7 +26,7 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
public nodeId = '';
public amount = 0;
public qrHops: Array<any> = [];
public displayedColumns: any;
public displayedColumns = ['alias', 'nodeId', 'actions'];
public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
public faRoute = faRoute;
public faExclamationTriangle = faExclamationTriangle;
@ -36,15 +36,6 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
constructor(private store: Store<RTLState>, private eclEffects: ECLEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if (this.screenSize === ScreenSizeEnum.XS) {
this.displayedColumns = ['alias', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.SM) {
this.displayedColumns = ['alias', 'nodeId', 'actions'];
} else if (this.screenSize === ScreenSizeEnum.MD) {
this.displayedColumns = ['alias', 'nodeId', 'actions'];
} else {
this.displayedColumns = ['alias', 'nodeId', 'actions'];
}
}
ngOnInit() {

View File

@ -786,11 +786,11 @@ export const CLN_TABLES_DEF = {
},
transactions: {
payments: {
maxColumns: 5,
maxColumns: 7,
allowedColumns: ['created_at', 'type', 'payment_hash', 'bolt11', 'destination', 'memo', 'label', 'msatoshi_sent', 'msatoshi']
},
invoices: {
maxColumns: 6,
maxColumns: 7,
allowedColumns: ['expires_at', 'paid_at', 'type', 'description', 'label', 'payment_hash', 'bolt11', 'msatoshi', 'msatoshi_received']
},
offers: {
@ -798,7 +798,7 @@ export const CLN_TABLES_DEF = {
allowedColumns: ['offer_id', 'single_use', 'used', 'bolt12']
},
offer_bookmarks: {
maxColumns: 5,
maxColumns: 6,
allowedColumns: ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'vendor', 'bolt12']
}
},
@ -881,24 +881,103 @@ export const LND_TABLES_DEF = {
export const ECL_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
{ pageId: 'on_chain', tables: [
{ tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['txid', 'value'],
columnSelection: ['txid', 'output', 'value', 'blockheight'] },
{ tableId: 'dust_utxos', recordsPerPage: PAGE_SIZE, sortBy: 'blockheight', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['txid', 'value'],
columnSelection: ['txid', 'output', 'value', 'blockheight'] }
{ tableId: 'transaction', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['timestamp', 'amount'],
columnSelection: ['timestamp', 'amount', 'fees', 'confirmations', 'address'] }
] },
{ pageId: 'peers_channels', tables: [
{ tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['alias', 'toLocal', 'toRemote'],
columnSelection: ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'balancedness'] },
{ tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'alias', 'toLocal'],
columnSelection: ['state', 'alias', 'toLocal', 'toRemote'] },
{ tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'state', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['state', 'alias', 'toLocal', 'toRemote'],
columnSelection: ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'balancedness'] },
{ tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.ASCENDING,
columnSelectionSM: ['alias', 'nodeId'],
columnSelection: ['alias', 'nodeId', 'address', 'channels'] }
] },
{ pageId: 'transactions', tables: [
{ tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'firstPartTimestamp', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['firstPartTimestamp', 'recipientAmount'],
columnSelection: ['firstPartTimestamp', 'id', 'recipientNodeAlias', 'recipientAmount'] },
{ tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'expiresAt', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['timestamp', 'amount', 'amountSettled'],
columnSelection: ['timestamp', 'receivedAt', 'description', 'amount', 'amountSettled'] }
] },
{ pageId: 'routing', tables: [
{ tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['timestamp', 'amountIn', 'fee'],
columnSelection: ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee'] },
{ tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'totalFee', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['alias', 'events', 'totalFee'],
columnSelection: ['channelId', 'alias', 'events', 'totalAmount', 'totalFee'] }
] },
{ pageId: 'reports', tables: [
{ tableId: 'routing', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['timestamp', 'amountIn', 'fee'],
columnSelection: ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee'] },
{ tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] }
] }
];
export const ECL_TABLES_DEF = {
on_chain: {
utxos: {
maxColumns: 7,
allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
transaction: {
maxColumns: 6,
allowedColumns: ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'blockHash', 'txid']
}
},
peers_channels: {
open_channels: {
maxColumns: 8,
allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
},
dust_utxos: {
pending_channels: {
maxColumns: 8,
allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
},
inactive_channels: {
maxColumns: 8,
allowedColumns: ['state', 'shortChannelId', 'channelId', 'alias', 'nodeId', 'isFunder', 'buried', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'feeRatePerKwLocal', 'feeRatePerKwRemote', 'balancedness']
},
peers: {
maxColumns: 4,
allowedColumns: ['alias', 'nodeId', 'address', 'channels']
}
},
transactions: {
payments: {
maxColumns: 7,
allowedColumns: ['txid', 'address', 'scriptpubkey', 'output', 'value', 'blockheight', 'reserved']
allowedColumns: ['firstPartTimestamp', 'id', 'recipientNodeId', 'recipientNodeAlias', 'recipientAmount', 'description', 'paymentHash', 'paymentPreimage']
},
invoices: {
maxColumns: 7,
allowedColumns: ['timestamp', 'expiresAt', 'receivedAt', 'nodeId', 'description', 'paymentHash', 'amount', 'amountSettled']
}
},
routing: {
forwarding_history: {
maxColumns: 8,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
},
routing_peers: {
maxColumns: 5,
allowedColumns: ['channelId', 'alias', 'events', 'totalAmount', 'totalFee']
}
},
reports: {
routing: {
maxColumns: 8,
allowedColumns: ['timestamp', 'fromChannelId', 'fromShortChannelId', 'fromChannelAlias', 'toChannelId', 'toShortChannelId', 'toChannelAlias', 'amountIn', 'amountOut', 'paymentHash', 'fee']
},
transactions: {
maxColumns: 5,
allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices']
}
}
};

View File

@ -19,16 +19,16 @@ ORDER: Base + typography > general layout + grid > page layout > components
@mixin for_screensize($breakpoint) {
@if $breakpoint == phone {
@media only screen and (max-width: 60rem) { @content }; //600px
@media only screen and (max-width: 37.5em) { @content }; //600px
}
@if $breakpoint == tab-port {
@media only screen and (max-width: 90rem) { @content }; //900px
@media only screen and (max-width: 56.25em) { @content }; //900px
}
@if $breakpoint == tab-land {
@media only screen and (max-width: 120rem) { @content }; //1200px
@media only screen and (max-width: 75em) { @content }; //1200px
}
@if $breakpoint == big-desktop {
@media only screen and (min-width: 180rem) { @content }; //1800px
@media only screen and (min-width: 112.5em) { @content }; //1800px
}
}

View File

@ -147,7 +147,7 @@ body {
.padding-gap-large {
padding: $gap * 2 !important;
@include for_screensize(tab-land) {
padding: $gap !important;
padding: $gap * 4 !important;
}
@include for_screensize(tab-port) {
padding: math.div($gap, 2) !important;