diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 15ed3ed9a..14d78c1d2 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 [
+ (
+
+ {commands.map((command, index) => )}
+
+ )
+ ].concat(processes.map(process => (
+ this.clickTab(e, x)}>
+
+ {
+ processLogs.filter((item) => item.name === process.name)
+ .map((item, i) => )
+ }
+
+
+ )));
+ }
+
render() {
- const {processLogs, processes, commands}= this.props;
+ const tabs = this.renderTabs();
+ const {selectedProcess, value} = this.state;
+
return (
-
- Embark console
-
-
-
-
-
- {commands.map((command, index) => )}
-
-
- {processes.map(process => {
- return (
-
-
- {
- processLogs.filter((item) => item.name === process.name)
- .map((item, i) => )
- }
-
-
- );
- })}
-
-
+
+
+ this.setState({selectedProcess: newProcess})}
+ >
+ {tabs}
+
+
+ {tabs}
+
+
-
+ {selectedProcess === 'Embark' &&
this.handleChange(event)}
name="command"
- placeholder="Type a command (e.g help)" />
+ placeholder="Type a command (e.g help)"/>
-
+ }
diff --git a/embark-ui/src/general.css b/embark-ui/src/general.css
index cbd018ec0..e5596a336 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;