From d6b348a8695e625909ea554ea2ebff960ef83079 Mon Sep 17 00:00:00 2001 From: Anthony Laibe Date: Thu, 4 Oct 2018 15:25:35 +0100 Subject: [PATCH] Disable websocket and limit the number of record --- embark-ui/src/actions/index.js | 7 +++++++ embark-ui/src/containers/AppContainer.js | 3 --- embark-ui/src/containers/BlocksContainer.js | 13 +++++++++++-- .../src/containers/TransactionsContainer.js | 13 +++++++++++-- embark-ui/src/reducers/index.js | 8 ++++++++ embark-ui/src/sagas/index.js | 16 ++++++++++++---- 6 files changed, 49 insertions(+), 11 deletions(-) diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index b80f5f24c..e4bee207c 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -258,6 +258,7 @@ export const gasOracle = { export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS'; export const WATCH_NEW_CONTRACT_LOGS = 'WATCH_NEW_CONTRACT_LOGS'; export const INIT_BLOCK_HEADER = 'INIT_BLOCK_HEADER'; +export const STOP_BLOCK_HEADER = 'STOP_BLOCK_HEADER'; export const WATCH_GAS_ORACLE = 'WATCH_GAS_ORACLE'; export function listenToProcessLogs(processName) { @@ -279,6 +280,12 @@ export function initBlockHeader(){ }; } +export function stopBlockHeader(){ + return { + type: STOP_BLOCK_HEADER + }; +} + export function listenToGasOracle(){ return { type: WATCH_GAS_ORACLE diff --git a/embark-ui/src/containers/AppContainer.js b/embark-ui/src/containers/AppContainer.js index b305c77e6..c39376404 100644 --- a/embark-ui/src/containers/AppContainer.js +++ b/embark-ui/src/containers/AppContainer.js @@ -7,7 +7,6 @@ import Unauthenticated from '../components/Unauthenticated'; import Layout from "../components/Layout"; import { - initBlockHeader, authenticate, fetchCredentials, logout, processes as processesAction, versions as versionsAction, @@ -51,7 +50,6 @@ class AppContainer extends Component { } if (this.props.credentials.authenticated && !this.props.initialized) { - this.props.initBlockHeader(); this.props.fetchProcesses(); this.props.fetchVersions(); this.props.fetchPlugins(); @@ -98,7 +96,6 @@ function mapStateToProps(state) { export default withRouter(connect( mapStateToProps, { - initBlockHeader, authenticate: authenticate.request, logout: logout.request, fetchCredentials: fetchCredentials.request, diff --git a/embark-ui/src/containers/BlocksContainer.js b/embark-ui/src/containers/BlocksContainer.js index f2ada3a6a..7420a01e5 100644 --- a/embark-ui/src/containers/BlocksContainer.js +++ b/embark-ui/src/containers/BlocksContainer.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import PropTypes from 'prop-types'; -import {blocks as blocksAction} from '../actions'; +import {blocks as blocksAction, initBlockHeader, stopBlockHeader} from '../actions'; import Blocks from '../components/Blocks'; import DataWrapper from "../components/DataWrapper"; import LoadMore from "../components/LoadMore"; @@ -11,6 +11,11 @@ import {getBlocks} from "../reducers/selectors"; class BlocksContainer extends Component { componentDidMount() { this.props.fetchBlocks(); + this.props.initBlockHeader(); + } + + componentWillUnmount() { + this.props.stopBlockHeader(); } loadMore() { @@ -44,6 +49,8 @@ function mapStateToProps(state) { BlocksContainer.propTypes = { blocks: PropTypes.arrayOf(PropTypes.object), fetchBlocks: PropTypes.func, + initBlockHeader: PropTypes.func, + stopBlockHeader: PropTypes.func, error: PropTypes.string, loading: PropTypes.bool }; @@ -51,6 +58,8 @@ BlocksContainer.propTypes = { export default connect( mapStateToProps, { - fetchBlocks: blocksAction.request + fetchBlocks: blocksAction.request, + initBlockHeader, + stopBlockHeader }, )(BlocksContainer); diff --git a/embark-ui/src/containers/TransactionsContainer.js b/embark-ui/src/containers/TransactionsContainer.js index 63ab3a09e..b50807c33 100644 --- a/embark-ui/src/containers/TransactionsContainer.js +++ b/embark-ui/src/containers/TransactionsContainer.js @@ -2,7 +2,7 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import PropTypes from 'prop-types'; -import {transactions as transactionsAction} from '../actions'; +import {transactions as transactionsAction, initBlockHeader, stopBlockHeader} from '../actions'; import LoadMore from "../components/LoadMore"; import Transactions from '../components/Transactions'; import DataWrapper from "../components/DataWrapper"; @@ -11,6 +11,11 @@ import {getTransactions} from "../reducers/selectors"; class TransactionsContainer extends Component { componentDidMount() { this.props.fetchTransactions(); + this.props.initBlockHeader(); + } + + componentWillUnmount() { + this.props.stopBlockHeader(); } loadMore() { @@ -44,6 +49,8 @@ function mapStateToProps(state) { TransactionsContainer.propTypes = { transactions: PropTypes.arrayOf(PropTypes.object), fetchTransactions: PropTypes.func, + initBlockHeader: PropTypes.func, + stopBlockHeader: PropTypes.func, error: PropTypes.string, loading: PropTypes.bool }; @@ -51,6 +58,8 @@ TransactionsContainer.propTypes = { export default connect( mapStateToProps, { - fetchTransactions: transactionsAction.request + fetchTransactions: transactionsAction.request, + initBlockHeader, + stopBlockHeader }, )(TransactionsContainer); diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index dda7cde4e..0bc254a27 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -4,6 +4,7 @@ import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE const BN_FACTOR = 10000; const VOID_ADDRESS = '0x0000000000000000000000000000000000000000'; const DEFAULT_HOST = 'localhost:8000'; +const MAX_ELEMENTS = 200; const entitiesDefaultState = { accounts: [], @@ -65,9 +66,16 @@ const filtrer = { return index === self.findIndex((t) => t.address === account.address); }, blocks: function(block, index, self) { + if (index > MAX_ELEMENTS) { + return false; + } + return index === self.findIndex((t) => t.number === block.number); }, transactions: function(tx, index, self) { + if (index > MAX_ELEMENTS) { + return false; + } return index === self.findIndex((t) => ( t.blockNumber === tx.blockNumber && t.transactionIndex === tx.transactionIndex )); diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js index bcaea5c71..7f2d9a64b 100644 --- a/embark-ui/src/sagas/index.js +++ b/embark-ui/src/sagas/index.js @@ -2,7 +2,7 @@ import * as actions from '../actions'; import * as api from '../services/api'; import * as storage from '../services/storage'; import {eventChannel} from 'redux-saga'; -import {all, call, fork, put, takeEvery, take, select} from 'redux-saga/effects'; +import {all, call, fork, put, takeEvery, take, select, race} from 'redux-saga/effects'; import {getCredentials} from '../reducers/selectors'; function *doRequest(entity, serviceFn, payload) { @@ -208,9 +208,17 @@ export function *initBlockHeader() { const socket = api.webSocketBlockHeader(credentials); const channel = yield call(createChannel, socket); while (true) { - yield take(channel); - yield put({type: actions.BLOCKS[actions.REQUEST], noLoading: true}); - yield put({type: actions.TRANSACTIONS[actions.REQUEST], noLoading: true}); + const { cancel } = yield race({ + task: take(channel), + cancel: take(actions.STOP_BLOCK_HEADER) + }); + + if (cancel) { + channel.close(); + return; + } + yield put({type: actions.BLOCKS[actions.REQUEST]}); + yield put({type: actions.TRANSACTIONS[actions.REQUEST]}); } }