Fixed grid paddings

pull/1127/head
ShahanaFarooqui 2 years ago
parent 0ce5107e86
commit 2e54ba92ac

@ -11,7 +11,7 @@ export const listOfferBookmarks = (req, res, next) => {
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Offers', msg: 'Getting Offer Bookmarks..' });
databaseService.find(req.session.selectedNode, CollectionsEnum.OFFERS).then((offers) => {
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Offers', msg: 'Offer Bookmarks Received', data: offers });
res.status(200).json(offers);
res.status(200).json(offers.Offers);
}).catch((errRes) => {
const err = common.handleError(errRes, 'Offers', 'Offer Bookmarks Error', req.session.selectedNode);
return res.status(err.statusCode).json({ message: err.message, error: err.error });

@ -134,3 +134,6 @@ export var CollectionsEnum;
CollectionsEnum["PAGE_SETTINGS"] = "PageSettings";
})(CollectionsEnum || (CollectionsEnum = {}));
export const CollectionFieldsEnum = Object.assign(Object.assign(Object.assign({}, OfferFieldsEnum), PageSettingsFieldsEnum), TableSettingsFieldsEnum);
export const LNDCollection = [CollectionsEnum.PAGE_SETTINGS];
export const ECLCollection = [CollectionsEnum.PAGE_SETTINGS];
export const CLNCollection = [CollectionsEnum.PAGE_SETTINGS, CollectionsEnum.OFFERS];

@ -3,7 +3,7 @@ import { join, dirname, sep } from 'path';
import { fileURLToPath } from 'url';
import { Common } from '../utils/common.js';
import { Logger } from '../utils/logger.js';
import { validateDocument } from '../models/database.model.js';
import { validateDocument, LNDCollection, ECLCollection, CLNCollection } from '../models/database.model.js';
export class DatabaseService {
constructor() {
this.common = Common;
@ -15,9 +15,10 @@ export class DatabaseService {
const { id, selectedNode } = session;
try {
if (!this.nodeDatabase[selectedNode.index]) {
this.nodeDatabase[selectedNode.index] = { adapter: null, data: null };
this.nodeDatabase[selectedNode.index].adapter = new DatabaseAdapter(this.dbDirectory, 'rtldb', selectedNode, id);
this.nodeDatabase[selectedNode.index].data = this.nodeDatabase[selectedNode.index].adapter.fetchData();
this.nodeDatabase[selectedNode.index] = { adapter: null, data: {} };
this.nodeDatabase[selectedNode.index].adapter = new DatabaseAdapter(this.dbDirectory, selectedNode, id);
this.fetchNodeData(selectedNode);
this.logger.log({ selectedNode: selectedNode, level: 'DEBUG', fileName: 'Database', msg: 'Database Loaded', data: this.nodeDatabase[selectedNode.index].data });
}
else {
this.nodeDatabase[selectedNode.index].adapter.insertSession(id);
@ -27,6 +28,31 @@ export class DatabaseService {
this.logger.log({ selectedNode: selectedNode, level: 'ERROR', fileName: 'Database', msg: 'Database Load Error', error: err });
}
}
fetchNodeData(selectedNode) {
switch (selectedNode.ln_implementation) {
case 'CLN':
for (const collectionName in CLNCollection) {
if (CLNCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[CLNCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(CLNCollection[collectionName]);
}
}
break;
case 'ECL':
for (const collectionName in ECLCollection) {
if (ECLCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[ECLCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(ECLCollection[collectionName]);
}
}
break;
default:
for (const collectionName in LNDCollection) {
if (LNDCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[LNDCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(LNDCollection[collectionName]);
}
}
break;
}
}
validateDocument(collectionName, newDocument) {
return new Promise((resolve, reject) => {
const validationRes = validateDocument(collectionName, newDocument);
@ -161,36 +187,53 @@ export class DatabaseService {
}
}
export class DatabaseAdapter {
constructor(dbDirectoryPath, fileName, selNode = null, id = '') {
constructor(dbDirectoryPath, selNode = null, id = '') {
this.dbDirectoryPath = dbDirectoryPath;
this.fileName = fileName;
this.selNode = selNode;
this.id = id;
this.dbFile = '';
this.logger = Logger;
this.common = Common;
this.dbFilePath = '';
this.userSessions = [];
this.dbFile = dbDirectoryPath + sep + fileName + '-node-' + selNode.index + '.json';
this.dbFilePath = dbDirectoryPath + sep + 'node-' + selNode.index;
const oldFileName = dbDirectoryPath + sep + 'rtldb-node-' + selNode.index + '.json';
if (selNode.ln_implementation === 'CLN' && fs.existsSync(oldFileName)) {
this.renameOldDB(oldFileName, selNode);
}
this.insertSession(id);
}
fetchData() {
renameOldDB(oldFileName, selNode = null) {
const newFileName = this.dbFilePath + sep + 'rtldb-' + selNode.ln_implementation + '-Offers.json';
try {
if (!fs.existsSync(this.dbDirectoryPath)) {
fs.mkdirSync(this.dbDirectoryPath);
this.common.createDirectory(this.dbFilePath);
fs.renameSync(oldFileName, newFileName);
}
catch (err) {
this.logger.log({ selectedNode: selNode, level: 'ERROR', fileName: 'Database', msg: 'Rename Old Database Error', error: err });
}
}
fetchData(collectionName) {
try {
if (!fs.existsSync(this.dbFilePath)) {
fs.mkdirSync(this.dbFilePath);
}
}
catch (err) {
return new Error('Unable to Create Directory Error ' + JSON.stringify(err));
}
const collectionFileName = this.dbFilePath + sep + 'rtldb-' + this.selNode.ln_implementation + '-' + collectionName + '.json';
try {
if (!fs.existsSync(this.dbFile)) {
fs.writeFileSync(this.dbFile, '{}');
if (!fs.existsSync(collectionFileName)) {
fs.writeFileSync(collectionFileName, '{}');
}
}
catch (err) {
return new Error('Unable to Create Database File Error ' + JSON.stringify(err));
}
try {
const dataFromFile = fs.readFileSync(this.dbFile, 'utf-8');
return !dataFromFile ? null : JSON.parse(dataFromFile);
const dataFromFile = fs.readFileSync(collectionFileName, 'utf-8');
const dataObj = !dataFromFile ? null : JSON.parse(dataFromFile);
return dataObj;
}
catch (err) {
return new Error('Database Read Error ' + JSON.stringify(err));
@ -202,9 +245,14 @@ export class DatabaseAdapter {
saveData(data) {
try {
if (data) {
const tempFile = this.dbFile + '.tmp';
fs.writeFileSync(tempFile, JSON.stringify(data, null, 2));
fs.renameSync(tempFile, this.dbFile);
for (const collectionName in data) {
if (data.hasOwnProperty(collectionName)) {
const collectionFileName = this.dbFilePath + sep + 'rtldb-' + this.selNode.ln_implementation + '-' + collectionName + '.json';
const tempFile = collectionFileName + '.tmp';
fs.writeFileSync(tempFile, JSON.stringify(data, null, 2));
fs.renameSync(tempFile, collectionFileName);
}
}
}
return true;
}

@ -11,9 +11,9 @@ const databaseService: DatabaseService = Database;
export const listOfferBookmarks = (req, res, next) => {
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Offers', msg: 'Getting Offer Bookmarks..' });
databaseService.find(req.session.selectedNode, CollectionsEnum.OFFERS).then((offers: Offer[]) => {
databaseService.find(req.session.selectedNode, CollectionsEnum.OFFERS).then((offers: any) => {
logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Offers', msg: 'Offer Bookmarks Received', data: offers });
res.status(200).json(offers);
res.status(200).json(offers.Offers);
}).catch((errRes) => {
const err = common.handleError(errRes, 'Offers', 'Offer Bookmarks Error', req.session.selectedNode);
return res.status(err.statusCode).json({ message: err.message, error: err.error });

@ -150,3 +150,7 @@ export type Collections = {
}
export const CollectionFieldsEnum = { ...OfferFieldsEnum, ...PageSettingsFieldsEnum, ...TableSettingsFieldsEnum };
export const LNDCollection = [CollectionsEnum.PAGE_SETTINGS];
export const ECLCollection = [CollectionsEnum.PAGE_SETTINGS];
export const CLNCollection = [CollectionsEnum.PAGE_SETTINGS, CollectionsEnum.OFFERS];

@ -3,7 +3,7 @@ import { join, dirname, sep } from 'path';
import { fileURLToPath } from 'url';
import { Common, CommonService } from '../utils/common.js';
import { Logger, LoggerService } from '../utils/logger.js';
import { Collections, CollectionsEnum, validateDocument } from '../models/database.model.js';
import { Collections, CollectionsEnum, validateDocument, LNDCollection, ECLCollection, CLNCollection } from '../models/database.model.js';
import { CommonSelectedNode } from '../models/config.model.js';
export class DatabaseService {
@ -19,9 +19,10 @@ export class DatabaseService {
const { id, selectedNode } = session;
try {
if (!this.nodeDatabase[selectedNode.index]) {
this.nodeDatabase[selectedNode.index] = { adapter: null, data: null };
this.nodeDatabase[selectedNode.index].adapter = new DatabaseAdapter(this.dbDirectory, 'rtldb', selectedNode, id);
this.nodeDatabase[selectedNode.index].data = this.nodeDatabase[selectedNode.index].adapter.fetchData();
this.nodeDatabase[selectedNode.index] = { adapter: null, data: {} };
this.nodeDatabase[selectedNode.index].adapter = new DatabaseAdapter(this.dbDirectory, selectedNode, id);
this.fetchNodeData(selectedNode);
this.logger.log({ selectedNode: selectedNode, level: 'DEBUG', fileName: 'Database', msg: 'Database Loaded', data: this.nodeDatabase[selectedNode.index].data });
} else {
this.nodeDatabase[selectedNode.index].adapter.insertSession(id);
}
@ -30,6 +31,34 @@ export class DatabaseService {
}
}
fetchNodeData(selectedNode: CommonSelectedNode) {
switch (selectedNode.ln_implementation) {
case 'CLN':
for (const collectionName in CLNCollection) {
if (CLNCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[CLNCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(CLNCollection[collectionName]);
}
}
break;
case 'ECL':
for (const collectionName in ECLCollection) {
if (ECLCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[ECLCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(ECLCollection[collectionName]);
}
}
break;
default:
for (const collectionName in LNDCollection) {
if (LNDCollection.hasOwnProperty(collectionName)) {
this.nodeDatabase[selectedNode.index].data[LNDCollection[collectionName]] = this.nodeDatabase[selectedNode.index].adapter.fetchData(LNDCollection[collectionName]);
}
}
break;
}
}
validateDocument(collectionName, newDocument) {
return new Promise((resolve, reject) => {
const validationRes = validateDocument(collectionName, newDocument);
@ -164,32 +193,48 @@ export class DatabaseService {
export class DatabaseAdapter {
private dbFile = '';
private logger: LoggerService = Logger;
private common: CommonService = Common;
private dbFilePath = '';
private userSessions = [];
constructor(public dbDirectoryPath: string, public fileName: string, private selNode: CommonSelectedNode = null, private id: string = '') {
this.dbFile = dbDirectoryPath + sep + fileName + '-node-' + selNode.index + '.json';
constructor(public dbDirectoryPath: string, private selNode: CommonSelectedNode = null, private id: string = '') {
this.dbFilePath = dbDirectoryPath + sep + 'node-' + selNode.index;
const oldFileName = dbDirectoryPath + sep + 'rtldb-node-' + selNode.index + '.json';
if (selNode.ln_implementation === 'CLN' && fs.existsSync(oldFileName)) { this.renameOldDB(oldFileName, selNode); }
this.insertSession(id);
}
fetchData() {
renameOldDB(oldFileName: string, selNode: CommonSelectedNode = null) {
const newFileName = this.dbFilePath + sep + 'rtldb-' + selNode.ln_implementation + '-Offers.json';
try {
if (!fs.existsSync(this.dbDirectoryPath)) {
fs.mkdirSync(this.dbDirectoryPath);
this.common.createDirectory(this.dbFilePath);
fs.renameSync(oldFileName, newFileName);
} catch (err) {
this.logger.log({ selectedNode: selNode, level: 'ERROR', fileName: 'Database', msg: 'Rename Old Database Error', error: err });
}
}
fetchData(collectionName: string) {
try {
if (!fs.existsSync(this.dbFilePath)) {
fs.mkdirSync(this.dbFilePath);
}
} catch (err) {
return new Error('Unable to Create Directory Error ' + JSON.stringify(err));
}
const collectionFileName = this.dbFilePath + sep + 'rtldb-' + this.selNode.ln_implementation + '-' + collectionName + '.json';
try {
if (!fs.existsSync(this.dbFile)) {
fs.writeFileSync(this.dbFile, '{}');
if (!fs.existsSync(collectionFileName)) {
fs.writeFileSync(collectionFileName, '{}');
}
} catch (err) {
return new Error('Unable to Create Database File Error ' + JSON.stringify(err));
}
try {
const dataFromFile = fs.readFileSync(this.dbFile, 'utf-8');
return !dataFromFile ? null : (<Collections>JSON.parse(dataFromFile));
const dataFromFile = fs.readFileSync(collectionFileName, 'utf-8');
const dataObj = !dataFromFile ? null : (<Collections>JSON.parse(dataFromFile));
return dataObj;
} catch (err) {
return new Error('Database Read Error ' + JSON.stringify(err));
}
@ -202,9 +247,14 @@ export class DatabaseAdapter {
saveData(data: any) {
try {
if (data) {
const tempFile = this.dbFile + '.tmp';
fs.writeFileSync(tempFile, JSON.stringify(data, null, 2));
fs.renameSync(tempFile, this.dbFile);
for (const collectionName in data) {
if (data.hasOwnProperty(collectionName)) {
const collectionFileName = this.dbFilePath + sep + 'rtldb-' + this.selNode.ln_implementation + '-' + collectionName + '.json';
const tempFile = collectionFileName + '.tmp';
fs.writeFileSync(tempFile, JSON.stringify(data, null, 2));
fs.renameSync(tempFile, collectionFileName);
}
}
}
return true;
} catch (err) {

@ -8,7 +8,3 @@
margin-bottom: 0;
list-style-type: none;
}
.pl-3 {
padding-left: 3rem;
}

@ -39,10 +39,10 @@
<td mat-cell *matCellDef="let address"> {{address?.port}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let address" class="pl-1">
<td mat-cell *matCellDef="let address">
<span fxLayoutAlign="end center">
<button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult?.nodeid + '@' + address.address + ':' + address.port" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
</span>

@ -35,34 +35,34 @@
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let hop" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{hop?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="channel">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
<td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.channel}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let hop"> {{hop?.channel}} </td>
</ng-container>
<ng-container matColumnDef="direction">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Direction </th>
<td mat-cell *matCellDef="let hop" class="pl-1"> {{hop?.direction}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Direction </th>
<td mat-cell *matCellDef="let hop"> {{hop?.direction}} </td>
</ng-container>
<ng-container matColumnDef="delay">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Delay </th>
<td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Delay </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.delay | number}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
<td mat-cell *matCellDef="let hop" class="pl-1"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.msatoshi/1000 | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2 pr-3">
<th mat-header-cell *matHeaderCellDef>
<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">
<td mat-cell *matCellDef="let hop" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -74,57 +74,57 @@
</td>
</ng-container>
<ng-container matColumnDef="nodeid">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Node Id </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let lqNode">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{lqNode?.nodeid}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="last_timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Last Announcement At </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">{{((lqNode?.last_timestamp * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Announcement At </th>
<td mat-cell *matCellDef="let lqNode">{{((lqNode?.last_timestamp * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
</ng-container>
<ng-container matColumnDef="compact_lease">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Compact Lease </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">{{ lqNode?.option_will_fund?.compact_lease }}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Compact Lease </th>
<td mat-cell *matCellDef="let lqNode">{{ lqNode?.option_will_fund?.compact_lease }}</td>
</ng-container>
<!-- <ng-container matColumnDef="capacity_channels">
<th mat-header-cell *matHeaderCellDef class="pl-1"> Capacity/Channels </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef> Capacity/Channels </th>
<td mat-cell *matCellDef="let lqNode">
{{lqNode?.node_capacity/100000000 | number:'1.0-2'}} BTC / {{lqNode?.channel_count | number:'1.0-0'}}
</td>
</ng-container> -->
<ng-container matColumnDef="lease_fee">
<th mat-header-cell *matHeaderCellDef class="pl-1"> Lease Fee </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef> Lease Fee </th>
<td mat-cell *matCellDef="let lqNode">
{{lqNode?.option_will_fund?.lease_fee_base_msat/1000 | number:'1.0-0'}} Sats + {{(lqNode?.option_will_fund?.lease_fee_basis/100) | number:'1.2-2'}}%
</td>
</ng-container>
<ng-container matColumnDef="routing_fee">
<th mat-header-cell *matHeaderCellDef class="pl-1"> Routing Fee </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef> Routing Fee </th>
<td mat-cell *matCellDef="let lqNode">
{{lqNode?.option_will_fund?.channel_fee_max_base_msat/1000 | number:'1.0-0'}} Sats + {{lqNode?.option_will_fund?.channel_fee_max_proportional_thousandths * 1000 | number:'1.0-0'}} ppm
</td>
</ng-container>
<ng-container matColumnDef="channel_opening_fee">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Channel Opening Fee (Sats) </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Channel Opening Fee (Sats) </th>
<td mat-cell *matCellDef="let lqNode">
<span fxLayoutAlign="end center">
{{lqNode.channel_opening_fee | number:'1.0-0'}}
</span>
</td>
</ng-container>
<ng-container matColumnDef="funding_weight">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Funding Weight </th>
<td mat-cell *matCellDef="let lqNode" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Funding Weight </th>
<td mat-cell *matCellDef="let lqNode">
<span fxLayoutAlign="end center">
{{lqNode?.option_will_fund?.funding_weight | number:'1.0-0'}}
</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -132,7 +132,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let lqNode" fxLayoutAlign="end center" class="px-3">
<td mat-cell *matCellDef="let lqNode" fxLayoutAlign="end center">
<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>

@ -65,13 +65,13 @@
{{utxo?.blockheight | number}} </span></td>
</ng-container>
<ng-container matColumnDef="reserved">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3"> Reserved </th>
<td mat-cell *matCellDef="let utxo" class="pl-3">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Reserved </th>
<td mat-cell *matCellDef="let utxo">
<span>{{utxo.reserved ? 'Yes' : 'No'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>

@ -16,82 +16,82 @@
</td>
</ng-container>
<ng-container matColumnDef="short_channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Short Channel ID </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Short Channel ID </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.short_channel_id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<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) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.channel_id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="funding_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="connected">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Connected </th>
<td mat-cell *matCellDef="let channel" class="pl-1"> {{(channel?.connected) ? 'Connected' : 'Disconnected'}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Connected </th>
<td mat-cell *matCellDef="let channel"> {{(channel?.connected) ? 'Connected' : 'Disconnected'}} </td>
</ng-container>
<ng-container matColumnDef="our_channel_reserve_satoshis">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Local Reserve (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<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?.our_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="their_channel_reserve_satoshis">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Remote Reserve (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<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?.their_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_total">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Total (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Total (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_total/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="spendable_msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Spendable (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Spendable (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.spendable_msatoshi/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_to_us">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_to_them">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Remote Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-2">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score </th>
<td mat-cell *matCellDef="let channel">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness || 0 | number}}</mat-hint>
</div>
@ -99,7 +99,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -108,7 +108,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center" class="pl-1">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -16,77 +16,77 @@
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<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) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.channel_id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="funding_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="connected">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Connected </th>
<td mat-cell *matCellDef="let channel" class="pl-1"> {{(channel?.connected) ? 'Connected' : 'Disconnected'}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Connected </th>
<td mat-cell *matCellDef="let channel"> {{(channel?.connected) ? 'Connected' : 'Disconnected'}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '22rem'}"> {{CLNChannelPendingState[channel?.state]}} </td>
</ng-container>
<ng-container matColumnDef="our_channel_reserve_satoshis">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Local Reserve (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<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?.our_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="their_channel_reserve_satoshis">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Remote Reserve (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<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?.their_channel_reserve_satoshis | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_total">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Total (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Total (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_total/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="spendable_msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Spendable (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Spendable (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.spendable_msatoshi/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_to_us">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_to_us/1000 | number:channel?.msatoshi_to_us < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="msatoshi_to_them">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Remote Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Balance (Sats) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">
{{channel?.msatoshi_to_them/1000 | number:channel?.msatoshi_to_them < 1000 ? '1.0-4' : '1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-2">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -94,7 +94,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center" class="px-2">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -33,23 +33,23 @@
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef class="pl-2" mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer" class="pl-2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child">{{peer?.id}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="netaddr">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2"> Network Address </th>
<td mat-cell *matCellDef="let peer" class="pl-2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '40rem'}">
<span class="ellipsis-child" *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -57,7 +57,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="px-3">
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
<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>

@ -60,7 +60,7 @@
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent?.fee | number:'1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -68,7 +68,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedEventClick(fhEvent)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -14,55 +14,55 @@
<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 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>
<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>
</ng-container>
<ng-container matColumnDef="in_channel">
<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>
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel Id</th>
<td mat-cell *matCellDef="let fhEvent">{{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">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<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 class="pl-1">Out Channel Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.out_channel}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel Id</th>
<td mat-cell *matCellDef="let fhEvent">{{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">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<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">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent">
<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" 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>
<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>
</ng-container>
<ng-container matColumnDef="out_msatoshi">
<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>
<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>
</ng-container>
<ng-container matColumnDef="fee">
<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>
<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>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1 pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -70,7 +70,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1 pr-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" 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>

@ -48,15 +48,15 @@
<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>
</ng-container>
<ng-container matColumnDef="style">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Style</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.style}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Style</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.style}}</td>
</ng-container>
<ng-container matColumnDef="failreason">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Fail Reason</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{CLNFailReason[fhEvent?.failreason]}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fail Reason</th>
<td mat-cell *matCellDef="let fhEvent">{{CLNFailReason[fhEvent?.failreason]}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -64,7 +64,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="px-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onFailedLocalEventClick(fhEvent)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -221,7 +221,7 @@ export const CLNReducer = createReducer(initCLNState,
on(setPageSettings, (state, { payload }) => {
const newPageSettings: PageSettings[] = [];
CLN_DEFAULT_PAGE_SETTINGS.forEach((defaultPage) => {
const pageSetting = payload.find((p) => p.pageId === defaultPage.pageId) || null;
const pageSetting = payload && Object.keys(payload).length > 0 ? payload.find((p) => p.pageId === defaultPage.pageId) : null;
if (pageSetting) {
const tablesSettings = JSON.parse(JSON.stringify(pageSetting.tables));
pageSetting.tables = []; // To maintain settings order

@ -93,7 +93,7 @@
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.msatoshi_received/1000 | number:invoice?.msatoshi_received < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -101,7 +101,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let invoice" [ngClass]="{'px-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let invoice" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -26,8 +26,8 @@
</td>
</ng-container>
<ng-container matColumnDef="amountMSat">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pr-2"> Amount (Sats) </th>
<td mat-cell *matCellDef="let offersbookmark" class="pr-2"><span fxLayoutAlign="end center">{{(offersbookmark.amountMSat === 0) ? 'Open' : (offersbookmark.amountMSat / 1000) | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let offersbookmark"><span fxLayoutAlign="end center">{{(offersbookmark.amountMSat === 0) ? 'Open' : (offersbookmark.amountMSat / 1000) | number}}</span></td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
@ -42,15 +42,15 @@
<td mat-cell *matCellDef="let offersbookmark">{{offersbookmark.vendor}}</td>
</ng-container>
<ng-container matColumnDef="bolt12">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Invoice </th>
<td mat-cell *matCellDef="let offersbookmark" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Invoice </th>
<td mat-cell *matCellDef="let offersbookmark">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '20rem' : '30rem'}">
<span class="ellipsis-child">{{offersbookmark.bolt12}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -58,7 +58,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let offer" [ngClass]="{'pr-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let offer" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -80,7 +80,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.offersBookmarksJSONArr = offerBMsSeletor.offersBookmarks || [];
if (this.offersBookmarksJSONArr && this.offersBookmarksJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.offersBookmarksJSONArr && this.offersBookmarksJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadOffersTable(this.offersBookmarksJSONArr);
}
this.logger.info(offerBMsSeletor);
@ -88,7 +88,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
}
ngAfterViewInit() {
if (this.offersBookmarksJSONArr && this.offersBookmarksJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.offersBookmarksJSONArr && this.offersBookmarksJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadOffersTable(this.offersBookmarksJSONArr);
}
}

@ -53,7 +53,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -61,7 +61,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let offer" [ngClass]="{'px-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let offer" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -105,7 +105,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.offerJSONArr = offersSeletor.offers || [];
if (this.offerJSONArr && this.offerJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.offerJSONArr && this.offerJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadOffersTable(this.offerJSONArr);
}
this.logger.info(offersSeletor);
@ -113,7 +113,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
}
ngAfterViewInit() {
if (this.offerJSONArr && this.offerJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.offerJSONArr && this.offerJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadOffersTable(this.offerJSONArr);
}
}

@ -85,15 +85,15 @@
</td>
</ng-container>
<ng-container matColumnDef="msatoshi_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="px-1">Sats Sent</th>
<td mat-cell *matCellDef="let payment" class="px-1"><span fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent</th>
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="msatoshi">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="px-1">Sats Received</th>
<td mat-cell *matCellDef="let payment" class="px-1"><span fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Received</th>
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -101,7 +101,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let payment" class="pr-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let payment" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
@ -121,7 +121,7 @@
<span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
</span>
<ng-container *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span pl-3">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">
<span *ngIf="mpp.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
<span *ngIf="mpp.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
</span>
@ -134,7 +134,7 @@
Total Attempts: {{payment?.total_parts}}
</span>
<ng-container *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span pl-3">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">
{{(mpp.created_at * 1000) | date:'dd/MMM/y HH:mm'}}
</span>
</ng-container>
@ -207,7 +207,7 @@
</td>
</ng-container>
<ng-container matColumnDef="group_msatoshi_sent">
<td mat-cell *matCellDef="let payment" class="px-1">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
@ -217,7 +217,7 @@
</td>
</ng-container>
<ng-container matColumnDef="group_msatoshi">
<td mat-cell *matCellDef="let payment" class="px-1">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
@ -227,7 +227,7 @@
</td>
</ng-container>
<ng-container matColumnDef="group_actions">
<td mat-cell *matCellDef="let payment" class="pr-3">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end center">
<button mat-flat-button class="btn-mpp-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
</span>

@ -34,6 +34,9 @@
min-height: 4.2rem;
place-content: center flex-start;
align-items: center;
&:not(:first-of-type) {
padding-left: 3rem;
}
&.ellipsis-parent {
display: flex;
}

@ -8,7 +8,3 @@
margin-bottom: 0;
list-style-type: none;
}
.pl-3 {
padding-left: 3rem;
}

@ -38,10 +38,10 @@
<td mat-cell *matCellDef="let address"> {{address}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let address" class="pl-1">
<td mat-cell *matCellDef="let address">
<span fxLayoutAlign="end center">
<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>

@ -50,10 +50,10 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3">
<th mat-header-cell *matHeaderCellDef>
<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">
<td mat-cell *matCellDef="let hop" 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>

@ -29,8 +29,8 @@
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction?.fees | number}}</span></td>
</ng-container>
<ng-container matColumnDef="confirmations">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pr-2"> Confirmations </th>
<td mat-cell *matCellDef="let transaction" class="pr-2"><span fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Confirmations </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">
{{transaction?.confirmations | number}} </span></td>
</ng-container>
<ng-container matColumnDef="address">
@ -58,7 +58,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -66,7 +66,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let transaction" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -71,8 +71,8 @@
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score </th>
<td mat-cell *matCellDef="let channel">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
</div>
@ -80,7 +80,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -88,7 +88,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" class="pl-1" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -77,8 +77,8 @@
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score </th>
<td mat-cell *matCellDef="let channel">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel?.balancedness || 0 | number}}</mat-hint>
</div>
@ -86,7 +86,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -95,7 +95,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center" class="pl-1">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -63,7 +63,7 @@
{{channel?.feeRatePerKw | number:'1.0-0'}} </span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -71,7 +71,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" class="pl-1" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onChannelClick(channel, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -25,33 +25,33 @@
</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Alias </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> ID </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<span class="ellipsis-child">{{peer?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Network Address </th>
<td mat-cell *matCellDef="let peer" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
<td mat-cell *matCellDef="let peer">
{{peer?.address}}
</td>
</ng-container>
<ng-container matColumnDef="channels">
<th mat-header-cell class="pl-1" *matHeaderCellDef mat-sort-header> Channels </th>
<td mat-cell class="pl-1" *matCellDef="let peer"> {{peer?.channels}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channels </th>
<td mat-cell *matCellDef="let peer"> {{peer?.channels}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -59,7 +59,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="px-1">
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
<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>

@ -26,8 +26,8 @@
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.fromChannelId}}</td>
</ng-container>
<ng-container matColumnDef="fromShortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">In Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.fromShortChannelId}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.fromShortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="fromChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
@ -38,31 +38,31 @@
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.toChannelId}}</td>
</ng-container>
<ng-container matColumnDef="toShortChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Out Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1">{{fhEvent?.toShortChannelId}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel Short Id</th>
<td mat-cell *matCellDef="let fhEvent">{{fhEvent?.toShortChannelId}}</td>
</ng-container>
<ng-container matColumnDef="toChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.toChannelAlias}}</td>
</ng-container>
<ng-container matColumnDef="amountIn">
<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?.amountIn | number}}</span></td>
<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?.amountIn | number}}</span></td>
</ng-container>
<ng-container matColumnDef="amountOut">
<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?.amountOut | number}}</span></td>
<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?.amountOut | number}}</span></td>
</ng-container>
<ng-container matColumnDef="fee">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">Fee Earned (Sats)</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1"><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee Earned (Sats)</th>
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{(fhEvent?.amountIn - fhEvent?.amountOut) | number}}</span></td>
</ng-container>
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent?.paymentHash}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -70,7 +70,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" 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>

@ -7,10 +7,10 @@
}
}
.mat-column-fromChannelId, .mat-column-fromAlias, .mat-column-toChannelId, .mat-column-toAlias, .mat-column-paymentHash {
.mat-column-fromChannelId, .mat-column-fromChannelAlias, .mat-column-toChannelId, .mat-column-toChannelAlias, .mat-column-paymentHash {
padding-left: 1rem;
flex: 1 1 15%;
width: 15%;
flex: 0 0 25%;
width: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

@ -218,7 +218,7 @@ export const ECLReducer = createReducer(initECLState,
on(setPageSettings, (state, { payload }) => {
const newPageSettings: PageSettings[] = [];
ECL_DEFAULT_PAGE_SETTINGS.forEach((defaultPage) => {
const pageSetting = payload.find((p) => p.pageId === defaultPage.pageId) || null;
const pageSetting = payload && Object.keys(payload).length > 0 ? payload.find((p) => p.pageId === defaultPage.pageId) : null;
if (pageSetting) {
const tablesSettings = JSON.parse(JSON.stringify(pageSetting.tables));
pageSetting.tables = []; // To maintain settings order

@ -39,55 +39,55 @@
</td>
</ng-container>
<ng-container matColumnDef="timestamp">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Created </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{(invoice?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
<td mat-cell *matCellDef="let invoice">{{(invoice?.timestamp * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="expiresAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Expiry </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{((invoice?.expiresAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Expiry </th>
<td mat-cell *matCellDef="let invoice">{{((invoice?.expiresAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
</ng-container>
<ng-container matColumnDef="receivedAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Date Settled </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">{{((invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Settled </th>
<td mat-cell *matCellDef="let invoice">{{((invoice?.receivedAt * 1000) | date:'dd/MMM/y HH:mm') || '-'}}</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Node Id </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.nodeId}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Description </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.description}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Payment Hash </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Payment Hash </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{invoice?.paymentHash}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Amount (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let invoice">
<span fxLayoutAlign="end center"> {{invoice?.amount ? (invoice?.amount | number:'1.0-0') : '-'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="amountSettled">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="p1-3"> Amount Settled (Sats) </th>
<td mat-cell *matCellDef="let invoice" class="pl-1">
<td mat-cell *matCellDef="let invoice">
<span fxLayoutAlign="end center"> {{invoice?.amountSettled ? (invoice?.amountSettled | number:'1.0-0') : '-'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1 pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -95,7 +95,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let invoice" [ngClass]="{'pl-1 pr-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let invoice" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -84,7 +84,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -92,7 +92,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let payment" class="px-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let payment" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
@ -111,7 +111,7 @@
Total Attempts: {{payment?.parts?.length || 0}}
</span>
<ng-container *ngIf="payment?.is_expanded">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="start center" class="part-row-span pl-3">
<span *ngFor="let part of payment?.parts" fxLayoutAlign="start center" class="part-row-span">
{{part.timestamp | date:'dd/MMM/y HH:mm'}}
</span>
</ng-container>
@ -212,7 +212,7 @@
</td>
</ng-container>
<ng-container matColumnDef="group_actions">
<td mat-cell *matCellDef="let payment" class="px-3">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end start">
<button mat-flat-button class="btn-part-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment?.is_expanded ? 'Hide' : 'Show'}}</button>
</span>

@ -34,7 +34,10 @@
.part-row-span {
min-height: 4.2rem;
place-content: center flex-start;
align-items: center;
align-items: center;
&:not(:first-of-type) {
padding-left: 3rem;
}
&.ellipsis-parent {
display: flex;
}

@ -8,7 +8,3 @@
margin-bottom: 0;
list-style-type: none;
}
.pl-3 {
padding-left: 3rem;
}

@ -46,10 +46,10 @@
<td mat-cell *matCellDef="let address"> {{address?.addr}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let address" class="pl-1">
<td mat-cell *matCellDef="let address">
<span fxLayoutAlign="end center">
<button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult.node.pub_key + '@' + address.addr" (copied)="onCopyNodeURI($event)">Copy Node URI</button>
</span>

@ -39,8 +39,8 @@
<td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.pub_key}} </td>
</ng-container>
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Channel </th>
<td mat-cell *matCellDef="let hop" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.chan_id}} </td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{hop?.chan_id}} </td>
</ng-container>
<ng-container matColumnDef="tlv_payload">
<th mat-header-cell *matHeaderCellDef mat-sort-header> TLV Payload </th>
@ -65,10 +65,10 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let hop" class="pl-2" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let hop" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -45,7 +45,7 @@
{{transaction?.num_confirmations | number}} </span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -53,7 +53,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="pl-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let transaction" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -32,8 +32,8 @@
</td>
</ng-container>
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Label </th>
<td mat-cell *matCellDef="let utxo" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{utxo.label}}</span>
</span>
@ -48,8 +48,8 @@
</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 utxo" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{utxo?.address}}</span>
</span>
@ -66,7 +66,7 @@
<td mat-cell *matCellDef="let utxo"><span fxLayoutAlign="end center">{{(utxo.confirmations || 0) | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -74,7 +74,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center" class="pl-3">
<td mat-cell *matCellDef="let utxo" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -16,7 +16,7 @@
Active HTLCs: {{channel?.pending_htlcs?.length}}
</span>
<span *ngIf="channel.is_expanded">
<span *ngFor="let htlc of channel?.pending_htlcs; index as i" fxLayoutAlign="start center" class="htlc-row-span pl-3">
<span *ngFor="let htlc of channel?.pending_htlcs; index as i" fxLayoutAlign="start center" class="htlc-row-span">
{{htlc?.amount | number}}
</span>
</span>
@ -84,10 +84,10 @@
</td>
</ng-container>
<ng-container matColumnDef="hash_lock">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-3 htlc-row-span">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="htlc-row-span">
<span fxLayoutAlign="end center" class="htlc-row-span">Hash Lock</span>
</th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<td mat-cell *matCellDef="let channel">
<span fxLayoutAlign="end center" class="htlc-row-span">{{' '}}</span>
<span *ngIf="channel.is_expanded">
<span *ngFor="let htlc of channel?.pending_htlcs" fxLayoutAlign="end center" class="htlc-row-span">
@ -97,7 +97,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-2">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -105,7 +105,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" class="px-2">
<td mat-cell *matCellDef="let channel">
<span fxLayoutAlign="end center">
<button mat-flat-button class="btn-htlc-expand" color="primary" type="button" tabindex="5" (click)="channel.is_expanded = !channel.is_expanded">{{channel.is_expanded ? 'Hide' : 'Show'}}</button>
</span>

@ -13,6 +13,9 @@
min-height: 4.2rem;
place-content: center flex-start;
align-items: center;
&:not(:first-of-type) {
padding-left: 3rem;
}
}
.mat-column-actions {

@ -70,7 +70,7 @@
</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -78,7 +78,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<td mat-cell *matCellDef="let channel">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)" class="table-actions-button">View Info</button>
</span>

@ -119,8 +119,8 @@
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.remote_balance | number}} </span></td>
</ng-container>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-2">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Balance Score </th>
<td mat-cell *matCellDef="let channel">
<div fxLayout="row">
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness || 0 | number}}</mat-hint>
</div>
@ -128,7 +128,7 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -137,7 +137,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center" class="pl-1">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="2" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -3,11 +3,9 @@
.mat-column-active {
max-width: 1.2rem;
width:1.2rem;
padding-right: 0.5rem;
}
.mat-column-private {
padding-right: 0.5rem;
max-width: 1.6rem;
width:1.6rem;
}

@ -43,37 +43,37 @@
</ng-container>
<ng-container matColumnDef="confirmation_height">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Confirmation Height</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center"> {{channel.confirmation_height | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.confirmation_height | number}}</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" class="pl-1"><span fxLayoutAlign="end center">{{channel.commit_fee | number}}</span></td>
<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" class="pl-1"><span fxLayoutAlign="end center">{{channel.commit_weight | number}}</span></td>
<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" class="pl-1"><span fxLayoutAlign="end center">{{channel.fee_per_kw | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.fee_per_kw | 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" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
</ng-container>
<ng-container matColumnDef="local_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="remote_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel">
<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>
@ -145,37 +145,37 @@
</ng-container>
<ng-container matColumnDef="limbo_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.limbo_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.limbo_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="maturity_height">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Maturity Height</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.maturity_height | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.maturity_height | number}}</span></td>
</ng-container>
<ng-container matColumnDef="blocks_til_maturity">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Blocks till Maturity</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.blocks_til_maturity | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.blocks_til_maturity | number}}</span></td>
</ng-container>
<ng-container matColumnDef="recovered_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.recovered_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.recovered_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" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
</ng-container>
<ng-container matColumnDef="local_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="remote_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel">
<button mat-stroked-button color="primary" type="button" tabindex="2" (click)="onForceClosingClick(channel)" class="table-actions-button">View Info</button>
</td>
</ng-container>
@ -241,21 +241,21 @@
</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" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
</ng-container>
<ng-container matColumnDef="local_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="remote_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-2">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel">
<button mat-stroked-button color="primary" type="button" tabindex="3" (click)="onClosingClick(channel)" class="table-actions-button">View Info</button>
</td>
</ng-container>
@ -313,25 +313,25 @@
</ng-container>
<ng-container matColumnDef="limbo_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.limbo_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.limbo_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" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.capacity | number}}</span></td>
</ng-container>
<ng-container matColumnDef="local_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.local_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="remote_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance (Sats)</th>
<td mat-cell *matCellDef="let channel" class="pl-1"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.channel.remote_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell fxLayoutAlign="end center" class="pl-2" *matHeaderCellDef>
<th mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel" class="pl-2">
<td mat-cell fxLayoutAlign="end center" *matCellDef="let channel">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onWaitClosingClick(channel)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -24,41 +24,41 @@
<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>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let peer" [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>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sync Type </th>
<td mat-cell *matCellDef="let peer">{{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>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inbound </th>
<td mat-cell *matCellDef="let peer">{{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>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Bytes Sent </th>
<td mat-cell *matCellDef="let peer"><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>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Bytes Received </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.bytes_recv | number}} </span></td>
</ng-container>
<ng-container matColumnDef="sat_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Sats Sent </th>
<td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Sats Sent </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_sent | number}} </span></td>
</ng-container>
<ng-container matColumnDef="sat_recv">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
Sats Received </th>
<td mat-cell *matCellDef="let peer" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.sat_recv | number}} </span></td>
</ng-container>
<ng-container matColumnDef="ping_time">
<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" class="pl-1"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Ping Time (<span>&#181;</span>s) </th>
<td mat-cell *matCellDef="let peer"><span fxLayoutAlign="end center"> {{peer?.ping_time | number}} </span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -66,7 +66,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="px-3">
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
<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>

@ -14,20 +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 class="pl-1">Inbound Alias</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.alias_in}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Alias</th>
<td mat-cell *matCellDef="let fhEvent" [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>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Channel</th>
<td mat-cell *matCellDef="let fhEvent" [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 class="pl-1">Outbound Alias</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-1" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">{{fhEvent.alias_out}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Alias</th>
<td mat-cell *matCellDef="let fhEvent" [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>
<th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Channel</th>
<td mat-cell *matCellDef="let fhEvent" [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>
@ -42,7 +42,7 @@
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent.fee_msat | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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 +50,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let fhEvent" class="pl-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let fhEvent" 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>

@ -85,10 +85,10 @@
<td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.remote_balance | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let nonRPeer" class="pr-2" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let nonRPeer" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onManagePeer(nonRPeer)">Manage</button>
</td>
</ng-container>

@ -29,10 +29,10 @@
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3">
<th mat-header-cell *matHeaderCellDef>
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
</th>
<td mat-cell *matCellDef="let rPeer" class="pl-2" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let rPeer" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -1200,8 +1200,8 @@ export class LNDEffects implements OnDestroy {
map((settings: any) => {
this.logger.info(settings);
this.store.dispatch(updateLNDAPICallStatus({ payload: { action: 'FetchPageSettings', status: APICallStatusEnum.COMPLETED } }));
this.invoicesPageSize = (settings ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')).recordsPerPage;
this.paymentsPageSize = (settings ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')).recordsPerPage;
this.invoicesPageSize = (settings && Object.keys(settings).length > 0 ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'invoices')).recordsPerPage;
this.paymentsPageSize = (settings && Object.keys(settings).length > 0 ? (settings.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')) : LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === 'transactions')?.tables.find((table) => table.tableId === 'payments')).recordsPerPage;
this.store.dispatch(fetchInvoices({ payload: { num_max_invoices: this.invoicesPageSize, reversed: true } }));
// this.store.dispatch(fetchPayments({ payload: { max_payments: 100000, reversed: true } }));
return {

@ -226,7 +226,7 @@ export const LNDReducer = createReducer(initLNDState,
on(setPageSettings, (state, { payload }) => {
const newPageSettings: PageSettings[] = [];
LND_DEFAULT_PAGE_SETTINGS.forEach((defaultPage) => {
const pageSetting = payload.find((p) => p.pageId === defaultPage.pageId) || null;
const pageSetting = payload && Object.keys(payload).length > 0 ? payload.find((p) => p.pageId === defaultPage.pageId) : null;
if (pageSetting) {
const tablesSettings = JSON.parse(JSON.stringify(pageSetting.tables));
pageSetting.tables = []; // To maintain settings order

@ -64,8 +64,8 @@
{{(invoice?.creation_date * 1000) | date:'dd/MMM/y HH:mm'}}</td>
</ng-container>
<ng-container matColumnDef="settle_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-4"> Date Settled </th>
<td mat-cell *matCellDef="let invoice" class="pl-4">{{(+invoice?.settle_date !== 0 ? ((+invoice?.settle_date * 1000) | date:'dd/MMM/y HH:mm') : '-')}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Settled </th>
<td mat-cell *matCellDef="let invoice">{{(+invoice?.settle_date !== 0 ? ((+invoice?.settle_date * 1000) | date:'dd/MMM/y HH:mm') : '-')}}</td>
</ng-container>
<ng-container matColumnDef="memo">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Memo </th>
@ -140,7 +140,7 @@
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice?.amt_paid_sat | number}} </span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -148,7 +148,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let invoice" [ngClass]="{'pl-3': screenSize !== screenSizeEnum.XS}" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let invoice" fxLayoutAlign="end center">
<div class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="4" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -1,11 +1,9 @@
.mat-column-state {
max-width: 1.2rem;
width:1.2rem;
padding-right: 0.5rem;
}
.mat-column-private, .mat-column-is_keysend, .mat-column-is_amp {
padding-right: 0.5rem;
max-width: 1.6rem;
width:1.6rem;
}

@ -8,7 +8,3 @@
margin-bottom: 0;
list-style-type: none;
}
.pl-3 {
padding-left: 3rem;
}

@ -103,7 +103,7 @@
<td mat-cell *matCellDef="let payment"><span fxLayoutAlign="end center">{{payment?.htlcs[0]?.route?.hops?.length || 0}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-2">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -111,7 +111,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let payment" class="px-2" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let payment" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onPaymentClick(payment)" class="table-actions-button">View Info</button>
</td>
</ng-container>
@ -130,7 +130,7 @@
<span *ngIf="payment?.status !== 'SUCCEEDED'" class="dot red" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
</span>
<ng-container *ngIf="payment?.is_expanded">
<span *ngFor="let htlc of payment?.htlcs" fxLayoutAlign="start center" class="htlc-row-span pl-3">
<span *ngFor="let htlc of payment?.htlcs" fxLayoutAlign="start center" class="htlc-row-span">
<span *ngIf="htlc.status === 'SUCCEEDED'" class="dot green" matTooltip="Succeeded" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="htlc.status !== 'SUCCEEDED'" class="dot red" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
</span>
@ -143,7 +143,7 @@
Total Attempts: {{payment?.htlcs?.length}}
</span>
<ng-container *ngIf="payment?.is_expanded">
<span *ngFor="let htlc of payment?.htlcs" fxLayoutAlign="start center" class="htlc-row-span pl-3">
<span *ngFor="let htlc of payment?.htlcs" fxLayoutAlign="start center" class="htlc-row-span">
{{(htlc.attempt_time_ns / 1000000) | date:'dd/MMM/y HH:mm'}}
</span>
</ng-container>
@ -258,7 +258,7 @@
</td>
</ng-container>
<ng-container matColumnDef="group_actions">
<td mat-cell *matCellDef="let payment" class="px-2">
<td mat-cell *matCellDef="let payment">
<span fxLayoutAlign="end center">
<button mat-flat-button class="btn-htlc-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment?.is_expanded">{{payment?.is_expanded ? 'Hide' : 'Show'}}</button>
</span>

@ -1,5 +1,6 @@
.mat-column-status, .mat-column-group_status {
width: 1.5rem;
max-width: 1.2rem;
width: 1.2rem;
}
.mat-column-payment_hash, .mat-column-payment_request, .mat-column-payment_preimage, .mat-column-description, .mat-column-description_hash {
@ -33,6 +34,9 @@
min-height: 4.2rem;
place-content: center flex-start;
align-items: center;
&:not(:first-of-type) {
padding-left: 3rem;
}
&.ellipsis-parent {
display: flex;
}

@ -17,97 +17,97 @@
<td mat-cell *matCellDef="let swap">{{swapStateEnum[swap?.status]}}</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Swap ID </th>
<td mat-cell *matCellDef="let swap" class="pl-1">{{swap?.id}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Swap ID </th>
<td mat-cell *matCellDef="let swap">{{swap?.id}}</td>
</ng-container>
<ng-container matColumnDef="claimAddress">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Claim Address </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Claim Address </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.claimAddress}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="lockupAddress">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Lockup Address </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Lockup Address </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.lockupAddress}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="onchainAmount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Onchain Amount (Sats) </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Onchain Amount (Sats) </th>
<td mat-cell *matCellDef="let swap">
<span fxLayoutAlign="end center">{{swap?.onchainAmount | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="expectedAmount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Expected Amount (Sats) </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Expected Amount (Sats) </th>
<td mat-cell *matCellDef="let swap">
<span fxLayoutAlign="end center">{{swap?.expectedAmount | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="error">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Error </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Error </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.error}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="privateKey">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Private Key </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Private Key </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.privateKey}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="preimage">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Preimage </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Preimage </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.preimage}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="redeemScript">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Redeem Script </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Redeem Script </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.redeemScript}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="invoice">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Invoice </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Invoice </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.invoice}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="timeoutBlockHeight">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" class="pl-1"> Timeout Block Height </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Timeout Block Height </th>
<td mat-cell *matCellDef="let swap">
<span fxLayoutAlign="end center">{{swap?.timeoutBlockHeight | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="lockupTransactionId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Lockup Tx ID </th>
<td mat-cell *matCellDef="let swap" class="pl-1">{{swap?.lockupTransactionId}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Lockup Tx ID </th>
<td mat-cell *matCellDef="let swap">{{swap?.lockupTransactionId}}</td>
</ng-container>
<ng-container matColumnDef="claimTransactionId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Claim Tx ID </th>
<td mat-cell *matCellDef="let swap" class="pl-1">{{swap?.claimTransactionId}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Claim Tx ID </th>
<td mat-cell *matCellDef="let swap">{{swap?.claimTransactionId}}</td>
</ng-container>
<ng-container matColumnDef="refundTransactionId">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Refund Tx ID </th>
<td mat-cell *matCellDef="let swap" class="pl-1">{{swap?.refundTransactionId}}</td>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Refund Tx ID </th>
<td mat-cell *matCellDef="let swap">{{swap?.refundTransactionId}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-1 pr-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -115,7 +115,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let swap" class="pl-1" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let swap" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4"
(click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
</td>

@ -44,31 +44,31 @@
{{swap?.cost_onchain | number}} </span></td>
</ng-container>
<ng-container matColumnDef="htlc_address">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> HTLC Address </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> HTLC Address </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.htlc_address}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> ID </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.id}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="id_bytes">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> ID (Bytes) </th>
<td mat-cell *matCellDef="let swap" class="pl-1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID (Bytes) </th>
<td mat-cell *matCellDef="let swap">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span class="ellipsis-child">{{swap?.id_bytes}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -76,7 +76,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let swap" class="pl-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let swap" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4"
(click)="onSwapClick(swap, $event)" class="table-actions-button">View Info</button>
</td>

@ -30,7 +30,7 @@
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction?.num_invoices | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="px-3">
<th mat-header-cell *matHeaderCellDef>
<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>
@ -38,7 +38,7 @@
</mat-select>
</div>
</th>
<td mat-cell *matCellDef="let transaction" class="px-3" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let transaction" fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onTransactionClick(transaction)" class="table-actions-button">View Info</button>
</td>
</ng-container>

@ -718,7 +718,7 @@ export const CLN_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
columnSelection: ['offer_id', 'single_use', 'used'] },
{ tableId: 'offer_bookmarks', recordsPerPage: PAGE_SIZE, sortBy: 'lastUpdatedAt', sortOrder: SortOrderEnum.DESCENDING,
columnSelectionSM: ['lastUpdatedAt', 'amountMSat'],
columnSelection: ['lastUpdatedAt', 'title', 'amountMSat', 'description'] }
columnSelection: ['lastUpdatedAt', 'title', 'description', 'amountMSat'] }
] },
{ pageId: 'routing', tables: [
{ tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING,
@ -800,7 +800,7 @@ export const CLN_TABLES_DEF = {
},
offer_bookmarks: {
maxColumns: 6,
allowedColumns: ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'vendor', 'bolt12']
allowedColumns: ['lastUpdatedAt', 'title', 'description', 'vendor', 'bolt12', 'amountMSat']
}
},
routing: {

@ -652,6 +652,16 @@ mat-cell:last-of-type, mat-header-cell:last-of-type, mat-footer-cell:last-of-typ
}
}
.pl-5px {
padding-left: 0.5rem !important;
@include for_screensize(tab-port) {
padding-left: 0.4rem !important;
}
@include for_screensize(phone) {
padding-left: 0.3rem !important;
}
}
.pl-1 {
padding-left: 1rem !important;
@include for_screensize(tab-port) {
@ -710,6 +720,10 @@ mat-cell:last-of-type, mat-header-cell:last-of-type, mat-footer-cell:last-of-typ
padding-right: 0.4rem !important;
}
.pr-6px {
padding-right: 0.6rem !important;
}
.p-0 {
padding: 0 !important;
}
@ -1343,7 +1357,7 @@ th.mat-header-cell:last-of-type, td.mat-cell:last-of-type, td.mat-footer-cell:la
width: $dot-size;
height: $dot-size;
border-radius: $dot-size;
margin: 0.4rem 1rem 0 0;
margin: 0.4rem 0 0 0;
&.tiny-dot {
width: $tiny-dot-size;
height: $tiny-dot-size;

@ -190,6 +190,9 @@
thead tr th {
color: $foreground-base;
}
thead tr th:not(:first-of-type), tbody tr td:not(:first-of-type) {
padding-left: 1rem;
}
&.error-border {
border: 1px solid red;
box-shadow: 0 3px 1px -2px rgba(255,0,0,.2), 0 2px 2px 0 rgba(255,0,0,.14), 0 1px 5px 0 rgba(255,0,0,.12) !important;

Loading…
Cancel
Save