Stop and limit fetch process logs

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

embark-ui/src/components/Console.js

@@ -17,10 +17,7 @@ CommandResult.propTypes = {
 class Console extends Component {
   constructor(props) {
     super(props);
-    this.state = {
+    this.state = {value: ''};
-      value: '',
-      selectedProcess: 'Embark'
-    };
   }
 
   handleSubmit(event) {
@@ -43,7 +40,7 @@ class Console extends Component {
         </Logs>
       </Tab>)
     ].concat(processes.map(process => (
-      <Tab title={process.name} key={process.name} onClick={(e, x) => this.clickTab(e, x)}>
+      <Tab title={process.name} key={process.name}>
         <Logs>
           {
             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 (
       <Grid.Row cards className="console">
@@ -66,17 +63,17 @@ class Console extends Component {
             <Card.Body className="console-container">
               <React.Fragment>
                 <TabbedHeader
-                  selectedTitle={selectedProcess}
+                  selectedTitle={this.props.activeProcess}
-                  stateCallback={newProcess => this.setState({selectedProcess: newProcess})}
+                  stateCallback={this.props.updateTab}
                 >
                   {tabs}
                 </TabbedHeader>
-                <TabbedContainer selectedTitle={selectedProcess}>
+                <TabbedContainer selectedTitle={this.props.activeProcess}>
                   {tabs}
                 </TabbedContainer>
               </React.Fragment>
             </Card.Body>
-            {selectedProcess === 'Embark' && <Card.Footer>
+            {this.props.isEmbark() && <Card.Footer>
               <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
                 <Form.Input value={value}
                             onChange={(event) => 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;

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) {
+  isEmbark() {
-    if (!deepEqual(this.props.processes, prevProps.processes)) {
+    return this.state.activeProcess === EMBARK_PROCESS_NAME
-      this.getProcesses(prevProps);
+  }
+
+  updateTab(processName = EMBARK_PROCESS_NAME) {
+    if (!this.isEmbark()){
+      this.props.stopProcessLogs(this.state.activeProcess)
     }
-  }
 
-  getProcesses(prevProps) {
+    if (processName !== EMBARK_PROCESS_NAME) {
-    this.props.processes.forEach(process => {
+      this.props.fetchProcessLogs(processName);
-      this.props.fetchProcessLogs(process.name);
+      this.props.listenToProcessLogs(processName);
-      if (!prevProps || !prevProps.processes.length) {
+    }
-        this.props.listenToProcessLogs(process.name);
+
-      }
+    this.setState({activeProcess: processName});
-    });
   }
 
   render() {
@@ -39,7 +47,13 @@ class HomeContainer extends Component {
         )} />
 
         <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, processLogs}) => (
-          <Console postCommand={postCommand} commands={this.props.commands} processes={processes} processLogs={processLogs} />
+          <Console activeProcess={this.state.activeProcess}
+                   postCommand={postCommand}
+                   commands={this.props.commands}
+                   processes={processes}
+                   processLogs={processLogs}
+                   isEmbark={() => this.isEmbark}
+                   updateTab={processName => this.updateTab(processName)} />
         )} />
       </React.Fragment>
     );
@@ -69,6 +83,7 @@ export default connect(
   {
     postCommand: commandsAction.post,
     fetchProcessLogs: processLogsAction.request,
-    listenToProcessLogs
+    listenToProcessLogs,
+    stopProcessLogs
   }
 )(HomeContainer);

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]));
   }
 }

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)));
       }
     );
   }