diff --git a/embark-ui/src/api/index.js b/embark-ui/src/api/index.js index 704e1baa..c878cec2 100644 --- a/embark-ui/src/api/index.js +++ b/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'); } diff --git a/embark-ui/src/components/Process.js b/embark-ui/src/components/Process.js new file mode 100644 index 00000000..a1c914b4 --- /dev/null +++ b/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 ( +
+ State: {this.props.state} +
+ { + this.state.logs.map((item, i) =>

{item.msg}

) + } +
+
); + } +} + +Process.propTypes = { + processName: PropTypes.string, + state: PropTypes.string +}; + +export default Process; diff --git a/embark-ui/src/constants.json b/embark-ui/src/constants.json new file mode 100644 index 00000000..06f14ec8 --- /dev/null +++ b/embark-ui/src/constants.json @@ -0,0 +1,4 @@ +{ + "httpEndpoint": "http://localhost:8000/embark-api/", + "wsEndpoint": "ws://localhost:8000/embark-api/" +} diff --git a/embark-ui/src/containers/ProcessesContainer.js b/embark-ui/src/containers/ProcessesContainer.js index baa35293..3f21cddd 100644 --- a/embark-ui/src/containers/ProcessesContainer.js +++ b/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 {
{processNames.map(processName => { - return (State: {processes.data[processName].state}); + return ( + + ); })}
diff --git a/embark-ui/src/containers/css/processContainer.css b/embark-ui/src/containers/css/processContainer.css index 008d9eeb..1510241f 100644 --- a/embark-ui/src/containers/css/processContainer.css +++ b/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; +} diff --git a/lib/core/plugin.js b/lib/core/plugin.js index e442233d..4d93a15f 100644 --- a/lib/core/plugin.js +++ b/lib/core/plugin.js @@ -223,8 +223,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() { diff --git a/lib/modules/blockchain_process/blockchainProcessLauncher.js b/lib/modules/blockchain_process/blockchainProcessLauncher.js index 2fc7be35..2b10910d 100644 --- a/lib/modules/blockchain_process/blockchainProcessLauncher.js +++ b/lib/modules/blockchain_process/blockchainProcessLauncher.js @@ -11,6 +11,7 @@ class BlockchainProcessLauncher { this.blockchainConfig = options.blockchainConfig; this.locale = options.locale; this.isDev = options.isDev; + this.embark = options.embark; } processEnded(code) { @@ -21,16 +22,17 @@ 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) }); this.blockchainProcess.send({ action: constants.blockchain.init, options: { blockchainConfig: this.blockchainConfig, - //client: this.client, // TODO: assume for now it's geth client: 'geth', env: this.env, @@ -45,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 diff --git a/lib/modules/blockchain_process/index.js b/lib/modules/blockchain_process/index.js index 66fafe46..c05495b1 100644 --- a/lib/modules/blockchain_process/index.js +++ b/lib/modules/blockchain_process/index.js @@ -72,7 +72,8 @@ class BlockchainModule { normalizeInput: utils.normalizeInput, blockchainConfig: self.blockchainConfig, locale: self.locale, - isDev: self.isDev + isDev: self.isDev, + embark: this.embark }); blockchainProcess.startBlockchainNode(); diff --git a/lib/modules/webserver/server.js b/lib/modules/webserver/server.js index 2fbbffea..1bc3d796 100644 --- a/lib/modules/webserver/server.js +++ b/lib/modules/webserver/server.js @@ -79,6 +79,8 @@ class Server { ws.addEventListener('open', _event => { ws.send('outputDone'); }); + }); + }); this.app.get('/embark/*', function (req, res) { self.logger.trace('webserver> GET ' + req.path);