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.handleSubmit(event)} autoComplete="off"> - 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;