only show footer when embark tab

This commit is contained in:
Jonathan Rainville 2018-09-05 18:15:19 -04:00 committed by Pascal Precht
parent b34a9e5e63
commit af21dcc910
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 55 additions and 33 deletions

View File

@ -1,6 +1,6 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import React, {Component} from 'react'; 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 Logs from "./Logs";
import Convert from 'ansi-to-html'; import Convert from 'ansi-to-html';
@ -17,7 +17,10 @@ CommandResult.propTypes = {
class Console extends Component { class Console extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {value: ''}; this.state = {
value: '',
selectedProcess: 'Embark'
};
} }
handleSubmit(event) { handleSubmit(event) {
@ -31,46 +34,56 @@ class Console extends Component {
this.setState({value: event.target.value}); 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() { render() {
const {processLogs, processes, commands}= this.props; const tabs = this.renderTabs();
const {selectedProcess, value} = this.state;
return ( return (
<Grid.Row cards className="console"> <Grid.Row cards className="console">
<Grid.Col> <Grid.Col>
<Card> <Card>
<Card.Header> <Card.Body className="console-container">
<Card.Title>Embark console</Card.Title> <React.Fragment>
</Card.Header> <TabbedHeader
<Card.Body > selectedTitle={selectedProcess}
<Tabs initialTab="Embark"> stateCallback={newProcess => this.setState({selectedProcess: newProcess})}
<Tab title="Embark"> >
<Logs> {tabs}
{commands.map((command, index) => <CommandResult key={index} result={command.result}/>)} </TabbedHeader>
</Logs> <TabbedContainer selectedTitle={selectedProcess}>
</Tab> {tabs}
{processes.map(process => { </TabbedContainer>
return ( </React.Fragment>
<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.Body>
<Card.Footer> {selectedProcess === 'Embark' && <Card.Footer>
<form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off"> <form onSubmit={(event) => this.handleSubmit(event)} autoComplete="off">
<Form.Input value={this.state.value} <Form.Input value={value}
onChange={(event) => this.handleChange(event)} onChange={(event) => this.handleChange(event)}
name="command" name="command"
placeholder="Type a command (e.g help)" /> placeholder="Type a command (e.g help)"/>
</form> </form>
</Card.Footer> </Card.Footer>}
</Card> </Card>
</Grid.Col> </Grid.Col>
</Grid.Row> </Grid.Row>

View File

@ -6,7 +6,7 @@
color: white; color: white;
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
max-height: 400px; max-height: 350px;
overflow: auto; overflow: auto;
} }
@ -26,6 +26,15 @@
color: #8f98a2; 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 { .text__new-line, .card.warnings-card .list-group-item, .card.errors-card .list-group-item {
white-space: pre-wrap; white-space: pre-wrap;
font-family: monospace; font-family: monospace;