feat: new tables and affinity prototype
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
c47333ed1b
commit
607d2ae8cb
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "prototypes/create-instance-icons"
|
||||
},
|
||||
{
|
||||
"path": "packages/ui-toolkit"
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
}
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
"react": "16.1.1",
|
||||
"react-dom": "16.1.1",
|
||||
"react-modal": "2.4.1",
|
||||
"hoist-non-react-statics": "2.3.1"
|
||||
"hoist-non-react-statics": "2.3.1",
|
||||
"webpack-sources": "1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^3.1.0",
|
||||
"joyent-react-scripts": "^3.1.1",
|
||||
"react-test-renderer": "^16.1.1",
|
||||
"redrun": "^5.10.0",
|
||||
"serve": "^6.4.1",
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const Item = ({
|
|||
onStartSnap
|
||||
}) => (
|
||||
<TableTr>
|
||||
<TableTd center middle>
|
||||
<TableTd paddingRight="0" paddingLeft="18px" left middle>
|
||||
<FormGroup name={name} reduxForm>
|
||||
<Checkbox />
|
||||
</FormGroup>
|
||||
|
|
@ -207,7 +207,7 @@ export default ({
|
|||
<Table>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh xs="48" />
|
||||
<TableTh xs="38" padding="0" />
|
||||
<TableTh xs="80" left bottom>
|
||||
<P>Id</P>
|
||||
</TableTh>
|
||||
|
|
@ -229,10 +229,10 @@ export default ({
|
|||
return (
|
||||
<form>
|
||||
<Row between="xs">
|
||||
<Col xs={8} sm={8} lg={6}>
|
||||
<Col xs={8} sm={8} lg={8}>
|
||||
<Row>
|
||||
<Col xs={7} sm={7} md={6} lg={6}>
|
||||
<FormGroup name="filter" reduxForm>
|
||||
<FormGroup name="filter" fluid reduxForm>
|
||||
<FormLabel>Filter instances</FormLabel>
|
||||
<Input
|
||||
placeholder="Search for name, state, tags, etc..."
|
||||
|
|
@ -241,8 +241,8 @@ export default ({
|
|||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={5} sm={3} lg={3}>
|
||||
<FormGroup name="sort" reduxForm>
|
||||
<Col xs={5} sm={3} lg={4}>
|
||||
<FormGroup name="sort" fluidreduxForm>
|
||||
<FormLabel>Sort</FormLabel>
|
||||
<Select disabled={!items.length} fluid>
|
||||
<option value="name">Name</option>
|
||||
|
|
@ -261,10 +261,10 @@ export default ({
|
|||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={4} sm={4} lg={6}>
|
||||
<Col xs={4} sm={4} lg={4}>
|
||||
<Row end="xs">
|
||||
<Col xs={6} sm={4} md={3} lg={2}>
|
||||
<FormGroup>
|
||||
<Col xs={6} sm={4} md={3} lg={3}>
|
||||
<FormGroup fluid>
|
||||
<FormLabel>⁣</FormLabel>
|
||||
<Select
|
||||
value="actions"
|
||||
|
|
@ -311,8 +311,8 @@ export default ({
|
|||
</Select>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col xs={6} sm={6} md={5} lg={2}>
|
||||
<FormGroup>
|
||||
<Col xs={6} sm={6} md={5} lg={4}>
|
||||
<FormGroup fluid>
|
||||
<FormLabel>⁣</FormLabel>
|
||||
<Button
|
||||
type="button"
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
"jest-matcher-utils": "^21.2.1",
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"joyent-react-scripts": "^3.1.0",
|
||||
"joyent-react-scripts": "^3.1.1",
|
||||
"lodash.isboolean": "^3.0.3",
|
||||
"navalia": "^1.2.0",
|
||||
"react": "^16.1.1",
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const style = css`
|
|||
position: relative;
|
||||
|
||||
${typography.normal};
|
||||
|
||||
${typography.loadedFontFamily};
|
||||
font-size: ${remcalc(15)};
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
|
|
@ -155,7 +155,7 @@ const style = css`
|
|||
`};
|
||||
|
||||
${is('small')`
|
||||
padding: ${remcalc(13)} ${remcalc(18)};
|
||||
padding: ${remcalc(14)} ${remcalc(14)};
|
||||
`};
|
||||
|
||||
${is('icon')`
|
||||
|
|
@ -171,13 +171,18 @@ const style = css`
|
|||
${is('marginless')`
|
||||
margin: 0;
|
||||
`};
|
||||
|
||||
|
||||
${is('bold')`
|
||||
font-weight: bold;
|
||||
`};
|
||||
`;
|
||||
|
||||
const StyledButton = NButton.extend`
|
||||
min-width: ${remcalc(120)};
|
||||
|
||||
${style} & + button {
|
||||
margin-left: ${remcalc(20)};
|
||||
margin-left: ${remcalc(6)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ const BaseMeta = BaseCard.extend`
|
|||
background-color: transparent;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
`;
|
||||
|
||||
export const Box = ({ children, border, actionable, ...rest }) => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
import { Row } from 'react-styled-flexboxgrid';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
|
|||
|
||||
const style = css`
|
||||
box-sizing: border-box;
|
||||
|
||||
${typography.loadedFontFamily};
|
||||
width: 100%;
|
||||
height: ${height};
|
||||
min-height: ${height};
|
||||
|
|
@ -40,6 +40,16 @@ const style = css`
|
|||
border: ${border.unchecked};
|
||||
color: ${color};
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgba(73, 73, 73, 0.5);
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: rgba(73, 73, 73, 0.5);
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: rgba(73, 73, 73, 0.5);
|
||||
}
|
||||
|
||||
${is('disabled')`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
color: ${props => props.theme.textDisabled};
|
||||
|
|
@ -77,6 +87,14 @@ const style = css`
|
|||
}
|
||||
}
|
||||
|
||||
${is('small')`
|
||||
width: ${remcalc(120)}
|
||||
`};
|
||||
|
||||
${is('xSmall')`
|
||||
width: ${remcalc(80)}
|
||||
`};
|
||||
|
||||
${is('error')`
|
||||
border-color: ${props => props.theme.redDark}
|
||||
`};
|
||||
|
|
@ -85,6 +103,12 @@ const style = css`
|
|||
border-color: ${props => props.theme.orangeDark}
|
||||
`};
|
||||
|
||||
${is('wrapped')`
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: ${remcalc(120)};
|
||||
`};
|
||||
|
||||
${is('success')`
|
||||
border-color: ${props => props.theme.greenDark}
|
||||
`};
|
||||
|
|
|
|||
|
|
@ -33,8 +33,9 @@ const Label = styled.label`
|
|||
position: absolute;
|
||||
width: ${remcalc(18)};
|
||||
height: ${remcalc(18)};
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -103,7 +104,6 @@ const Label = styled.label`
|
|||
const InnerContainer = styled.div`
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: ${remcalc(8)};
|
||||
width: ${remcalc(18)};
|
||||
height: ${remcalc(18)};
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import { Fieldset } from 'normalized-styled-components';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const StyledFieldset = Fieldset.extend`
|
||||
const StyledFieldset = styled.div`
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
-webkit-margin-start: 0;
|
||||
|
|
@ -17,6 +18,16 @@ const StyledFieldset = Fieldset.extend`
|
|||
-webkit-padding-start: 0;
|
||||
-webkit-padding-end: 0;
|
||||
-webkit-padding-after: 0;
|
||||
|
||||
${is('fluid')`
|
||||
width: 100%;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default Baseline(StyledFieldset);
|
||||
const Fieldset = ({ children, ...rest }) => (
|
||||
<StyledFieldset role="group" {...rest}>
|
||||
{children}
|
||||
</StyledFieldset>
|
||||
);
|
||||
|
||||
export default Baseline(Fieldset);
|
||||
|
|
|
|||
|
|
@ -3,12 +3,24 @@ import { Broadcast } from 'joy-react-broadcast';
|
|||
import { Field } from 'redux-form';
|
||||
import PropTypes from 'prop-types';
|
||||
import rndId from 'rnd-id';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
|
||||
import Fieldset from './fieldset';
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const Noop = ({ children }) => children;
|
||||
|
||||
const Wrapper = styled(Fieldset)`
|
||||
${is('center')`
|
||||
align-items: center;
|
||||
`};
|
||||
|
||||
${is('flex')`
|
||||
display: flex;
|
||||
`};
|
||||
`;
|
||||
|
||||
class FormGroup extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -26,11 +38,11 @@ class FormGroup extends Component {
|
|||
};
|
||||
|
||||
return (
|
||||
<Fieldset className={className} style={style}>
|
||||
<Wrapper className={className} style={style} {...rest}>
|
||||
<Broadcast channel="input-group" value={value}>
|
||||
<Noop>{children}</Noop>
|
||||
</Broadcast>
|
||||
</Fieldset>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,5 @@ export { default as Radio, RadioList } from './radio';
|
|||
export { default as Select } from './select';
|
||||
export { default as Toggle, ToggleList } from './toggle';
|
||||
export { default as NumberInput } from './number-input';
|
||||
export { default as InputDropdown } from './input-dropdown';
|
||||
export { NumberInputNormalize } from './number-input';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const InputDropdown = styled.div`
|
||||
background: ${props => props.theme.white};
|
||||
border: ${remcalc(1)} solid #d8d8d8;
|
||||
box-sizing: border-box;
|
||||
border-radius: ${remcalc(4)};
|
||||
margin-bottom: ${remcalc(8)};
|
||||
margin-top: ${remcalc(8)};
|
||||
`;
|
||||
|
||||
export default InputDropdown;;
|
||||
|
|
@ -9,6 +9,7 @@ const StyledLabel = Label.extend`
|
|||
margin-right: ${remcalc(12)};
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: ${remcalc(13)};
|
||||
|
||||
${is('disabled')`
|
||||
color: ${props => props.theme.grey};
|
||||
|
|
|
|||
|
|
@ -43,10 +43,25 @@ const SelectWrapper = styled.div`
|
|||
const select = Baseline(BaseInput(Stylable('select')));
|
||||
const StyledSelect = select.extend`
|
||||
position: relative;
|
||||
padding: ${remcalc(12)};
|
||||
padding-right: ${remcalc(25)};
|
||||
|
||||
${is('disabled')`
|
||||
border-color: ${props => props.theme.grey};
|
||||
color: ${props => props.theme.grey};
|
||||
`};
|
||||
|
||||
${is('wrapped')`
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: ${remcalc(65)};
|
||||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
border-radius: 0 ${remcalc(4)} ${remcalc(4)} 0;
|
||||
|
||||
&:focus {
|
||||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@ const Box = styled.div`
|
|||
align-self: stretch;
|
||||
order: 0;
|
||||
width: ${remcalc(150)};
|
||||
display: flex;
|
||||
|
||||
${is('beta')`
|
||||
align-items: center;
|
||||
margin-top: ${remcalc(6)}
|
||||
`}
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => (
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ const Box = styled.section`
|
|||
order: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 ${remcalc(18)};
|
||||
|
||||
svg {
|
||||
margin-right: ${remcalc(6)};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,30 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default styled.ul`
|
||||
const UL = styled.ul`
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
a {
|
||||
padding: ${remcalc(15)};
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 200ms ease;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
box-sizing: border-box;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export { default as Baseline } from './baseline';
|
|||
export { default as Button } from './button';
|
||||
export { default as Label } from './label';
|
||||
export { PageContainer, RootContainer, ViewContainer } from './layout';
|
||||
export { H1, H2, H3 } from './text/headings';
|
||||
export { H1, H2, H3, H4, H5 } from './text/headings';
|
||||
export { default as P } from './text/p';
|
||||
export { default as Small } from './text/small';
|
||||
export { default as Title } from './text/title';
|
||||
|
|
@ -65,7 +65,8 @@ export {
|
|||
Toggle,
|
||||
ToggleList,
|
||||
NumberInput,
|
||||
NumberInputNormalize
|
||||
NumberInputNormalize,
|
||||
InputDropdown
|
||||
} from './form';
|
||||
|
||||
export {
|
||||
|
|
@ -119,7 +120,7 @@ export {
|
|||
export {
|
||||
Container as TooltipContainer,
|
||||
Target as TooltipTarget,
|
||||
default as Tolltip
|
||||
default as Tooltip
|
||||
} from './tooltip';
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import remcalc from 'remcalc';
|
|||
import { styled as breakpoints } from '../breakpoints';
|
||||
|
||||
export default Grid.extend`
|
||||
max-width: ${remcalc(1000)};
|
||||
|
||||
${breakpoints.smallOnly`
|
||||
padding-left: ${remcalc(6)};
|
||||
padding-right: ${remcalc(6)};
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ const Column = css`
|
|||
white-space: nowrap;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0 ${remcalc(8)} 0 ${remcalc(8)};
|
||||
height: ${remcalc(48)};
|
||||
padding: 0 ${remcalc(18)};
|
||||
height: ${remcalc(60)};
|
||||
|
||||
${handleBreakpoint('xs')};
|
||||
|
||||
|
|
@ -116,22 +116,33 @@ const Column = css`
|
|||
`;
|
||||
|
||||
const BaseTable = styled.table`
|
||||
border-collapse: collapse;
|
||||
overflow: hidden;
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
const BaseThead = styled.thead`
|
||||
width: 100%;
|
||||
|
||||
th:first-child {
|
||||
border-top-left-radius: ${remcalc(4)};
|
||||
}
|
||||
|
||||
th:last-child {
|
||||
border-top-right-radius: ${remcalc(4)};
|
||||
}
|
||||
|
||||
th {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const BaseTbody = styled.tbody`
|
||||
width: 100%;
|
||||
|
||||
border-width: ${remcalc(1)};
|
||||
border-style: solid;
|
||||
border-color: ${props => props.theme.grey};
|
||||
|
||||
${is('shadow')`
|
||||
box-shadow: ${bottomShadow};
|
||||
`};
|
||||
|
|
@ -148,29 +159,74 @@ const BaseTbody = styled.tbody`
|
|||
const BaseTh = styled.th`
|
||||
${Column};
|
||||
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: ${remcalc(5)};
|
||||
text-align: left;
|
||||
padding: ${remcalc(12)} ${remcalc(24)};
|
||||
height: ${remcalc(42)};
|
||||
color: ${props => props.theme.greyLight};
|
||||
font-weight: 500;
|
||||
|
||||
${is('selected')`
|
||||
color: ${props => props.theme.text};
|
||||
`};
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
${is('right')`
|
||||
text-align: right;
|
||||
`};
|
||||
|
||||
${ColumnBorder};
|
||||
`;
|
||||
|
||||
const BaseTd = styled.td`
|
||||
${Column};
|
||||
transition: all 200ms ease;
|
||||
border-bottom-width: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
${is('right')`
|
||||
text-align: right;
|
||||
`};
|
||||
|
||||
${ColumnBorder};
|
||||
`;
|
||||
|
||||
const BaseTr = styled.tr`
|
||||
display: table-row;
|
||||
|
||||
color: ${props => props.theme.text};
|
||||
background-color: ${props => props.theme.white};
|
||||
box-shadow: 0 ${remcalc(2)} 0 rgba(0, 0, 0, 0.05);
|
||||
box-sizing: border-box;
|
||||
|
||||
${is('selected')`
|
||||
box-shadow: none;
|
||||
td {
|
||||
border: 1px solid ${props => props.theme.primary};
|
||||
background-color: rgba(59, 70, 204, 0.05);;
|
||||
}
|
||||
`};
|
||||
|
||||
&:last-child td {
|
||||
border-bottom-width: ${remcalc(1)};
|
||||
}
|
||||
|
||||
${is('actionable')`
|
||||
cursor: pointer;
|
||||
|
|
@ -186,6 +242,8 @@ const BaseTr = styled.tr`
|
|||
${is('header')`
|
||||
color: ${props => props.theme.text};
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
`};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -93,3 +93,26 @@ export const H4 = styled.h4`
|
|||
margin-top: ${remcalc(12)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
export const H5 = styled.h4`
|
||||
margin: 0;
|
||||
${typography.color};
|
||||
${typography.fontFamily};
|
||||
${typography.normal};
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
|
||||
& + p,
|
||||
& + small,
|
||||
& + h1,
|
||||
& + h2,
|
||||
& + label,
|
||||
& + h3,
|
||||
& + h4,
|
||||
& + h5,
|
||||
& + div,
|
||||
& + span {
|
||||
margin-top: ${remcalc(12)};
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export { H1, H2, H3, H4 } from './headings';
|
||||
export { H1, H2, H3, H4, H5 } from './headings';
|
||||
export { default as P } from './p';
|
||||
export { default as Small } from './small';
|
||||
export { default as Label } from '../label';
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@ const white = {
|
|||
|
||||
const grey = {
|
||||
grey: 'rgb(216, 216, 216)',
|
||||
greyTransparent: 'rgba(73, 73, 73, 0.8)'
|
||||
greyTransparent: 'rgba(73, 73, 73, 0.8)',
|
||||
greyLight: 'rgb(189, 189, 189)'
|
||||
};
|
||||
|
||||
const green = {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ import style from './style';
|
|||
const arrowClassName = rndId();
|
||||
|
||||
const Popper = styled(BasePopper)`
|
||||
box-shadow: 0 0 ${remcalc(2)} rgba(0, 0, 0, 0.5);
|
||||
padding: ${remcalc(13)} ${remcalc(18)};
|
||||
font-weight: normal;
|
||||
|
||||
${style({
|
||||
background: 'secondaryHover',
|
||||
background: 'text',
|
||||
color: 'white',
|
||||
border: 'transparent',
|
||||
arrow: arrowClassName
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import remcalc from 'remcalc';
|
|||
export default ({ background, color, border, arrow }) => css`
|
||||
background: ${props => props.theme[background]};
|
||||
color: ${props => props.theme[color]};
|
||||
z-index: 999;
|
||||
|
||||
border-radius: ${remcalc(4)};
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"eslint": "^4.11.0",
|
||||
"eslint-config-joyent-portal": "^3.2.0",
|
||||
"joyent-react-scripts": "^3.1.0",
|
||||
"joyent-react-scripts": "^3.1.1",
|
||||
"prettier": "^1.8.2",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"presets": "joyent-portal",
|
||||
"plugins": [
|
||||
["inline-react-svg", {
|
||||
"ignorePattern": "libre-franklin"
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
src/components/base/*.css
|
||||
node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
docs/static
|
||||
!docs/static/index.html
|
||||
docs/node_modules
|
||||
dist
|
||||
package-lock.json
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.nyc_output
|
||||
coverage
|
||||
dist
|
||||
build
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"extends": "joyent-portal",
|
||||
"rules": {
|
||||
"no-console": 0,
|
||||
"new-cap": 0,
|
||||
// temp
|
||||
"no-undef": 1,
|
||||
"no-debugger": 1,
|
||||
"no-negated-condition": 0,
|
||||
"jsx-a11y/href-no-hash": 0
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": ["stylelint-config-joyent-portal"]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"libs": [
|
||||
"ecmascript",
|
||||
"browser"
|
||||
],
|
||||
"plugins": {
|
||||
"doc_comment": true,
|
||||
"local-scope": true,
|
||||
"jsx": true,
|
||||
"node": true,
|
||||
"webpack": {
|
||||
"configPath": "./node_modules/react-scripts/config/webpack.config.dev.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
language: node_js
|
||||
node_js:
|
||||
- "8"
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
notifications:
|
||||
email: false
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# my-joyent
|
||||
|
||||
[](https://quay.io/repository/yldio/my-joyent)
|
||||
[](https://opensource.org/licenses/MPL-2.0)
|
||||
[](https://github.com/RichardLitt/standard-readme)
|
||||
|
||||
## Table of Contents
|
||||
|
||||
* [Usage](#usage)
|
||||
* [License](#license)
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
npm run start
|
||||
open http://0.0.0.0:3069
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MPL-2.0
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
{
|
||||
"name": "joyent-create-instance-icons",
|
||||
"version": "1.0.0",
|
||||
"license": "MPL-2.0",
|
||||
"private": true,
|
||||
"repository": "github:yldio/joyent-portal",
|
||||
"main": "build/",
|
||||
"scripts": {
|
||||
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||
"start": "PORT=3069 joyent-react-scripts start",
|
||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||
"lint:css": "echo 0 `# stylelint './src/**/*.js'`",
|
||||
"lint:js": "eslint . --fix",
|
||||
"lint": "redrun -s lint:*",
|
||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
||||
"prepublish": "echo 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo": "^0.2.2",
|
||||
"graphql-tag": "^2.5.0",
|
||||
"joyent-ui-toolkit": "^2.0.1",
|
||||
"lodash.isempty": "^4.4.0",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"normalized-styled-components": "^1.0.17",
|
||||
"prop-types": "^15.6.0",
|
||||
"react": "^16.1.1",
|
||||
"react-apollo": "^1.4.16",
|
||||
"react-dom": "^16.1.1",
|
||||
"react-popper": "^0.7.4",
|
||||
"react-redux": "^5.0.6",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-styled-flexboxgrid": "^2.1.1",
|
||||
"redux": "^3.7.2",
|
||||
"redux-form": "^7.1.2",
|
||||
"remcalc": "^1.0.9",
|
||||
"styled-components": "^2.2.3",
|
||||
"styled-components-spacing": "^2.1.3",
|
||||
"styled-is": "^1.1.0",
|
||||
"unitcalc": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"apr-for-each": "^1.0.6",
|
||||
"apr-main": "^2.0.2",
|
||||
"babel-minify-webpack-plugin": "^0.2.0",
|
||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||
"babel-preset-joyent-portal": "^3.3.3",
|
||||
"commitizen": "^2.9.6",
|
||||
"cross-env": "^5.1.1",
|
||||
"eslint": "^4.11.0",
|
||||
"eslint-config-joyent-portal": "3.2.0",
|
||||
"eslint-config-prettier": "^2.7.0",
|
||||
"eslint-plugin-markdown": "^1.0.0-beta.6",
|
||||
"jest": "^21.2.1",
|
||||
"jest-alias-preprocessor": "^1.1.1",
|
||||
"jest-cli": "^21.2.1",
|
||||
"jest-diff": "^21.2.1",
|
||||
"jest-junit": "^3.2.1",
|
||||
"jest-matcher-utils": "^21.2.1",
|
||||
"jest-snapshot": "^21.2.1",
|
||||
"jest-styled-components": "^4.9.0",
|
||||
"jest-transform-graphql": "^2.1.0",
|
||||
"joyent-react-scripts": "^3.1.1",
|
||||
"lodash.sortby": "^4.7.0",
|
||||
"mz": "^2.7.0",
|
||||
"react-scripts": "^1.0.17",
|
||||
"react-test-renderer": "^16.1.1",
|
||||
"redrun": "^5.10.0",
|
||||
"stylelint": "^8.2.0",
|
||||
"stylelint-config-joyent-portal": "^2.0.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<meta name="theme-color" content="#1E313B">
|
||||
<title>My Joyent</title>
|
||||
<style>
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<noscript>
|
||||
You need to enable Javascript to view this page
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"short_name": "Joyent",
|
||||
"name": "My Joyent",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#1E313B",
|
||||
"background_color": "#FAFAFA"
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { theme, RootContainer } from 'joyent-ui-toolkit';
|
||||
import { ApolloProvider } from 'react-apollo';
|
||||
|
||||
import { client, store } from '@state/store';
|
||||
import Router from '@root/router';
|
||||
|
||||
const fullTheme = {
|
||||
...theme,
|
||||
flexboxgrid: {
|
||||
gridSize: 12, // rem
|
||||
gutterWidth: 1.25, // rem
|
||||
outerMargin: 1.875, // rem
|
||||
mediaQuery: 'only screen',
|
||||
container: {
|
||||
sm: 46, // rem
|
||||
md: 56, // rem
|
||||
lg: 59 // rem
|
||||
},
|
||||
breakpoints: {
|
||||
xs: 0, // em
|
||||
sm: 48, // em
|
||||
md: 64, // em
|
||||
lg: 75 // em
|
||||
}
|
||||
},
|
||||
spacing: {
|
||||
0.5: '4px',
|
||||
0: '0px',
|
||||
1: '6px',
|
||||
2: '12px',
|
||||
3: '18px',
|
||||
4: '24px',
|
||||
5: '30px',
|
||||
6: '36px',
|
||||
10: '60px'
|
||||
}
|
||||
};
|
||||
|
||||
export default () => (
|
||||
<ApolloProvider client={client} store={store}>
|
||||
<ThemeProvider theme={fullTheme}>
|
||||
<RootContainer>
|
||||
<Router />
|
||||
</RootContainer>
|
||||
</ThemeProvider>
|
||||
</ApolloProvider>
|
||||
);
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg width="176" height="60" viewBox="0 0 176 60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>joyent-cloud-1</title><desc>Created using Figma</desc><path id="a" fill="#D8D8D8" d="M175.67 60a16.303 16.303 0 0 0-2.724-7.875 16.344 16.344 0 0 0-6.262-5.508 16.37 16.37 0 0 0-16.115.838 38.689 38.689 0 0 0-5.527-30.199 38.775 38.775 0 0 0-11.168-11.013A38.85 38.85 0 0 0 103.561 1.1a38.839 38.839 0 0 0-14.184 6.714 38.77 38.77 0 0 0-10.362 11.773 38.707 38.707 0 0 0-4.843 14.909 25.76 25.76 0 0 0-13.037-7.712 25.79 25.79 0 0 0-15.123.944 25.746 25.746 0 0 0-11.974 9.273 25.684 25.684 0 0 0-4.677 14.39 16.35 16.35 0 0 0-7.919-5.67 16.375 16.375 0 0 0-9.744-.166 16.352 16.352 0 0 0-8.107 5.399A16.31 16.31 0 0 0 0 60h175.67z"/></svg>
|
||||
|
After Width: | Height: | Size: 775 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>cpu</title><path fill="#8043DC" fill-rule="evenodd" d="M8 16h8V8H8v8zm-1 1h10V7H7v10z"/><path fill="#8043DC" fill-rule="evenodd" d="M20 18c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V6c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v12zm3-5a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V6a4 4 0 0 0-4-4h-2V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1h-1V1a1 1 0 1 0-2 0v1H6a4 4 0 0 0-4 4v2H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v1H1a1 1 0 1 0 0 2h1v2a4 4 0 0 0 4 4h2v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h1v1a1 1 0 1 0 2 0v-1h2a4 4 0 0 0 4-4v-2h1a1 1 0 1 0 0-2h-1v-1h1z"/></svg>
|
||||
|
After Width: | Height: | Size: 645 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="22" height="20" viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: GP</title><desc>Created using Figma</desc><path fill="#E08A0E" fill-rule="evenodd" d="M17 16a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 17h1v-2H7v2zm-2 0h1v-2H5v2zm-2 0h1v-2H3v2zm14-7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7 11h1V9H7v2zm-2 0h1V9H5v2zm-2 0h1V9H3v2zm16-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5h1V3H7v2zM5 5h1V3H5v2zM3 5h1V3H3v2zM2 18h18v-4H2v4zm0-6h18V8H2v4zm0-6h18V2H2v4zm20-4a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 8v4c0 .366.105.705.277 1A1.977 1.977 0 0 0 0 14v4a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-4c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V8c0-.366-.105-.705-.277-1 .172-.295.277-.634.277-1V2z"/></svg>
|
||||
|
After Width: | Height: | Size: 772 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="23" height="23" viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: MO</title><desc>Created using Figma</desc><path transform="rotate(45 7.8 18.83)" fill="#32ABCF" fill-rule="evenodd" d="M3 15h3v-2H3v2zm0 2.999h3v-2H3v2zm0-6h3v-2H3v2zm0-3h3V7H3v2zM3 6h3V4H3v2zM2 20h7V2H2v18zM12 9a1 1 0 1 0 0-2h-1V6h1a1 1 0 1 0 0-2h-1V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1v-1h1a1 1 0 1 0 0-2h-1V9h1z"/></svg>
|
||||
|
After Width: | Height: | Size: 534 B |
|
|
@ -0,0 +1,2 @@
|
|||
<svg viewBox="0 0 6 11" width="6" height="11" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><desc>Created using Figma</desc><path transform="matrix(0 1 -1 0 6 7.3)" fill="#464646" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z"/>
|
||||
<path id="b" fill-rule="evenodd" d="M.685 0L0 .85 2.136 3 0 5.15.685 6l2.982-3L.685 0z" transform="matrix(0 -1 1 0 0 3.7)" fill="#464646"/></svg>
|
||||
|
After Width: | Height: | Size: 434 B |
|
|
@ -0,0 +1 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Icon: SO</title><desc>Created using Figma</desc><path fill="#A88A83" fill-rule="evenodd" d="M18 17a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14zM17 0H3a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/><path transform="translate(4 4)" fill="#A88A83" fill-rule="evenodd" d="M6 11c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5zM6 0a6 6 0 0 0 0 12A6 6 0 0 0 6 0z"/><path transform="translate(9 9)" fill="#A88A83" fill-rule="evenodd" d="M0 1a1 1 0 1 0 2 0 1 1 0 1 0-2 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 658 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
|
||||
import {
|
||||
CardOutlet,
|
||||
CardHeader,
|
||||
CardHeaderMeta,
|
||||
Card,
|
||||
ArrowIcon
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const capitalizeFirstLetter = string =>
|
||||
string.charAt(0).toUpperCase() + string.slice(1);
|
||||
|
||||
const FullWidthCard = styled(Card)`
|
||||
flex-basis: 100%;
|
||||
margin-bottom: ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const ListRules = ({ rule }) => (
|
||||
<FullWidthCard shadow collapsed>
|
||||
<CardHeader secondary={false} transparent={false}>
|
||||
<CardHeaderMeta>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={11}>
|
||||
<b>{capitalizeFirstLetter(rule.instance)}</b>
|
||||
{`: be on ${rule.be} node as the instance(s) identified by the ${
|
||||
rule.type
|
||||
} ${rule.match} "${rule.value}"`}
|
||||
</Col>
|
||||
<Col xs={1}>
|
||||
<ArrowIcon />
|
||||
</Col>
|
||||
</Row>
|
||||
</CardHeaderMeta>
|
||||
</CardHeader>
|
||||
<CardOutlet>Stuff</CardOutlet>
|
||||
</FullWidthCard>
|
||||
);
|
||||
|
||||
export default ListRules;
|
||||
|
|
@ -0,0 +1,784 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Packages /> without throwing 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-grow: 4;
|
||||
-ms-flex-grow: 4;
|
||||
flex-grow: 4;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 7.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 0.0625rem solid;
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-right: 0rem;
|
||||
margin-left: 0rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
|
||||
min-height: 11.5625rem;
|
||||
min-width: 292px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
min-width: auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.8);
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-right: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2.25rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-basis: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 33.333333333333336%;
|
||||
-ms-flex-basis: 33.333333333333336%;
|
||||
flex-basis: 33.333333333333336%;
|
||||
max-width: 33.333333333333336%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-basis: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c5 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<section
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.016
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.256
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.25
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
10
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.033
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.768
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.5
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
25
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.066
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
1.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
1
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
50
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.131
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
3.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
2
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
100
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.263
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
7.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
4
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
200
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.525
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
15.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
8
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
400
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
21
prototypes/create-instance-icons/src/components/affinity/__tests__/list.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/components/affinity/__tests__/list.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, PackagesMock, FiltersMock } from '@mocks/';
|
||||
import { Packages } from '../';
|
||||
|
||||
it('renders <Packages /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Packages packages={PackagesMock} filters={FiltersMock} />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
import rndId from 'rnd-id';
|
||||
import remcalc from 'remcalc';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
|
||||
import ListRules from './List';
|
||||
|
||||
import {
|
||||
ViewContainer,
|
||||
H2,
|
||||
Input,
|
||||
Button,
|
||||
H4,
|
||||
CardOutlet,
|
||||
Select,
|
||||
CardHeader,
|
||||
CardHeaderMeta,
|
||||
Card,
|
||||
P
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const MarginInline = styled(Margin)`
|
||||
display: inline;
|
||||
`;
|
||||
|
||||
const RowMargin = styled(Row)`
|
||||
margin-top: ${remcalc(-24)};
|
||||
`;
|
||||
|
||||
const defaultValues = {
|
||||
instance: 'must',
|
||||
be: 'the same',
|
||||
type: 'instance name',
|
||||
match: 'equalling',
|
||||
value: null
|
||||
};
|
||||
|
||||
class Affinity extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
rule: defaultValues,
|
||||
rules: [],
|
||||
open: [],
|
||||
showRuleCreation: false
|
||||
};
|
||||
}
|
||||
|
||||
instanceChange = e =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rule: { ...this.state.rule, instance: e.target.value }
|
||||
});
|
||||
|
||||
beChange = e =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rule: { ...this.state.rule, be: e.target.value }
|
||||
});
|
||||
|
||||
typeChange = e =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rule: { ...this.state.rule, type: e.target.value }
|
||||
});
|
||||
|
||||
matchChange = e =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rule: { ...this.state.rule, match: e.target.value }
|
||||
});
|
||||
|
||||
valueChange = e =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rule: { ...this.state.rule, value: e.target.value, id: rndId() }
|
||||
});
|
||||
|
||||
submit = () =>
|
||||
this.setState({
|
||||
...this.state,
|
||||
rules: [...this.state.rules, this.state.rule],
|
||||
rule: defaultValues,
|
||||
showRuleCreation: false
|
||||
});
|
||||
|
||||
toggleForm = () =>
|
||||
this.setState({ showRuleCreation: !this.state.showRuleCreation });
|
||||
|
||||
open = id => this.setState({ open: this.state.open.push(id) });
|
||||
|
||||
render = () => [
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Margin bottom={6}>
|
||||
<H2>Affinity</H2>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>,
|
||||
<RowMargin>
|
||||
<Col xs={8}>
|
||||
<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. {' '}
|
||||
<a href="https://apidocs.joyent.com/docker/features/placement ">
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Col>
|
||||
</RowMargin>,
|
||||
<ViewContainer>
|
||||
<Row>
|
||||
{this.state.rules.length > 0 &&
|
||||
this.state.rules.map(rule => [
|
||||
<H4>Affinity rules</H4>,
|
||||
<ListRules rule={this.state.rule} />
|
||||
])}
|
||||
</Row>
|
||||
</ViewContainer>,
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
{this.state.showRuleCreation ? (
|
||||
<Margin top={2}>
|
||||
<Card shadow>
|
||||
<CardHeader secondary={false} transparent={false}>
|
||||
<CardHeaderMeta>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={12}>
|
||||
<H4>Create an affinity rule</H4>
|
||||
</Col>
|
||||
</Row>
|
||||
</CardHeaderMeta>
|
||||
</CardHeader>
|
||||
<CardOutlet>
|
||||
<div>
|
||||
<H4>The instance</H4>
|
||||
</div>
|
||||
<div>
|
||||
<Select fluid onChange={this.instanceChange}>
|
||||
<option>must</option>
|
||||
<option>should</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<H4>be on</H4>
|
||||
</div>
|
||||
<div>
|
||||
<Select fluid onChange={this.beChange}>
|
||||
<option>the same</option>
|
||||
<option>a different</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<H4>node as the instance(s) identified by the</H4>
|
||||
</div>
|
||||
<div>
|
||||
<MarginInline right={1}>
|
||||
<Select fluid onChange={this.typeChange}>
|
||||
<option>instance name</option>
|
||||
<option>tag name</option>
|
||||
</Select>
|
||||
</MarginInline>
|
||||
<MarginInline right={1}>
|
||||
<Select fluid onChange={this.typeChange}>
|
||||
<option>equalling</option>
|
||||
<option>not equalling</option>
|
||||
<option>containing</option>
|
||||
<option>starting with</option>
|
||||
<option>ending with</option>
|
||||
</Select>
|
||||
</MarginInline>
|
||||
<Input
|
||||
type="text"
|
||||
onChange={this.valueChange}
|
||||
required
|
||||
value={this.state.rule.value}
|
||||
placeholder="Example instance name: nginx"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button secondary onClick={this.toggleForm}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={this.submit} disabled={!this.state.rule.value}>
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</CardOutlet>
|
||||
</Card>
|
||||
</Margin>
|
||||
) : (
|
||||
<Margin top={2}>
|
||||
<Button secondary bold onClick={this.toggleForm}>
|
||||
Create affinity rule
|
||||
</Button>
|
||||
</Margin>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
];
|
||||
}
|
||||
|
||||
export default Affinity;
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Package /> without throwing 1`] = `
|
||||
.c4 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-grow: 4;
|
||||
-ms-flex-grow: 4;
|
||||
flex-grow: 4;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 7.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 0.0625rem solid;
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-right: 0rem;
|
||||
margin-left: 0rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
|
||||
min-height: 11.5625rem;
|
||||
min-width: 292px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
color: #808080;
|
||||
-webkit-flex-basis: 0;
|
||||
-ms-flex-basis: 0;
|
||||
flex-basis: 0;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-flex-grow: 0;
|
||||
-ms-flex-grow: 0;
|
||||
flex-grow: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
name="card"
|
||||
>
|
||||
<test-file-mock
|
||||
alt="Cloud"
|
||||
className="c2"
|
||||
width="175"
|
||||
/>
|
||||
<div
|
||||
className="c3 c4"
|
||||
name="card-title"
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
>
|
||||
There are no packages that meet your criteria
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c6 c3 c4"
|
||||
name="card-title"
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
>
|
||||
Please adjust the filters to see some packages here
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
21
prototypes/create-instance-icons/src/components/empty/__tests__/index.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/components/empty/__tests__/index.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import Empty from '../';
|
||||
|
||||
it('renders <Package /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Empty />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { Card, H4, H5 } from 'joyent-ui-toolkit';
|
||||
|
||||
import Cloud from '../../assets/cloud.svg';
|
||||
|
||||
const CardStyled = styled(Card)`
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const Empty = () => (
|
||||
<CardStyled transparent>
|
||||
<Cloud width="175" alt="Cloud" />
|
||||
<H4>There are no packages that meet your criteria</H4>
|
||||
<H5>Please adjust the filters to see some packages here</H5>
|
||||
</CardStyled>
|
||||
);
|
||||
|
||||
export default Empty;
|
||||
File diff suppressed because it is too large
Load Diff
23
prototypes/create-instance-icons/src/components/filters/__tests__/filters.spec.js
vendored
Normal file
23
prototypes/create-instance-icons/src/components/filters/__tests__/filters.spec.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, FiltersMock, PackagesMock, Store } from '@mocks/';
|
||||
import Filters from '../filters';
|
||||
|
||||
it('renders <Filters /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Store>
|
||||
<Router>
|
||||
<Filters filters={FiltersMock} packages={PackagesMock} />
|
||||
</Router>
|
||||
</Store>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import React, { Component } from 'react';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import { reduxForm } from 'redux-form';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import { Col, Row } from 'react-styled-flexboxgrid';
|
||||
import { reset } from 'redux-form';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
import { default as defaultState } from '@state/state';
|
||||
|
||||
import Inputs from './inputs';
|
||||
import { returnIcon } from '../icons';
|
||||
|
||||
import {
|
||||
FormGroup,
|
||||
Checkbox,
|
||||
Label,
|
||||
H2,
|
||||
H4,
|
||||
P,
|
||||
ViewContainer
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const FullWidth = styled(Margin)`
|
||||
width: 100%;
|
||||
,`;
|
||||
|
||||
const RowMargin = styled(Row)`
|
||||
margin-top: ${remcalc(-24)};
|
||||
`;
|
||||
|
||||
class Filters extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { filters: { cpu, cost, ram, disk } } = this.props;
|
||||
|
||||
this.state = {
|
||||
ram,
|
||||
cpu,
|
||||
disk,
|
||||
cost
|
||||
};
|
||||
}
|
||||
|
||||
handleResetClick = () => {
|
||||
const {
|
||||
dispatch,
|
||||
filterReset,
|
||||
filters: { cpu, cost, ram, disk }
|
||||
} = this.props;
|
||||
|
||||
filterReset();
|
||||
dispatch(reset('type'));
|
||||
|
||||
this.setState({
|
||||
ram,
|
||||
cpu,
|
||||
disk,
|
||||
cost
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
filters,
|
||||
ramChange,
|
||||
cpuChange,
|
||||
diskChange,
|
||||
costChange
|
||||
} = this.props;
|
||||
|
||||
return [
|
||||
<Row>
|
||||
<Col xs={8}>
|
||||
<Margin bottom={6}>
|
||||
<H2>Package</H2>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>,
|
||||
<RowMargin>
|
||||
<Col xs={8}>
|
||||
<P>
|
||||
A package defines the specs of your instance. On Triton, packages
|
||||
can only increase in size.{' '}
|
||||
<a href="https://docs.joyent.com/public-cloud/instances/packages/sizing">
|
||||
Read the docs
|
||||
</a>
|
||||
</P>
|
||||
</Col>
|
||||
</RowMargin>,
|
||||
<Row>
|
||||
<Col>
|
||||
<Margin vertical={2}>
|
||||
<H4>Filters</H4>
|
||||
</Margin>
|
||||
</Col>
|
||||
</Row>,
|
||||
<Row>
|
||||
{filters.groups
|
||||
.sort((a, b) => (a.name < b.name ? -1 : 1))
|
||||
.map((group, i) => (
|
||||
<Col>
|
||||
<FormGroup
|
||||
name={group.name}
|
||||
key={group.name}
|
||||
type="checkbox"
|
||||
reduxForm
|
||||
>
|
||||
<Checkbox>
|
||||
{returnIcon(group.name)}
|
||||
<Label>{group.name}</Label>
|
||||
</Checkbox>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
))}
|
||||
</Row>,
|
||||
<FullWidth top={2}>
|
||||
<Inputs
|
||||
ramChange={value => ramChange(value)}
|
||||
cpuChange={value => cpuChange(value)}
|
||||
diskChange={value => diskChange(value)}
|
||||
costChange={value => costChange(value)}
|
||||
filters={filters}
|
||||
disabled={isEqual(filters, defaultState.filters)}
|
||||
onClick={this.handleResetClick}
|
||||
/>
|
||||
</FullWidth>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default reduxForm({ form: 'type' })(Filters);
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as Filters } from './filters';
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
FormGroup,
|
||||
FormLabel,
|
||||
Input,
|
||||
Select,
|
||||
Button,
|
||||
InputDropdown
|
||||
} from 'joyent-ui-toolkit';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import { Padding } 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 valuesToSend = (changed, target, value, name) => ({
|
||||
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: {
|
||||
min: ram.min > 1 ? ram.min : ram.min * 1000,
|
||||
minSelected: 'MB',
|
||||
max: ram.max > 1 ? ram.max : ram.max * 1000,
|
||||
maxSelected: 'GB'
|
||||
},
|
||||
cpu,
|
||||
disk: {
|
||||
min: disk.min > 1 ? disk.min : disk.min * 1000,
|
||||
minSelected: 'GB',
|
||||
max: disk.max > 1 ? disk.max : disk.max * 1000,
|
||||
maxSelected: 'TB'
|
||||
},
|
||||
cost
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = (e, name, target) => {
|
||||
const changed = this.state[name];
|
||||
const value = (e.target || {}).value;
|
||||
|
||||
setTimeout(() => {
|
||||
this.props[`${name}Change`](valuesToSend(changed, target, value, name));
|
||||
}, 1000);
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
[name]: {
|
||||
...this.state[name],
|
||||
[target]: value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleSelectChange = (e, name, target, valueTarget) => {
|
||||
const value = (e.target || {}).value;
|
||||
this.setState({
|
||||
...this.state,
|
||||
[name]: {
|
||||
...this.state[name],
|
||||
[target]: value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
handleBlur = (e, name, target) => {
|
||||
const changed = this.state[name];
|
||||
const value = (e.target || {}).value;
|
||||
|
||||
this.props[`${name}Change`](valuesToSend(changed, target, value, name));
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
[name]: {
|
||||
...this.state[name],
|
||||
[target]: value
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { cpu, cost, ram, disk } = this.state;
|
||||
const { onClick, disabled } = this.props;
|
||||
|
||||
return [
|
||||
<Row bottom="xs">
|
||||
<Col>
|
||||
<Padding top={1}>
|
||||
<FormLabel>RAM</FormLabel>
|
||||
</Padding>
|
||||
<FormGroup flex center>
|
||||
<InputDropdown>
|
||||
<Input
|
||||
wrapped
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'ram', 'min')}
|
||||
onBlur={e => this.handleBlur(e, 'ram', 'min')}
|
||||
value={ram.min}
|
||||
/>
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectChange(e, 'ram', 'minSelected', 'min')}
|
||||
value={ram.minSelected}
|
||||
wrapped
|
||||
fluid
|
||||
>
|
||||
<option value="MB">MB</option>
|
||||
<option value="GB">GB</option>
|
||||
</Select>
|
||||
</InputDropdown>
|
||||
<Padding horizontal={2}>to</Padding>
|
||||
<InputDropdownBorder>
|
||||
<Input
|
||||
wrapped
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'ram', 'max')}
|
||||
onBlur={e => this.handleBlur(e, 'ram', 'max')}
|
||||
value={ram.max}
|
||||
/>
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectChange(e, 'ram', 'maxSelected', 'max')}
|
||||
value={ram.maxSelected}
|
||||
wrapped
|
||||
fluid
|
||||
>
|
||||
<option value="MB">MB</option>
|
||||
<option value="GB">GB</option>
|
||||
</Select>
|
||||
</InputDropdownBorder>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<Padding top={1}>
|
||||
<FormLabel>Disk</FormLabel>
|
||||
</Padding>
|
||||
<FormGroup flex center>
|
||||
<InputDropdown>
|
||||
<Input
|
||||
wrapped
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'disk', 'min')}
|
||||
onBlur={e => this.handleBlur(e, 'disk', 'min')}
|
||||
value={disk.min}
|
||||
/>
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectChange(e, 'disk', 'minSelected', 'min')}
|
||||
value={disk.minSelected}
|
||||
wrapped
|
||||
fluid
|
||||
>
|
||||
<option value="GB">GB</option>
|
||||
<option value="TB">TB</option>
|
||||
</Select>
|
||||
</InputDropdown>
|
||||
<Padding horizontal={2}>to</Padding>
|
||||
<InputDropdown>
|
||||
<Input
|
||||
wrapped
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'disk', 'max')}
|
||||
onBlur={e => this.handleBlur(e, 'disk', 'max')}
|
||||
value={disk.max}
|
||||
/>
|
||||
<Select
|
||||
onChange={e =>
|
||||
this.handleSelectChange(e, 'disk', 'maxSelected', 'min')}
|
||||
value={disk.maxSelected}
|
||||
wrapped
|
||||
fluid
|
||||
>
|
||||
<option value="GB">GB</option>
|
||||
<option value="TB">TB</option>
|
||||
</Select>
|
||||
</InputDropdown>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>,
|
||||
<RowFullWidth>
|
||||
<Col>
|
||||
<Padding top={1}>
|
||||
<FormLabel>vCPUs</FormLabel>
|
||||
</Padding>
|
||||
<FormGroup flex center>
|
||||
<Input
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'cpu', 'min')}
|
||||
onBlur={e => this.handleBlur(e, 'cpu', 'min')}
|
||||
value={cpu.min}
|
||||
/>
|
||||
<Padding horizontal={2}>to</Padding>
|
||||
<Input
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'cpu', 'max')}
|
||||
onBlur={e => this.handleBlur(e, 'cpu', 'max')}
|
||||
value={cpu.max}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col>
|
||||
<Padding top={1}>
|
||||
<FormLabel>$/hour</FormLabel>
|
||||
</Padding>
|
||||
<FormGroup flex center>
|
||||
<Input
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'cost', 'min')}
|
||||
onBlur={e => this.handleBlur(e, 'cost', 'min')}
|
||||
value={cost.min}
|
||||
/>
|
||||
<Padding horizontal={2}>to</Padding>
|
||||
<Input
|
||||
small
|
||||
type="text"
|
||||
onChange={e => this.handleChange(e, 'cost', 'max')}
|
||||
onBlur={e => this.handleBlur(e, 'cost', 'max')}
|
||||
value={cost.max}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</RowFullWidth>,
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Button disabled={disabled} secondary small bold onClick={onClick}>
|
||||
Reset All Filters
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default Inputs;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Home /> without throwing 1`] = `
|
||||
<MemoryRouter>
|
||||
<Home
|
||||
filters={
|
||||
Object {
|
||||
"cost": Object {
|
||||
"max": 0.525,
|
||||
"min": 0.016,
|
||||
},
|
||||
"cpu": Object {
|
||||
"max": 3.25,
|
||||
"min": 0.25,
|
||||
},
|
||||
"disk": Object {
|
||||
"max": 107.26,
|
||||
"min": 0.01,
|
||||
},
|
||||
"groups": Array [
|
||||
Object {
|
||||
"name": "Compute Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "Memory Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "General Purpose",
|
||||
"selected": false,
|
||||
},
|
||||
Object {
|
||||
"name": "Storage Optimized",
|
||||
"selected": false,
|
||||
},
|
||||
],
|
||||
"ram": Object {
|
||||
"max": 50.688,
|
||||
"min": 0.256,
|
||||
},
|
||||
}
|
||||
}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
`;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ShallowRenderer from 'react-test-renderer/shallow';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, FiltersMock } from '@mocks/';
|
||||
import Home from '../home';
|
||||
|
||||
it('renders <Home /> without throwing', () => {
|
||||
const renderer = new ShallowRenderer();
|
||||
renderer.render(
|
||||
<Router>
|
||||
<Home filters={FiltersMock} />
|
||||
</Router>
|
||||
);
|
||||
const tree = renderer.getRenderOutput();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import { Filters } from '@components/filters';
|
||||
import PackagesHOC from '@containers/packages';
|
||||
import AffinityHOC from '@containers/affinity';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
import {
|
||||
Message,
|
||||
BreadcrumbItem,
|
||||
Anchor,
|
||||
Button,
|
||||
Divider
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
class Home extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showMessage: true
|
||||
};
|
||||
}
|
||||
|
||||
closeMessage = () => {
|
||||
this.setState({
|
||||
showMessage: false
|
||||
});
|
||||
};
|
||||
|
||||
changeValue = (key, value) => {
|
||||
const { filters, onFilterChange } = this.props;
|
||||
|
||||
onFilterChange({
|
||||
...filters,
|
||||
[key]: value
|
||||
});
|
||||
};
|
||||
|
||||
componentWillReceiveProps = nextProps => {
|
||||
const values = nextProps.form.type.values;
|
||||
const type = nextProps.form.type;
|
||||
if (nextProps.form !== this.props.form && type && values) {
|
||||
const { filters, onFilterChange } = this.props;
|
||||
|
||||
const groups = Object.keys(type.registeredFields).map(key => ({
|
||||
name: key,
|
||||
selected: values[key] ? values[key] : false
|
||||
}));
|
||||
|
||||
console.table(groups);
|
||||
onFilterChange({
|
||||
...filters,
|
||||
groups
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showMessage } = this.state;
|
||||
const { filters, onFilterReset, packages } = this.props;
|
||||
const _msg = showMessage ? (
|
||||
<Message onCloseClick={this.closeMessage}>
|
||||
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>
|
||||
</Message>
|
||||
) : null;
|
||||
|
||||
const breadcrumbLinks = [
|
||||
{ name: 'Instances', pathname: '/' },
|
||||
{ name: 'Create Instance', pathname: '/' }
|
||||
].map(({ name, pathname }) => (
|
||||
<BreadcrumbItem key={name} to={pathname}>
|
||||
{name}
|
||||
</BreadcrumbItem>
|
||||
));
|
||||
|
||||
return [
|
||||
<Row><Col xs={12}>{breadcrumbLinks}</Col></Row>,
|
||||
<Row><Col xs={12}>{_msg}</Col></Row>,
|
||||
<Margin vertical={2}>
|
||||
<Divider height="1px" />
|
||||
</Margin>,
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Filters
|
||||
packages={packages}
|
||||
filters={filters}
|
||||
filterReset={onFilterReset}
|
||||
ramChange={value => this.changeValue('ram', value)}
|
||||
cpuChange={value => this.changeValue('cpu', value)}
|
||||
diskChange={value => this.changeValue('disk', value)}
|
||||
costChange={value => this.changeValue('cost', value)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>,
|
||||
<Margin top={2}>
|
||||
<PackagesHOC />
|
||||
</Margin>,
|
||||
<Row end="xs">
|
||||
<Col xs={12}><Button>Next</Button></Col>
|
||||
</Row>,
|
||||
<Margin top={2}>
|
||||
<AffinityHOC />
|
||||
</Margin>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as Home } from './home';
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import CpuIcon from '../../assets/cpu.svg';
|
||||
import GpIcon from '../../assets/gp.svg';
|
||||
import MoIcon from '../../assets/mo.svg';
|
||||
import SoIcon from '../../assets/so.svg';
|
||||
import { TooltipContainer, TooltipTarget, Tooltip } from 'joyent-ui-toolkit';
|
||||
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
|
||||
const IconWrapper = styled.div`
|
||||
float: left;
|
||||
`;
|
||||
|
||||
const Flex = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const returnIcon = group => {
|
||||
let icon;
|
||||
switch (group) {
|
||||
case 'Compute Optimized':
|
||||
icon = <CpuIcon width="24" height="24" />;
|
||||
break;
|
||||
case 'General Purpose':
|
||||
icon = <GpIcon width="24" height="24" />;
|
||||
break;
|
||||
case 'Memory Optimized':
|
||||
icon = <MoIcon width="24" height="24" />;
|
||||
break;
|
||||
case 'Storage Optimized':
|
||||
icon = <SoIcon width="24" height="24" />;
|
||||
break;
|
||||
default:
|
||||
icon = <GpIcon width="24" height="24" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<IconWrapper>
|
||||
<TooltipContainer hoverable>
|
||||
<TooltipTarget>
|
||||
<Margin right={1}>
|
||||
<Flex>{icon}</Flex>
|
||||
</Margin>
|
||||
</TooltipTarget>
|
||||
<Tooltip placement="bottom">{group}</Tooltip>
|
||||
</TooltipContainer>
|
||||
</IconWrapper>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Header /> without throwing 1`] = `
|
||||
.c2 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.84375rem 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<h2
|
||||
className="c2"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
name="Go to home"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<img
|
||||
alt="Triton Logo"
|
||||
className="c3"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <NotFound /> without throwing 1`] = `
|
||||
.c5 {
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c5 + p,
|
||||
.c5 + small,
|
||||
.c5 + h1,
|
||||
.c5 + h2,
|
||||
.c5 + label,
|
||||
.c5 + h3,
|
||||
.c5 + h4,
|
||||
.c5 + h5,
|
||||
.c5 + div,
|
||||
.c5 + span {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0.9375rem 1.125rem;
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
line-height: normal;
|
||||
-webkit-letter-spacing: normal;
|
||||
-moz-letter-spacing: normal;
|
||||
-ms-letter-spacing: normal;
|
||||
letter-spacing: normal;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
touch-action: manipulation;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border-radius: 0.25rem;
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c6:focus {
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.c6:hover {
|
||||
border: solid 0.0625rem;
|
||||
}
|
||||
|
||||
.c6:active,
|
||||
.c6:active:hover,
|
||||
.c6:active:focus {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.c6[disabled] {
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-size: 2rem;
|
||||
margin: 0.625rem 0;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.8125rem;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
}
|
||||
|
||||
.c3 + p,
|
||||
.c3 + small,
|
||||
.c3 + h1,
|
||||
.c3 + h2,
|
||||
.c3 + label,
|
||||
.c3 + h3,
|
||||
.c3 + h4,
|
||||
.c3 + h5,
|
||||
.c3 + div,
|
||||
.c3 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-top: 3.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-weight: normal;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
margin-bottom: 1.875rem;
|
||||
max-width: 30.625rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c0 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c0 {
|
||||
width: 61rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c0 {
|
||||
width: 76rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:48rem) {
|
||||
.c0 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<h1
|
||||
className="c2 c3"
|
||||
>
|
||||
I have no memory of this place
|
||||
</h1>
|
||||
<p
|
||||
className="c4 c5"
|
||||
>
|
||||
HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.
|
||||
</p>
|
||||
<a
|
||||
className="c6"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
primary={true}
|
||||
>
|
||||
Back home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <SectionNav /> without throwing 1`] = `
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.c3.active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 1.125rem 0 0 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<ul
|
||||
className="c1"
|
||||
>
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
<a
|
||||
aria-current="true"
|
||||
className="active c3 active"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
style={Object {}}
|
||||
>
|
||||
Instances
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Custom images
|
||||
</li>
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Docker images
|
||||
</li>
|
||||
<li
|
||||
className="c2"
|
||||
>
|
||||
Docker registries
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
21
prototypes/create-instance-icons/src/components/navigation/__tests__/header.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/components/navigation/__tests__/header.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import { Header } from '../';
|
||||
|
||||
it('renders <Header /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Header />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
21
prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/components/navigation/__tests__/not-found.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
import { Router } from '@mocks/';
|
||||
|
||||
import { NotFound } from '../';
|
||||
|
||||
it('renders <NotFound /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<NotFound />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Header,
|
||||
HeaderBrand,
|
||||
TritonBetaIcon,
|
||||
HeaderNav,
|
||||
HeaderItem,
|
||||
DataCenterIconLight,
|
||||
UserIconLight
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const NavHeader = () => (
|
||||
<Header>
|
||||
<HeaderBrand beta>
|
||||
<TritonBetaIcon />
|
||||
</HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li>
|
||||
<Link className="active" to="/">
|
||||
Compute
|
||||
</Link>
|
||||
</li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem>
|
||||
<DataCenterIconLight />eu-east-1
|
||||
</HeaderItem>
|
||||
<HeaderItem>
|
||||
<UserIconLight />Nicola
|
||||
</HeaderItem>
|
||||
</Header>
|
||||
);
|
||||
|
||||
export default NavHeader;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as Header } from './header';
|
||||
export { default as NotFound } from './not-found';
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
|
||||
const NotFound = ({
|
||||
title = 'I have no memory of this place',
|
||||
message = `HTTP 404: We can’t find what you are looking for.
|
||||
Next time, always follow your nose.`,
|
||||
link = 'Back home',
|
||||
to = '/'
|
||||
}) => (
|
||||
<ViewContainer>
|
||||
<Margin top={10}>
|
||||
<H1>{title}</H1>
|
||||
<P>{message}</P>
|
||||
<Margin top={5}>
|
||||
<Button to={to}>{link}</Button>
|
||||
</Margin>
|
||||
</Margin>
|
||||
</ViewContainer>
|
||||
);
|
||||
|
||||
NotFound.propTypes = {
|
||||
title: PropTypes.string,
|
||||
message: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
to: PropTypes.string
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Package /> without throwing 1`] = `
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-grow: 4;
|
||||
-ms-flex-grow: 4;
|
||||
flex-grow: 4;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 7.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 0.0625rem solid;
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-right: 0rem;
|
||||
margin-left: 0rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
|
||||
min-height: 11.5625rem;
|
||||
min-width: 292px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
min-width: auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c7 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.8);
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c3 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0 c1"
|
||||
name="card"
|
||||
onClick={undefined}
|
||||
selected={undefined}
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.263
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
7.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
4
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
200
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c6 c5"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c7"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c5"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
selected={undefined}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
30
prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js
vendored
Normal file
30
prototypes/create-instance-icons/src/components/package/__tests__/index.spec.js
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import Package from '../';
|
||||
|
||||
const pack = {
|
||||
disk: 200,
|
||||
group: 'Compute Optimized',
|
||||
memory: 7.8,
|
||||
name: 'High CPU 7.75',
|
||||
price: '0.263',
|
||||
vcpus: 4
|
||||
};
|
||||
|
||||
it('renders <Package /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Package pack={pack} />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { reduxForm } from 'redux-form';
|
||||
|
||||
import { returnIcon } from '../icons';
|
||||
|
||||
import { TableTr, TableTd, H4, Radio, FormGroup } from 'joyent-ui-toolkit';
|
||||
|
||||
const Package = ({
|
||||
pack: { price, memory, vcpus, disk, group, ssd, name },
|
||||
selected,
|
||||
onClick
|
||||
}) => (
|
||||
<TableTr selected={selected}>
|
||||
<TableTd>
|
||||
<FormGroup name={name}>
|
||||
<Radio onClick={onClick} name={name} value={name} checked={selected} />
|
||||
</FormGroup>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
{returnIcon(group)}
|
||||
<H4>{name}</H4>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
{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>
|
||||
</TableTr>
|
||||
);
|
||||
|
||||
export default reduxForm({ form: 'selected' })(Package);
|
||||
|
|
@ -0,0 +1,784 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Packages /> without throwing 1`] = `
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-flex-grow: 4;
|
||||
-ms-flex-grow: 4;
|
||||
flex-grow: 4;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.125rem 0 1.125rem;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 7.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
border: 0.0625rem solid;
|
||||
box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05);
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-right: 0rem;
|
||||
margin-left: 0rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,0.05);
|
||||
min-height: 11.5625rem;
|
||||
min-width: 292px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
padding-top: 0;
|
||||
min-width: auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
font-size: 0.875rem;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0 1.125rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
font-weight: 400;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 5.625rem;
|
||||
-ms-flex-basis: 5.625rem;
|
||||
flex-basis: 5.625rem;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
display: inline-block;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
font-weight: 400;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: rgba(73,73,73,0.8);
|
||||
-webkit-transition: all 300ms ease;
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
margin-right: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
min-width: 100%;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2.25rem;
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-basis: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 33.333333333333336%;
|
||||
-ms-flex-basis: 33.333333333333336%;
|
||||
flex-basis: 33.333333333333336%;
|
||||
max-width: 33.333333333333336%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-basis: 25%;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c5 {
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-basis: 50%;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
<section
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.016
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.256
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.25
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
10
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.033
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.768
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
0.5
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
25
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.066
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
1.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
1
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
50
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.131
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
3.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
2
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
100
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.263
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
7.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
4
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
200
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2 c3"
|
||||
name="card"
|
||||
onClick={[Function]}
|
||||
selected={false}
|
||||
>
|
||||
<div
|
||||
className="c4"
|
||||
name="card-view"
|
||||
>
|
||||
<div
|
||||
className="c5"
|
||||
name="card-meta"
|
||||
>
|
||||
<div
|
||||
className="c6"
|
||||
>
|
||||
<div
|
||||
className="c7"
|
||||
name="card-title"
|
||||
>
|
||||
$
|
||||
0.525
|
||||
per hour
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
15.8
|
||||
GB RAM
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
8
|
||||
vCPUs
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
400
|
||||
TB disk
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c8 c7"
|
||||
name="card-subtitle"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
>
|
||||
Magnetic
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c10 c7"
|
||||
name="card-footer"
|
||||
>
|
||||
<span
|
||||
className="c11"
|
||||
selected={false}
|
||||
>
|
||||
Compute Optimized
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`;
|
||||
21
prototypes/create-instance-icons/src/components/packages/__tests__/list.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/components/packages/__tests__/list.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router, PackagesMock, FiltersMock } from '@mocks/';
|
||||
import { Packages } from '../';
|
||||
|
||||
it('renders <Packages /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Packages packages={PackagesMock} filters={FiltersMock} />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as Packages } from './list';
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
||||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Package from '@components/package';
|
||||
import Empty from '@components/empty';
|
||||
import sortBy from 'lodash.sortby';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import is from 'styled-is';
|
||||
import {
|
||||
Table,
|
||||
TableThead,
|
||||
TableTbody,
|
||||
TableTr,
|
||||
TableTh,
|
||||
ArrowIcon
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
const ArrowIconStyled = styled(ArrowIcon)`
|
||||
margin-left: ${remcalc(6)};
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: ${remcalc(-1)};
|
||||
transition: transform 200ms ease;
|
||||
|
||||
path {
|
||||
fill: ${props => props.theme.grey};
|
||||
}
|
||||
|
||||
${is('selected', 'down')`
|
||||
transform: rotate(180deg);
|
||||
path {
|
||||
fill: ${props => props.theme.text};
|
||||
}
|
||||
`};
|
||||
`;
|
||||
|
||||
const Span = styled.span`
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
class Packages extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
packages: props.packages,
|
||||
selected: null
|
||||
};
|
||||
}
|
||||
|
||||
handleClick = id => {
|
||||
this.setState({
|
||||
selected: id !== this.state.selected ? id : null
|
||||
});
|
||||
};
|
||||
|
||||
componentWillReceiveProps = nextProps => {
|
||||
this.setState({
|
||||
packages: nextProps.packages
|
||||
});
|
||||
};
|
||||
|
||||
order = column => {
|
||||
const { packages } = this.state;
|
||||
const desc = sortBy(packages, [column]).reverse();
|
||||
const asc = sortBy(packages, [column]);
|
||||
|
||||
this.setState({
|
||||
packages: isEqual(packages, asc) ? desc : asc,
|
||||
ordered: column,
|
||||
[column]: !isEqual(packages, asc)
|
||||
});
|
||||
};
|
||||
|
||||
_cards = () => {
|
||||
const { selected, packages, ordered } = this.state;
|
||||
|
||||
return packages.length > 0 ? (
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Table>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh xs="40" />
|
||||
<TableTh selected={ordered === 'name'}>
|
||||
<Span role="button" onClick={() => this.order('name')}>
|
||||
Name{' '}
|
||||
</Span>
|
||||
<ArrowIconStyled
|
||||
selected={ordered === 'name'}
|
||||
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>
|
||||
<ArrowIconStyled
|
||||
selected={ordered === 'memory'}
|
||||
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>
|
||||
<ArrowIconStyled
|
||||
selected={ordered === 'disk'}
|
||||
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>
|
||||
<ArrowIconStyled
|
||||
selected={ordered === 'vcpus'}
|
||||
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>
|
||||
<ArrowIconStyled
|
||||
selected={ordered === 'price'}
|
||||
down={this.state.price}
|
||||
onClick={() => this.order('price')}
|
||||
/>
|
||||
</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
<TableTbody>
|
||||
{packages.map(pack => (
|
||||
<Package
|
||||
pack={pack}
|
||||
onClick={() => this.handleClick(pack.id)}
|
||||
selected={selected === pack.id}
|
||||
key={pack.id}
|
||||
/>
|
||||
))}
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Col>
|
||||
</Row>
|
||||
) : (
|
||||
<Row>
|
||||
<Col>
|
||||
<Empty />
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
render = () => this._cards();
|
||||
}
|
||||
|
||||
export default Packages;
|
||||
File diff suppressed because it is too large
Load Diff
23
prototypes/create-instance-icons/src/containers/affinity/__tests__/index.spec.js
vendored
Normal file
23
prototypes/create-instance-icons/src/containers/affinity/__tests__/index.spec.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import PackagesHOC from '../';
|
||||
import { Router, Store } from '@mocks/';
|
||||
|
||||
it('renders <PackagesHOC /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Store>
|
||||
<PackagesHOC />
|
||||
</Store>
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import Affinity from '@components/affinity';
|
||||
|
||||
const AffinityHOC = ({ affinity }) => <Affinity affinity={affinity} />;
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
affinity: state.form.affinityForm
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(AffinityHOC);
|
||||
File diff suppressed because it is too large
Load Diff
23
prototypes/create-instance-icons/src/containers/home/__tests__/index.spec.js
vendored
Normal file
23
prototypes/create-instance-icons/src/containers/home/__tests__/index.spec.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import HomeHOC from '../';
|
||||
import { Router, Store } from '@mocks/';
|
||||
|
||||
it('renders <HomeHOC /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Store>
|
||||
<HomeHOC />
|
||||
</Store>
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { ViewContainer } from 'joyent-ui-toolkit';
|
||||
|
||||
import { Home } from '@components/home';
|
||||
import { changeFilters, resetFilters } from '../../state/actions';
|
||||
|
||||
const HomeHOC = props => (
|
||||
<ViewContainer main>
|
||||
<Home {...props} />
|
||||
</ViewContainer>
|
||||
);
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
filters: state.app.filters,
|
||||
packages: state.app.packages,
|
||||
form: state.form
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
onFilterChange: filters => {
|
||||
dispatch(changeFilters(filters));
|
||||
},
|
||||
onFilterReset: () => {
|
||||
dispatch(resetFilters());
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(HomeHOC);
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <Header /> without throwing 1`] = `
|
||||
.c2 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.8125rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c2 + p,
|
||||
.c2 + small,
|
||||
.c2 + h1,
|
||||
.c2 + h2,
|
||||
.c2 + label,
|
||||
.c2 + h3,
|
||||
.c2 + h4,
|
||||
.c2 + h5,
|
||||
.c2 + div,
|
||||
.c2 + span {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-align-self: stretch;
|
||||
-ms-flex-item-align: stretch;
|
||||
align-self: stretch;
|
||||
-webkit-order: 0;
|
||||
-ms-flex-order: 0;
|
||||
order: 0;
|
||||
padding: 0.84375rem 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
max-height: 3.3125rem;
|
||||
min-height: 3.3125rem;
|
||||
padding: 0 1.125rem;
|
||||
line-height: 1.5625rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-style: none;
|
||||
width: 5.4375rem;
|
||||
height: 1.5625rem;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<h2
|
||||
className="c2"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
name="Go to home"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<img
|
||||
alt="Triton Logo"
|
||||
className="c3"
|
||||
src="test-file-mock"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders <withNotFound /> without throwing 1`] = `<withNotFound />`;
|
||||
21
prototypes/create-instance-icons/src/containers/navigation/__tests__/header.spec.js
vendored
Normal file
21
prototypes/create-instance-icons/src/containers/navigation/__tests__/header.spec.js
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { Router } from '@mocks/';
|
||||
import { Header } from '../';
|
||||
|
||||
it('renders <Header /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Header />
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
14
prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js
vendored
Normal file
14
prototypes/create-instance-icons/src/containers/navigation/__tests__/not-found-hoc.spec.js
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { withNotFound } from '../';
|
||||
|
||||
it('renders <withNotFound /> without throwing', () => {
|
||||
const tree = renderer.create(<withNotFound />).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Header as HeaderComponent } from '@components/navigation';
|
||||
|
||||
export const Header = () => <HeaderComponent />;
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default as Header } from './header';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react';
|
||||
import { NotFound } from '@components/navigation';
|
||||
|
||||
const pathsExample = {
|
||||
title: 'I have no memory of this place',
|
||||
message:
|
||||
'HTTP 404: We can’t find what you are looking for. Next time, always follow your nose.',
|
||||
link: 'Back home',
|
||||
to: '/'
|
||||
};
|
||||
const NotFoundHOC = (paths = pathsExample) => (
|
||||
<NotFound
|
||||
title={paths.title}
|
||||
message="Sorry, but our princess is in another castle."
|
||||
to={paths.to}
|
||||
link={paths.link}
|
||||
/>
|
||||
);
|
||||
|
||||
export default NotFoundHOC;
|
||||
File diff suppressed because it is too large
Load Diff
23
prototypes/create-instance-icons/src/containers/packages/__tests__/index.spec.js
vendored
Normal file
23
prototypes/create-instance-icons/src/containers/packages/__tests__/index.spec.js
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/**
|
||||
* @jest-environment jsdom
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import PackagesHOC from '../';
|
||||
import { Router, Store } from '@mocks/';
|
||||
|
||||
it('renders <PackagesHOC /> without throwing', () => {
|
||||
const tree = renderer
|
||||
.create(
|
||||
<Router>
|
||||
<Store>
|
||||
<PackagesHOC />
|
||||
</Store>
|
||||
</Router>
|
||||
)
|
||||
.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Packages } from '@components/packages';
|
||||
|
||||
const PackagesHOC = ({ packages, filters, type }) => (
|
||||
<Packages packages={packages} filters={filters} groups={type} />
|
||||
);
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
packages: state.app.packages,
|
||||
filters: state.app.filters,
|
||||
type: state.form.type.values
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps)(PackagesHOC);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue