fix(my-joy-beta): update ui tests
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 45 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 40 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.1 KiB |
|
@ -3,7 +3,13 @@ import React from 'react';
|
||||||
import renderer from 'react-test-renderer';
|
import renderer from 'react-test-renderer';
|
||||||
import 'jest-styled-components';
|
import 'jest-styled-components';
|
||||||
|
|
||||||
import { Rules, TagRules, DefaultRules, ToggleFirewallForm, ToggleInactiveForm } from '../firewall';
|
import {
|
||||||
|
Rules,
|
||||||
|
TagRules,
|
||||||
|
DefaultRules,
|
||||||
|
ToggleFirewallForm,
|
||||||
|
ToggleInactiveForm
|
||||||
|
} from '../firewall';
|
||||||
|
|
||||||
import Theme from '@mocks/theme';
|
import Theme from '@mocks/theme';
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,6 @@ import remcalc from 'remcalc';
|
||||||
import { Margin, Padding } from 'styled-components-spacing';
|
import { Margin, Padding } from 'styled-components-spacing';
|
||||||
import Flex, { FlexItem } from 'styled-flex-component';
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import { Field } from 'redux-form';
|
import { Field } from 'redux-form';
|
||||||
import copy from 'clipboard-copy';
|
|
||||||
import { CopiableField } from '@components/instances/summary';
|
import { CopiableField } from '@components/instances/summary';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -36,8 +35,8 @@ export const Header = () => (
|
||||||
<H3>Hostnames</H3>
|
<H3>Hostnames</H3>
|
||||||
<Padding bottom={2}>
|
<Padding bottom={2}>
|
||||||
<P>
|
<P>
|
||||||
Default hostnames are automatically generated from both the instance name and any attached
|
Default hostnames are automatically generated from both the instance
|
||||||
networks.
|
name and any attached networks.
|
||||||
</P>
|
</P>
|
||||||
</Padding>
|
</Padding>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
@ -68,15 +67,20 @@ export const HostnamesHeader = () => (
|
||||||
<H3>CNS service hostnames</H3>
|
<H3>CNS service hostnames</H3>
|
||||||
<Padding bottom={3}>
|
<Padding bottom={3}>
|
||||||
<P>
|
<P>
|
||||||
CNS service hostnames are created by attaching a CNS service name to one or more instances.
|
CNS service hostnames are created by attaching a CNS service name to one
|
||||||
You can serve multiple instances under the same hostname by assigning them to a matching CNS
|
or more instances. You can serve multiple instances under the same
|
||||||
service name.
|
hostname by assigning them to a matching CNS service name.
|
||||||
</P>
|
</P>
|
||||||
</Padding>
|
</Padding>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine }) => (
|
export const AddServiceForm = ({
|
||||||
|
handleSubmit,
|
||||||
|
submitting,
|
||||||
|
disabled,
|
||||||
|
pristine
|
||||||
|
}) => (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Flex alignEnd wrap>
|
<Flex alignEnd wrap>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
|
@ -105,7 +109,13 @@ export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine })
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Hostname = ({ copy, values = [], network, service, ...hostname }) => (
|
export const Hostname = ({
|
||||||
|
copy,
|
||||||
|
values = [],
|
||||||
|
network,
|
||||||
|
service,
|
||||||
|
...hostname
|
||||||
|
}) => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{values.length ? (
|
{values.length ? (
|
||||||
<Margin bottom={4}>
|
<Margin bottom={4}>
|
||||||
|
@ -113,11 +123,15 @@ export const Hostname = ({ copy, values = [], network, service, ...hostname }) =
|
||||||
<SmallBordered bold noMargin>
|
<SmallBordered bold noMargin>
|
||||||
{network && service
|
{network && service
|
||||||
? 'Network CNS service'
|
? 'Network CNS service'
|
||||||
: network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '}
|
: network
|
||||||
|
? 'Network'
|
||||||
|
: service ? 'CNS service' : 'Instance name'}{' '}
|
||||||
hostname{values.length === 1 ? '' : 's'}
|
hostname{values.length === 1 ? '' : 's'}
|
||||||
</SmallBordered>
|
</SmallBordered>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>{hostname.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
|
<Margin right={1}>
|
||||||
|
{hostname.public ? <PublicIcon /> : <PrivateIcon />}
|
||||||
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
|
<Small noMargin>{hostname.public ? 'Public' : 'Private'}</Small>
|
||||||
|
@ -126,7 +140,10 @@ export const Hostname = ({ copy, values = [], network, service, ...hostname }) =
|
||||||
{values.map((value, i) => (
|
{values.map((value, i) => (
|
||||||
<Margin
|
<Margin
|
||||||
top={0.5}
|
top={0.5}
|
||||||
bottom={values.length !== 1 && values.length !== i + 1 ? '1' : undefined}>
|
bottom={
|
||||||
|
values.length !== 1 && values.length !== i + 1 ? '1' : undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
{copy ? (
|
{copy ? (
|
||||||
<CopiableField disabled md={12} text={value} />
|
<CopiableField disabled md={12} text={value} />
|
||||||
) : (
|
) : (
|
||||||
|
@ -169,7 +186,9 @@ const CnsHostnames = ({
|
||||||
active
|
active
|
||||||
key={value}
|
key={value}
|
||||||
value={value}
|
value={value}
|
||||||
onRemoveClick={onRemoveService && (() => onRemoveService(value))}
|
onRemoveClick={
|
||||||
|
onRemoveService && (() => onRemoveService(value))
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</TagList>
|
</TagList>
|
||||||
|
@ -187,17 +206,27 @@ const CnsHostnames = ({
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default ({ copy, hostnames = [], services = [], onRemoveService, children = null }) => (
|
export default ({
|
||||||
|
copy,
|
||||||
|
hostnames = [],
|
||||||
|
services = [],
|
||||||
|
onRemoveService,
|
||||||
|
children = null
|
||||||
|
}) => (
|
||||||
<Card>
|
<Card>
|
||||||
<Padding all={4} bottom={0}>
|
<Padding all={4} bottom={0}>
|
||||||
<DefaultHostnames copy={copy} hostnames={hostnames.filter(({ service }) => !service)} />
|
<DefaultHostnames
|
||||||
|
copy={copy}
|
||||||
|
hostnames={hostnames.filter(({ service }) => !service)}
|
||||||
|
/>
|
||||||
<Divider height={remcalc(1)} />
|
<Divider height={remcalc(1)} />
|
||||||
<Margin top={4}>
|
<Margin top={4}>
|
||||||
<CnsHostnames
|
<CnsHostnames
|
||||||
copy={copy}
|
copy={copy}
|
||||||
services={services}
|
services={services}
|
||||||
hostnames={hostnames.filter(({ service }) => service)}
|
hostnames={hostnames.filter(({ service }) => service)}
|
||||||
onRemoveService={onRemoveService}>
|
onRemoveService={onRemoveService}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</CnsHostnames>
|
</CnsHostnames>
|
||||||
</Margin>
|
</Margin>
|
||||||
|
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 22 KiB |
|
@ -6,9 +6,9 @@ Array [
|
||||||
|
|
||||||
:
|
:
|
||||||
</b>,
|
</b>,
|
||||||
" be on a ",
|
" be on a",
|
||||||
" ",
|
" ",
|
||||||
"node as the instance(s) identified by the instance ",
|
" node as the instance(s) identified by the instance ",
|
||||||
" ",
|
" ",
|
||||||
"key “",
|
"key “",
|
||||||
"\\" and the instance tag value",
|
"\\" and the instance tag value",
|
||||||
|
@ -25,9 +25,9 @@ Array [
|
||||||
|
|
||||||
:
|
:
|
||||||
</b>,
|
</b>,
|
||||||
" be on a ",
|
" be on a",
|
||||||
" ",
|
" ",
|
||||||
"node as the instance(s) identified by the instance ",
|
" node as the instance(s) identified by the instance ",
|
||||||
" ",
|
" ",
|
||||||
"key “",
|
"key “",
|
||||||
"\\" and the instance tag value",
|
"\\" and the instance tag value",
|
||||||
|
|
|
@ -35,7 +35,8 @@ export const Rule = rule => (
|
||||||
style={style}
|
style={style}
|
||||||
touched={rule['rule-instance-conditional']}
|
touched={rule['rule-instance-conditional']}
|
||||||
width={remcalc(66)}
|
width={remcalc(66)}
|
||||||
embedded>
|
embedded
|
||||||
|
>
|
||||||
<option value="must">must</option>
|
<option value="must">must</option>
|
||||||
<option value="should">should</option>
|
<option value="should">should</option>
|
||||||
</Select>
|
</Select>
|
||||||
|
@ -48,7 +49,8 @@ export const Rule = rule => (
|
||||||
style={style}
|
style={style}
|
||||||
touched={rule['rule-instance-placement']}
|
touched={rule['rule-instance-placement']}
|
||||||
width={remcalc(90)}
|
width={remcalc(90)}
|
||||||
embedded>
|
embedded
|
||||||
|
>
|
||||||
<option value="same">the same</option>
|
<option value="same">the same</option>
|
||||||
<option value="different">a different</option>
|
<option value="different">a different</option>
|
||||||
</Select>
|
</Select>
|
||||||
|
@ -57,7 +59,13 @@ export const Rule = rule => (
|
||||||
node as the instance(s) identified by the
|
node as the instance(s) identified by the
|
||||||
</H5>
|
</H5>
|
||||||
<FormGroup name="rule-type" field={Field}>
|
<FormGroup name="rule-type" field={Field}>
|
||||||
<Select style={style} touched={rule['rule-type']} width={remcalc(120)} embedded left>
|
<Select
|
||||||
|
style={style}
|
||||||
|
touched={rule['rule-type']}
|
||||||
|
width={remcalc(120)}
|
||||||
|
embedded
|
||||||
|
left
|
||||||
|
>
|
||||||
<option value="name">instance name</option>
|
<option value="name">instance name</option>
|
||||||
<option value="tag">tag</option>
|
<option value="tag">tag</option>
|
||||||
</Select>
|
</Select>
|
||||||
|
@ -116,8 +124,9 @@ export const Rule = rule => (
|
||||||
|
|
||||||
export const Header = rule => (
|
export const Header = rule => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a {rule['rule-instance-placement']}{' '}
|
<b>{titleCase(rule['rule-instance-conditional'])}:</b> be on a{' '}
|
||||||
node as the instance(s) identified by the instance {rule['rule-type']}
|
{rule['rule-instance-placement']} node as the instance(s) identified by the
|
||||||
|
instance {rule['rule-type']}
|
||||||
{rule['rule-type'] === 'name' ? (
|
{rule['rule-type'] === 'name' ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{' '}
|
{' '}
|
||||||
|
|
|
@ -56,7 +56,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>{network.public ? <PublicIcon /> : <PrivateIcon />}</Margin>
|
<Margin right={1}>
|
||||||
|
{network.public ? <PublicIcon /> : <PrivateIcon />}
|
||||||
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<P>{network.public ? 'Public' : 'Private'}</P>
|
<P>{network.public ? 'Public' : 'Private'}</P>
|
||||||
|
@ -68,7 +70,9 @@ export const Collapsed = ({ name, fabric, ...network }) => (
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
|
<Margin right={1}>
|
||||||
|
{fabric ? <FabricIcon /> : <DataCenterIcon />}
|
||||||
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
|
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
|
||||||
|
@ -137,10 +141,14 @@ export const Expanded = ({
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
|
<Margin right={1}>
|
||||||
|
{fabric ? <FabricIcon /> : <DataCenterIcon />}
|
||||||
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
|
<P>
|
||||||
|
{fabric ? 'Fabric network' : 'Data center network'}
|
||||||
|
</P>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
|
@ -149,7 +157,11 @@ export const Expanded = ({
|
||||||
{fabric ? (
|
{fabric ? (
|
||||||
<Margin top={3}>
|
<Margin top={3}>
|
||||||
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
|
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
|
||||||
<CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
|
<CardHeader
|
||||||
|
secondary={false}
|
||||||
|
transparent={false}
|
||||||
|
onClick={onInfoClick}
|
||||||
|
>
|
||||||
<CardHeaderMeta>
|
<CardHeaderMeta>
|
||||||
<Padding left={3} right={3}>
|
<Padding left={3} right={3}>
|
||||||
<P>Network information</P>
|
<P>Network information</P>
|
||||||
|
@ -167,7 +179,11 @@ export const Expanded = ({
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin bottom={3}>
|
<Margin bottom={3}>
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
<DotIcon right={remcalc(6)} size={remcalc(12)} color="green" />
|
<DotIcon
|
||||||
|
right={remcalc(6)}
|
||||||
|
size={remcalc(12)}
|
||||||
|
color="green"
|
||||||
|
/>
|
||||||
<Small bold noMargin>
|
<Small bold noMargin>
|
||||||
Outbound internet access enabled
|
Outbound internet access enabled
|
||||||
</Small>
|
</Small>
|
||||||
|
@ -179,7 +195,13 @@ export const Expanded = ({
|
||||||
<FormGroup name="id">
|
<FormGroup name="id">
|
||||||
<FormLabel>ID</FormLabel>
|
<FormLabel>ID</FormLabel>
|
||||||
<Margin top={0.5} bottom={2}>
|
<Margin top={0.5} bottom={2}>
|
||||||
<Input onBlur={null} big monospace type="text" value={id} />
|
<Input
|
||||||
|
onBlur={null}
|
||||||
|
big
|
||||||
|
monospace
|
||||||
|
type="text"
|
||||||
|
value={id}
|
||||||
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
|
@ -187,7 +209,13 @@ export const Expanded = ({
|
||||||
<FormGroup name="subnet">
|
<FormGroup name="subnet">
|
||||||
<FormLabel>Subnet</FormLabel>
|
<FormLabel>Subnet</FormLabel>
|
||||||
<Margin top={0.5} bottom={2}>
|
<Margin top={0.5} bottom={2}>
|
||||||
<Input onBlur={null} big monospace type="text" value={subnet} />
|
<Input
|
||||||
|
onBlur={null}
|
||||||
|
big
|
||||||
|
monospace
|
||||||
|
type="text"
|
||||||
|
value={subnet}
|
||||||
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
|
|
|
@ -132,7 +132,11 @@ export const Package = ({
|
||||||
<Flex alignCenter>
|
<Flex alignCenter>
|
||||||
{GroupIcons[group]}
|
{GroupIcons[group]}
|
||||||
<Margin left={1} right={2}>
|
<Margin left={1} right={2}>
|
||||||
<FormLabel style={{fontWeight: sortBy === 'name' ? 'bold': 'normal'}}>{name}</FormLabel>
|
<FormLabel
|
||||||
|
style={{ fontWeight: sortBy === 'name' ? 'bold' : 'normal' }}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</FormLabel>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Radio>
|
</Radio>
|
||||||
|
@ -180,7 +184,8 @@ export const Packages = ({
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
xs="200"
|
xs="200"
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Name </span>
|
<span>Name </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -190,7 +195,8 @@ export const Packages = ({
|
||||||
showSort={sortBy === 'memory'}
|
showSort={sortBy === 'memory'}
|
||||||
right
|
right
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>RAM </span>
|
<span>RAM </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -200,7 +206,8 @@ export const Packages = ({
|
||||||
showSort={sortBy === 'disk'}
|
showSort={sortBy === 'disk'}
|
||||||
right
|
right
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Disk </span>
|
<span>Disk </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
{hasVms && (
|
{hasVms && (
|
||||||
|
@ -211,7 +218,8 @@ export const Packages = ({
|
||||||
showSort={sortBy === 'vcpu'}
|
showSort={sortBy === 'vcpu'}
|
||||||
right
|
right
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>vCPU</span>
|
<span>vCPU</span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
)}
|
)}
|
||||||
|
@ -222,7 +230,8 @@ export const Packages = ({
|
||||||
showSort={sortBy === 'price'}
|
showSort={sortBy === 'price'}
|
||||||
right
|
right
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>$/hour</span>
|
<span>$/hour</span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
</TableTr>
|
</TableTr>
|
||||||
|
@ -230,12 +239,23 @@ export const Packages = ({
|
||||||
<TableTbody>{children}</TableTbody>
|
<TableTbody>{children}</TableTbody>
|
||||||
</Table>
|
</Table>
|
||||||
{!packages ? (
|
{!packages ? (
|
||||||
<Empty>Sorry, but we weren’t able to find any packages with that filter</Empty>
|
<Empty>
|
||||||
|
Sorry, but we weren’t able to find any packages with that filter
|
||||||
|
</Empty>
|
||||||
) : null}
|
) : null}
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Overview = ({ name, price, memory, vcpus, hasVms, ssd, disk, onCancel }) => (
|
export const Overview = ({
|
||||||
|
name,
|
||||||
|
price,
|
||||||
|
memory,
|
||||||
|
vcpus,
|
||||||
|
hasVms,
|
||||||
|
ssd,
|
||||||
|
disk,
|
||||||
|
onCancel
|
||||||
|
}) => (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Margin bottom={2}>
|
<Margin bottom={2}>
|
||||||
<H3 bold noMargin>
|
<H3 bold noMargin>
|
||||||
|
|
|
@ -12,14 +12,14 @@ const NoPackagesTitle = styled(H3)`
|
||||||
|
|
||||||
const FullWidthCard = styled(Card)`
|
const FullWidthCard = styled(Card)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`
|
`;
|
||||||
|
|
||||||
export default ({ children }) => (
|
export default ({ children }) => (
|
||||||
<FullWidthCard>
|
<FullWidthCard>
|
||||||
<Padding all={6}>
|
<Padding all={6}>
|
||||||
<Flex alignCenter justifyCenter column>
|
<Flex alignCenter justifyCenter column>
|
||||||
<Margin bottom={2}>
|
<Margin bottom={2}>
|
||||||
<img src={NoPackagesImage} alt="Sad Animal"/>
|
<img src={NoPackagesImage} alt="Sad Animal" />
|
||||||
</Margin>
|
</Margin>
|
||||||
<NoPackagesTitle>{children}</NoPackagesTitle>
|
<NoPackagesTitle>{children}</NoPackagesTitle>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
|
@ -5,11 +5,21 @@ import { Margin, Padding } from 'styled-components-spacing';
|
||||||
import Flex, { FlexItem } from 'styled-flex-component';
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||||
|
|
||||||
import { H3, FormGroup, FormLabel, Toggle, TagList, P, Strong, Card } from 'joyent-ui-toolkit';
|
import {
|
||||||
|
H3,
|
||||||
|
FormGroup,
|
||||||
|
FormLabel,
|
||||||
|
Toggle,
|
||||||
|
TagList,
|
||||||
|
P,
|
||||||
|
Strong,
|
||||||
|
Card
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
import Tag from '@components/tags';
|
import Tag from '@components/tags';
|
||||||
|
|
||||||
const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
|
const capitalizeFirstLetter = string =>
|
||||||
|
string.charAt(0).toUpperCase() + string.slice(1);
|
||||||
|
|
||||||
const Wildcards = {
|
const Wildcards = {
|
||||||
vmall: 'All VMs in DC',
|
vmall: 'All VMs in DC',
|
||||||
|
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 64 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 9.7 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
@ -69,7 +69,8 @@ export const Item = ({
|
||||||
<StatusLoader small />
|
<StatusLoader small />
|
||||||
) : (
|
) : (
|
||||||
<span>
|
<span>
|
||||||
<DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
|
<DotIcon size={remcalc(12)} color={stateColor[state]} />{' '}
|
||||||
|
{titleCase(state)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</TableTd>
|
</TableTd>
|
||||||
|
@ -139,7 +140,8 @@ export default ({
|
||||||
showSort={sortBy === 'name'}
|
showSort={sortBy === 'name'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Name </span>
|
<span>Name </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -149,7 +151,8 @@ export default ({
|
||||||
showSort={sortBy === 'state'}
|
showSort={sortBy === 'state'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Status </span>
|
<span>Status </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -160,7 +163,8 @@ export default ({
|
||||||
showSort={sortBy === 'created'}
|
showSort={sortBy === 'created'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Created </span>
|
<span>Created </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -171,7 +175,8 @@ export default ({
|
||||||
showSort={sortBy === 'id'}
|
showSort={sortBy === 'id'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Short ID </span>
|
<span>Short ID </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh xs="60" padding="0" />
|
<TableTh xs="60" padding="0" />
|
||||||
|
|
|
@ -30,7 +30,15 @@ const stateColor = {
|
||||||
CREATED: 'green'
|
CREATED: 'green'
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Item = ({ name, state, created, onStart, onRemove, updated, mutating }) => (
|
export const Item = ({
|
||||||
|
name,
|
||||||
|
state,
|
||||||
|
created,
|
||||||
|
onStart,
|
||||||
|
onRemove,
|
||||||
|
updated,
|
||||||
|
mutating
|
||||||
|
}) => (
|
||||||
<TableTr>
|
<TableTr>
|
||||||
{!mutating ? (
|
{!mutating ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
@ -43,7 +51,8 @@ export const Item = ({ name, state, created, onStart, onRemove, updated, mutatin
|
||||||
{name}
|
{name}
|
||||||
</TableTd>
|
</TableTd>
|
||||||
<TableTd middle left>
|
<TableTd middle left>
|
||||||
<DotIcon size={remcalc(12)} color={stateColor[state]} /> {titleCase(state)}
|
<DotIcon size={remcalc(12)} color={stateColor[state]} />{' '}
|
||||||
|
{titleCase(state)}
|
||||||
</TableTd>
|
</TableTd>
|
||||||
<TableTd xs="0" sm="160" middle left>
|
<TableTd xs="0" sm="160" middle left>
|
||||||
{distanceInWordsToNow(created)}
|
{distanceInWordsToNow(created)}
|
||||||
|
@ -72,7 +81,15 @@ export const Item = ({ name, state, created, onStart, onRemove, updated, mutatin
|
||||||
);
|
);
|
||||||
|
|
||||||
export const AddForm = props => (
|
export const AddForm = props => (
|
||||||
<KeyValue {...props} method="create" input="input" type="snapshot" expanded onlyName noRemove />
|
<KeyValue
|
||||||
|
{...props}
|
||||||
|
method="create"
|
||||||
|
input="input"
|
||||||
|
type="snapshot"
|
||||||
|
expanded
|
||||||
|
onlyName
|
||||||
|
noRemove
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default ({
|
export default ({
|
||||||
|
@ -111,7 +128,8 @@ export default ({
|
||||||
showSort={sortBy === 'name'}
|
showSort={sortBy === 'name'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Name </span>
|
<span>Name </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -121,7 +139,8 @@ export default ({
|
||||||
showSort={sortBy === 'state'}
|
showSort={sortBy === 'state'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Status </span>
|
<span>Status </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -132,7 +151,8 @@ export default ({
|
||||||
showSort={sortBy === 'created'}
|
showSort={sortBy === 'created'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Created </span>
|
<span>Created </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh
|
<TableTh
|
||||||
|
@ -143,7 +163,8 @@ export default ({
|
||||||
showSort={sortBy === 'updated'}
|
showSort={sortBy === 'updated'}
|
||||||
left
|
left
|
||||||
middle
|
middle
|
||||||
actionable>
|
actionable
|
||||||
|
>
|
||||||
<span>Updated </span>
|
<span>Updated </span>
|
||||||
</TableTh>
|
</TableTh>
|
||||||
<TableTh xs="60" padding="0" />
|
<TableTh xs="60" padding="0" />
|
||||||
|
|