mirror of
https://github.com/Ride-The-Lightning/RTL.git
synced 2025-02-22 06:21:49 +01:00
Routing
Routing
This commit is contained in:
Shahana Farooqui
parent
d746147280
commit
b7bbf94abf
15 changed files with 352 additions and 397 deletions
File diff suppressed because one or more lines are too long
|
|
@ -9,8 +9,8 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
|
||||
<link rel="stylesheet" href="styles.72af09d2752fe39920ba.css"></head>
|
||||
<link rel="stylesheet" href="styles.c08e367434232493455f.css"></head>
|
||||
<body>
|
||||
<rtl-app></rtl-app>
|
||||
<script src="runtime.0c285080646976a8be5f.js"></script><script src="polyfills-es5.92f4069201c83f4833ef.js" nomodule></script><script src="polyfills.5ddcccdb990eb395f306.js"></script><script src="main.a5b80ff2c34bfc900dc4.js"></script></body>
|
||||
<script src="runtime.d75168f7793ce675c2a6.js"></script><script src="polyfills-es5.92f4069201c83f4833ef.js" nomodule></script><script src="polyfills.5ddcccdb990eb395f306.js"></script><script src="main.a5b80ff2c34bfc900dc4.js"></script></body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"50859d501eab13ab41b8",6:"638c166260ccd0ba5f28",7:"fdc70b63fa397b86320a"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
|
||||
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"50859d501eab13ab41b8",6:"ad453b6e8bc53c913101",7:"fdc70b63fa397b86320a"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);
|
||||
File diff suppressed because one or more lines are too long
1
angular/styles.c08e367434232493455f.css
Normal file
1
angular/styles.c08e367434232493455f.css
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,87 +1,43 @@
|
|||
<div fxLayout="column">
|
||||
<div fxFlex="100" class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-subtitle>
|
||||
<h2>Forwarding History</h2>
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap"
|
||||
(ngSubmit)="fhForm.form.valid && onForwardingHistoryFetch()" #fhForm="ngForm" class="padding-gap">
|
||||
<div fxFlex="69" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="yesterday"
|
||||
name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="endDatepicker" [max]="today" placeholder="End Date" name="endDate"
|
||||
[(ngModel)]="endDate" tabindex="2" #enDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatepicker [startAt]="endDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="30" fxLayoutAlign="space-between stretch">
|
||||
<button fxFlex="50" fxLayoutAlign="center center" mat-raised-button color="primary"
|
||||
[disabled]="fhForm.invalid" type="submit" tabindex="3">Fetch</button>
|
||||
<button fxFlex="50" fxLayoutAlign="center center" mat-stroked-button color="primary" class="ml-2" tabindex="4"
|
||||
type="reset" (click)="resetData()">Clear</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div fxLayout="column" fxFlex="99" class="ml-1">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container">
|
||||
<div fxFlex="70"></div>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-content class="table-card-content">
|
||||
<div perfectScrollbar class="table-container">
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="forwardingHistoryEvents" matSort
|
||||
[ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.timestamp_str}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id_in">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id In</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.chan_id_in}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias_in">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias In</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.alias_in}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id_out">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id Out</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.chan_id_out}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias_out">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias Out</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.alias_out}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amt_out">
|
||||
<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.amt_out | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amt_in">
|
||||
<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.amt_in | number}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee
|
||||
(Sats)</th>
|
||||
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent.fee | number}}</span></td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
(click)="onForwardingEventClick(row, $event)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div perfectScrollbar fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
|
||||
<table mat-table #table [dataSource]="forwardingHistoryEvents" matSort class="overflow-auto">
|
||||
<ng-container matColumnDef="timestamp">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.timestamp_str}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id_in">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.chan_id_in}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id_out">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Channel ID</th>
|
||||
<td mat-cell *matCellDef="let fhEvent">{{fhEvent.chan_id_out}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Fee (Sats)</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-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
|
||||
<td mat-cell *matCellDef="let fhEvent" class="pl-4">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<p *ngIf="!forwardingHistoryEvents.data || forwardingHistoryEvents.data.length<1">No forwarding event available.</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents.data && forwardingHistoryEvents.data.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons class="mb-4"></mat-paginator>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
.mat-column-amt_in {
|
||||
flex: 0 0 15%;
|
||||
min-width: 120px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
.mat-column-actions {
|
||||
flex: 0 0 5%;
|
||||
width: 5%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,58 @@
|
|||
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, filter } from 'rxjs/operators';
|
||||
import { Component, OnInit, OnChanges, ViewChild, Input } from '@angular/core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
|
||||
import { ForwardingEvent } from '../../../shared/models/lndModels';
|
||||
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../shared/services/consts-enums-functions';
|
||||
import { LoggerService } from '../../../shared/services/logger.service';
|
||||
|
||||
import * as RTLActions from '../../../store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../../store/rtl.reducers';
|
||||
import { AlertTypeEnum, DataTypeEnum } from '../../../shared/services/consts-enums-functions';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-forwarding-history',
|
||||
templateUrl: './forwarding-history.component.html',
|
||||
styleUrls: ['./forwarding-history.component.scss']
|
||||
styleUrls: ['./forwarding-history.component.scss'],
|
||||
providers: [
|
||||
{ provide: MatPaginatorIntl, useValue: getPaginatorLabel('Events') }
|
||||
]
|
||||
})
|
||||
export class ForwardingHistoryComponent implements OnInit, OnDestroy {
|
||||
export class ForwardingHistoryComponent implements OnInit, OnChanges {
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
@Input() forwardingHistoryData: any;
|
||||
public displayedColumns = [];
|
||||
public forwardingHistoryEvents: any;
|
||||
public lastOffsetIndex = 0;
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
public today = new Date(Date.now());
|
||||
public yesterday = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 1, this.today.getHours(), this.today.getMinutes(), this.today.getSeconds());
|
||||
public endDate = this.today;
|
||||
public startDate = this.yesterday;
|
||||
public flgSticky = false;
|
||||
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
|
||||
public pageSize = PAGE_SIZE;
|
||||
public pageSizeOptions = PAGE_SIZE_OPTIONS;
|
||||
|
||||
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {
|
||||
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>) {
|
||||
switch (true) {
|
||||
case (window.innerWidth <= 415):
|
||||
this.displayedColumns = ['timestamp', 'amt_out', 'amt_in'];
|
||||
this.displayedColumns = ['timestamp', 'fee', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 415 && window.innerWidth <= 730):
|
||||
this.displayedColumns = ['timestamp', 'amt_out', 'amt_in', 'fee'];
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 730 && window.innerWidth <= 1024):
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions'];
|
||||
break;
|
||||
default:
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'amt_out', 'amt_in', 'fee'];
|
||||
this.displayedColumns = ['timestamp', 'chan_id_in', 'chan_id_out', 'fee', 'actions'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.onForwardingHistoryFetch();
|
||||
this.store.select('lnd')
|
||||
.pipe(takeUntil(this.unsub[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
rtlStore.effectErrorsLnd.forEach(effectsErr => {
|
||||
if (effectsErr.action === 'GetForwardingHistory') {
|
||||
this.flgLoading[0] = 'error';
|
||||
}
|
||||
});
|
||||
if (undefined !== rtlStore.forwardingHistory && undefined !== rtlStore.forwardingHistory.forwarding_events) {
|
||||
this.lastOffsetIndex = rtlStore.forwardingHistory.last_offset_index;
|
||||
this.loadForwardingEventsTable(rtlStore.forwardingHistory.forwarding_events);
|
||||
} else {
|
||||
// To reset table after other Forwarding history calls
|
||||
this.lastOffsetIndex = 0;
|
||||
this.loadForwardingEventsTable([]);
|
||||
}
|
||||
if (this.flgLoading[0] !== 'error') {
|
||||
this.flgLoading[0] = (undefined !== rtlStore.forwardingHistory) ? false : true;
|
||||
}
|
||||
this.logger.info(rtlStore);
|
||||
});
|
||||
ngOnInit() {}
|
||||
|
||||
ngOnChanges() {
|
||||
this.loadForwardingEventsTable(this.forwardingHistoryData);
|
||||
}
|
||||
|
||||
onForwardingEventClick(selRow: ForwardingEvent, event: any) {
|
||||
|
|
@ -83,8 +60,14 @@ export class ForwardingHistoryComponent implements OnInit, OnDestroy {
|
|||
return (fhEvent.chan_id_in === selRow.chan_id_in && fhEvent.timestamp === selRow.timestamp);
|
||||
})[0];
|
||||
const reorderedFHEvent = [
|
||||
[{key: 'alias', value: selFEvent.alias, title: 'Alias', width: 100, type: DataTypeEnum.STRING}]
|
||||
// 'timestamp_str', 'chan_id_in', 'alias_in', 'chan_id_out', 'alias_out', 'amt_out', 'amt_in', 'fee'
|
||||
[{key: 'timestamp_str', value: selFEvent.timestamp_str, title: 'Timestamp', width: 25, type: DataTypeEnum.DATE_TIME},
|
||||
{key: 'amt_in', value: selFEvent.amt_in, title: 'Inbound Amount (Sats)', width: 25, type: DataTypeEnum.NUMBER},
|
||||
{key: 'amt_out', value: selFEvent.amt_out, title: 'Outbound Amount (Sats)', width: 25, type: DataTypeEnum.NUMBER},
|
||||
{key: 'fee', value: selFEvent.fee, title: 'Fee (Sats)', width: 25, type: DataTypeEnum.NUMBER}],
|
||||
[{key: 'alias_in', value: selFEvent.alias_in, title: 'Inbound Peer Alias', width: 25, type: DataTypeEnum.STRING},
|
||||
{key: 'chan_id_in', value: selFEvent.chan_id_in, title: 'Inbound Channel ID', width: 25, type: DataTypeEnum.STRING},
|
||||
{key: 'alias_out', value: selFEvent.alias_out, title: 'Outbound Peer Alias', width: 25, type: DataTypeEnum.STRING},
|
||||
{key: 'chan_id_out', value: selFEvent.chan_id_out, title: 'Outbound Channel ID', width: 25, type: DataTypeEnum.STRING}]
|
||||
];
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: {
|
||||
type: AlertTypeEnum.INFORMATION,
|
||||
|
|
@ -96,37 +79,12 @@ export class ForwardingHistoryComponent implements OnInit, OnDestroy {
|
|||
loadForwardingEventsTable(forwardingEvents: ForwardingEvent[]) {
|
||||
this.forwardingHistoryEvents = new MatTableDataSource<ForwardingEvent>([...forwardingEvents]);
|
||||
this.forwardingHistoryEvents.sort = this.sort;
|
||||
this.forwardingHistoryEvents.paginator = this.paginator;
|
||||
this.logger.info(this.forwardingHistoryEvents);
|
||||
}
|
||||
|
||||
onForwardingHistoryFetch() {
|
||||
if (undefined === this.endDate || this.endDate == null) {
|
||||
this.endDate = new Date();
|
||||
}
|
||||
if (undefined === this.startDate || this.startDate == null) {
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 1);
|
||||
}
|
||||
this.store.dispatch(new RTLActions.GetForwardingHistory({
|
||||
end_time: Math.round(this.endDate.getTime() / 1000).toString(),
|
||||
start_time: Math.round(this.startDate.getTime() / 1000).toString()
|
||||
}));
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.endDate = new Date();
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 1);
|
||||
if (undefined !== this.forwardingHistoryEvents) {
|
||||
this.forwardingHistoryEvents.data = [];
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.resetData();
|
||||
this.store.dispatch(new RTLActions.SetForwardingHistory({}));
|
||||
this.unsub.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
applyFilter(selFilter: string) {
|
||||
this.forwardingHistoryEvents.filter = selFilter;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,114 +1,95 @@
|
|||
<div fxLayout="column">
|
||||
<div fxFlex="100" class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-subtitle>
|
||||
<h2>Routing Peers</h2>
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap"
|
||||
(ngSubmit)="rpForm.form.valid && onRoutingPeersFetch()" #rpForm="ngForm" class="padding-gap">
|
||||
<div fxFlex="69" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="yesterday"
|
||||
name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="endDatepicker" [max]="today" placeholder="End Date" name="endDate"
|
||||
[(ngModel)]="endDate" tabindex="2" #enDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatepicker [startAt]="endDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="30" fxLayoutAlign="space-between stretch">
|
||||
<button fxFlex="50" fxLayoutAlign="center center" mat-raised-button color="primary"
|
||||
[disabled]="rpForm.invalid" type="submit" tabindex="3">Fetch</button>
|
||||
<button fxFlex="50" fxLayoutAlign="center center" mat-stroked-button color="primary" class="ml-2" tabindex="4"
|
||||
type="reset" (click)="resetData()">Clear</button>
|
||||
</div>
|
||||
</form>
|
||||
<mat-card fxLayout="column" fxLayoutAlign.gt-sm="space-between start" fxLayoutAlign.lt-md="space-between stretch"
|
||||
fxLayout.gt-sm="row wrap">
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="table-card-content">
|
||||
<div perfectScrollbar class="table-container">
|
||||
<table mat-table #tableIn [dataSource]="RoutingPeersIncoming" matSort fxFlex="100" class="overflow-auto incoming-table">
|
||||
<ng-container matColumnDef="incoming">
|
||||
<th mat-header-cell *matHeaderCellDef colspan="10">Incoming Traffic</th>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
|
||||
<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="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let rPeer" class="pl-4">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="4"
|
||||
(click)="onRoutingPeerClick(rPeer, $event, 'in')">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_incoming_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<p *ngIf="!RoutingPeersIncoming.data || RoutingPeersIncoming.data.length<1">No incoming routing peer
|
||||
available.</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': RoutingPeersIncoming.data && RoutingPeersIncoming.data.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayIncomingHeader"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
|
||||
<mat-card-content class="table-card-content" fxFlex="100">
|
||||
<div perfectScrollbar class="table-container">
|
||||
<table mat-table #tableOut [dataSource]="RoutingPeersOutgoing" class="overflow-auto outgoing-table">
|
||||
<ng-container matColumnDef="outgoing">
|
||||
<th mat-header-cell *matHeaderCellDef colspan="10">Outgoing Traffic</th>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
|
||||
<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="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let rPeer" class="pl-4">
|
||||
<button mat-stroked-button color="primary" type="button" tabindex="5"
|
||||
(click)="onRoutingPeerClick(rPeer, $event, 'out')">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="no_outgoing_event">
|
||||
<td mat-footer-cell *matFooterCellDef colspan="4">
|
||||
<p *ngIf="!RoutingPeersOutgoing.data || RoutingPeersOutgoing.data.length<1">No outgoing routing peer available.</p>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': RoutingPeersOutgoing.data && RoutingPeersOutgoing.data.length>0}"></tr>
|
||||
<tr mat-header-row *matHeaderRowDef="displayOutgoingHeader"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="padding-gap">
|
||||
<mat-card fxLayout="column" fxLayoutAlign.gt-sm="space-between start" fxLayoutAlign.lt-md="space-between stretch" fxLayout.gt-sm="row wrap">
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
|
||||
<mat-card-header fxFlex="100">
|
||||
<mat-card-subtitle>
|
||||
<h3>Incoming Traffic</h3>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="table-card-content" fxFlex="100">
|
||||
<div perfectScrollbar class="table-container">
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableIn [dataSource]="RoutingPeersIncoming" matSort fxFlex="100"
|
||||
[ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="chan_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
|
||||
<td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span class="ellipsis-child">{{rPeer.chan_id}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span
|
||||
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
(click)="onRoutingPeerClick(row, $event, 'in')"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
|
||||
<mat-card-header fxFlex="100">
|
||||
<mat-card-subtitle>
|
||||
<h3>Outgoing Traffic</h3>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="table-card-content" fxFlex="100">
|
||||
<div perfectScrollbar class="table-container">
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #tableOut [dataSource]="RoutingPeersOutgoing" matSort
|
||||
[ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="chan_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
|
||||
<td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span
|
||||
class="ellipsis-child">{{rPeer.chan_id}}</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
|
||||
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="events">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="total_amount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
|
||||
<td mat-cell *matCellDef="let rPeer"><span
|
||||
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
|
||||
(click)="onRoutingPeerClick(row, $event, 'out')"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,26 @@
|
|||
table {
|
||||
width:100%;
|
||||
.mat-column-actions {
|
||||
flex: 0 0 6%;
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.ellipsis-parent {
|
||||
min-width: 20px;
|
||||
display: flex;
|
||||
padding: 13px 0 13px 24px;
|
||||
.mat-column-chan_id, .mat-column-alias {
|
||||
flex: 0 0 30%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.ellipsis-child {
|
||||
max-width:97%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.mat-column-events, .mat-column-total_amount {
|
||||
flex: 0 0 17%;
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
table.mat-table.incoming-table {
|
||||
border-bottom: none !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
table.mat-table.outgoing-table {
|
||||
border-top: none !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
|
@ -1,6 +1,4 @@
|
|||
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, filter } from 'rxjs/operators';
|
||||
import { Component, OnInit, OnChanges, ViewChild, Input } from '@angular/core';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
||||
|
|
@ -18,91 +16,68 @@ import { AlertTypeEnum, DataTypeEnum } from '../../../shared/services/consts-enu
|
|||
templateUrl: './routing-peers.component.html',
|
||||
styleUrls: ['./routing-peers.component.scss']
|
||||
})
|
||||
export class RoutingPeersComponent implements OnInit, OnDestroy {
|
||||
export class RoutingPeersComponent implements OnInit, OnChanges {
|
||||
@ViewChild(MatSort, { static: true }) sortIn: MatSort;
|
||||
@ViewChild('tableOut', {read: MatSort, static: true}) sortOut: MatSort;
|
||||
@ViewChild(MatSort, { static: true }) sortOut: MatSort;
|
||||
@Input() routingPeersData: any;
|
||||
public displayedColumns = [];
|
||||
public displayIncomingHeader = ['incoming'];
|
||||
public displayOutgoingHeader = ['outgoing'];
|
||||
public RoutingPeersIncoming: any;
|
||||
public RoutingPeersOutgoing: any;
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
public today = new Date(Date.now());
|
||||
public lastMonthDay = new Date(
|
||||
this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 30,
|
||||
this.today.getHours(), this.today.getMinutes(), this.today.getSeconds()
|
||||
);
|
||||
public yesterday = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 1, this.today.getHours(), this.today.getMinutes(), this.today.getSeconds());
|
||||
public endDate = this.today;
|
||||
public startDate = this.lastMonthDay;
|
||||
public flgSticky = false;
|
||||
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
|
||||
|
||||
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {
|
||||
switch (true) {
|
||||
case (window.innerWidth <= 415):
|
||||
this.displayedColumns = ['chan_id', 'events', 'total_amount'];
|
||||
this.displayedColumns = ['chan_id', 'events', 'total_amount', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 415 && window.innerWidth <= 730):
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
|
||||
this.displayedColumns = ['chan_id', 'events', 'total_amount', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 730 && window.innerWidth <= 1024):
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount', 'actions'];
|
||||
break;
|
||||
default:
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
|
||||
this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount', 'actions'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.onRoutingPeersFetch();
|
||||
this.actions$.pipe(takeUntil(this.unsub[2]), filter((action) => action.type === RTLActions.RESET_LND_STORE)).subscribe((resetLndStore: RTLActions.ResetLNDStore) => {
|
||||
this.onRoutingPeersFetch();
|
||||
});
|
||||
this.store.select('lnd')
|
||||
.pipe(takeUntil(this.unsub[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
rtlStore.effectErrorsLnd.forEach(effectsErr => {
|
||||
if (effectsErr.action === 'GetForwardingHistory') {
|
||||
this.flgLoading[0] = 'error';
|
||||
}
|
||||
});
|
||||
if (undefined !== rtlStore.forwardingHistory && undefined !== rtlStore.forwardingHistory.forwarding_events) {
|
||||
this.loadRoutingPeersTable(rtlStore.forwardingHistory.forwarding_events);
|
||||
} else {
|
||||
// To reset table after other Forwarding history calls
|
||||
this.loadRoutingPeersTable([]);
|
||||
}
|
||||
if (this.flgLoading[0] !== 'error') {
|
||||
this.flgLoading[0] = (undefined !== rtlStore.forwardingHistory) ? false : true;
|
||||
}
|
||||
this.logger.info(rtlStore);
|
||||
});
|
||||
ngOnInit() {}
|
||||
|
||||
ngOnChanges() {
|
||||
this.loadRoutingPeersTable(this.routingPeersData);
|
||||
}
|
||||
|
||||
onRoutingPeerClick(selRow: RoutingPeers, event: any, direction: string) {
|
||||
let selRPeer: RoutingPeers = {};
|
||||
let alertTitle = ' Routing Information';
|
||||
if (direction === 'in') {
|
||||
alertTitle = 'Incoming' + alertTitle;
|
||||
selRPeer = this.RoutingPeersIncoming.data.find(rPeer => {
|
||||
return rPeer.chan_id === selRow.chan_id;
|
||||
});
|
||||
} else {
|
||||
alertTitle = 'Outgoing' + alertTitle;
|
||||
selRPeer = this.RoutingPeersOutgoing.data.find(rPeer => {
|
||||
return rPeer.chan_id === selRow.chan_id;
|
||||
});
|
||||
}
|
||||
const reorderedRoutingPeer = [
|
||||
[{key: 'chan_id', value: selRPeer.chan_id, title: 'Channel ID', width: 100, type: DataTypeEnum.STRING}]
|
||||
// 'chan_id', 'alias', 'events', 'total_amount'
|
||||
[{key: 'chan_id', value: selRPeer.chan_id, title: 'Channel ID', width: 50, type: DataTypeEnum.STRING},
|
||||
{key: 'alias', value: selRPeer.alias, title: 'Peer Alias', width: 50, type: DataTypeEnum.STRING}],
|
||||
[{key: 'events', value: selRPeer.events, title: 'Events', width: 50, type: DataTypeEnum.NUMBER},
|
||||
{key: 'total_amount', value: selRPeer.total_amount, title: 'Total Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER}]
|
||||
];
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: {
|
||||
type: AlertTypeEnum.INFORMATION,
|
||||
alertTitle: 'Route Information',
|
||||
alertTitle: alertTitle,
|
||||
message: reorderedRoutingPeer
|
||||
}}));
|
||||
}
|
||||
|
|
@ -145,36 +120,4 @@ export class RoutingPeersComponent implements OnInit, OnDestroy {
|
|||
return [this.commonService.sortDescByKey(incomingResults, 'total_amount'), this.commonService.sortDescByKey(outgoingResults, 'total_amount')];
|
||||
}
|
||||
|
||||
onRoutingPeersFetch() {
|
||||
if (undefined === this.endDate || this.endDate == null) {
|
||||
this.endDate = new Date();
|
||||
}
|
||||
if (undefined === this.startDate || this.startDate == null) {
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 30);
|
||||
}
|
||||
this.store.dispatch(new RTLActions.GetForwardingHistory({
|
||||
end_time: Math.round(this.endDate.getTime() / 1000).toString(),
|
||||
start_time: Math.round(this.startDate.getTime() / 1000).toString()
|
||||
}));
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.endDate = new Date();
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 1);
|
||||
if (undefined !== this.RoutingPeersIncoming) {
|
||||
this.RoutingPeersIncoming.data = [];
|
||||
}
|
||||
if (undefined !== this.RoutingPeersOutgoing) {
|
||||
this.RoutingPeersOutgoing.data = [];
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.resetData();
|
||||
this.unsub.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,44 @@
|
|||
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
|
||||
<fa-icon [icon]="faProjectDiagram" class="page-title-img mr-1"></fa-icon>
|
||||
<span class="page-title">Routing</span>
|
||||
</div>
|
||||
<div fxLayout="column" class="padding-gap-x">
|
||||
<mat-card>
|
||||
<mat-card-content fxLayout="column">
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Forwarding History">
|
||||
<rtl-forwarding-history></rtl-forwarding-history>
|
||||
</mat-tab>
|
||||
<mat-tab label="Routing Peers">
|
||||
<rtl-routing-peers></rtl-routing-peers>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
|
||||
<fa-icon [icon]="faProjectDiagram" class="page-title-img mr-1"></fa-icon>
|
||||
<span class="page-title">Routing</span>
|
||||
</div>
|
||||
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
|
||||
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
|
||||
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap">
|
||||
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100" (ngSubmit)="routingForm.form.valid && onEventsFetch()" #routingForm="ngForm">
|
||||
<div fxFlex="69" fxLayoutAlign="space-between stretch">
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="yesterday"
|
||||
name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="49" fxLayoutAlign="start">
|
||||
<input matInput [matDatepicker]="endDatepicker" [max]="today" placeholder="End Date" name="endDate"
|
||||
[(ngModel)]="endDate" tabindex="2" #enDate="ngModel">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatepicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatepicker [startAt]="endDate"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="30" fxLayoutAlign="space-between center">
|
||||
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()">Clear</button>
|
||||
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="routingForm.invalid" type="submit" tabindex="4">Fetch Events</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxLayout="row" fxFlex="100" [ngClass]="{'error-border w-100 routing-tabs-block': flgLoading[0]==='error', 'w-100 routing-tabs-block': true}">
|
||||
<mat-tab-group fxLayout="column" fxFlex="100">
|
||||
<mat-tab label="Forwarding History">
|
||||
<div class="p-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<rtl-forwarding-history *ngIf="errorMessage === '' && eventsData" [forwardingHistoryData]="eventsData"></rtl-forwarding-history>
|
||||
</mat-tab>
|
||||
<mat-tab label="Routing Peers">
|
||||
<div class="p-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
|
||||
<rtl-routing-peers *ngIf="errorMessage === '' && eventsData" [routingPeersData]="eventsData"></rtl-routing-peers>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,97 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, filter } from 'rxjs/operators';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { LoggerService } from '../../shared/services/logger.service';
|
||||
|
||||
import * as RTLActions from '../../store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../store/rtl.reducers';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-routing',
|
||||
templateUrl: './routing.component.html',
|
||||
styleUrls: ['./routing.component.scss']
|
||||
})
|
||||
export class RoutingComponent implements OnInit {
|
||||
faProjectDiagram = faProjectDiagram;
|
||||
export class RoutingComponent implements OnInit, OnDestroy {
|
||||
public faProjectDiagram = faProjectDiagram;
|
||||
public lastOffsetIndex = 0;
|
||||
public eventsData = [];
|
||||
public today = new Date(Date.now());
|
||||
public lastMonthDay = new Date(
|
||||
this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 30,
|
||||
this.today.getHours(), this.today.getMinutes(), this.today.getSeconds()
|
||||
);
|
||||
public yesterday = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 1, this.today.getHours(), this.today.getMinutes(), this.today.getSeconds());
|
||||
public endDate = this.today;
|
||||
public startDate = this.lastMonthDay;
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
public errorMessage = '';
|
||||
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
|
||||
|
||||
constructor() {}
|
||||
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.onEventsFetch();
|
||||
this.actions$.pipe(takeUntil(this.unSubs[1]), filter((action) => action.type === RTLActions.RESET_LND_STORE))
|
||||
.subscribe((resetLndStore: RTLActions.ResetLNDStore) => {
|
||||
this.onEventsFetch();
|
||||
});
|
||||
this.store.select('lnd')
|
||||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
this.errorMessage = '';
|
||||
rtlStore.effectErrorsLnd.forEach(effectsErr => {
|
||||
if (effectsErr.action === 'GetForwardingHistory') {
|
||||
this.flgLoading[0] = 'error';
|
||||
this.errorMessage = (typeof(effectsErr.message) === 'object') ? JSON.stringify(effectsErr.message) : effectsErr.message;
|
||||
}
|
||||
});
|
||||
if (undefined !== rtlStore.forwardingHistory && undefined !== rtlStore.forwardingHistory.forwarding_events) {
|
||||
this.lastOffsetIndex = rtlStore.forwardingHistory.last_offset_index;
|
||||
this.eventsData = rtlStore.forwardingHistory.forwarding_events;
|
||||
} else {
|
||||
// To reset table after other Forwarding history calls
|
||||
this.lastOffsetIndex = 0;
|
||||
this.eventsData = [];
|
||||
}
|
||||
if (this.flgLoading[0] !== 'error') {
|
||||
this.flgLoading[0] = (undefined !== rtlStore.forwardingHistory) ? false : true;
|
||||
}
|
||||
this.logger.info(rtlStore);
|
||||
});
|
||||
}
|
||||
|
||||
onEventsFetch() {
|
||||
if (undefined === this.endDate || this.endDate == null) {
|
||||
this.endDate = new Date();
|
||||
}
|
||||
if (undefined === this.startDate || this.startDate == null) {
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 30);
|
||||
}
|
||||
this.store.dispatch(new RTLActions.GetForwardingHistory({
|
||||
end_time: Math.round(this.endDate.getTime() / 1000).toString(),
|
||||
start_time: Math.round(this.startDate.getTime() / 1000).toString()
|
||||
}));
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.endDate = new Date();
|
||||
this.startDate = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate() - 1);
|
||||
this.eventsData = [];
|
||||
this.lastOffsetIndex = 0;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.resetData();
|
||||
this.store.dispatch(new RTLActions.SetForwardingHistory({}));
|
||||
this.unSubs.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
|
|||
@ViewChild('sendPaymentForm', { static: true }) form;
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||
faHistory = faHistory;
|
||||
public faHistory = faHistory;
|
||||
public newlyAddedPayment = '';
|
||||
public flgAnimate = true;
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
|
|
|
|||
|
|
@ -193,6 +193,12 @@ body {
|
|||
padding: 1.2rem 2.4rem !important;
|
||||
}
|
||||
|
||||
.routing-tabs-block .mat-tab-body-wrapper {
|
||||
padding: 0 !important;
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
|
||||
.mat-card-actions{
|
||||
display: block;
|
||||
margin-bottom: 1.6rem;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue