172 lines
4.9 KiB
JavaScript
172 lines
4.9 KiB
JavaScript
import React, { PureComponent } from 'react';
|
|
import { Margin } from 'styled-components-spacing';
|
|
import Flex, { FlexItem } from 'styled-flex-component';
|
|
import { compose } from 'react-apollo';
|
|
import { Link } from 'react-router-dom';
|
|
import ReduxForm from 'declarative-redux-form';
|
|
import { connect } from 'react-redux';
|
|
import { Field, change } from 'redux-form';
|
|
import { withRouter } from 'react-router';
|
|
import get from 'lodash.get';
|
|
import plur from 'plur';
|
|
|
|
import Step, {
|
|
Header as StepHeader,
|
|
Description as StepDescription,
|
|
Preview as StepPreview,
|
|
Outlet as StepOutlet
|
|
} from 'joyent-ui-resource-step';
|
|
|
|
import {
|
|
H2,
|
|
P,
|
|
FormGroup,
|
|
FormLabel,
|
|
Input,
|
|
FormMeta,
|
|
Button,
|
|
InstanceCountIcon
|
|
} from 'joyent-ui-toolkit';
|
|
|
|
import { Forms } from '@root/constants';
|
|
import { name as validateName } from '@state/validators';
|
|
|
|
const { SGC_N_F } = Forms;
|
|
|
|
const Name = ({
|
|
history,
|
|
handleGetValue,
|
|
preview = {},
|
|
readOnlyName,
|
|
initialValues,
|
|
handleValidate,
|
|
handlePlusClick,
|
|
handleMinusClick,
|
|
...props
|
|
}) => (
|
|
<Step name="name" getValue={handleGetValue} {...props}>
|
|
<StepHeader icon={<InstanceCountIcon />}>
|
|
Name and instance count
|
|
</StepHeader>
|
|
<StepDescription>
|
|
Input the name of your Service Group and the desired number of instances
|
|
this group will aim to maintain. You can scale up or down your Service
|
|
Group anytime after commisioning.
|
|
</StepDescription>
|
|
<StepPreview>
|
|
<Margin top="3">
|
|
<Margin bottom="2">
|
|
<H2>{preview.name}</H2>
|
|
</Margin>
|
|
<P>
|
|
{preview.capacity} {plur('instance', preview.capacity)}
|
|
</P>
|
|
</Margin>
|
|
</StepPreview>
|
|
<StepOutlet>
|
|
{({ next }) => (
|
|
<Margin top="3">
|
|
<ReduxForm
|
|
form={SGC_N_F}
|
|
validate={handleValidate}
|
|
initialValues={initialValues}
|
|
destroyOnUnmount={false}
|
|
forceUnregisterOnUnmount={false}
|
|
enableReinitialize
|
|
keepDirtyOnReinitialize
|
|
>
|
|
{({ pristine, invalid }) => (
|
|
<form onSubmit={() => history.push(next)}>
|
|
<Margin bottom="5">
|
|
<FormGroup name="name" fluid field={Field}>
|
|
<FormLabel>Service group name</FormLabel>
|
|
<Margin top="0.5">
|
|
<Flex>
|
|
<FlexItem>
|
|
<Input
|
|
onBlur={null}
|
|
type="text"
|
|
disabled={readOnlyName}
|
|
/>
|
|
</FlexItem>
|
|
</Flex>
|
|
</Margin>
|
|
<FormMeta />
|
|
</FormGroup>
|
|
</Margin>
|
|
<Margin bottom="5">
|
|
<FormGroup name="capacity" fluid field={Field}>
|
|
<FormLabel>Desired number of instances</FormLabel>
|
|
<Margin top="0.5">
|
|
<Flex>
|
|
<FlexItem>
|
|
<Input
|
|
type="number"
|
|
onBlur={null}
|
|
onPlusClick={handlePlusClick}
|
|
onMinusClick={handleMinusClick}
|
|
xSmall
|
|
/>
|
|
</FlexItem>
|
|
</Flex>
|
|
</Margin>
|
|
<FormMeta />
|
|
</FormGroup>
|
|
</Margin>
|
|
<Button
|
|
type="button"
|
|
component={Link}
|
|
to={next}
|
|
disabled={pristine || invalid}
|
|
>
|
|
Save
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</ReduxForm>
|
|
</Margin>
|
|
)}
|
|
</StepOutlet>
|
|
</Step>
|
|
);
|
|
|
|
const Container = compose(
|
|
withRouter,
|
|
connect((store, { preview = {} }) => {
|
|
const { form } = store;
|
|
|
|
return {
|
|
handleGetValue: () => get(form, `${SGC_N_F}.values`, {}),
|
|
initialValues: {
|
|
capacity: 1,
|
|
...preview
|
|
}
|
|
};
|
|
}),
|
|
connect(null, (dispatch, { handleGetValue }) => ({
|
|
handleValidate: validateName,
|
|
handlePlusClick: ({ shiftKey, metaKey }) => {
|
|
const count = metaKey ? 100 : shiftKey ? 10 : 1;
|
|
const capacity = handleGetValue().capacity || 0;
|
|
return dispatch(change(SGC_N_F, 'capacity', capacity + count));
|
|
},
|
|
handleMinusClick: ({ shiftKey, metaKey }) => {
|
|
const count = metaKey ? 100 : shiftKey ? 10 : 1;
|
|
const capacity = handleGetValue().capacity || 0;
|
|
return dispatch(change(SGC_N_F, 'capacity', capacity - count));
|
|
}
|
|
}))
|
|
)(Name);
|
|
|
|
export default class extends PureComponent {
|
|
isValid(values) {
|
|
const msgs = validateName(values);
|
|
return !msgs || !Object.values(msgs).length;
|
|
}
|
|
|
|
render() {
|
|
const { children, ...props } = this.props;
|
|
return <Container {...props}>{children}</Container>;
|
|
}
|
|
}
|