conflict in api

embark-ui/src/api/index.js

@@ -1,9 +1,10 @@
 import axios from "axios";
+import constants from '../constants';
 
 const BASE_URL = 'http://localhost:8000/embark-api';
 
 export function fetchAccounts() {
-  return axios.get(`${BASE_URL}/blockchain/accounts`);
+  return axios.get(constants.httpEndpoint + 'blockchain/accounts');
 }
 
 export function fetchBlocks(from) {
@@ -15,5 +16,5 @@ export function fetchTransactions(blockFrom) {
 }
 
 export function fetchProcesses() {
-  return axios.get(`${BASE_URL}/processes`);
+  return axios.get(constants.httpEndpoint + 'processes');
 }

embark-ui/src/components/Process.js

@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import {Tab} from "tabler-react";
+import constants from '../constants';
+import PropTypes from 'prop-types';
+
+class Process extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      logs: []
+    };
+  }
+
+  componentDidMount() {
+    const self = this;
+    this.ws = new WebSocket(constants.wsEndpoint + 'process-logs/' + self.props.processName);
+
+    this.ws.onmessage = function(evt) {
+      const log = JSON.parse(evt.data);
+      const logs = self.state.logs;
+      logs.push(log);
+      self.setState({
+        logs
+      });
+    };
+
+    this.ws.onclose = function() {
+      console.log(self.props.processName + "Log process connection is closed");
+    };
+
+    window.onbeforeunload = function(_event) {
+      this.ws.close();
+    };
+  }
+
+  componentWillUnmount() {
+    this.ws.close();
+    this.ws = null;
+  }
+
+  render() {
+    return (
+      <div>
+        State: {this.props.state}
+        <div className="logs">
+          {
+            this.state.logs.map((item, i) => <p key={i} className={item.logLevel}>{item.msg}</p>)
+          }
+        </div>
+      </div>);
+  }
+}
+
+Process.propTypes = {
+  processName: PropTypes.string,
+  state: PropTypes.string
+};
+
+export default Process;

embark-ui/src/constants.json

@@ -0,0 +1,4 @@
+{
+  "httpEndpoint": "http://localhost:8000/embark-api/",
+  "wsEndpoint": "ws://localhost:8000/embark-api/"
+}

embark-ui/src/containers/ProcessesContainer.js

@@ -7,6 +7,7 @@ import {fetchProcesses} from '../actions';
 import Loading from '../components/Loading';
 
 import "./css/processContainer.css";
+import Process from "../components/Process";
 
 class ProcessesContainer extends Component {
   componentDidMount() {
@@ -32,7 +33,9 @@ class ProcessesContainer extends Component {
       <div className="processes-container">
         <Tabs initialTab={processNames[0]}>
           {processNames.map(processName => {
-            return (<Tab key={processName} title={processName}>State: {processes.data[processName].state}</Tab>);
+            return (<Tab key={processName} title={processName}>
+              <Process processName={processName} state={processes.data[processName].state}/>
+            </Tab>);
           })}
         </Tabs>
       </div>

embark-ui/src/containers/css/processContainer.css

@@ -2,3 +2,26 @@
 .processes-container .nav-link {
   text-transform: capitalize;
 }
+
+.processes-container .logs {
+  margin:  10px 0;
+  background-color: #333333;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 14px;
+  color: white;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.processes-container .logs .error {
+  color: #dc3546;
+}
+.processes-container .logs .warn {
+  color: #fec107;
+}
+.processes-container .logs .debug {
+  color: #b7c1cc;
+}
+.processes-container .logs .trace {
+  color: #8f98a2;
+}

lib/core/plugin.js

@@ -227,8 +227,9 @@ Plugin.prototype.registerActionForEvent = function(eventName, cb) {
 
 Plugin.prototype.registerAPICall = function(method, endpoint, cb) {
   console.dir("registerAPICall " + method + " " + endpoint);
-  this.apiCalls.push({method: method, endpoint: endpoint, cb: cb});
+  this.apiCalls.push({method, endpoint, cb});
   this.addPluginType('apiCalls');
+  this.events.emit('plugins:register:api', {method, endpoint, cb});
 };
 
 Plugin.prototype.runFilePipeline = function() {

lib/modules/blockchain_process/blockchainProcessLauncher.js

@@ -11,7 +11,8 @@ class BlockchainProcessLauncher {
     this.blockchainConfig = options.blockchainConfig;
     this.locale = options.locale;
     this.isDev = options.isDev;
-    this.client = options.client;    
+    this.client = options.client;
+    this.embark = options.embark;
   }
 
   processEnded(code) {
@@ -22,9 +23,11 @@ class BlockchainProcessLauncher {
     this.logger.info(__('Starting Blockchain node in another process').cyan);
 
     this.blockchainProcess = new ProcessLauncher({
+      name: 'blockchain',
       modulePath: utils.joinPath(__dirname, './blockchainProcess.js'),
       logger: this.logger,
       events: this.events,
+      embark: this.embark,
       silent: this.logger.logLevel !== 'trace',
       exitCallback: this.processEnded.bind(this)
     });
@@ -44,7 +47,7 @@ class BlockchainProcessLauncher {
     });
 
     this.blockchainProcess.once('result', constants.blockchain.blockchainExit, () => {
-      // telle everyone that our blockchain process (ie geth) died
+      // tell everyone that our blockchain process (ie geth) died
       this.events.emit(constants.blockchain.blockchainExit);
 
       // then kill off the blockchain process

lib/modules/blockchain_process/index.js

@@ -105,8 +105,9 @@ class BlockchainModule {
       normalizeInput: utils.normalizeInput,
       blockchainConfig: self.blockchainConfig,
       locale: self.locale,
+      client: self.client,
       isDev: self.isDev,
-      client: self.client
+      embark: this.embark
     });
 
     blockchainProcess.startBlockchainNode();

lib/modules/webserver/server.js

@@ -102,6 +102,8 @@ class Server {
         ws.addEventListener('open', _event => {
           ws.send('outputDone');
         });
+      });
+    });
 
     this.app.get('/embark/*', function (req, res) {
       self.logger.trace('webserver> GET ' + req.path);