2018-01-11 15:27:16 +02:00
|
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
|
import { Field } from 'redux-form';
|
|
|
|
|
import styled from 'styled-components';
|
2018-01-16 17:34:54 +02:00
|
|
|
|
import { Margin, Padding } from 'styled-components-spacing';
|
2018-01-11 15:27:16 +02:00
|
|
|
|
import remcalc from 'remcalc';
|
|
|
|
|
import Flex from 'styled-flex-component';
|
2018-01-16 17:34:54 +02:00
|
|
|
|
import bytes from 'bytes';
|
2018-01-11 15:27:16 +02:00
|
|
|
|
|
|
|
|
|
import {
|
2018-01-16 13:54:22 +02:00
|
|
|
|
H3,
|
2018-01-11 15:27:16 +02:00
|
|
|
|
H4,
|
2018-01-16 17:34:54 +02:00
|
|
|
|
Card,
|
2018-01-11 15:27:16 +02:00
|
|
|
|
FormGroup,
|
|
|
|
|
Button,
|
|
|
|
|
TableTh,
|
|
|
|
|
TableTr,
|
|
|
|
|
TableThead,
|
|
|
|
|
TableTbody,
|
|
|
|
|
Table,
|
|
|
|
|
TableTd,
|
|
|
|
|
Radio,
|
|
|
|
|
Checkbox,
|
|
|
|
|
Label,
|
|
|
|
|
GeneralIcon,
|
|
|
|
|
StorageIcon,
|
|
|
|
|
CpuIcon,
|
|
|
|
|
MemoryIcon
|
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
2018-01-16 17:34:54 +02:00
|
|
|
|
import NoPackagesImage from '../../assets/no-packages.svg';
|
|
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
|
const GroupIcons = {
|
|
|
|
|
MEMORY: <MemoryIcon fill="#32ABCF" />,
|
|
|
|
|
STORAGE: <StorageIcon fill="#A88A83" />,
|
|
|
|
|
GENERAL: <GeneralIcon fill="#E08A0E" />,
|
|
|
|
|
COMPUTE: <CpuIcon fill="#8043DC" />
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const VerticalDivider = styled.div`
|
|
|
|
|
width: ${remcalc(1)};
|
|
|
|
|
background: ${props => props.theme.grey};
|
|
|
|
|
height: ${remcalc(18)};
|
|
|
|
|
display: flex;
|
|
|
|
|
align-self: flex-end;
|
|
|
|
|
margin: 0 ${remcalc(18)};
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
`;
|
|
|
|
|
|
2018-01-16 17:34:54 +02:00
|
|
|
|
const SuperScript = styled.div`
|
2018-01-11 15:27:16 +02:00
|
|
|
|
background: ${props => props.theme.primary};
|
|
|
|
|
border-radius: ${remcalc(3)};
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
line-height: normal;
|
|
|
|
|
font-size: ${remcalc(8)};
|
|
|
|
|
color: ${props => props.theme.white};
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: ${remcalc(3)};
|
2018-01-16 17:34:54 +02:00
|
|
|
|
position: absolute;
|
|
|
|
|
margin-top: ${remcalc(-8)};
|
2018-01-11 15:27:16 +02:00
|
|
|
|
margin-left: ${remcalc(6)};
|
|
|
|
|
`;
|
|
|
|
|
|
2018-01-16 17:34:54 +02:00
|
|
|
|
const NoPackagesTitle = styled(H3)`
|
|
|
|
|
color: ${props => props.theme.greyDark};
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
export const Filters = ({ resetFilters }) => (
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<Margin top={4} bottom={3}>
|
|
|
|
|
<H4>Filters</H4>
|
|
|
|
|
<Flex alignCenter justifyBetween>
|
|
|
|
|
<FormGroup type="checkbox" name="compute-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>
|
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons.COMPUTE}
|
|
|
|
|
<Margin right={1} left={1}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
Compute Optimized
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="memory-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>
|
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons.MEMORY}
|
|
|
|
|
<Margin left={1} right={2}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
Memory Optimized
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="general-purpose" field={Field}>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>
|
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons.GENERAL}
|
|
|
|
|
<Margin left={1} right={2}>
|
|
|
|
|
General Purpose
|
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="storage-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>
|
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons.STORAGE}
|
|
|
|
|
<Margin left={1} right={2}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
Storage Optimized
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="ssd" field={Field}>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>SSD</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
</Flex>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<Margin top={2} bottom={1}>
|
|
|
|
|
<Button secondary onClick={resetFilters}>
|
|
|
|
|
Reset Filters
|
|
|
|
|
</Button>
|
|
|
|
|
</Margin>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
);
|
|
|
|
|
|
2018-01-16 17:34:54 +02:00
|
|
|
|
export const NoPackages = () => (
|
|
|
|
|
<Card>
|
|
|
|
|
<Padding all={6}>
|
|
|
|
|
<Flex alignCenter justifyCenter column>
|
|
|
|
|
<Margin bottom={2}>
|
|
|
|
|
<img src={NoPackagesImage} alt="No packages were found" />
|
|
|
|
|
</Margin>
|
|
|
|
|
<NoPackagesTitle>
|
|
|
|
|
Sorry, but we weren’t able to find any packages with that filter
|
|
|
|
|
</NoPackagesTitle>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Padding>
|
|
|
|
|
</Card>
|
|
|
|
|
);
|
|
|
|
|
|
2018-01-11 15:27:16 +02:00
|
|
|
|
export const Package = ({
|
|
|
|
|
selected = false,
|
|
|
|
|
id,
|
|
|
|
|
name,
|
|
|
|
|
group,
|
|
|
|
|
memory,
|
|
|
|
|
price,
|
|
|
|
|
vcpus,
|
|
|
|
|
disk,
|
|
|
|
|
ssd,
|
|
|
|
|
hasVms
|
|
|
|
|
}) => (
|
|
|
|
|
<TableTr>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<TableTd right selected={selected}>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<FormGroup name="package" value={id} type="radio" field={Field} fluid>
|
2018-01-18 13:16:56 +02:00
|
|
|
|
<Radio onBlur={null} noMargin>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons[group]}
|
|
|
|
|
<Margin left={1} right={2}>
|
|
|
|
|
<Label>{name}</Label>
|
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Radio>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
</TableTd>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<TableTd right selected={selected}>
|
|
|
|
|
{bytes(memory, { decimalPlaces: 0 })}
|
|
|
|
|
</TableTd>
|
|
|
|
|
<TableTd right selected={selected}>
|
|
|
|
|
{bytes(disk, { decimalPlaces: 0 })}
|
|
|
|
|
{ssd && <SuperScript>SSD</SuperScript>}
|
|
|
|
|
</TableTd>
|
|
|
|
|
{hasVms && (
|
|
|
|
|
<TableTd right selected={selected}>
|
|
|
|
|
{vcpus}
|
|
|
|
|
</TableTd>
|
|
|
|
|
)}
|
|
|
|
|
<TableTd right selected={selected}>
|
|
|
|
|
{price}
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</TableTd>
|
|
|
|
|
</TableTr>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const Packages = ({
|
|
|
|
|
handleSubmit,
|
|
|
|
|
pristine,
|
|
|
|
|
sortBy = 'name',
|
|
|
|
|
sortOrder = 'desc',
|
|
|
|
|
onSortBy = () => null,
|
|
|
|
|
hasVms,
|
2018-01-16 17:34:54 +02:00
|
|
|
|
children,
|
|
|
|
|
packages
|
2018-01-11 15:27:16 +02:00
|
|
|
|
}) => (
|
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
|
|
|
<Table>
|
|
|
|
|
<TableThead>
|
|
|
|
|
<TableTr>
|
|
|
|
|
<TableTh
|
|
|
|
|
onClick={() => onSortBy('name', sortOrder)}
|
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
|
showSort={sortBy === 'name'}
|
|
|
|
|
left
|
|
|
|
|
middle
|
|
|
|
|
xs="200"
|
|
|
|
|
actionable
|
|
|
|
|
>
|
|
|
|
|
<span>Name </span>
|
|
|
|
|
</TableTh>
|
|
|
|
|
<TableTh
|
|
|
|
|
xs="100"
|
2018-01-16 17:34:54 +02:00
|
|
|
|
onClick={() => onSortBy('memory', sortOrder)}
|
2018-01-11 15:27:16 +02:00
|
|
|
|
sortOrder={sortOrder}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
showSort={sortBy === 'memory'}
|
|
|
|
|
right
|
2018-01-11 15:27:16 +02:00
|
|
|
|
middle
|
|
|
|
|
actionable
|
|
|
|
|
>
|
|
|
|
|
<span>RAM </span>
|
|
|
|
|
</TableTh>
|
|
|
|
|
<TableTh
|
|
|
|
|
xs="100"
|
|
|
|
|
onClick={() => onSortBy('disk', sortOrder)}
|
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
|
showSort={sortBy === 'disk'}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
right
|
2018-01-11 15:27:16 +02:00
|
|
|
|
middle
|
|
|
|
|
actionable
|
|
|
|
|
>
|
|
|
|
|
<span>Disk </span>
|
|
|
|
|
</TableTh>
|
|
|
|
|
{hasVms && (
|
|
|
|
|
<TableTh
|
|
|
|
|
xs="100"
|
|
|
|
|
onClick={() => onSortBy('vcpu', sortOrder)}
|
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
|
showSort={sortBy === 'vcpu'}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
right
|
2018-01-11 15:27:16 +02:00
|
|
|
|
middle
|
|
|
|
|
actionable
|
|
|
|
|
>
|
|
|
|
|
<span>vCPU</span>
|
|
|
|
|
</TableTh>
|
|
|
|
|
)}
|
|
|
|
|
<TableTh
|
|
|
|
|
xs="100"
|
|
|
|
|
onClick={() => onSortBy('price', sortOrder)}
|
|
|
|
|
sortOrder={sortOrder}
|
|
|
|
|
showSort={sortBy === 'price'}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
right
|
2018-01-11 15:27:16 +02:00
|
|
|
|
middle
|
|
|
|
|
actionable
|
|
|
|
|
>
|
|
|
|
|
<span>$/hour</span>
|
|
|
|
|
</TableTh>
|
|
|
|
|
</TableTr>
|
|
|
|
|
</TableThead>
|
|
|
|
|
<TableTbody>{children}</TableTbody>
|
|
|
|
|
</Table>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
{!packages ? <NoPackages /> : null}
|
2018-01-16 13:54:22 +02:00
|
|
|
|
<Margin top={4}>
|
|
|
|
|
<Button type="submit" disabled={pristine}>
|
|
|
|
|
Next
|
|
|
|
|
</Button>
|
|
|
|
|
</Margin>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const Overview = ({
|
|
|
|
|
name,
|
|
|
|
|
price,
|
|
|
|
|
memory,
|
|
|
|
|
vcpus,
|
|
|
|
|
hasVms,
|
|
|
|
|
ssd,
|
|
|
|
|
disk,
|
|
|
|
|
onCancel
|
|
|
|
|
}) => (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<Margin bottom={2} top={3}>
|
2018-01-16 13:54:22 +02:00
|
|
|
|
<H3 bold>{name}</H3>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
<span>{price} $</span>
|
|
|
|
|
<VerticalDivider />
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<span>{bytes(memory, { decimalPlaces: 0 })}</span>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
{hasVms && (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<VerticalDivider />
|
|
|
|
|
<span>{vcpus} vCPUS</span>
|
|
|
|
|
</Fragment>
|
|
|
|
|
)}
|
|
|
|
|
<VerticalDivider />
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<span>{bytes(disk, { decimalPlaces: 0 })} disk</span>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<VerticalDivider />
|
|
|
|
|
{ssd && <span>SSD</span>}
|
|
|
|
|
</Flex>
|
|
|
|
|
</Margin>
|
|
|
|
|
<Button type="button" secondary onClick={onCancel}>
|
|
|
|
|
Edit
|
|
|
|
|
</Button>
|
|
|
|
|
</Fragment>
|
|
|
|
|
);
|