142 lines
4.0 KiB
JavaScript
142 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
|
import { Margin, Padding } from 'styled-components-spacing';
|
|
import Flex from 'styled-flex-component';
|
|
import styled from 'styled-components';
|
|
import remcalc from 'remcalc';
|
|
|
|
import {
|
|
Anchor,
|
|
CloseIcon as Close,
|
|
H3,
|
|
Textarea,
|
|
Input,
|
|
P,
|
|
SectionList,
|
|
SectionListAnchor,
|
|
SectionListItem,
|
|
StickyFooter,
|
|
ViewContainer
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
import { generateTerraform, generateCLI } from './cli-details';
|
|
|
|
export default class CLIFooter extends React.Component {
|
|
state = {
|
|
active: 'triton'
|
|
};
|
|
|
|
render() {
|
|
const { active } = this.state;
|
|
const { getData, onCloseCli } = this.props;
|
|
|
|
return (
|
|
<StickyFooter borderless auto fixed bottom fill="#494949">
|
|
<div>
|
|
<Padding vertical="8">
|
|
<CloseIcon onClick={onCloseCli} />
|
|
<Row>
|
|
<Col xs="12" sm="8">
|
|
<Margin bottom="2">
|
|
<Flex>
|
|
<H3 white>CLI details</H3>
|
|
</Flex>
|
|
</Margin>
|
|
<Margin bottom="5">
|
|
<P white>
|
|
Below you can find the command line instructions to deploy
|
|
this exact instance, or a copy of it, directly from either
|
|
the Triton CLI or Terraform.
|
|
</P>
|
|
</Margin>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col sm="12">
|
|
<ViewContainer plain>
|
|
<Margin bottom="3">
|
|
<SectionList clear>
|
|
<SectionListItem>
|
|
<SectionListAnchor
|
|
white
|
|
active={active === 'triton'}
|
|
onClick={() => this.setState({ active: 'triton' })}
|
|
>
|
|
Triton CLI
|
|
</SectionListAnchor>
|
|
</SectionListItem>
|
|
<SectionListItem>
|
|
<SectionListAnchor
|
|
white
|
|
active={active === 'terraform'}
|
|
onClick={() => this.setState({ active: 'terraform' })}
|
|
>
|
|
Terraform
|
|
</SectionListAnchor>
|
|
</SectionListItem>
|
|
</SectionList>
|
|
</Margin>
|
|
</ViewContainer>
|
|
<Margin bottom="3">
|
|
{active === 'triton' ? (
|
|
<Input
|
|
readOnly
|
|
borderless
|
|
monospace
|
|
fluid
|
|
white
|
|
dark
|
|
resize
|
|
rows="15"
|
|
value={generateCLI(getData())}
|
|
/>
|
|
) : (
|
|
<Textarea
|
|
readOnly
|
|
borderless
|
|
monospace
|
|
fluid
|
|
white
|
|
dark
|
|
resize
|
|
value={generateTerraform(getData())}
|
|
/>
|
|
)}
|
|
</Margin>
|
|
<Margin>
|
|
<Anchor white>{`Learn how to configure ${
|
|
active === 'triton' ? 'Triton CLI' : 'Terraform'
|
|
}`}</Anchor>
|
|
</Margin>
|
|
</Col>
|
|
</Row>
|
|
</Padding>
|
|
</div>
|
|
</StickyFooter>
|
|
);
|
|
}
|
|
}
|
|
|
|
const Frame = styled.div`
|
|
border-radius: 50%;
|
|
border: ${remcalc(1)} solid ${props => props.theme.white};
|
|
height: ${remcalc(30)};
|
|
width: ${remcalc(30)};
|
|
background: none;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
float: right;
|
|
`;
|
|
|
|
const CloseIcon = props => (
|
|
<Frame {...props}>
|
|
<Margin all="1">
|
|
<Close fill="white" />
|
|
</Margin>
|
|
</Frame>
|
|
);
|