diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index 3ba18dd7..4fb6b2c6 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -256,6 +256,7 @@ export const gasOracle = { // Web Socket export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS'; +export const STOP_NEW_PROCESS_LOGS = 'STOP_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'; @@ -269,6 +270,13 @@ export function listenToProcessLogs(processName) { }; } +export function stopProcessLogs(processName) { + return { + type: STOP_NEW_PROCESS_LOGS, + processName + }; +} + export function listenToContractLogs() { return { type: WATCH_NEW_CONTRACT_LOGS diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js index 85cd0218..cfdc897d 100644 --- a/embark-ui/src/components/Console.js +++ b/embark-ui/src/components/Console.js @@ -17,10 +17,7 @@ CommandResult.propTypes = { class Console extends Component { constructor(props) { super(props); - this.state = { - value: '', - selectedProcess: 'Embark' - }; + this.state = {value: ''}; } handleSubmit(event) { @@ -43,7 +40,7 @@ class Console extends Component { ) ].concat(processes.map(process => ( - this.clickTab(e, x)}> + { processLogs.filter((item) => item.name === process.name) @@ -57,7 +54,7 @@ class Console extends Component { render() { const tabs = this.renderTabs(); - const {selectedProcess, value} = this.state; + const {value} = this.state; return ( @@ -66,17 +63,17 @@ class Console extends Component { this.setState({selectedProcess: newProcess})} + selectedTitle={this.props.activeProcess} + stateCallback={this.props.updateTab} > {tabs} - + {tabs} - {selectedProcess === 'Embark' && + {this.props.isEmbark() &&
this.handleSubmit(event)} autoComplete="off"> this.handleChange(event)} @@ -93,9 +90,11 @@ class Console extends Component { Console.propTypes = { postCommand: PropTypes.func, + isEmbark: PropTypes.func, commands: PropTypes.arrayOf(PropTypes.object).isRequired, processes: PropTypes.arrayOf(PropTypes.object).isRequired, - processLogs: PropTypes.arrayOf(PropTypes.object).isRequired + processLogs: PropTypes.arrayOf(PropTypes.object).isRequired, + updateTab: PropTypes.func }; export default Console; diff --git a/embark-ui/src/containers/HomeContainer.js b/embark-ui/src/containers/HomeContainer.js index 9e16a303..f3566852 100644 --- a/embark-ui/src/containers/HomeContainer.js +++ b/embark-ui/src/containers/HomeContainer.js @@ -3,31 +3,39 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import {Page} from "tabler-react"; -import {commands as commandsAction, listenToProcessLogs, processLogs as processLogsAction} from "../actions"; +import {commands as commandsAction, listenToProcessLogs, processLogs as processLogsAction, stopProcessLogs} from "../actions"; import DataWrapper from "../components/DataWrapper"; import Processes from '../components/Processes'; import Console from '../components/Console'; import {getProcesses, getCommands, getProcessLogs} from "../reducers/selectors"; -import deepEqual from 'deep-equal'; + +const EMBARK_PROCESS_NAME = 'Embark'; class HomeContainer extends Component { + constructor(props) { + super(props); + this.state = { activeProcess: EMBARK_PROCESS_NAME }; + } + componentDidMount() { - this.getProcesses(); + this.updateTab(); } - componentDidUpdate(prevProps) { - if (!deepEqual(this.props.processes, prevProps.processes)) { - this.getProcesses(prevProps); + isEmbark() { + return this.state.activeProcess === EMBARK_PROCESS_NAME + } + + updateTab(processName = EMBARK_PROCESS_NAME) { + if (!this.isEmbark()){ + this.props.stopProcessLogs(this.state.activeProcess) } - } - getProcesses(prevProps) { - this.props.processes.forEach(process => { - this.props.fetchProcessLogs(process.name); - if (!prevProps || !prevProps.processes.length) { - this.props.listenToProcessLogs(process.name); - } - }); + if (processName !== EMBARK_PROCESS_NAME) { + this.props.fetchProcessLogs(processName); + this.props.listenToProcessLogs(processName); + } + + this.setState({activeProcess: processName}); } render() { @@ -39,7 +47,13 @@ class HomeContainer extends Component { )} /> 0 } {...this.props} render={({processes, postCommand, processLogs}) => ( - + this.isEmbark} + updateTab={processName => this.updateTab(processName)} /> )} /> ); @@ -69,6 +83,7 @@ export default connect( { postCommand: commandsAction.post, fetchProcessLogs: processLogsAction.request, - listenToProcessLogs + listenToProcessLogs, + stopProcessLogs } )(HomeContainer); diff --git a/embark-ui/src/sagas/index.js b/embark-ui/src/sagas/index.js index fa36f190..fea051df 100644 --- a/embark-ui/src/sagas/index.js +++ b/embark-ui/src/sagas/index.js @@ -231,7 +231,16 @@ export function *listenToProcessLogs(action) { const socket = api.webSocketProcess(credentials, action.processName); const channel = yield call(createChannel, socket); while (true) { - const processLog = yield take(channel); + const { cancel, processLog } = yield race({ + processLog: take(channel), + cancel: take(actions.STOP_NEW_PROCESS_LOGS) + }); + + if (cancel && action.processName === cancel.processName) { + channel.close(); + return; + } + yield put(actions.processLogs.success([processLog])); } } diff --git a/lib/core/processes/processLauncher.js b/lib/core/processes/processLauncher.js index acdceea0..59b7ae86 100644 --- a/lib/core/processes/processLauncher.js +++ b/lib/core/processes/processLauncher.js @@ -85,7 +85,7 @@ class ProcessLauncher { 'get', apiRoute, (req, res) => { - res.send(JSON.stringify(self.logs)); + res.send(JSON.stringify(self.logs.slice(-50))); } ); }