From 2afd690db00ffceb140aa8ce6e6b2e8b63706c5f Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 13:08:13 -0400
Subject: [PATCH 01/10] convert ansi colors to spans

---
 embark-ui/package.json              | 1 +
 embark-ui/src/components/Process.js | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/embark-ui/package.json b/embark-ui/package.json
index 3804bdd4..1032f1fb 100644
--- a/embark-ui/package.json
+++ b/embark-ui/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "ace-mode-solidity": "^0.1.0",
+    "ansi-to-html": "^0.6.6",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^4.3.0",
diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
index 6475b007..c13b411c 100644
--- a/embark-ui/src/components/Process.js
+++ b/embark-ui/src/components/Process.js
@@ -1,16 +1,18 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Page} from "tabler-react";
+import Convert from 'ansi-to-html';
+const convert = new Convert();
 
 class Process extends Component {
   render() {
     const {processLogs, process}= this.props;
     return (
-      <Page.Content className="text-capitalize" title={process.name}>
+      <Page.Content title={process.name}>
         <p className="text-capitalize">State: {process.state}</p>
         <div className="logs">
           {
-            processLogs.map((item, i) => <p key={i} className={item.logLevel}>{item.msg_clear || item.msg}</p>)
+            processLogs.map((item, i) => <p key={i} className={item.logLevel} dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
           }
         </div>
       </Page.Content>

From c506b5a3ef57c8ba2d7c6fff9c3f94e96cb77c81 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 13:15:08 -0400
Subject: [PATCH 02/10] caapitalize  header correctly

---
 embark-ui/src/components/Process.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
index c13b411c..8c114a41 100644
--- a/embark-ui/src/components/Process.js
+++ b/embark-ui/src/components/Process.js
@@ -8,7 +8,8 @@ class Process extends Component {
   render() {
     const {processLogs, process}= this.props;
     return (
-      <Page.Content title={process.name}>
+      <Page.Content>
+        <Page.Header><Page.Title className="text-capitalize">{process.name}</Page.Title></Page.Header>
         <p className="text-capitalize">State: {process.state}</p>
         <div className="logs">
           {

From 43734a6462ea321be68c2d0385dbd02e799690fb Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 16:21:41 -0400
Subject: [PATCH 03/10] add autoscroll and limit height

---
 embark-ui/src/components/Logs.js    | 14 ++++++++++++
 embark-ui/src/components/Process.js |  6 +++--
 embark-ui/src/general.css           | 35 ++++++++++++++++++++---------
 3 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 embark-ui/src/components/Logs.js

diff --git a/embark-ui/src/components/Logs.js b/embark-ui/src/components/Logs.js
new file mode 100644
index 00000000..d762a8cb
--- /dev/null
+++ b/embark-ui/src/components/Logs.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import autoscroll from 'autoscroll-react';
+
+class Logs extends React.Component {
+  render() {
+    return (
+      <div className="logs" {...this.props}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default autoscroll(Logs);
diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
index 8c114a41..215ef3c9 100644
--- a/embark-ui/src/components/Process.js
+++ b/embark-ui/src/components/Process.js
@@ -2,6 +2,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Page} from "tabler-react";
 import Convert from 'ansi-to-html';
+import Logs from './Logs';
+
 const convert = new Convert();
 
 class Process extends Component {
@@ -11,11 +13,11 @@ class Process extends Component {
       <Page.Content>
         <Page.Header><Page.Title className="text-capitalize">{process.name}</Page.Title></Page.Header>
         <p className="text-capitalize">State: {process.state}</p>
-        <div className="logs">
+        <Logs>
           {
             processLogs.map((item, i) => <p key={i} className={item.logLevel} dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
           }
-        </div>
+        </Logs>
       </Page.Content>
     );
   }
diff --git a/embark-ui/src/general.css b/embark-ui/src/general.css
index e2aac6ab..cbd018ec 100644
--- a/embark-ui/src/general.css
+++ b/embark-ui/src/general.css
@@ -1,22 +1,27 @@
 .logs {
-  margin:  10px 0;
+  margin: 10px 0;
   background-color: #333333;
   font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   font-size: 14px;
   color: white;
   padding: 10px;
   border-radius: 8px;
+  max-height: 400px;
+  overflow: auto;
 }
 
 .logs .error {
   color: #dc3546;
 }
+
 .logs .warn {
   color: #fec107;
 }
+
 .logs .debug {
   color: #b7c1cc;
 }
+
 .logs .trace {
   color: #8f98a2;
 }
@@ -25,38 +30,48 @@
   white-space: pre-wrap;
   font-family: monospace;
 }
-.card.card-fullscreen{
+
+.card.card-fullscreen {
   z-index: 6;
 }
-.card.warnings-card, .card.errors-card{
+
+.card.warnings-card, .card.errors-card {
   text-transform: capitalize;
 }
-.card.warnings-card .card-options a, .card.errors-card .card-options a{
-  cursor:pointer;
+
+.card.warnings-card .card-options a, .card.errors-card .card-options a {
+  cursor: pointer;
 }
+
 .compilation-summary {
   float: right;
   margin-bottom: 3px;
   visibility: hidden;
 }
-.compilation-summary.visible{
+
+.compilation-summary.visible {
   visibility: visible;
 }
-.compilation-summary .badge-link:not(:last-child){
+
+.compilation-summary .badge-link:not(:last-child) {
   margin-right: 5px;
 }
+
 .ace_editor {
   margin-bottom: 24px;
 }
-.loader, .loader:before, .loader:after{
+
+.loader, .loader:before, .loader:after {
   width: 1.2rem;
   height: 1.2rem;
 }
-.loader:before, .loader:after{
+
+.loader:before, .loader:after {
   margin: -0.6rem 0 0 -0.6rem;
   left: 0;
 }
-.loader, .loader-text{
+
+.loader, .loader-text {
   display: inline-block;
   vertical-align: top;
   padding-left: 0.6rem;

From 3499e7ad31e304859d442561c6808b87aea5cb50 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 17:02:40 -0400
Subject: [PATCH 04/10] basic implementation of tabs for process logs

---
 embark-ui/src/actions/index.js            |  2 +-
 embark-ui/src/components/Console.js       | 40 ++++++++++++++++++-----
 embark-ui/src/containers/HomeContainer.js | 23 ++++++++++---
 embark-ui/src/reducers/selectors.js       |  4 +++
 4 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js
index 0dc4bf8a..1e6d936a 100644
--- a/embark-ui/src/actions/index.js
+++ b/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})
 };
diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 8093c45a..a6667d60 100644
--- a/embark-ui/src/components/Console.js
+++ b/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">
-              <div>
-                {this.props.commands.map((command, index) => <CommandResult key={index} result={command.result} />)}
-              </div>
+            <Card.Body >
+              <Tabs initialTab="Embark">
+                <Tab title="Embark">
+                  <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;
diff --git a/embark-ui/src/containers/HomeContainer.js b/embark-ui/src/containers/HomeContainer.js
index cd714274..7be08163 100644
--- a/embark-ui/src/containers/HomeContainer.js
+++ b/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);
diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js
index b5bc403d..115344c6 100644
--- a/embark-ui/src/reducers/selectors.js
+++ b/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));
 }

From 2ded8e24e6e322a82af60359816d873a812f14b2 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 17:39:37 -0400
Subject: [PATCH 05/10] fetch all processes

---
 embark-ui/src/components/Console.css      |  6 ------
 embark-ui/src/components/Console.js       |  1 -
 embark-ui/src/containers/HomeContainer.js | 12 ++++++------
 3 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 embark-ui/src/components/Console.css

diff --git a/embark-ui/src/components/Console.css b/embark-ui/src/components/Console.css
deleted file mode 100644
index c2656b73..00000000
--- a/embark-ui/src/components/Console.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.console--results {
-  height: 200px;
-  overflow-y: scroll;
-  background-color: #000000;
-  color: #ffffff;
-}
diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index a6667d60..15ed3ed9 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -5,7 +5,6 @@ import Logs from "./Logs";
 import Convert from 'ansi-to-html';
 
 const convert = new Convert();
-require('./Console.css');
 
 const CommandResult = ({result}) => (
   <p className="text__new-line">{result}</p>
diff --git a/embark-ui/src/containers/HomeContainer.js b/embark-ui/src/containers/HomeContainer.js
index 7be08163..883cfb72 100644
--- a/embark-ui/src/containers/HomeContainer.js
+++ b/embark-ui/src/containers/HomeContainer.js
@@ -11,12 +11,12 @@ import Console from '../components/Console';
 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');
+  componentDidUpdate(prevProps) {
+    if (!prevProps.processes.length) {
+      this.props.processes.forEach(process => {
+        this.props.fetchProcessLogs(process.name);
+        this.props.listenToProcessLogs(process.name);
+      });
     }
   }
 

From f5397469b18ceff0b0000326205de5dc24b3614c Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 18:15:19 -0400
Subject: [PATCH 06/10] only show footer when embark tab

---
 embark-ui/src/components/Console.js | 77 +++++++++++++++++------------
 embark-ui/src/general.css           | 11 ++++-
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 15ed3ed9..14d78c1d 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Grid, Card, Form, Tabs, Tab} from 'tabler-react';
+import {Grid, Card, Form, Tabs, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
 import Logs from "./Logs";
 import Convert from 'ansi-to-html';
 
@@ -17,7 +17,10 @@ CommandResult.propTypes = {
 class Console extends Component {
   constructor(props) {
     super(props);
-    this.state = {value: ''};
+    this.state = {
+      value: '',
+      selectedProcess: 'Embark'
+    };
   }
 
   handleSubmit(event) {
@@ -31,46 +34,56 @@ class Console extends Component {
     this.setState({value: event.target.value});
   }
 
+  renderTabs() {
+    const {processLogs, processes, commands} = this.props;
+    return [
+      (<Tab title="Embark" key="Embark">
+        <Logs>
+          {commands.map((command, index) => <CommandResult key={index} result={command.result}/>)}
+        </Logs>
+      </Tab>)
+    ].concat(processes.map(process => (
+      <Tab title={process.name} key={process.name} onClick={(e, x) => this.clickTab(e, x)}>
+        <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>
+    )));
+  }
+
   render() {
-    const {processLogs, processes, commands}= this.props;
+    const tabs = this.renderTabs();
+    const {selectedProcess, value} = this.state;
+
     return (
       <Grid.Row cards className="console">
         <Grid.Col>
           <Card>
-            <Card.Header>
-              <Card.Title>Embark console</Card.Title>
-            </Card.Header>
-            <Card.Body >
-              <Tabs initialTab="Embark">
-                <Tab title="Embark">
-                  <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 className="console-container">
+              <React.Fragment>
+                <TabbedHeader
+                  selectedTitle={selectedProcess}
+                  stateCallback={newProcess => this.setState({selectedProcess: newProcess})}
+                >
+                  {tabs}
+                </TabbedHeader>
+                <TabbedContainer selectedTitle={selectedProcess}>
+                  {tabs}
+                </TabbedContainer>
+              </React.Fragment>
             </Card.Body>
-            <Card.Footer>
+            {selectedProcess === 'Embark' && <Card.Footer>
               <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
-                <Form.Input value={this.state.value}
+                <Form.Input value={value}
                             onChange={(event) => this.handleChange(event)}
                             name="command"
-                            placeholder="Type a command (e.g help)" />
+                            placeholder="Type a command (e.g help)"/>
               </form>
-            </Card.Footer>
+            </Card.Footer>}
           </Card>
         </Grid.Col>
       </Grid.Row>
diff --git a/embark-ui/src/general.css b/embark-ui/src/general.css
index cbd018ec..e5596a33 100644
--- a/embark-ui/src/general.css
+++ b/embark-ui/src/general.css
@@ -6,7 +6,7 @@
   color: white;
   padding: 10px;
   border-radius: 8px;
-  max-height: 400px;
+  max-height: 350px;
   overflow: auto;
 }
 
@@ -26,6 +26,15 @@
   color: #8f98a2;
 }
 
+.console-container {
+  padding-top: 5px;
+  padding-bottom: 15px;
+}
+
+.console-container .nav-link {
+  text-transform: capitalize;
+}
+
 .text__new-line, .card.warnings-card .list-group-item, .card.errors-card .list-group-item {
   white-space: pre-wrap;
   font-family: monospace;

From 6908341f923c3c8e54eb548780e9099ed6f54ba7 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Wed, 5 Sep 2018 18:20:25 -0400
Subject: [PATCH 07/10] remove old process things

---
 embark-ui/src/components/Layout.js           |  1 -
 embark-ui/src/components/Process.js          | 31 ----------
 embark-ui/src/components/ProcessesLayout.js  | 64 --------------------
 embark-ui/src/containers/ProcessContainer.js | 55 -----------------
 embark-ui/src/routes.js                      |  2 -
 5 files changed, 153 deletions(-)
 delete mode 100644 embark-ui/src/components/Process.js
 delete mode 100644 embark-ui/src/components/ProcessesLayout.js
 delete mode 100644 embark-ui/src/containers/ProcessContainer.js

diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js
index e2619d97..212da010 100644
--- a/embark-ui/src/components/Layout.js
+++ b/embark-ui/src/components/Layout.js
@@ -9,7 +9,6 @@ const navBarItems = [
   {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink},
   {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: NavLink},
   {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: NavLink},
-  {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: NavLink},
   {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: NavLink},
   {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: NavLink}
 ];
diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js
deleted file mode 100644
index 215ef3c9..00000000
--- a/embark-ui/src/components/Process.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {Page} from "tabler-react";
-import Convert from 'ansi-to-html';
-import Logs from './Logs';
-
-const convert = new Convert();
-
-class Process extends Component {
-  render() {
-    const {processLogs, process}= this.props;
-    return (
-      <Page.Content>
-        <Page.Header><Page.Title className="text-capitalize">{process.name}</Page.Title></Page.Header>
-        <p className="text-capitalize">State: {process.state}</p>
-        <Logs>
-          {
-            processLogs.map((item, i) => <p key={i} className={item.logLevel} dangerouslySetInnerHTML={{__html: convert.toHtml(item.msg)}}></p>)
-          }
-        </Logs>
-      </Page.Content>
-    );
-  }
-}
-
-Process.propTypes = {
-  process: PropTypes.object,
-  processLogs: PropTypes.arrayOf(PropTypes.object)
-};
-
-export default Process;
diff --git a/embark-ui/src/components/ProcessesLayout.js b/embark-ui/src/components/ProcessesLayout.js
deleted file mode 100644
index 8036aad5..00000000
--- a/embark-ui/src/components/ProcessesLayout.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import PropTypes from "prop-types";
-import React, {Component} from 'react';
-import connect from "react-redux/es/connect/connect";
-import {NavLink, Route, Switch,  Redirect} from 'react-router-dom';
-import {
-  Page,
-  Grid,
-  List
-} from "tabler-react";
-
-import ProcessContainer from '../containers/ProcessContainer';
-import {getProcesses} from "../reducers/selectors";
-import Loading from "./Loading";
-
-const routePrefix = '/embark/processes';
-
-class ProcessesLayout extends Component {
-  render() {
-    if (this.props.processes.length === 0) {
-      return <Loading />;
-    }
-    return (<Grid.Row>
-      <Grid.Col md={3}>
-        <Page.Title className="my-5">Processes</Page.Title>
-        <div>
-          <List.Group transparent={true}>
-            {this.props.processes.map((process, index) => {
-              return (<List.GroupItem
-                className="d-flex align-items-center text-capitalize"
-                to={`${routePrefix}/${process.name}`}
-                key={'process-' + process.name}
-                active={index === 0 && this.props.match.isExact === true}
-                RootComponent={NavLink}
-              >
-                {process.name}
-              </List.GroupItem>);
-            })}
-
-          </List.Group>
-        </div>
-      </Grid.Col>
-      <Grid.Col md={9}>
-        <Switch>
-          <Route exact path={`${routePrefix}/:processName`} component={() => <ProcessContainer />} />
-          <Redirect exact from={`${routePrefix}/`} to={`${routePrefix}/${this.props.processes[0].name}`} />
-        </Switch>
-      </Grid.Col>
-    </Grid.Row>);
-  }
-}
-
-ProcessesLayout.propTypes = {
-  processes: PropTypes.arrayOf(PropTypes.object),
-  match: PropTypes.object
-};
-
-function mapStateToProps(state) {
-  return {processes: getProcesses(state)};
-}
-
-export default connect(
-  mapStateToProps
-)(ProcessesLayout);
-
diff --git a/embark-ui/src/containers/ProcessContainer.js b/embark-ui/src/containers/ProcessContainer.js
deleted file mode 100644
index 37baf5df..00000000
--- a/embark-ui/src/containers/ProcessContainer.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import PropTypes from 'prop-types';
-import {withRouter} from "react-router-dom";
-import {processLogs as processLogsAction, listenToProcessLogs} from '../actions';
-import DataWrapper from "../components/DataWrapper";
-import Process from "../components/Process";
-import {getProcess, getProcessLogsByProcess} from "../reducers/selectors";
-
-class ProcessContainer extends Component {
-  componentDidMount() {
-    if (this.props.process.state === 'running' && this.props.processLogs.length === 0) {
-      this.props.fetchProcessLogs(this.props.match.params.processName);
-      this.props.listenToProcessLogs(this.props.match.params.processName);
-    }
-  }
-
-  render() {
-    return (
-      <DataWrapper shouldRender={this.props.process !== undefined } {...this.props} render={({process, processLogs}) => (
-        <div className="processes-container">
-          <Process process={process}
-                   processLogs={processLogs}/>
-        </div>
-      )} />
-    );
-  }
-}
-
-ProcessContainer.propTypes = {
-  fetchProcessLogs: PropTypes.func,
-  listenToProcessLogs: PropTypes.func,
-  process: PropTypes.object,
-  processLogs: PropTypes.arrayOf(PropTypes.object),
-  error: PropTypes.string,
-  loading: PropTypes.bool,
-  match: PropTypes.object
-};
-
-function mapStateToProps(state, props) {
-  return {
-    process: getProcess(state, props.match.params.processName),
-    processLogs: getProcessLogsByProcess(state, props.match.params.processName),
-    error: state.errorMessage,
-    loading: state.loading
-  };
-}
-
-export default withRouter(connect(
-  mapStateToProps,
-  {
-    fetchProcessLogs: processLogsAction.request,
-    listenToProcessLogs
-  }
-)(ProcessContainer));
diff --git a/embark-ui/src/routes.js b/embark-ui/src/routes.js
index 1764385e..163dbb80 100644
--- a/embark-ui/src/routes.js
+++ b/embark-ui/src/routes.js
@@ -6,7 +6,6 @@ import ContractsContainer from './containers/ContractsContainer';
 import ContractContainer from './containers/ContractLayoutContainer';
 import NoMatch from './components/NoMatch';
 import ExplorerLayout from './components/ExplorerLayout';
-import ProcessesLayout from './components/ProcessesLayout';
 import FiddleLayout from './components/FiddleLayout';
 
 const routes = (
@@ -14,7 +13,6 @@ const routes = (
     <Switch>
       <Route exact path="/embark/" component={HomeContainer} />
       <Route path="/embark/explorer/" component={ExplorerLayout} />
-      <Route path="/embark/processes/" component={ProcessesLayout} />
       <Route path="/embark/contracts/:contractName" component={ContractContainer} />
       <Route path="/embark/contracts" component={ContractsContainer} />
       <Route path="/embark/fiddle" component={FiddleLayout} />

From fbe27ece2fddb472b9e71c3b07d8478ab7565423 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Thu, 6 Sep 2018 09:45:40 -0400
Subject: [PATCH 08/10] add deep-equal to process update

---
 embark-ui/src/containers/HomeContainer.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/embark-ui/src/containers/HomeContainer.js b/embark-ui/src/containers/HomeContainer.js
index 883cfb72..7472d01e 100644
--- a/embark-ui/src/containers/HomeContainer.js
+++ b/embark-ui/src/containers/HomeContainer.js
@@ -9,13 +9,16 @@ import Processes from '../components/Processes';
 import Versions from '../components/Versions';
 import Console from '../components/Console';
 import {getProcesses, getCommands, getVersions, getProcessLogs} from "../reducers/selectors";
+import deepEqual from 'deep-equal';
 
 class HomeContainer extends Component {
   componentDidUpdate(prevProps) {
-    if (!prevProps.processes.length) {
+    if (!deepEqual(this.props.processes, prevProps.processes)) {
       this.props.processes.forEach(process => {
         this.props.fetchProcessLogs(process.name);
-        this.props.listenToProcessLogs(process.name);
+        if (!prevProps.processes.length) {
+          this.props.listenToProcessLogs(process.name);
+        }
       });
     }
   }

From e9cc6ca9e855f9d71bec6168df9b04c729641b75 Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Thu, 6 Sep 2018 09:57:16 -0400
Subject: [PATCH 09/10] fix linting

---
 embark-ui/src/components/Console.js     | 2 +-
 embark-ui/src/reducers/selectors.js     | 8 --------
 lib/core/processes/processWrapper.js    | 4 ++--
 lib/modules/coverage/contract_source.js | 8 ++++----
 lib/modules/coverage/index.js           | 2 +-
 lib/modules/coverage/source_map.js      | 2 +-
 lib/modules/ipfs/index.js               | 8 --------
 lib/modules/profiler/fuzzer.js          | 2 +-
 8 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 14d78c1d..85cd0218 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Grid, Card, Form, Tabs, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
+import {Grid, Card, Form, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
 import Logs from "./Logs";
 import Convert from 'ansi-to-html';
 
diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js
index 115344c6..95ca30d6 100644
--- a/embark-ui/src/reducers/selectors.js
+++ b/embark-ui/src/reducers/selectors.js
@@ -44,18 +44,10 @@ export function getProcesses(state) {
   return state.entities.processes;
 }
 
-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));
-}
-
 export function getContractLogsByContract(state, contractName) {
   return state.entities.contractLogs.filter((contractLog => contractLog.name === contractName));
 }
diff --git a/lib/core/processes/processWrapper.js b/lib/core/processes/processWrapper.js
index 5a9f6e30..8045a2bf 100644
--- a/lib/core/processes/processWrapper.js
+++ b/lib/core/processes/processWrapper.js
@@ -1,5 +1,5 @@
-process.on('uncaughtException', function(e){	
-  process.send({error: e.stack});	
+process.on('uncaughtException', function(e) {
+  process.send({error: e.stack});
 });
 
 const constants = require('../../constants');
diff --git a/lib/modules/coverage/contract_source.js b/lib/modules/coverage/contract_source.js
index 0b91ca7d..baa98bf1 100644
--- a/lib/modules/coverage/contract_source.js
+++ b/lib/modules/coverage/contract_source.js
@@ -11,7 +11,7 @@ class ContractSource {
     this.lineCount = this.lineLengths.length;
 
     this.lineOffsets = this.lineLengths.reduce((sum, _elt, i) => {
-      sum[i] = (i == 0) ? 0 : self.lineLengths[i-1] + sum[i-1] + 1;
+      sum[i] = (i === 0) ? 0 : self.lineLengths[i-1] + sum[i-1] + 1;
       return sum;
     }, []);
 
@@ -245,7 +245,7 @@ class ContractSource {
 
       trace.structLogs.forEach((step) => {
         step = bytecode[step.pc];
-        if(!step.sourceMap || step.sourceMap == '') return;
+        if(!step.sourceMap || step.sourceMap === '') return;
 
         var nodes = sourceMapToNodeType[step.sourceMap];
 
@@ -262,7 +262,7 @@ class ContractSource {
             recordedLineHit = true;
           }
 
-          if(node.type != 'b') coverage[node.type][node.id]++;
+          if(node.type !== 'b') coverage[node.type][node.id]++;
 
           if(!node.parent) return;
 
@@ -282,7 +282,7 @@ class ContractSource {
   }
 
   _instructionLength(instruction) {
-    if(instruction.indexOf('PUSH') == -1) return 1;
+    if(instruction.indexOf('PUSH') === -1) return 1;
     return parseInt(instruction.match(/PUSH(\d+)/m)[1], 10) + 1;
   }
 }
diff --git a/lib/modules/coverage/index.js b/lib/modules/coverage/index.js
index 5de8755c..685ad099 100644
--- a/lib/modules/coverage/index.js
+++ b/lib/modules/coverage/index.js
@@ -45,7 +45,7 @@ class CodeCoverage {
 
   async runSolc(receipt) {
     let block = await web3.eth.getBlock(receipt.number);
-    if(block.transactions.length == 0) return;
+    if(block.transactions.length === 0) return;
 
     let requests = [];
     for(let i in block.transactions) {
diff --git a/lib/modules/coverage/source_map.js b/lib/modules/coverage/source_map.js
index 84215d8e..11924beb 100644
--- a/lib/modules/coverage/source_map.js
+++ b/lib/modules/coverage/source_map.js
@@ -1,6 +1,6 @@
 class SourceMap {
   constructor(sourceMapStringOrOffset, length, id) {
-    if(typeof sourceMapStringOrOffset == 'string') {
+    if(typeof sourceMapStringOrOffset === 'string') {
       let [offset, length, id, ..._rest] = sourceMapStringOrOffset.split(":");
 
       this.offset = parseInt(offset, 10);
diff --git a/lib/modules/ipfs/index.js b/lib/modules/ipfs/index.js
index 721ab1cf..30cf2540 100644
--- a/lib/modules/ipfs/index.js
+++ b/lib/modules/ipfs/index.js
@@ -129,14 +129,6 @@ class IPFS {
     this.embark.addCodeToEmbarkJS(code);
   }
 
-  addNamesystemProviderToEmbarkJS() {
-    let code = "";
-    code += "\n" + fs.readFileSync(utils.joinPath(__dirname, 'embarkjs', 'name.js')).toString();
-    code += "\nEmbarkJS.Names.registerProvider('ipns', __embarkIPFS);";
-
-    this.embark.addCodeToEmbarkJS(code);
-  }
-
   addObjectToConsole() {
     let ipfs = IpfsApi(this.host, this.port);
     this.events.emit("runcode:register", "ipfs", ipfs);
diff --git a/lib/modules/profiler/fuzzer.js b/lib/modules/profiler/fuzzer.js
index 3a07e74d..208ba9fb 100644
--- a/lib/modules/profiler/fuzzer.js
+++ b/lib/modules/profiler/fuzzer.js
@@ -50,7 +50,7 @@ class ContractFuzzer {
       }
       case kind === "bool":
         return self.generateRandomBool();
-      case kind == "uint" || kind == "int":
+      case kind === "uint" || kind === "int":
         return self.generateRandomInt(size || 256);
       case kind === "bytes":
         return self.generateRandomStaticBytes(size || 32);

From 5c74b804c70c4adf5d47248dc5ac427b83812ebf Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Thu, 6 Sep 2018 10:00:35 -0400
Subject: [PATCH 10/10] add autoscroll package json

---
 embark-ui/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/embark-ui/package.json b/embark-ui/package.json
index 1032f1fb..7ef7a960 100644
--- a/embark-ui/package.json
+++ b/embark-ui/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "ace-mode-solidity": "^0.1.0",
     "ansi-to-html": "^0.6.6",
+    "autoscroll-react": "^3.2.0",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "connected-react-router": "^4.3.0",