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>
);
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 = ({
selected = false,
@ -205,143 +311,48 @@ export const Package = ({
ssd,
hasVms,
sortBy,
onRowClick,
xs
}) => {
return xs ? (
<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>
) : (
<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>
onRowClick
}) => (
<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 right selected={selected} bold={sortBy === 'memory'}>
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
</TableTd>
<TableTd right selected={selected} bold={sortBy === 'disk'}>
<Margin inline right={1}>
{bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
</Margin>
{ssd && <Sup badge>SSD</Sup>}
</TableTd>
{hasVms && (
<TableTd right bold={sortBy === 'vcpus'} selected={selected}>
{vcpus}
</TableTd>
<TableTd right selected={selected} bold={sortBy === 'memory'}>
{bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
</TableTd>
<TableTd right selected={selected} bold={sortBy === 'disk'}>
<Margin inline right={1}>
{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>
);
};
)}
<TableTd right bold={sortBy === 'price'} selected={selected}>
{fourDecimals(price)}
</TableTd>
</TableTrActionable>
);
export const Packages = ({
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 { Filters, Packages, Package, Overview } from './components';
import {
Filters,
Packages,
Package,
MobilePackage,
Overview
} from './components';
import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json';
import { Forms, Values } from '../constants';
@ -89,14 +95,13 @@ const PackageComponent = ({
<Fragment>
<SmallOnly>
{packages.map(({ id, ...pkg }) => (
<Package
<MobilePackage
key={id}
id={id}
selected={selected.id === id}
hasVms={hasVms}
onRowClick={handleRowClick}
sortBy={sortBy}
xs
{...pkg}
/>
))}

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

@ -69,7 +69,7 @@ const TagsContainer = ({
...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">
Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more.