import React, { Fragment } from 'react'; import { Field } from 'redux-form'; import styled from 'styled-components'; import { Margin } from 'styled-components-spacing'; import remcalc from 'remcalc'; import Flex from 'styled-flex-component'; import bytes from 'bytes'; import { H3, H4, Sup, FormGroup, Button, TableTh, TableTr, TableThead, TableTbody, Table, TableTd, Radio, Checkbox, FormLabel, GeneralIcon, StorageIcon, CpuIcon, MemoryIcon } from 'joyent-ui-toolkit'; import Empty from '@components/empty'; const GroupIcons = { MEMORY: , STORAGE: , GENERAL: , COMPUTE: }; 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; `; export const Filters = ({ resetFilters }) => (

Filters

{GroupIcons.COMPUTE} Compute Optimized {GroupIcons.MEMORY} Memory Optimized {GroupIcons.GENERAL} General Purpose {GroupIcons.STORAGE} Storage Optimized SSD
); export const Package = ({ selected = false, id, name, group, memory, price, vcpus, disk, ssd, hasVms }) => ( {GroupIcons[group]} {name} {bytes(memory, { decimalPlaces: 0 })} {bytes(disk, { decimalPlaces: 0 })} {ssd && ( SSD )} {hasVms && ( {vcpus} )} {price} ); export const Packages = ({ handleSubmit, pristine, sortBy = 'name', sortOrder = 'desc', onSortBy = () => null, hasVms, children, packages }) => (
onSortBy('name', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'name'} left middle xs="200" actionable > Name onSortBy('memory', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'memory'} right middle actionable > RAM onSortBy('disk', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'disk'} right middle actionable > Disk {hasVms && ( onSortBy('vcpu', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'vcpu'} right middle actionable > vCPU )} onSortBy('price', sortOrder)} sortOrder={sortOrder} showSort={sortBy === 'price'} right middle actionable > $/hour {children}
{!packages ? ( Sorry, but we weren’t able to find any packages with that filter ) : null}
); export const Overview = ({ name, price, memory, vcpus, hasVms, ssd, disk, onCancel }) => (

{name}

{price} $ {bytes(memory, { decimalPlaces: 0 })} {hasVms && ( {vcpus} vCPUS )} {bytes(disk, { decimalPlaces: 0 })} disk {ssd && SSD}
);