machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live 2H graph is now fetched through the websocket.

Browse Source 
Tell the web socket what to fetch with "want" request.
This commit is contained in:
Simon Lindh
2019-07-26 12:48:32 +03:00
parent 057691bdbb
commit c99d2d49d7
10 changed files with 122 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/about/about.component.ts
View File

@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../services/api.service';
@Component({
selector: 'app-about',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
})
export class AboutComponent implements OnInit {
constructor() { }
constructor(
private apiService: ApiService,
) { }
ngOnInit() {
this.apiService.sendWebSocket({'action': 'want', data: []});
}
}

2
frontend/src/app/blockchain/blockchain.component.ts
View File

@@ -26,6 +26,8 @@ export class BlockchainComponent implements OnInit, OnDestroy {
) {}
ngOnInit() {
this.apiService.sendWebSocket({'action': 'want', data: ['stats', 'blocks', 'projected-blocks']});
this.txTrackingSubscription = this.memPoolService.txTracking$
.subscribe((response: ITxTracking) => {
this.txTrackingLoading = false;

1
frontend/src/app/blockchain/interfaces.ts
View File

@@ -12,6 +12,7 @@ export interface IMempoolDefaultResponse {
blocks?: IBlock[];
block?: IBlock;
projectedBlocks?: IProjectedBlock[];
'live-2h-chart'?: IMempoolStats;
txPerSecond?: number;
vBytesPerSecond: number;
'track-tx'?: ITrackTx;

19
frontend/src/app/services/api.service.ts
View File

@@ -13,7 +13,7 @@ const API_BASE_URL = '/api/v1';
providedIn: 'root'
})
export class ApiService {
private websocketSubject: Observable<IMempoolDefaultResponse> = webSocket<IMempoolDefaultResponse | any>(WEB_SOCKET_URL)
private websocketSubject: Observable<IMempoolDefaultResponse> = webSocket<IMempoolDefaultResponse | any>(WEB_SOCKET_URL);
constructor(
private httpClient: HttpClient,
@@ -91,12 +91,16 @@ export class ApiService {
notFound: txShowTxNotFound,
});
}
}),
if (response['live-2h-chart']) {
this.memPoolService.live2Chart$.next(response['live-2h-chart']);
}
},
(err: Error) => {
console.log(err);
console.log('Error, retrying in 10 sec');
setTimeout(() => this.startSubscription(), 10000);
};
});
}
sendWebSocket(data: any) {
@@ -112,15 +116,6 @@ export class ApiService {
return this.httpClient.get<IBlockTransaction[]>(API_BASE_URL + '/transactions/projected/' + index);
}
listLiveStatistics$(lastId: number): Observable<IMempoolStats[]> {
const params = new HttpParams()
.set('lastId', lastId.toString());
return this.httpClient.get<IMempoolStats[]>(API_BASE_URL + '/statistics/live', {
params: params
});
}
list2HStatistics$(): Observable<IMempoolStats[]> {
return this.httpClient.get<IMempoolStats[]>(API_BASE_URL + '/statistics/2h');
}

5
frontend/src/app/services/mem-pool.service.ts
View File

@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { ReplaySubject, BehaviorSubject } from 'rxjs';
import { IMempoolInfo, IBlock, IProjectedBlock, ITransaction } from '../blockchain/interfaces';
import { ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
import { IMempoolInfo, IBlock, IProjectedBlock, ITransaction, IMempoolStats } from '../blockchain/interfaces';
export interface IMemPoolState {
memPoolInfo: IMempoolInfo;
@@ -24,6 +24,7 @@ export class MemPoolService {
txIdSearch$ = new ReplaySubject<string>();
conversions$ = new ReplaySubject<any>();
mempoolWeight$ = new ReplaySubject<number>();
live2Chart$ = new Subject<IMempoolStats>();
txTracking$ = new BehaviorSubject<ITxTracking>({
enabled: false,
tx: null,

65
frontend/src/app/statistics/statistics.component.ts
View File

@@ -9,6 +9,7 @@ import { IMempoolStats } from '../blockchain/interfaces';
import { Subject, of, merge} from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
import { MemPoolService } from '../services/mem-pool.service';
@Component({
selector: 'app-statistics',
@@ -32,14 +33,13 @@ export class StatisticsComponent implements OnInit {
radioGroupForm: FormGroup;
reloadData$: Subject<any> = new Subject();
constructor(
private apiService: ApiService,
@Inject(LOCALE_ID) private locale: string,
private bytesPipe: BytesPipe,
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private memPoolService: MemPoolService,
) {
this.radioGroupForm = this.formBuilder.group({
'dateSpan': '2h'
@@ -47,19 +47,6 @@ export class StatisticsComponent implements OnInit {
}
ngOnInit() {
const now = new Date();
const nextInterval = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(),
Math.floor(now.getMinutes() / 1) * 1 + 1, 0, 0);
const difference = nextInterval.getTime() - now.getTime();
setTimeout(() => {
setInterval(() => {
if (this.radioGroupForm.controls['dateSpan'].value === '2h') {
this.reloadData$.next();
}
}, 60 * 1000);
}, difference + 1000); // Next whole minute + 1 second
const labelInterpolationFnc = (value: any, index: any) => {
const nr = 6;
@@ -156,7 +143,6 @@ export class StatisticsComponent implements OnInit {
merge(
of(''),
this.reloadData$,
this.radioGroupForm.controls['dateSpan'].valueChanges
.pipe(
tap(() => {
@@ -167,46 +153,39 @@ export class StatisticsComponent implements OnInit {
.pipe(
switchMap(() => {
this.spinnerLoading = true;
if (this.radioGroupForm.controls['dateSpan'].value === '6m') {
return this.apiService.list6MStatistics$();
if (this.radioGroupForm.controls['dateSpan'].value === '2h') {
this.apiService.sendWebSocket({'action': 'want', data: ['live-2h-chart']});
return this.apiService.list2HStatistics$();
}
if (this.radioGroupForm.controls['dateSpan'].value === '3m') {
return this.apiService.list3MStatistics$();
}
if (this.radioGroupForm.controls['dateSpan'].value === '1m') {
return this.apiService.list1MStatistics$();
this.apiService.sendWebSocket({'action': 'want', data: ['']});
if (this.radioGroupForm.controls['dateSpan'].value === '24h') {
return this.apiService.list24HStatistics$();
}
if (this.radioGroupForm.controls['dateSpan'].value === '1w') {
return this.apiService.list1WStatistics$();
}
if (this.radioGroupForm.controls['dateSpan'].value === '24h') {
return this.apiService.list24HStatistics$();
if (this.radioGroupForm.controls['dateSpan'].value === '1m') {
return this.apiService.list1MStatistics$();
}
if (this.radioGroupForm.controls['dateSpan'].value === '2h' && !this.mempoolStats.length) {
return this.apiService.list2HStatistics$();
if (this.radioGroupForm.controls['dateSpan'].value === '3m') {
return this.apiService.list3MStatistics$();
}
const lastId = this.mempoolStats[0].id;
return this.apiService.listLiveStatistics$(lastId);
return this.apiService.list6MStatistics$();
})
)
.subscribe((mempoolStats) => {
let hasChange = false;
if (this.radioGroupForm.controls['dateSpan'].value === '2h' && this.mempoolStats.length) {
if (mempoolStats.length) {
this.mempoolStats = mempoolStats.concat(this.mempoolStats);
this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - mempoolStats.length);
hasChange = true;
}
} else {
this.mempoolStats = mempoolStats;
hasChange = true;
}
if (hasChange) {
this.handleNewMempoolData(this.mempoolStats.concat([]));
}
this.mempoolStats = mempoolStats;
this.handleNewMempoolData(this.mempoolStats.concat([]));
this.loading = false;
this.spinnerLoading = false;
});
this.memPoolService.live2Chart$
.subscribe((mempoolStats) => {
this.mempoolStats.unshift(mempoolStats);
this.mempoolStats = this.mempoolStats.slice(0, this.mempoolStats.length - 1);
this.handleNewMempoolData(this.mempoolStats.concat([]));
});
}
handleNewMempoolData(mempoolStats: IMempoolStats[]) {