basic implementation of tabs for process logs

embark-ui/src/actions/index.js

@@ -64,7 +64,7 @@ export const processes = {
 
 export const COMMANDS = createRequestTypes('COMMANDS');
 export const commands = {
-  post: (command) => action(COMMANDS[REQUEST], {command}),
+  post: (command) => action(COMMANDS[REQUEST], {command, noLoading: true}),
   success: (command) => action(COMMANDS[SUCCESS], {commands: [{timestamp: new Date().getTime(), ...command}]}),
   failure: (error) => action(COMMANDS[FAILURE], {error})
 };

embark-ui/src/components/Console.js

@@ -1,7 +1,10 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Grid, Card, Form} from 'tabler-react';
+import {Grid, Card, Form, Tabs, Tab} from 'tabler-react';
+import Logs from "./Logs";
+import Convert from 'ansi-to-html';
 
+const convert = new Convert();
 require('./Console.css');
 
 const CommandResult = ({result}) => (
@@ -30,6 +33,7 @@ class Console extends Component {
   }
 
   render() {
+    const {processLogs, processes, commands}= this.props;
     return (
       <Grid.Row cards className="console">
         <Grid.Col>
@@ -37,18 +41,36 @@ class Console extends Component {
             <Card.Header>
               <Card.Title>Embark console</Card.Title>
             </Card.Header>
-            <Card.Body className="console--results">
+            <Card.Body >
-              <div>
+              <Tabs initialTab="Embark">
-                {this.props.commands.map((command, index) => <CommandResult key={index} result={command.result} />)}
+                <Tab title="Embark">
-              </div>
+                  <Logs>
+                    {commands.map((command, index) => <CommandResult key={index} result={command.result}/>)}
+                  </Logs>
+                </Tab>
+                {processes.map(process => {
+                  return (
+                    <Tab title={process.name} key={process.name}>
+                      <Logs>
+                        {
+                          processLogs.filter((item) => item.name === process.name)
+                            .map((item, i) => <p key={i} className={item.logLevel}
+                                                          dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
+                        }
+                      </Logs>
+                    </Tab>
+                  );
+                })}
+              </Tabs>
+
             </Card.Body>
             <Card.Footer>
-              <Form onSubmit={(event) => this.handleSubmit(event)}>
+              <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
                 <Form.Input value={this.state.value}
                             onChange={(event) => this.handleChange(event)}
                             name="command"
                             placeholder="Type a command (e.g help)" />
-              </Form>
+              </form>
             </Card.Footer>
           </Card>
         </Grid.Col>
@@ -59,7 +81,9 @@ class Console extends Component {
 
 Console.propTypes = {
   postCommand: PropTypes.func,
-  commands: PropTypes.arrayOf(PropTypes.object)
+  commands: PropTypes.arrayOf(PropTypes.object).isRequired,
+  processes: PropTypes.arrayOf(PropTypes.object).isRequired,
+  processLogs: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
 export default Console;

embark-ui/src/containers/HomeContainer.js

@@ -3,14 +3,23 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Page} from "tabler-react";
 
-import {commands as commandsAction} from "../actions";
+import {commands as commandsAction, listenToProcessLogs, processLogs as processLogsAction} from "../actions";
 import DataWrapper from "../components/DataWrapper";
 import Processes from '../components/Processes';
 import Versions from '../components/Versions';
 import Console from '../components/Console';
-import {getProcesses, getCommands, getVersions} from "../reducers/selectors";
+import {getProcesses, getCommands, getVersions, getProcessLogs} from "../reducers/selectors";
 
 class HomeContainer extends Component {
+  componentDidMount() {
+    if (this.props.processLogs.length === 0) {
+      // TODO get all
+      this.props.fetchProcessLogs('blockchain');
+      this.props.fetchProcessLogs('ipfs');
+      this.props.listenToProcessLogs('blockchain');
+    }
+  }
+
   render() {
     return (
       <React.Fragment>
@@ -21,7 +30,10 @@ class HomeContainer extends Component {
         <DataWrapper shouldRender={this.props.versions.length > 0 } {...this.props} render={({versions}) => (
           <Versions versions={versions} />
         )} />
-        <Console postCommand={this.props.postCommand} commands={this.props.commands} />
+
+        <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, processLogs}) => (
+          <Console postCommand={postCommand} commands={this.props.commands} processes={processes} processLogs={processLogs} />
+        )} />
       </React.Fragment>
     );
   }
@@ -42,6 +54,7 @@ function mapStateToProps(state) {
     processes: getProcesses(state),
     commands: getCommands(state),
     error: state.errorMessage,
+    processLogs: getProcessLogs(state),
     loading: state.loading
   };
 }
@@ -49,6 +62,8 @@ function mapStateToProps(state) {
 export default connect(
   mapStateToProps,
   {
-    postCommand: commandsAction.post
+    postCommand: commandsAction.post,
+    fetchProcessLogs: processLogsAction.request,
+    listenToProcessLogs
   }
 )(HomeContainer);

embark-ui/src/reducers/selectors.js

@@ -48,6 +48,10 @@ export function getProcess(state, name) {
   return state.entities.processes.find((process) => process.name === name);
 }
 
+export function getProcessLogs(state) {
+  return state.entities.processLogs;
+}
+
 export function getProcessLogsByProcess(state, processName) {
   return state.entities.processLogs.filter((processLog => processLog.name === processName));
 }