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

fix(my-joy-beta): fix most of linting

This commit is contained in:
Sara Vieira 2018-01-31 18:57:26 +00:00
parent e88fcd7309
commit 1bc099d3f1
17 changed files with 91 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/my-joy-beta/src/components/__tests__/firewall.spec.js
View File

@ -1,14 +1,9 @@
import React, { Fragment } from 'react';
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
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';

3
packages/my-joy-beta/src/components/__tests__/firewall.ui.js
View File

@ -1,4 +1,5 @@
import React, { Fragment } from 'react';
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';

1
packages/my-joy-beta/src/components/__tests__/network.spec.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

1
packages/my-joy-beta/src/components/__tests__/network.ui.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';

44
packages/my-joy-beta/src/components/create-instance/network.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
@ -71,14 +72,10 @@ export const Collapsed = ({ name, fabric, ...network }) => (
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -146,14 +143,10 @@ export const Expanded = ({
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -162,11 +155,7 @@ export const Expanded = ({
{fabric ? (
<Margin top={3}>
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
<CardHeader
secondary={false}
transparent={false}
onClick={onInfoClick}
>
<CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
<CardHeaderMeta>
<Padding left={3} right={3}>
<P>Network information</P>
@ -185,10 +174,7 @@ export const Expanded = ({
<Margin bottom={3}>
<Flex alignCenter>
<Margin right={1}>
<DotIcon
size={remcalc(12)}
color="green"
/>
<DotIcon size={remcalc(12)} color="green" />
</Margin>
<Small bold noMargin>
Outbound internet access enabled
@ -201,13 +187,7 @@ export const Expanded = ({
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<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>
</FormGroup>
</FlexItem>
@ -215,13 +195,7 @@ export const Expanded = ({
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<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>
</FormGroup>
</FlexItem>

2
packages/my-joy-beta/src/components/empty.js
View File

@ -19,7 +19,7 @@ export default ({ children }) => (
<Padding all={6}>
<Flex alignCenter justifyCenter column>
<Margin bottom={2}>
<img src={NoPackagesImage} />
<img src={NoPackagesImage} alt="Sad Animal"/>
</Margin>
<NoPackagesTitle>{children}</NoPackagesTitle>
</Flex>

3
packages/my-joy-beta/src/components/firewall.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
@ -15,7 +16,7 @@ const Wildcards = {
any: 'Any'
};
const parsePartial = (p, index , style) => {
const parsePartial = (p, index, style) => {
if (p[0] === 'wildcard') {
return (
<Margin key={index} top={0.5} bottom={0.5}>

77
packages/my-joy-beta/src/components/network.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { Field } from 'redux-form';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
@ -72,14 +73,10 @@ export const Collapsed = ({ name, fabric, ...network }) => (
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -155,14 +152,10 @@ export const Expanded = ({
<FlexItem>
<Flex alignCenter>
<FlexItem>
<Margin right={1}>
{fabric ? <FabricIcon /> : <DataCenterIcon />}
</Margin>
<Margin right={1}>{fabric ? <FabricIcon /> : <DataCenterIcon />}</Margin>
</FlexItem>
<FlexItem>
<P>
{fabric ? 'Fabric network' : 'Data center network'}
</P>
<P>{fabric ? 'Fabric network' : 'Data center network'}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -177,11 +170,7 @@ export const Expanded = ({
</Margin>
</FlexItem>
<FlexItem>
<P>
{`${machines.length} instance${
machines.length === 1 ? '' : 's'
}`}
</P>
<P>{`${machines.length} instance${machines.length === 1 ? '' : 's'}`}</P>
</FlexItem>
</Flex>
</FlexItem>
@ -192,11 +181,7 @@ export const Expanded = ({
<Fragment>
<Margin top={3}>
<Card collapsed={!infoExpanded} actionable={!infoExpanded}>
<CardHeader
secondary={false}
transparent={false}
onClick={onInfoClick}
>
<CardHeader secondary={false} transparent={false} onClick={onInfoClick}>
<CardHeaderMeta>
<Padding left={3} right={3}>
<P>Network information</P>
@ -215,10 +200,7 @@ export const Expanded = ({
<Margin bottom={3}>
<Flex alignCenter>
<Margin right={1} top={0.5}>
<DotIcon
size={remcalc(12)}
color="green"
/>
<DotIcon size={remcalc(12)} color="green" />
</Margin>
<Small bold noMargin>
Outbound internet access enabled
@ -228,32 +210,20 @@ export const Expanded = ({
</FlexItem>
) : null}
<FlexItem>
<Margin bottom={2}>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
monospace
type="text"
value={id}
/>
</Margin>
</FormGroup>
<Margin bottom={2}>
<FormGroup name="id">
<FormLabel>ID</FormLabel>
<Margin top={0.5}>
<Input onBlur={null} big monospace type="text" value={id} />
</Margin>
</FormGroup>
</Margin>
</FlexItem>
<FlexItem>
<FormGroup name="subnet">
<FormLabel>Subnet</FormLabel>
<Margin top={0.5}>
<Input
onBlur={null}
big
monospace
type="text"
value={subnet}
/>
<Input onBlur={null} big monospace type="text" value={subnet} />
</Margin>
</FormGroup>
</FlexItem>
@ -279,24 +249,15 @@ export const Expanded = ({
</Margin>
{machines.length ? (
<Margin top={3}>
<Card
collapsed={!machinesExpanded}
actionable={!machinesExpanded}
>
<CardHeader
secondary={false}
transparent={false}
onClick={onMachinesClick}
>
<Card collapsed={!machinesExpanded} actionable={!machinesExpanded}>
<CardHeader secondary={false} transparent={false} onClick={onMachinesClick}>
<CardHeaderMeta>
<Padding left={3} right={3}>
<P>Instances on network</P>
</Padding>
</CardHeaderMeta>
<CardHeaderBox>
<ArrowIcon
direction={machinesExpanded ? 'up' : 'down'}
/>
<ArrowIcon direction={machinesExpanded ? 'up' : 'down'} />
</CardHeaderBox>
</CardHeader>
{machinesExpanded ? (

1
packages/my-joy-beta/src/containers/create-instance/__tests__/networks.spec.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

1
packages/my-joy-beta/src/containers/create-instance/__tests__/networks.ui.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';

56
packages/my-joy-beta/src/containers/create-instance/firewall.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
@ -41,20 +42,17 @@ const Firewall = ({
id={step}
onClick={!expanded && !proceeded && handleEdit}
collapsed={!expanded && !proceeded}
icon={<FirewallIcon />}
>
icon={<FirewallIcon />}>
Firewall
</Title>
{expanded ? (
<Description>
Cloud Firewall rules control traffic across instances. Enabling the
firewall adds a default set of rules and rules defined by your chosen
tags.{' '}
Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default
set of rules and rules defined by your chosen tags.{' '}
<a
target="__blank"
href="https://docs.joyent.com/public-cloud/network/firewall"
rel="noopener noreferrer"
>
rel="noopener noreferrer">
Read more
</a>
</Description>
@ -64,36 +62,25 @@ const Firewall = ({
<ReduxForm
form={`${FORM_NAME}-enabled`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
forceUnregisterOnUnmount={true}>
{props =>
expanded ? (
<Margin right={4}>
<ToggleFirewallForm {...props} submitting={loading} left />
</Margin>
) : null
}
) : null}
</ReduxForm>
</FlexItem>
<FlexItem>
<ReduxForm
form={`${FORM_NAME}-inactive`}
destroyOnUnmount={false}
forceUnregisterOnUnmount={true}
>
{props =>
enabled && expanded && !loading ? (
<ToggleInactiveForm {...props} />
) : null
}
forceUnregisterOnUnmount={true}>
{props => (enabled && expanded && !loading ? <ToggleInactiveForm {...props} /> : null)}
</ReduxForm>
</FlexItem>
</Flex>
{enabled &&
expanded &&
!loading &&
!defaultRules.length &&
!tagRules.length ? (
{enabled && expanded && !loading && !defaultRules.length && !tagRules.length ? (
<Margin top={4}>
<Empty>Sorry, but we weren’t able to find any firewall rules.</Empty>
</Margin>
@ -108,19 +95,15 @@ const Firewall = ({
<TagRules rules={tagRules} />
</Margin>
) : null}
{!loading &&
expanded &&
enabled &&
(tagRules.length || defaultRules.length) ? (
{!loading && expanded && enabled && (tagRules.length || defaultRules.length) ? (
<Margin TOP={4}>
<P>
*Other firewall rules may apply as defined by wildcard(s), IP(s),
subnet(s), tag(s) or VM(s). Please see{' '}
*Other firewall rules may apply as defined by wildcard(s), IP(s), subnet(s), tag(s) or
VM(s). Please see{' '}
<a
href="https://apidocs.joyent.com/cloudapi/#firewall-rule-syntax"
target="_blank"
rel="noopener noreferrer"
>
rel="noopener noreferrer">
firewall rule list
</a>{' '}
for more details.
@ -160,9 +143,7 @@ export default compose(
}),
(dispatch, { history }) => ({
handleNext: () => {
dispatch(
set({ name: 'create-instance-firewall-proceeded', value: true })
);
dispatch(set({ name: 'create-instance-firewall-proceeded', value: true }));
return history.push('/instances/~create/cns');
},
@ -181,12 +162,7 @@ export default compose(
props: ({ ownProps, data }) => {
const { showInactive } = ownProps;
const {
firewall_rules_create_machine = [],
loading,
error,
refetch
} = data;
const { firewall_rules_create_machine = [], loading, error, refetch } = data;
const rules = forceArray(firewall_rules_create_machine).filter(
({ enabled }) => enabled || showInactive

85
packages/my-joy-beta/src/containers/create-instance/index.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { Margin } from 'styled-components-spacing';
import ReduxForm from 'declarative-redux-form';
@ -33,61 +34,21 @@ const CreateInstance = ({ step, disabled, handleSubmit, history, match }) => (
<Margin top={4} bottom={4}>
<H2>Create Instances</H2>
</Margin>
<Name
history={history}
match={match}
step="name"
expanded={step === 'name'}
/>
<Image
history={history}
match={match}
step="image"
expanded={step === 'image'}
/>
<Package
history={history}
match={match}
step="package"
expanded={step === 'package'}
/>
<Tags
history={history}
match={match}
step="tags"
expanded={step === 'tags'}
/>
<Metadata
history={history}
match={match}
step="metadata"
expanded={step === 'metadata'}
/>
<Name history={history} match={match} step="name" expanded={step === 'name'} />
<Image history={history} match={match} step="image" expanded={step === 'image'} />
<Package history={history} match={match} step="package" expanded={step === 'package'} />
<Tags history={history} match={match} step="tags" expanded={step === 'tags'} />
<Metadata history={history} match={match} step="metadata" expanded={step === 'metadata'} />
<UserScript
history={history}
match={match}
step="user-script"
expanded={step === 'user-script'}
/>
<Networks
history={history}
match={match}
step="networks"
expanded={step === 'networks'}
/>
<Firewall
history={history}
match={match}
step="firewall"
expanded={step === 'firewall'}
/>
<Networks history={history} match={match} step="networks" expanded={step === 'networks'} />
<Firewall history={history} match={match} step="firewall" expanded={step === 'firewall'} />
<CNS history={history} match={match} step="cns" expanded={step === 'cns'} />
<Affinity
history={history}
match={match}
step="affinity"
expanded={step === 'affinity'}
/>
<Affinity history={history} match={match} step="affinity" expanded={step === 'affinity'} />
<Margin top={7} bottom={10}>
<ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => (
@ -115,29 +76,13 @@ export default compose(
return { disabled, step };
}
const name = get(
form,
'create-instance-name.values.name',
'<instance-name>'
);
const name = get(form, 'create-instance-name.values.name', '<instance-name>');
const firewall_enabled = get(
form,
'CREATE-INSTANCE-FIREWALL.values.enabled',
false
);
const firewall_enabled = get(form, 'CREATE-INSTANCE-FIREWALL.values.enabled', false);
const image = get(
form,
'create-instance-image.values.image',
'<instance-image>'
);
const image = get(form, 'create-instance-image.values.image', '<instance-image>');
const pkg = get(
form,
'create-instance-package.values.package',
'<instance-pkg>'
);
const pkg = get(form, 'create-instance-package.values.package', '<instance-pkg>');
const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {});
@ -227,9 +172,7 @@ export default compose(
const _name = name.toLowerCase();
const _metadata = metadata.map(a => omit(a, 'open'));
const _tags = uniqBy(tags, 'name').map(a => omit(a, 'expanded'));
const _networks = Object.keys(networks).filter(
network => networks[network]
);
const _networks = Object.keys(networks).filter(network => networks[network]);
if (userScript && userScript.value) {
_metadata.push({ name: 'user-script', value: userScript.value });

28
packages/my-joy-beta/src/containers/create-instance/name.js
View File

@ -40,14 +40,11 @@ const NameContainer = ({
id={step}
onClick={!expanded && !name && handleEdit}
collapsed={!expanded && !proceeded}
icon={<NameIcon />}
>
icon={<NameIcon />}>
Instance name
</Title>
{expanded ? (
<Description>
Your instance name will be used to identify this specific instance.
</Description>
<Description>Your instance name will be used to identify this specific instance.</Description>
) : null}
<ReduxForm
form={FORM_NAME}
@ -55,8 +52,7 @@ const NameContainer = ({
forceUnregisterOnUnmount={true}
onSubmit={handleNext}
asyncValidate={handleAsyncValidation}
shouldAsyncValidate={shouldAsyncValidate}
>
shouldAsyncValidate={shouldAsyncValidate}>
{props =>
expanded ? (
<Name
@ -69,8 +65,7 @@ const NameContainer = ({
<Margin top={3}>
<H3 bold>{name}</H3>
</Margin>
) : null
}
) : null}
</ReduxForm>
{expanded ? (
<Margin top={4} bottom={7}>
@ -101,11 +96,7 @@ export default compose(
const name = get(form, `${FORM_NAME}.values.name`, '');
const proceeded = get(values, 'create-instance-name-proceeded', false);
const randomizing = get(
values,
'create-instance-name-randomizing',
false
);
const randomizing = get(values, 'create-instance-name-randomizing', false);
return {
...ownProps,
@ -127,6 +118,7 @@ export default compose(
}
if (!/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/.test(name)) {
// eslint-disable-next-line no-throw-literal
throw {
name: 'Invalid name'
};
@ -164,9 +156,7 @@ export default compose(
},
handleEdit: () => history.push(`/instances/~create/name`),
handleRandomize: async () => {
dispatch(
set({ name: 'create-instance-name-randomizing', value: true })
);
dispatch(set({ name: 'create-instance-name-randomizing', value: true }));
const [err, res] = await intercept(
client.query({
@ -175,9 +165,7 @@ export default compose(
})
);
dispatch(
set({ name: 'create-instance-name-randomizing', value: false })
);
dispatch(set({ name: 'create-instance-name-randomizing', value: false }));
if (err) {
console.error(err);

24
packages/my-joy-beta/src/containers/instances/__tests__/firewall.spec.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
@ -173,13 +174,8 @@ it('renders <Firewall tagRules /> without throwing', () => {
.create(
<Theme>
<Fragment>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
/>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
inactive
/>
<Firewall tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} />
<Firewall tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} inactive />
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled
@ -198,21 +194,13 @@ it('renders <Firewall tagRules /> without throwing', () => {
.create(
<Theme>
<Fragment>
<Firewall defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} />
<Firewall
defaultRules={rules.filter(
({ rule_obj }) => rule_obj.tags.length
)}
/>
<Firewall
defaultRules={rules.filter(
({ rule_obj }) => rule_obj.tags.length
)}
defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
inactive
/>
<Firewall
defaultRules={rules.filter(
({ rule_obj }) => rule_obj.tags.length
)}
defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled
inactive
/>

19
packages/my-joy-beta/src/containers/instances/__tests__/firewall.ui.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';
@ -166,13 +167,8 @@ it('<Firewall tagRules />', async () => {
await screenshot(
<Theme ss>
<Fragment>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
/>
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
inactive
/>
<Firewall tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} />
<Firewall tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} inactive />
<Firewall
tagRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled
@ -189,13 +185,8 @@ it('<Firewall tagRules />', async () => {
await screenshot(
<Theme ss>
<Fragment>
<Firewall
defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
/>
<Firewall
defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
inactive
/>
<Firewall defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} />
<Firewall defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)} inactive />
<Firewall
defaultRules={rules.filter(({ rule_obj }) => rule_obj.tags.length)}
enabled

1
packages/my-joy-beta/src/containers/instances/__tests__/networks.spec.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

1
packages/my-joy-beta/src/containers/instances/__tests__/networks.ui.js
View File

@ -1,3 +1,4 @@
/* eslint-disable camelcase */
import React from 'react';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import screenshot from 'react-screenshot-renderer';