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

fix(my-joy-beta): show create instance errors

Browse Source 
# Conflicts:
#	packages/my-joy-beta/src/containers/create-instance/index.js
This commit is contained in:
Sérgio Ramos 2018-02-21 23:02:09 +00:00
parent 9d7e4e22d5
commit 01e10c6962
4 changed files with 115 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
packages/my-joy-beta/src/containers/create-instance/image.js
View File

@ -44,81 +44,82 @@ const ImageContainer = ({
images, images,
vms, vms,
step step
}) => queryImage ? ( }) =>
<Fragment> queryImage ? (
<HarcodedImage {...queryImage} /> <Fragment>
</Fragment> <HarcodedImage {...queryImage} />
) : ( </Fragment>
<Fragment> ) : (
<Title <Fragment>
id={step} <Title
onClick={!expanded && !proceeded && handleEdit} id={step}
collapsed={!expanded && !proceeded} onClick={!expanded && !proceeded && handleEdit}
icon={<InstanceTypeIcon />} collapsed={!expanded && !proceeded}
> icon={<InstanceTypeIcon />}
Instance type and image >
</Title> Instance type and image
{expanded ? ( </Title>
<Description> {expanded ? (
Hardware virtual machines are generally used for non-containerized <Description>
applications. Infrastructure containers are generally for running any Hardware virtual machines are generally used for non-containerized
Linux image on secure, bare metal containers.{' '} applications. Infrastructure containers are generally for running any
<a Linux image on secure, bare metal containers.{' '}
href="https://docs.joyent.com/private-cloud/images" <a
rel="noopener noreferrer" href="https://docs.joyent.com/private-cloud/images"
target="_blank" rel="noopener noreferrer"
> target="_blank"
Read the docs >
</a> Read the docs
</Description> </a>
) : null} </Description>
<ReduxForm ) : null}
form="create-instance-vms" <ReduxForm
destroyOnUnmount={false} form="create-instance-vms"
forceUnregisterOnUnmount={true} destroyOnUnmount={false}
initialValues={{ vms: true }} forceUnregisterOnUnmount={true}
> initialValues={{ vms: true }}
{props => (loading || !expanded ? null : <ImageType {...props} />)} >
</ReduxForm> {props => (loading || !expanded ? null : <ImageType {...props} />)}
<ReduxForm </ReduxForm>
form="create-instance-image" <ReduxForm
destroyOnUnmount={false} form="create-instance-image"
forceUnregisterOnUnmount={true} destroyOnUnmount={false}
initialValues={{ vms: true }} forceUnregisterOnUnmount={true}
> initialValues={{ vms: true }}
{props => >
loading && expanded ? ( {props =>
<StatusLoader /> loading && expanded ? (
) : expanded ? ( <StatusLoader />
<Image ) : expanded ? (
{...props} <Image
images={images.filter(i => i.isVm === vms)} {...props}
onSelectLatest={handleSelectLatest} images={images.filter(i => i.isVm === vms)}
/> onSelectLatest={handleSelectLatest}
) : image.id ? ( />
<Preview {...image} /> ) : image.id ? (
) : null <Preview {...image} />
} ) : null
</ReduxForm> }
{expanded ? ( </ReduxForm>
<Margin top={1} bottom={7}> {expanded ? (
<Button <Margin top={1} bottom={7}>
type="button" <Button
onClick={handleNext} type="button"
disabled={!image.id || vms !== image.isVm} onClick={handleNext}
> disabled={!image.id || vms !== image.isVm}
Next >
</Button> Next
</Margin> </Button>
) : proceeded ? ( </Margin>
<Margin top={4} bottom={7}> ) : proceeded ? (
<Button type="button" onClick={handleEdit} secondary> <Margin top={4} bottom={7}>
Edit <Button type="button" onClick={handleEdit} secondary>
</Button> Edit
</Margin> </Button>
) : null} </Margin>
</Fragment> ) : null}
); </Fragment>
);
export default compose( export default compose(
connect( connect(

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

@ -3,7 +3,7 @@
import React from 'react'; import React from 'react';
import { Margin } from 'styled-components-spacing'; import { Margin } from 'styled-components-spacing';
import ReduxForm from 'declarative-redux-form'; import ReduxForm from 'declarative-redux-form';
import { stopSubmit, destroy } from 'redux-form'; import { SubmissionError, destroy } from 'redux-form';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { destroyAll } from 'react-redux-values'; import { destroyAll } from 'react-redux-values';
import { graphql, compose } from 'react-apollo'; import { graphql, compose } from 'react-apollo';
@ -15,7 +15,14 @@ import Values from 'lodash.values';
import omit from 'lodash.omit'; import omit from 'lodash.omit';
import uniqBy from 'lodash.uniqby'; import uniqBy from 'lodash.uniqby';
import { ViewContainer, H2, Button } from 'joyent-ui-toolkit'; import {
ViewContainer,
H2,
Button,
Message,
MessageTitle,
MessageDescription
} from 'joyent-ui-toolkit';
import Name from '@containers/create-instance/name'; import Name from '@containers/create-instance/name';
import Image from '@containers/create-instance/image'; import Image from '@containers/create-instance/image';
@ -44,6 +51,14 @@ const CreateInstance = ({
<Margin top={4} bottom={4}> <Margin top={4} bottom={4}>
<H2>Create Instances</H2> <H2>Create Instances</H2>
</Margin> </Margin>
{error ? (
<Margin bottom={4}>
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>{error}</MessageDescription>
</Message>
</Margin>
) : null}
{query.image ? ( {query.image ? (
<Image <Image
history={history} history={history}
@ -113,6 +128,14 @@ const CreateInstance = ({
expanded={step === 'affinity'} expanded={step === 'affinity'}
/> />
<Margin top={7} bottom={10}> <Margin top={7} bottom={10}>
{error ? (
<Margin bottom={4}>
<Message error>
<MessageTitle>Ooops!</MessageTitle>
<MessageDescription>{error}</MessageDescription>
</Message>
</Margin>
) : null}
<ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}> <ReduxForm form={CREATE_FORM} onSubmit={handleSubmit}>
{({ handleSubmit, submitting }) => ( {({ handleSubmit, submitting }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
@ -133,6 +156,7 @@ export default compose(
const FORM_NAME = 'create-instance-name'; const FORM_NAME = 'create-instance-name';
const step = get(match, 'params.step', 'name'); const step = get(match, 'params.step', 'name');
const error = get(form, `${CREATE_FORM}.error`, null);
const name = get(form, `${FORM_NAME}.values.name`, ''); const name = get(form, `${FORM_NAME}.values.name`, '');
const image = get(form, 'create-instance-image.values.image', ''); const image = get(form, 'create-instance-image.values.image', '');
const pkg = get(form, 'create-instance-package.values.package', ''); const pkg = get(form, 'create-instance-package.values.package', '');
@ -146,6 +170,7 @@ export default compose(
if (!enabled) { if (!enabled) {
return { return {
error,
disabled: !enabled, disabled: !enabled,
step step
}; };
@ -178,6 +203,7 @@ export default compose(
} }
return { return {
error,
query, query,
forms: Object.keys(form), // improve this forms: Object.keys(form), // improve this
name, name,
@ -272,11 +298,9 @@ export default compose(
); );
if (err) { if (err) {
return dispatch( throw new SubmissionError({
stopSubmit(CREATE_FORM, { _error: parseError(err)
_error: parseError(err) });
})
);
} }
dispatch([destroyAll(), forms.map(name => destroy(name))]); dispatch([destroyAll(), forms.map(name => destroy(name))]);

1
packages/my-joy-beta/src/containers/instances/list.js
View File

@ -11,7 +11,6 @@ import intercept from 'apr-intercept';
import find from 'lodash.find'; import find from 'lodash.find';
import reverse from 'lodash.reverse'; import reverse from 'lodash.reverse';
import sort from 'lodash.sortby'; import sort from 'lodash.sortby';
import includes from 'lodash.includes';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import { import {

14
packages/ui-toolkit/src/form/select.js
View File

@ -37,12 +37,14 @@ const SelectWrapper = styled.div`
} }
${is('embedded')` ${is('embedded')`
width: auto; margin: 0 ${remcalc(6)};
margin: 0 ${remcalc(6)}; width: auto;
min-width: 0; max-width: auto;
&:after { min-width: 0;
right: ${remcalc(6)};
} &:after {
right: ${remcalc(6)};
}
`}; `};
${is('embedded', 'left')` ${is('embedded', 'left')`