Incomplete lazy load 6

Incomplete lazy load 6
pull/209/head
Shahana Farooqui 5 years ago
parent f3639103c6
commit 0dd25df982

@ -59,14 +59,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.flgLoading[0] = false;
}
});
this.actions$
.pipe(
takeUntil(this.unsubs[1]),
filter((action) => action.type === RTLActions.SET_RTL_CONFIG)
).subscribe((actionPayload: (RTLActions.SetRTLConfig)) => {
if (actionPayload.type === RTLActions.SET_RTL_CONFIG) {
this.actions$.pipe(takeUntil(this.unsubs[1]),
filter((action) => action.type === RTLActions.SET_RTL_CONFIG))
.subscribe((action: (RTLActions.SetRTLConfig)) => {
if (action.type === RTLActions.SET_RTL_CONFIG) {
if (!sessionStorage.getItem('token')) {
if (+actionPayload.payload.sso.rtlSSO) {
if (+action.payload.sso.rtlSSO) {
this.store.dispatch(new RTLActions.Signin(sha256(this.accessKey)));
} else {
this.router.navigate([this.appConfig.sso.logoutRedirectLink]);
@ -79,7 +77,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.settingSidenav.toggle(); // To dynamically update the width to 100% after side nav is closed
setTimeout(() => { this.settingSidenav.toggle(); }, 100);
}
}
}
});
this.userIdle.startWatching();
this.userIdle.onTimerStart().subscribe(count => {});

@ -35,14 +35,14 @@ export class CLRootComponent implements OnInit, OnDestroy {
}
initializeRemainingData() {
this.store.dispatch(new RTLActions.FetchPeers());
this.store.dispatch(new RTLActions.FetchBalance('channels'));
this.store.dispatch(new RTLActions.FetchFees());
this.store.dispatch(new RTLActions.FetchNetwork());
this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'all'}));
this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'pending'}));
this.store.dispatch(new RTLActions.FetchInvoices({num_max_invoices: 25, reversed: true}));
this.store.dispatch(new RTLActions.FetchPayments());
// this.store.dispatch(new RTLActions.FetchPeers());
// this.store.dispatch(new RTLActions.FetchBalance('channels'));
// this.store.dispatch(new RTLActions.FetchNetwork());
// this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'all'}));
// this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'pending'}));
// this.store.dispatch(new RTLActions.FetchInvoices({num_max_invoices: 25, reversed: true}));
// this.store.dispatch(new RTLActions.FetchPayments());
}
ngOnDestroy() {

@ -1,85 +1,3 @@
<div fxLayout="column" fxLayout.gt-sm="row wrap">
<div fxFlex="25" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[2]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center end">
<mat-card-title class="m-0 pt-2">
<h5>Wallet Balance</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<mat-card-content class="mt-1">
<mat-icon class="icon-large">account_balance_wallet</mat-icon>
</mat-card-content>
<span *ngIf="information?.currency_unit; else withoutData">
<h3 *ngIf="selNode?.settings?.satsToBTC; else smallerUnit1">{{BTCtotalBalance | number}} {{information?.currency_unit}}</h3>
<ng-template #smallerUnit1><h3>{{totalBalance | number}} {{information?.smaller_currency_unit}}</h3></ng-template>
</span>
</mat-card-content>
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[2]===true" mode="indeterminate"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card>
</div>
<div fxFlex="25" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Peers</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<mat-card-content class="mt-1">
<mat-icon class="icon-large">group</mat-icon>
</mat-card-content>
<h3 *ngIf="information.num_peers; else zeroPeers">{{totalPeers | number}}</h3>
<ng-template #zeroPeers>
<h3>0</h3>
</ng-template>
</mat-card-content>
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card>
</div>
<div fxFlex="25" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[3]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Channel Balance</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<mat-card-content class="mt-1">
<mat-icon class="icon-large">linear_scale</mat-icon>
</mat-card-content>
<span *ngIf="information?.currency_unit; else withoutData">
<h3 *ngIf="selNode?.settings?.satsToBTC; else smallerUnit2">{{BTCchannelBalance | number}} {{information?.currency_unit}}</h3>
<ng-template #smallerUnit2><h3>{{channelBalance | number}} {{information?.smaller_currency_unit}}</h3></ng-template>
</span>
</mat-card-content>
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[3]===true || flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card>
</div>
<div fxFlex="25" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[0]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Chain Sync Status</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<mat-card-content class="mt-1">
<mat-icon class="icon-large">sync</mat-icon>
</mat-card-content>
<mat-icon *ngIf="information?.synced_to_chain; else notSynced" class="size-30 green sync-to-chain">check_circle</mat-icon>
<ng-template #notSynced>
<mat-icon class="size-30 red">cancel</mat-icon>
</ng-template>
</mat-card-content>
<mat-progress-bar class="mt-minus-5" *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card>
</div>
</div>
<div fxLayout="column" fxLayout.gt-sm="row wrap">
<div fxFlex="25" class="padding-gap">
<div fxLayout="column">
@ -111,127 +29,7 @@
<mat-divider></mat-divider>
</mat-card-content>
</mat-card>
<mat-card fxFlex="100" [ngClass]="{'mt-2 custom-card error-border': flgLoading[5]==='error','mt-2 custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Channel Status</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div fxLayout="column" class="pl-4">
<mat-list fxFlex="100" fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Active</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{activeChannels}}</p></mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxFlex="100" fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Inactive</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{inactiveChannels}}</p></mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxFlex="100" fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Pending</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start"><p class="mat-button-text pt-2">{{pendingChannels}}</p></mat-list-item>
<mat-divider></mat-divider>
</mat-list>
</div>
<mat-progress-bar *ngIf="flgLoading[6]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card-content>
</mat-card>
</div>
</div>
<div fxFlex="40" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[5]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Local-Remote Channel Capacity</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div fxLayout="row" class="card-chnl-balances">
<div fxFlex="100" fxLayoutAlign="center center" *ngIf="flgTotalCalculated">
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorScheme"
[results]="totalBalances"
[yAxisLabel]="yAxisLabel"
[yScaleMax]="maxBalanceValue"
xAxis="false"
yAxis="true"
showYAxis="true"
showDataLabel="true"
tooltipDisabled="true">
</ngx-charts-bar-vertical>
</div>
</div>
<mat-progress-bar *ngIf="flgLoading[5]===true" mode="indeterminate" class="mt-minus-5"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="35" class="padding-gap">
<mat-card [ngClass]="{'custom-card error-border': flgLoading[5]==='error','custom-card': true}">
<mat-card-header class="bg-primary" fxLayoutAlign="center center">
<mat-card-title class="m-0 pt-2">
<h5>Network Information</h5>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div fxLayout="column" class="pl-4 network-info-list">
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="selNode?.settings?.satsToBTC; else smallerUnit6">Network Capacity ({{information?.currency_unit}})</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="selNode?.settings?.satsToBTC; else smallerData6">{{networkInfo?.btc_total_network_capacity | number}}</mat-list-item>
<ng-template #smallerUnit6><mat-list-item fxFlex="65" fxLayoutAlign="start start">Network Capacity ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
<ng-template #smallerData6><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.total_network_capacity | number}}</mat-list-item></ng-template>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Number of Nodes</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.num_nodes | number}}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Number of Channels</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.num_channels | number}}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Max Out Degree</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.max_out_degree | number}}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start">Avg Out Degree</mat-list-item>
<mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.avg_out_degree | number:'1.0-2'}}</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="selNode?.settings?.satsToBTC; else smallerUnit7">Max Channel Size ({{information?.currency_unit}})</mat-list-item>
<ng-template #smallerUnit7><mat-list-item fxFlex="65" fxLayoutAlign="start start">Max Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="selNode?.settings?.satsToBTC; else smallerData7">{{networkInfo?.btc_max_channel_size | number}}</mat-list-item>
<ng-template #smallerData7><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.max_channel_size | number}}</mat-list-item></ng-template>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="selNode?.settings?.satsToBTC; else smallerUnit8">Avg Channel Size ({{information?.currency_unit}})</mat-list-item>
<ng-template #smallerUnit8><mat-list-item fxFlex="65" fxLayoutAlign="start start">Avg Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="selNode?.settings?.satsToBTC; else smallerData8">{{networkInfo?.btc_avg_channel_size | number}}</mat-list-item>
<ng-template #smallerData8><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.avg_channel_size | number:'1.0-2'}}</mat-list-item></ng-template>
<mat-divider></mat-divider>
</mat-list>
<mat-list fxLayoutAlign="start start">
<mat-list-item fxFlex="65" fxLayoutAlign="start start" *ngIf="selNode?.settings?.satsToBTC; else smallerUnit9">Min Channel Size ({{information?.currency_unit}})</mat-list-item>
<ng-template #smallerUnit9><mat-list-item fxFlex="65" fxLayoutAlign="start start">Min Channel Size ({{information?.smaller_currency_unit}})</mat-list-item></ng-template>
<mat-list-item fxFlex="25" fxLayoutAlign="end start" *ngIf="selNode?.settings?.satsToBTC; else smallerData9">{{networkInfo?.btc_min_channel_size | number}}</mat-list-item>
<ng-template #smallerData9><mat-list-item fxFlex="25" fxLayoutAlign="end start">{{networkInfo?.min_channel_size | number}}</mat-list-item></ng-template>
<mat-divider></mat-divider>
</mat-list>
</div>
<mat-progress-bar *ngIf="flgLoading[4]===true" mode="indeterminate"></mat-progress-bar>
<mat-divider></mat-divider>
</mat-card-content>
</mat-card>
</div>
</div>
<ng-template #withoutData><h3>Sats</h3></ng-template>

@ -4,7 +4,7 @@ import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { LoggerService } from '../../shared/services/logger.service';
import { GetInfo, NetworkInfo, Fees, Peer } from '../../shared/models/lndModels';
import { GetInfo, Fees } from '../../shared/models/lndModels';
import { Node } from '../../shared/models/RTLconfig';
import * as fromRTLReducer from '../../shared/store/rtl.reducers';
@ -18,52 +18,12 @@ export class CLHomeComponent implements OnInit, OnDestroy {
public selNode: Node;
public fees: Fees;
public information: GetInfo = {};
public remainder = 0;
public totalPeers = -1;
public totalBalance = '';
public channelBalance = '';
public BTCtotalBalance = '';
public BTCchannelBalance = '';
public networkInfo: NetworkInfo = {};
public flgLoading: Array<Boolean | 'error'> = [true, true, true, true, true, true, true, true]; // 0: Info, 1: Fee, 2: Wallet, 3: Channel, 4: Network
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
public channels: any;
public position = 'below';
public activeChannels = 0;
public inactiveChannels = 0;
public pendingChannels = 0;
public peers: Peer[] = [];
barPadding = 0;
maxBalanceValue = 0;
totalBalances = [...[{'name': 'Local Balance', 'value': 0}, {'name': 'Remote Balance', 'value': 0}]];
flgTotalCalculated = false;
view = [];
yAxisLabel = 'Balance';
colorScheme = {domain: ['#FFFFFF']};
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>) {
switch (true) {
case (window.innerWidth <= 730):
this.view = [250, 352];
break;
case (window.innerWidth > 415 && window.innerWidth <= 730):
this.view = [280, 352];
break;
case (window.innerWidth > 730 && window.innerWidth <= 1024):
this.view = [300, 352];
break;
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.view = [350, 352];
break;
default:
this.view = [300, 352];
break;
}
Object.assign(this, this.totalBalances);
}
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>) {}
ngOnInit() {
this.flgTotalCalculated = false;
this.store.select('rtlRoot')
.pipe(takeUntil(this.unsub[0]))
.subscribe((rtlStore: fromRTLReducer.State) => {
@ -74,19 +34,6 @@ export class CLHomeComponent implements OnInit, OnDestroy {
if (effectsErr.action === 'FetchFees') {
this.flgLoading[1] = 'error';
}
if (effectsErr.action === 'FetchBalance/blockchain') {
this.flgLoading[2] = 'error';
}
if (effectsErr.action === 'FetchBalance/channels') {
this.flgLoading[3] = 'error';
}
if (effectsErr.action === 'FetchNetwork') {
this.flgLoading[4] = 'error';
}
if (effectsErr.action === 'FetchChannels/all') {
this.flgLoading[5] = 'error';
this.flgLoading[6] = 'error';
}
});
this.selNode = rtlStore.selNode;
this.information = rtlStore.information;
@ -99,41 +46,6 @@ export class CLHomeComponent implements OnInit, OnDestroy {
this.flgLoading[1] = (undefined !== this.fees.day_fee_sum) ? false : true;
}
this.totalBalance = rtlStore.blockchainBalance.total_balance;
this.BTCtotalBalance = rtlStore.blockchainBalance.btc_total_balance;
if (this.flgLoading[2] !== 'error') {
this.flgLoading[2] = ('' !== this.totalBalance) ? false : true;
}
this.channelBalance = rtlStore.channelBalance.balance;
this.BTCchannelBalance = rtlStore.channelBalance.btc_balance;
if (this.flgLoading[3] !== 'error') {
this.flgLoading[3] = ('' !== this.channelBalance) ? false : true;
}
this.networkInfo = rtlStore.networkInfo;
if (this.flgLoading[4] !== 'error') {
this.flgLoading[4] = (undefined !== this.networkInfo.num_nodes) ? false : true;
}
this.totalBalances = [...[{'name': 'Local Balance', 'value': +rtlStore.totalLocalBalance}, {'name': 'Remote Balance', 'value': +rtlStore.totalRemoteBalance}]];
this.maxBalanceValue = (rtlStore.totalLocalBalance > rtlStore.totalRemoteBalance) ? rtlStore.totalLocalBalance : rtlStore.totalRemoteBalance;
if (rtlStore.totalLocalBalance >= 0 && rtlStore.totalRemoteBalance >= 0) {
this.flgTotalCalculated = true;
if (this.flgLoading[5] !== 'error') {
this.flgLoading[5] = false;
}
}
this.activeChannels = rtlStore.numberOfActiveChannels;
this.inactiveChannels = rtlStore.numberOfInactiveChannels;
this.pendingChannels = (undefined !== rtlStore.pendingChannels.pending_open_channels) ? rtlStore.pendingChannels.pending_open_channels.length : 0;
if (rtlStore.totalLocalBalance >= 0 && rtlStore.totalRemoteBalance >= 0 && this.flgLoading[6] !== 'error') {
this.flgLoading[6] = false;
}
this.totalPeers = (rtlStore.peers !== null) ? rtlStore.peers.length : 0;
this.logger.info(rtlStore);
});
}

@ -34,9 +34,9 @@ export class LNDRootComponent implements OnInit, OnDestroy {
}
initializeRemainingData() {
this.store.dispatch(new RTLActions.FetchFees());
this.store.dispatch(new RTLActions.FetchPeers());
this.store.dispatch(new RTLActions.FetchBalance('channels'));
this.store.dispatch(new RTLActions.FetchFees());
this.store.dispatch(new RTLActions.FetchNetwork());
this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'all'}));
this.store.dispatch(new RTLActions.FetchChannels({routeParam: 'pending'}));

@ -31,8 +31,8 @@ export class HorizontalNavigationComponent implements OnInit {
.pipe(takeUntil(this.unSubs[0]))
.subscribe((rtlStore: fromRTLReducer.State) => {
this.numPendingChannels = rtlStore.numberOfPendingChannels;
if(+rtlStore.selNode.index === 1) {
this.menuNodes = MENU_DATA.LNDChildren;
if(rtlStore.selNode.lnImplementation.toLowerCase() === 'clightning') {
this.menuNodes = MENU_DATA.CLChildren;
} else {
this.menuNodes = MENU_DATA.LNDChildren;
}

@ -63,7 +63,7 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
ngOnInit() {
this.store.select('rtlRoot')
.pipe(takeUntil(this.unSubs[0]))
.subscribe((rtlStore: fromRTLReducer.State) => {
.subscribe(rtlStore => {
this.selNode = rtlStore.selNode;
this.settings = this.selNode.settings;
this.information = rtlStore.information;
@ -91,18 +91,16 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
if (window.innerWidth <= 414) {
this.smallScreen = true;
}
if(+this.selNode.index === 1) {
this.navMenus.data = MENU_DATA.LNDChildren;
} else {
if(this.selNode && this.selNode.lnImplementation && this.selNode.lnImplementation.toLowerCase() === 'clightning') {
this.navMenus.data = MENU_DATA.CLChildren;
} else {
this.navMenus.data = MENU_DATA.LNDChildren;
}
this.logger.info(rtlStore);
});
this.actions$
.pipe(
takeUntil(this.unSubs[2]),
filter((action) => action.type === RTLActions.SIGNOUT)
).subscribe(() => {
this.actions$.pipe(takeUntil(this.unSubs[2]),
filter((action) => action.type === RTLActions.SIGNOUT))
.subscribe((action: RTLActions.Signout) => {
this.showLogout = false;
});
}

@ -1231,10 +1231,10 @@ export class RTLEffects implements OnDestroy {
this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner());
if (sessionStorage.getItem('token')) {
if(+action.payload.index === 1) {
this.router.navigate(['/lnd/home']);
} else {
if(action.payload.lnImplementation.toLowerCase() === 'clightning') {
this.router.navigate(['/cl/home']);
} else {
this.router.navigate(['/lnd/home']);
}
this.store.dispatch(new RTLActions.ResetStore(action.payload));
return { type: RTLActions.FETCH_INFO };

Loading…
Cancel
Save