Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(create-instance): revised feedback changes

Browse Source
This commit is contained in:
Sara Vieira 2017-11-20 11:33:50 +00:00 committed by Sérgio Ramos
parent 42b4c6230e
commit 0be8553e29
12 changed files with 383 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui-toolkit/src/button/index.js
View File

@ -173,7 +173,7 @@ const style = css`
`};
${is('bold')`
font-weight: bold;
font-weight: 500;
`};
`;

1
packages/ui-toolkit/src/index.js
View File

@ -134,6 +134,7 @@ export {
export {
default as Table,
Thead as TableThead,
ThFooter as TableThFooter,
Tr as TableTr,
Th as TableTh,
Tbody as TableTbody,

47
packages/ui-toolkit/src/table/index.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Broadcast, Subscriber } from 'joy-react-broadcast';
import isBoolean from 'lodash.isboolean';
import styled, { css } from 'styled-components';
import is from 'styled-is';
import is, { isNot } from 'styled-is';
import remcalc from 'remcalc';
import Baseline from '../baseline';
@ -45,7 +45,7 @@ const Column = css`
white-space: nowrap;
box-sizing: border-box;
padding: 0 ${remcalc(18)};
padding: 0 ${remcalc(24)};
height: ${remcalc(60)};
${handleBreakpoint('xs')};
@ -124,9 +124,39 @@ const BaseTable = styled.table`
max-width: 100%;
`;
const BaseThFooter = styled.tfoot`
width: 100%;
th:first-child {
border-bottom-left-radius: ${remcalc(4)};
}
th:last-child {
border-bottom-right-radius: ${remcalc(4)};
}
th {
border-top-width: 0;
}
`;
const BaseThead = styled.thead`
width: 100%;
${is('footer')`
th:first-child {
border-bottom-left-radius: ${remcalc(4)};
}
th:last-child {
border-bottom-right-radius: ${remcalc(4)};
}
th {
border-top-width: 0;
}
`};
${isNot('footer')`
th:first-child {
border-top-left-radius: ${remcalc(4)};
}
@ -138,6 +168,7 @@ const BaseThead = styled.thead`
th {
border-bottom-width: 0;
}
`};
`;
const BaseTbody = styled.tbody`
@ -167,6 +198,7 @@ const BaseTh = styled.th`
${is('selected')`
color: ${props => props.theme.text};
font-weight: bold;
`};
&:not(:first-child) {
@ -186,7 +218,6 @@ const BaseTh = styled.th`
const BaseTd = styled.td`
${Column};
transition: all 200ms ease;
border-bottom-width: 0;
vertical-align: middle;
@ -279,6 +310,16 @@ export const Thead = Baseline(({ children, ...rest }) => (
</Propagate>
));
export const ThFooter = Baseline(({ children, ...rest }) => (
<Propagate {...rest} header={true}>
{value => (
<BaseThFooter {...value} name="thfoot">
{children}
</BaseThFooter>
)}
</Propagate>
));
export const Tr = Baseline(({ children, ...rest }) => (
<Propagate {...rest}>
{value => (

7
prototypes/create-instance-icons/src/components/affinity/index.js vendored
View File

@ -104,7 +104,7 @@ class Affinity extends Component {
<P>
Affinity rules control the location of instances, to help reduce
traffic across networks and keep the workload balanced. With strict
rules, instances are only provisioned when the criteria is met.{' '}
rules, instances are only provisioned when the criteria is met. {' '}
<a href="https://apidocs.joyent.com/docker/features/placement ">
Read the docs
</a>
@ -184,10 +184,7 @@ class Affinity extends Component {
<Button secondary onClick={this.toggleForm}>
Cancel
</Button>
<Button
onClick={this.submit}
disabled={!this.state.rule.value}
>
<Button onClick={this.submit} disabled={!this.state.rule.value}>
Create
</Button>
</div>

12
prototypes/create-instance-icons/src/components/filters/filters.js vendored
View File

@ -17,8 +17,7 @@ import {
Label,
H2,
H4,
P,
ViewContainer
P
} from 'joyent-ui-toolkit';
const FullWidth = styled(Margin)`
@ -38,7 +37,8 @@ class Filters extends Component {
ram,
cpu,
disk,
cost
cost,
reset: 0
};
}
@ -56,7 +56,8 @@ class Filters extends Component {
ram,
cpu,
disk,
cost
cost,
reset: this.state.reset + 1
});
};
@ -122,7 +123,8 @@ class Filters extends Component {
costChange={value => costChange(value)}
filters={filters}
disabled={isEqual(filters, defaultState.filters)}
onClick={this.handleResetClick}
onResetClick={this.handleResetClick}
reset={this.state.reset}
/>
</FullWidth>
];

124
prototypes/create-instance-icons/src/components/filters/inputs.js vendored
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
FormGroup,
FormLabel,
@ -9,52 +10,92 @@ import {
InputDropdown
} from 'joyent-ui-toolkit';
import { Row, Col } from 'react-styled-flexboxgrid';
import { Padding } from 'styled-components-spacing';
import { Padding, Margin } from 'styled-components-spacing';
const RowFullWidth = styled(Row)`
width: 100%;
`;
const InputDropdownBorder = styled(InputDropdown)`
border-right: 1px solid ${props => props.theme.grey};
margin-right: 24px;
padding-right: 24px;
const Divider = styled.div`
width: ${remcalc(1)};
background: ${props => props.theme.grey};
height: ${remcalc(66)};
margin: 0 ${remcalc(14)};
margin-bottom: ${remcalc(9)};
display: flex;
align-self: flex-end;
`;
const valuesToSend = (changed, target, value, name) => ({
const isToBeMultiplied = (name, state, target) =>
(name === 'ram' && state[name][`${target}Selected`] === 'MB') ||
(name === 'disk' && state[name][`${target}Selected`] === 'GB');
const valuesToSend = (changed, target, value) => ({
min: !isNaN(parseFloat(changed.min)) ? parseFloat(changed.min) : 0,
max: !isNaN(parseFloat(changed.max)) ? parseFloat(changed.max) : 0,
[target]: parseFloat(value)
});
class Inputs extends Component {
constructor(props) {
super(props);
const { filters: { cpu, cost, ram, disk } } = this.props;
this.state = {
ram: {
const ramLogic = ram => ({
min: ram.min > 1 ? ram.min : ram.min * 1000,
minSelected: 'MB',
max: ram.max > 1 ? ram.max : ram.max * 1000,
maxSelected: 'GB'
},
cpu,
disk: {
});
const diskLogic = disk => ({
min: disk.min > 1 ? disk.min : disk.min * 1000,
minSelected: 'GB',
max: disk.max > 1 ? disk.max : disk.max * 1000,
maxSelected: 'TB'
},
cost
});
class Inputs extends Component {
constructor(props) {
super(props);
const { filters: { cpu, cost, ram, disk }, reset } = this.props;
this.state = {
ram: ramLogic(ram),
cpu,
disk: diskLogic(disk),
cost,
reset
};
}
componentWillReceiveProps = nextProps => {
const { filters: { cpu, cost, ram, disk }, reset } = nextProps;
if (reset !== this.state.reset) {
this.setState({
ram: ramLogic(ram),
cpu,
disk: diskLogic(disk),
cost,
reset
});
}
};
handleChange = (e, name, target) => {
const changed = this.state[name];
const value = (e.target || {}).value;
setTimeout(() => {
this.props[`${name}Change`](valuesToSend(changed, target, value, name));
this.props[`${name}Change`](
valuesToSend(
{
min: isToBeMultiplied(name, this.state, 'min')
? changed.min / 1000
: changed.min,
max: isToBeMultiplied(name, this.state, 'max')
? changed.max / 1000
: changed.max
},
target,
isToBeMultiplied(name, this.state, target) ? value / 1000 : value
)
);
}, 1000);
this.setState({
@ -68,6 +109,8 @@ class Inputs extends Component {
handleSelectChange = (e, name, target, valueTarget) => {
const value = (e.target || {}).value;
const isToBeMultiplied =
(name === 'ram' && value === 'MB') || (name === 'disk' && value === 'GB');
this.setState({
...this.state,
[name]: {
@ -75,13 +118,36 @@ class Inputs extends Component {
[target]: value
}
});
this.props[`${name}Change`](
valuesToSend(
this.state[name],
valueTarget,
isToBeMultiplied
? this.state[name][valueTarget] / 1000
: this.state[name][valueTarget]
)
);
};
handleBlur = (e, name, target) => {
const changed = this.state[name];
const value = (e.target || {}).value;
this.props[`${name}Change`](valuesToSend(changed, target, value, name));
this.props[`${name}Change`](
valuesToSend(
{
min: isToBeMultiplied(name, this.state, 'min')
? changed.min / 1000
: changed.min,
max: isToBeMultiplied(name, this.state, 'max')
? changed.max / 1000
: changed.max
},
target,
isToBeMultiplied(name, this.state, target) ? value / 1000 : value
)
);
this.setState({
...this.state,
@ -94,7 +160,7 @@ class Inputs extends Component {
render() {
const { cpu, cost, ram, disk } = this.state;
const { onClick, disabled } = this.props;
const { onResetClick, disabled } = this.props;
return [
<Row bottom="xs">
@ -124,7 +190,7 @@ class Inputs extends Component {
</Select>
</InputDropdown>
<Padding horizontal={2}>to</Padding>
<InputDropdownBorder>
<InputDropdown>
<Input
wrapped
small
@ -143,9 +209,10 @@ class Inputs extends Component {
<option value="MB">MB</option>
<option value="GB">GB</option>
</Select>
</InputDropdownBorder>
</InputDropdown>
</FormGroup>
</Col>
<Divider />
<Col>
<Padding top={1}>
<FormLabel>Disk</FormLabel>
@ -218,6 +285,7 @@ class Inputs extends Component {
/>
</FormGroup>
</Col>
<Divider />
<Col>
<Padding top={1}>
<FormLabel>$/hour</FormLabel>
@ -243,9 +311,17 @@ class Inputs extends Component {
</RowFullWidth>,
<Row>
<Col xs={12}>
<Button disabled={disabled} secondary small bold onClick={onClick}>
<Margin vertical={2}>
<Button
disabled={disabled}
secondary
small
bold
onClick={onResetClick}
>
Reset All Filters
</Button>
</Margin>
</Col>
</Row>
];

16
prototypes/create-instance-icons/src/components/home/home.js vendored
View File

@ -9,7 +9,9 @@ import {
BreadcrumbItem,
Anchor,
Button,
Divider
Divider,
MessageTitle,
MessageDescription
} from 'joyent-ui-toolkit';
class Home extends Component {
@ -47,7 +49,6 @@ class Home extends Component {
selected: values[key] ? values[key] : false
}));
console.table(groups);
onFilterChange({
...filters,
groups
@ -60,9 +61,12 @@ class Home extends Component {
const { filters, onFilterReset, packages } = this.props;
const _msg = showMessage ? (
<Message onCloseClick={this.closeMessage}>
<MessageTitle>Choosing deployment data center</MessageTitle>
<MessageDescription>
Not all data centres have all configurations of instances available.
Make sure that you choose the data center that suits your requirements.{' '}
<Anchor href="#">Learn More</Anchor>
Make sure that you choose the data center that suits your
requirements. <Anchor href="#">Learn More</Anchor>
</MessageDescription>
</Message>
) : null;
@ -103,10 +107,12 @@ class Home extends Component {
</Margin>,
<Row end="xs">
<Col xs={12}>
<Margin top={5}>
<Button>Next</Button>
</Margin>
</Col>
</Row>,
<Margin top={2}>
<Margin top={5}>
<AffinityHOC />
</Margin>
];

2
prototypes/create-instance-icons/src/components/icons/index.js vendored
View File

@ -40,7 +40,7 @@ export const returnIcon = group => {
<IconWrapper>
<TooltipContainer hoverable>
<TooltipTarget>
<Margin right={1}>
<Margin horizontal={1}>
<Flex>{icon}</Flex>
</Margin>
</TooltipTarget>

10
prototypes/create-instance-icons/src/components/navigation/header.js vendored
View File

@ -1,5 +1,7 @@
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Header,
@ -11,11 +13,15 @@ import {
UserIconLight
} from 'joyent-ui-toolkit';
const HeaderBrandStyled = styled(HeaderBrand)`
margin-top: ${remcalc(6)};
`;
const NavHeader = () => (
<Header>
<HeaderBrand beta>
<HeaderBrandStyled>
<TritonBetaIcon />
</HeaderBrand>
</HeaderBrandStyled>
<HeaderNav>
<li>
<Link className="active" to="/">

22
prototypes/create-instance-icons/src/components/package/index.js vendored
View File

@ -1,10 +1,18 @@
import React from 'react';
import { reduxForm } from 'redux-form';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { returnIcon } from '../icons';
import { TableTr, TableTd, H4, Radio, FormGroup } from 'joyent-ui-toolkit';
const FormGroupStyled = styled(FormGroup)`
float: left;
margin-right: ${remcalc(24)};
margin-top: ${remcalc(3)};
`;
const Package = ({
pack: { price, memory, vcpus, disk, group, ssd, name },
selected,
@ -12,20 +20,18 @@ const Package = ({
}) => (
<TableTr selected={selected}>
<TableTd>
<FormGroup name={name}>
<FormGroupStyled name={name}>
<Radio onClick={onClick} name={name} value={name} checked={selected} />
</FormGroup>
</TableTd>
<TableTd>
</FormGroupStyled>
{returnIcon(group)}
<H4>{name}</H4>
</TableTd>
<TableTd>
<TableTd right>
{memory > 1 ? `${parseInt(memory, 10)} GB` : `${memory * 1000} MB`}
</TableTd>
<TableTd>{disk > 1 ? `${disk} TB` : `${disk * 1000} GB`}</TableTd>
<TableTd>{vcpus}</TableTd>
<TableTd>{price.toFixed(3)}</TableTd>
<TableTd right>{disk > 1 ? `${disk} TB` : `${disk * 1000} GB`}</TableTd>
<TableTd right>{vcpus}</TableTd>
<TableTd right>{price.toFixed(3)}</TableTd>
</TableTr>
);

99
prototypes/create-instance-icons/src/components/packages/list.js vendored
View File

@ -12,6 +12,7 @@ import {
Table,
TableThead,
TableTbody,
TableThFooter,
TableTr,
TableTh,
ArrowIcon
@ -21,18 +22,15 @@ const ArrowIconStyled = styled(ArrowIcon)`
margin-left: ${remcalc(6)};
cursor: pointer;
position: relative;
top: ${remcalc(-1)};
top: ${remcalc(-3)};
transition: transform 200ms ease;
path {
fill: ${props => props.theme.grey};
fill: ${props => props.theme.text};
}
${is('selected', 'down')`
transform: rotate(180deg);
path {
fill: ${props => props.theme.text};
}
`};
`;
@ -46,8 +44,10 @@ class Packages extends Component {
super(props);
this.state = {
packages: props.packages,
selected: null
packages: props.packages.sort((a, b) => (a.price > b.price ? 1 : -1)),
selected: null,
price: true,
ordered: 'price'
};
}
@ -84,56 +84,65 @@ class Packages extends Component {
<Table>
<TableThead>
<TableTr>
<TableTh xs="40" />
<TableTh selected={ordered === 'name'}>
<Span role="button" onClick={() => this.order('name')}>
Name{' '}
</Span>
{ordered === 'name' && (
<ArrowIconStyled
selected={ordered === 'name'}
selected
down={this.state.name}
onClick={() => this.order('name')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'memory'}>
<Span role="button" onClick={() => this.order('memory')}>
RAM{' '}
</Span>
{ordered === 'memory' && (
<ArrowIconStyled
selected={ordered === 'memory'}
selected
down={this.state.memory}
onClick={() => this.order('memory')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'disk'}>
<Span role="button" onClick={() => this.order('disk')}>
Disk{' '}
</Span>
{ordered === 'disk' && (
<ArrowIconStyled
selected={ordered === 'disk'}
selected
down={this.state.disk}
onClick={() => this.order('disk')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'vcpus'}>
<Span role="button" onClick={() => this.order('vcpus')}>
vCPU{' '}
</Span>
{ordered === 'vcpus' && (
<ArrowIconStyled
selected={ordered === 'vcpus'}
selected
down={this.state.vcpus}
onClick={() => this.order('vcpus')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'price'}>
<Span role="button" onClick={() => this.order('price')}>
$/hour{' '}
</Span>
{ordered === 'price' && (
<ArrowIconStyled
selected={ordered === 'price'}
down={this.state.price}
onClick={() => this.order('price')}
/>
)}
</TableTh>
</TableTr>
</TableThead>
@ -147,12 +156,76 @@ class Packages extends Component {
/>
))}
</TableTbody>
<TableThFooter>
<TableTr>
<TableTh selected={ordered === 'name'}>
<Span role="button" onClick={() => this.order('name')}>
Name{' '}
</Span>
{ordered === 'name' && (
<ArrowIconStyled
selected
down={this.state.name}
onClick={() => this.order('name')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'memory'}>
<Span role="button" onClick={() => this.order('memory')}>
RAM{' '}
</Span>
{ordered === 'memory' && (
<ArrowIconStyled
selected
down={this.state.memory}
onClick={() => this.order('memory')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'disk'}>
<Span role="button" onClick={() => this.order('disk')}>
Disk{' '}
</Span>
{ordered === 'disk' && (
<ArrowIconStyled
selected
down={this.state.disk}
onClick={() => this.order('disk')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'vcpus'}>
<Span role="button" onClick={() => this.order('vcpus')}>
vCPU{' '}
</Span>
{ordered === 'vcpus' && (
<ArrowIconStyled
selected
down={this.state.vcpus}
onClick={() => this.order('vcpus')}
/>
)}
</TableTh>
<TableTh right xs="100" selected={ordered === 'price'}>
<Span role="button" onClick={() => this.order('price')}>
$/hour{' '}
</Span>
{ordered === 'price' && (
<ArrowIconStyled
selected={ordered === 'price'}
down={this.state.price}
onClick={() => this.order('price')}
/>
)}
</TableTh>
</TableTr>
</TableThFooter>
</Table>
</Col>
</Row>
) : (
<Row>
<Col>
<Col xs={12}>
<Empty />
</Col>
</Row>

8
prototypes/create-instance-icons/src/state/store.js vendored
View File

@ -50,11 +50,11 @@ export const store = createStore(
}),
state, // Initial state
compose(
applyMiddleware(client.middleware())
applyMiddleware(client.middleware()),
// If you are using the devToolsExtension, you can add it here also
// eslint-disable-next-line no-negated-condition
// typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
// ? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
// : f => f
typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
)
);