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

feat(instances): package selection for mobile or desktop version

This commit is contained in:
Fábio Moreira 2018-05-22 10:25:32 +01:00
parent db3bf3ce00
commit 62b5c201bc
3 changed files with 156 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

283
packages/instance-steps/src/package/components.js
View File

@ -192,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
</Margin> </Margin>
</Margin> </Margin>
); );
export const MobilePackage = ({
selected = false,
id,
name,
group,
memory,
price,
vcpus,
disk,
ssd,
hasVms,
sortBy,
onRowClick
}) => (
<FormItem selected={selected}>
<Padding all={2} onClick={() => onRowClick(id)}>
<FormGroup name="package" value={id} type="radio" field={Field} fluid>
<Radio onBlur={null} noMargin>
<Flex alignCenter>
<Margin left={2} right={1}>
{GroupIcons[group]}
</Margin>
<Margin left={1} right={2}>
<FormLabel style={{ fontWeight: '600' }} noMargin actionable>
{`${name} `}
{ssd && <Sup badge>SSD</Sup>}
</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
</Padding>
<PackageSpecs selected={selected}>
<Padding top={1} left={2} bottom={1}>
<Table>
<TableThead smallScreen>
<TableTr>
<TableTh left smallScreen>
<Padding top={1}>
<span>RAM </span>
</Padding>
</TableTh>
<TableTh left smallScreen>
<Padding top={1}>
<span>Disk </span>
</Padding>
</TableTh>
{hasVms && (
<TableTh left smallScreen>
<Padding top={1}>
<span>vCPU</span>
</Padding>
</TableTh>
)}
<TableTh left smallScreen>
<Padding top={1}>
<span>$/hour</span>
</Padding>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTrActionable onClick={() => onRowClick(id)}>
<TableTd
left
selected={selected}
bold={sortBy === 'memory'}
smallScreen
>
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
</TableTd>
<TableTd
left
selected={selected}
bold={sortBy === 'disk'}
smallScreen
>
<Margin inline right={1}>
{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
</Margin>
</TableTd>
{hasVms && (
<TableTd
left
bold={sortBy === 'vcpus'}
selected={selected}
smallScreen
>
{vcpus}
</TableTd>
)}
<TableTd
left
bold={sortBy === 'price'}
selected={selected}
smallScreen
>
{fourDecimals(price)}
</TableTd>
</TableTrActionable>
</TableTbody>
</Table>
</Padding>
</PackageSpecs>
</FormItem>
);
export const Package = ({ export const Package = ({
selected = false, selected = false,
@ -205,143 +311,48 @@ export const Package = ({
ssd, ssd,
hasVms, hasVms,
sortBy, sortBy,
onRowClick, onRowClick
xs }) => (
}) => { <TableTrActionable onClick={() => onRowClick(id)}>
return xs ? ( <TableTd right selected={selected}>
<FormItem selected={selected}> <FormGroup name="package" value={id} type="radio" field={Field} fluid>
<Padding all={2} onClick={() => onRowClick(id)}> <Radio onBlur={null} noMargin>
<FormGroup name="package" value={id} type="radio" field={Field} fluid> <Flex alignCenter>
<Radio onBlur={null} noMargin> <Margin left={5} right={1}>
<Flex alignCenter> {GroupIcons[group]}
<Margin left={2} right={1}> </Margin>
{GroupIcons[group]} <Margin left={1} right={2}>
</Margin> <FormLabel
<Margin left={1} right={2}> style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
<FormLabel style={{ fontWeight: '600' }} noMargin actionable> noMargin
{`${name} `} actionable
{ssd && <Sup badge>SSD</Sup>} >
</FormLabel> {name}
</Margin> </FormLabel>
</Flex> </Margin>
</Radio> </Flex>
</FormGroup> </Radio>
</Padding> </FormGroup>
<PackageSpecs selected={selected}> </TableTd>
<Padding top={1} left={2} bottom={1}> <TableTd right selected={selected} bold={sortBy === 'memory'}>
<Table> {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
<TableThead smallScreen> </TableTd>
<TableTr> <TableTd right selected={selected} bold={sortBy === 'disk'}>
<TableTh left smallScreen> <Margin inline right={1}>
<Padding top={1}> {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
<span>RAM </span> </Margin>
</Padding> {ssd && <Sup badge>SSD</Sup>}
</TableTh> </TableTd>
<TableTh left smallScreen> {hasVms && (
<Padding top={1}> <TableTd right bold={sortBy === 'vcpus'} selected={selected}>
<span>Disk </span> {vcpus}
</Padding>
</TableTh>
{hasVms && (
<TableTh left smallScreen>
<Padding top={1}>
<span>vCPU</span>
</Padding>
</TableTh>
)}
<TableTh left smallScreen>
<Padding top={1}>
<span>$/hour</span>
</Padding>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
<TableTrActionable onClick={() => onRowClick(id)}>
<TableTd
left
selected={selected}
bold={sortBy === 'memory'}
smallScreen
>
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
</TableTd>
<TableTd
left
selected={selected}
bold={sortBy === 'disk'}
smallScreen
>
<Margin inline right={1}>
{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
</Margin>
</TableTd>
{hasVms && (
<TableTd
left
bold={sortBy === 'vcpus'}
selected={selected}
smallScreen
>
{vcpus}
</TableTd>
)}
<TableTd
left
bold={sortBy === 'price'}
selected={selected}
smallScreen
>
{fourDecimals(price)}
</TableTd>
</TableTrActionable>
</TableTbody>
</Table>
</Padding>
</PackageSpecs>
</FormItem>
) : (
<TableTrActionable onClick={() => onRowClick(id)}>
<TableTd right selected={selected}>
<FormGroup name="package" value={id} type="radio" field={Field} fluid>
<Radio onBlur={null} noMargin>
<Flex alignCenter>
<Margin left={5} right={1}>
{GroupIcons[group]}
</Margin>
<Margin left={1} right={2}>
<FormLabel
style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
noMargin
actionable
>
{name}
</FormLabel>
</Margin>
</Flex>
</Radio>
</FormGroup>
</TableTd> </TableTd>
<TableTd right selected={selected} bold={sortBy === 'memory'}> )}
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })} <TableTd right bold={sortBy === 'price'} selected={selected}>
</TableTd> {fourDecimals(price)}
<TableTd right selected={selected} bold={sortBy === 'disk'}> </TableTd>
<Margin inline right={1}> </TableTrActionable>
{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })} );
</Margin>
{ssd && <Sup badge>SSD</Sup>}
</TableTd>
{hasVms && (
<TableTd right bold={sortBy === 'vcpus'} selected={selected}>
{vcpus}
</TableTd>
)}
<TableTd right bold={sortBy === 'price'} selected={selected}>
{fourDecimals(price)}
</TableTd>
</TableTrActionable>
);
};
export const Packages = ({ export const Packages = ({
pristine, pristine,

11
packages/instance-steps/src/package/index.js
View File

@ -23,7 +23,13 @@ import Step, {
import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit'; import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
import { Filters, Packages, Package, Overview } from './components'; import {
Filters,
Packages,
Package,
MobilePackage,
Overview
} from './components';
import getPackages from '../graphql/get-packages.gql'; import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json'; import priceData from './prices.json';
import { Forms, Values } from '../constants'; import { Forms, Values } from '../constants';
@ -89,14 +95,13 @@ const PackageComponent = ({
<Fragment> <Fragment>
<SmallOnly> <SmallOnly>
{packages.map(({ id, ...pkg }) => ( {packages.map(({ id, ...pkg }) => (
<Package <MobilePackage
key={id} key={id}
id={id} id={id}
selected={selected.id === id} selected={selected.id === id}
hasVms={hasVms} hasVms={hasVms}
onRowClick={handleRowClick} onRowClick={handleRowClick}
sortBy={sortBy} sortBy={sortBy}
xs
{...pkg} {...pkg}
/> />
))} ))}

2
packages/instance-steps/src/tags/index.js
View File

@ -69,7 +69,7 @@ const TagsContainer = ({
...props ...props
}) => ( }) => (
<Step name="tags" getValue={handleGetValue} {...props}> <Step name="tags" getValue={handleGetValue} {...props}>
<StepHeader icon={<TagsIcon />}>Tags</StepHeader> <StepHeader icon={1 === 0 && <TagsIcon />}>Tags</StepHeader>
<StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags"> <StepDescription href="https://docs.joyent.com/public-cloud/tags-metadata/tags">
Tags can be used to identify your instances, group multiple instances Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more. together, define firewall and affinity rules, and more.