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-18 16:51:22 +02:00
|
|
|
|
import { Margin } 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-30 02:06:48 +02:00
|
|
|
|
Sup,
|
2018-01-11 15:27:16 +02:00
|
|
|
|
FormGroup,
|
|
|
|
|
Button,
|
|
|
|
|
TableTh,
|
|
|
|
|
TableTr,
|
|
|
|
|
TableThead,
|
|
|
|
|
TableTbody,
|
|
|
|
|
Table,
|
|
|
|
|
TableTd,
|
|
|
|
|
Radio,
|
|
|
|
|
Checkbox,
|
2018-01-29 22:21:01 +02:00
|
|
|
|
FormLabel,
|
2018-01-11 15:27:16 +02:00
|
|
|
|
GeneralIcon,
|
|
|
|
|
StorageIcon,
|
|
|
|
|
CpuIcon,
|
|
|
|
|
MemoryIcon
|
|
|
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
|
|
2018-01-25 00:40:43 +02:00
|
|
|
|
import Empty from '@components/empty';
|
2018-01-16 17:34:54 +02:00
|
|
|
|
|
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-02-23 17:59:12 +02:00
|
|
|
|
const TableTrActionable = styled(TableTr)`
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
`;
|
|
|
|
|
|
2018-01-30 18:04:03 +02:00
|
|
|
|
export const Filters = ({ onResetFilters }) => (
|
|
|
|
|
<Margin top={1} bottom={3}>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<H4>Filters</H4>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<Flex wrap alignCenter justifyBetween>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<FormGroup type="checkbox" name="compute-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<FormLabel actionable>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<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>
|
2018-01-29 22:21:01 +02:00
|
|
|
|
</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="memory-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<FormLabel actionable>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<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>
|
2018-01-29 22:21:01 +02:00
|
|
|
|
</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="general-purpose" field={Field}>
|
|
|
|
|
<Checkbox>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<FormLabel actionable>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons.GENERAL}
|
|
|
|
|
<Margin left={1} right={2}>
|
|
|
|
|
General Purpose
|
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
2018-01-29 22:21:01 +02:00
|
|
|
|
</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="storage-optimized" field={Field}>
|
|
|
|
|
<Checkbox>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<FormLabel actionable>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<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>
|
2018-01-29 22:21:01 +02:00
|
|
|
|
</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup type="checkbox" name="ssd" field={Field}>
|
|
|
|
|
<Checkbox>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<FormLabel actionable>SSD</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Checkbox>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
</Flex>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<Margin top={2} bottom={1}>
|
2018-01-30 18:04:03 +02:00
|
|
|
|
<Button type="button" onClick={onResetFilters} secondary>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
Reset Filters
|
|
|
|
|
</Button>
|
|
|
|
|
</Margin>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const Package = ({
|
|
|
|
|
selected = false,
|
|
|
|
|
id,
|
|
|
|
|
name,
|
|
|
|
|
group,
|
|
|
|
|
memory,
|
|
|
|
|
price,
|
|
|
|
|
vcpus,
|
|
|
|
|
disk,
|
|
|
|
|
ssd,
|
2018-02-01 17:33:58 +02:00
|
|
|
|
hasVms,
|
2018-02-23 17:59:12 +02:00
|
|
|
|
sortBy,
|
2018-02-23 21:46:19 +02:00
|
|
|
|
onRowClick
|
2018-01-11 15:27:16 +02:00
|
|
|
|
}) => (
|
2018-02-27 15:24:36 +02:00
|
|
|
|
<TableTrActionable onClick={() => onRowClick(id)}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
<TableTd right selected={selected}>
|
2018-02-23 21:46:19 +02:00
|
|
|
|
<FormGroup name="package" value={id} type="radio" field={Field} fluid>
|
|
|
|
|
<Radio onBlur={null} noMargin>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
{GroupIcons[group]}
|
|
|
|
|
<Margin left={1} right={2}>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<FormLabel
|
|
|
|
|
style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
|
|
|
|
|
>
|
|
|
|
|
{name}
|
|
|
|
|
</FormLabel>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Margin>
|
|
|
|
|
</Flex>
|
|
|
|
|
</Radio>
|
|
|
|
|
</FormGroup>
|
|
|
|
|
</TableTd>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<TableTd right selected={selected} bold={sortBy === 'memory'}>
|
|
|
|
|
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
</TableTd>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<TableTd right selected={selected} bold={sortBy === 'disk'}>
|
2018-02-27 15:44:08 +02:00
|
|
|
|
<Margin inline right={1}>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}</Margin>
|
2018-01-30 02:06:48 +02:00
|
|
|
|
{ssd && (
|
|
|
|
|
<Sup badge>SSD</Sup>
|
|
|
|
|
)}
|
2018-01-16 17:34:54 +02:00
|
|
|
|
</TableTd>
|
|
|
|
|
{hasVms && (
|
2018-02-22 00:43:58 +02:00
|
|
|
|
<TableTd right bold={sortBy === 'vcpus'} selected={selected}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
{vcpus}
|
|
|
|
|
</TableTd>
|
|
|
|
|
)}
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<TableTd right bold={sortBy === 'price'} selected={selected}>
|
2018-01-16 17:34:54 +02:00
|
|
|
|
{price}
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</TableTd>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
</TableTrActionable>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const Packages = ({
|
|
|
|
|
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
|
|
|
|
}) => (
|
2018-01-30 18:04:03 +02:00
|
|
|
|
<form>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
<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"
|
2018-02-22 00:43:58 +02:00
|
|
|
|
onClick={() => onSortBy('vcpus', sortOrder)}
|
2018-01-11 15:27:16 +02:00
|
|
|
|
sortOrder={sortOrder}
|
2018-02-22 00:43:58 +02:00
|
|
|
|
showSort={sortBy === 'vcpus'}
|
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-18 16:51:22 +02:00
|
|
|
|
{!packages ? (
|
|
|
|
|
<Empty>
|
|
|
|
|
Sorry, but we weren’t able to find any packages with that filter
|
|
|
|
|
</Empty>
|
|
|
|
|
) : null}
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export const Overview = ({
|
|
|
|
|
name,
|
|
|
|
|
price,
|
|
|
|
|
memory,
|
|
|
|
|
vcpus,
|
|
|
|
|
hasVms,
|
|
|
|
|
ssd,
|
|
|
|
|
disk,
|
|
|
|
|
onCancel
|
|
|
|
|
}) => (
|
|
|
|
|
<Fragment>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<Margin bottom={2}>
|
2018-02-23 17:59:12 +02:00
|
|
|
|
<H3 noMargin>{name}</H3>
|
2018-02-01 17:33:58 +02:00
|
|
|
|
</Margin>
|
2018-01-30 18:04:03 +02:00
|
|
|
|
<Flex alignCenter>
|
|
|
|
|
<span>{price} $</span>
|
|
|
|
|
<VerticalDivider />
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<span>{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}</span>
|
2018-01-30 18:04:03 +02:00
|
|
|
|
{hasVms && (
|
|
|
|
|
<Fragment>
|
|
|
|
|
<VerticalDivider />
|
|
|
|
|
<span>{vcpus} vCPUS</span>
|
|
|
|
|
</Fragment>
|
|
|
|
|
)}
|
|
|
|
|
<VerticalDivider />
|
2018-02-01 17:33:58 +02:00
|
|
|
|
<span>{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })} disk</span>
|
2018-01-30 18:04:03 +02:00
|
|
|
|
<VerticalDivider />
|
|
|
|
|
{ssd && <span>SSD</span>}
|
|
|
|
|
</Flex>
|
2018-01-11 15:27:16 +02:00
|
|
|
|
</Fragment>
|
|
|
|
|
);
|