2018-01-12 17:25:26 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { set } from 'react-redux-values';
|
|
|
|
import { Margin } from 'styled-components-spacing';
|
|
|
|
import { compose } from 'react-apollo';
|
|
|
|
import { destroy, reset } from 'redux-form';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import get from 'lodash.get';
|
2018-01-15 19:34:15 +02:00
|
|
|
import remcalc from 'remcalc';
|
2018-01-12 17:25:26 +02:00
|
|
|
|
2018-02-05 17:12:47 +02:00
|
|
|
import { AffinityIcon, Button, H3, Divider, KeyValue } from 'joyent-ui-toolkit';
|
2018-01-12 17:25:26 +02:00
|
|
|
|
|
|
|
import Title from '@components/create-instance/title';
|
|
|
|
import { Rule, Header } from '@components/create-instance/affinity';
|
2018-01-30 18:27:01 +02:00
|
|
|
import Description from '@components/description';
|
2018-02-23 19:57:13 +02:00
|
|
|
import { fieldError } from '@root/constants';
|
2018-01-12 17:25:26 +02:00
|
|
|
|
|
|
|
const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
|
|
|
|
const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
|
|
|
|
|
|
|
|
const RULE_DEFAULTS = {
|
|
|
|
'rule-instance-name': '',
|
|
|
|
'rule-instance-conditional': 'must',
|
|
|
|
'rule-instance-placement': 'same',
|
|
|
|
'rule-instance-tag-key-pattern': 'equalling',
|
|
|
|
'rule-instance-tag-value-pattern': 'equalling',
|
|
|
|
'rule-instance-name-pattern': 'equalling',
|
|
|
|
'rule-instance-tag-value': '',
|
|
|
|
'rule-instance-tag-key': '',
|
|
|
|
'rule-type': 'name'
|
|
|
|
};
|
|
|
|
|
|
|
|
export const Affinity = ({
|
|
|
|
affinityRules = [],
|
|
|
|
expanded,
|
|
|
|
proceeded,
|
|
|
|
addOpen,
|
|
|
|
handleAddAffinityRules,
|
|
|
|
handleRemoveAffinityRule,
|
|
|
|
handleUpdateAffinityRule,
|
2018-02-23 19:57:13 +02:00
|
|
|
shouldAsyncValidate,
|
|
|
|
handleAsyncValidation,
|
2018-01-12 17:25:26 +02:00
|
|
|
handleToggleExpanded,
|
|
|
|
handleCancelEdit,
|
|
|
|
handleChangeAddOpen,
|
|
|
|
handleEdit,
|
2018-01-30 18:27:01 +02:00
|
|
|
rule,
|
|
|
|
step
|
2018-01-12 17:25:26 +02:00
|
|
|
}) => (
|
|
|
|
<Fragment>
|
2018-01-18 16:46:49 +02:00
|
|
|
<Title
|
2018-01-30 18:27:01 +02:00
|
|
|
id={step}
|
2018-01-18 16:46:49 +02:00
|
|
|
onClick={!expanded && !proceeded && handleEdit}
|
2018-01-30 18:04:03 +02:00
|
|
|
collapsed={!expanded && !proceeded}
|
2018-01-18 16:46:49 +02:00
|
|
|
icon={<AffinityIcon />}
|
|
|
|
>
|
|
|
|
Affinity
|
|
|
|
</Title>
|
2018-01-12 17:25:26 +02:00
|
|
|
{expanded ? (
|
2018-01-15 19:23:32 +02:00
|
|
|
<Description>
|
2018-01-16 13:23:00 +02:00
|
|
|
Control placement of instances on the physical servers. Design
|
|
|
|
applications to adapt at failure by distributing application components.
|
|
|
|
Instances are only provisioned when the exact criteria is met.{' '}
|
2018-01-15 19:23:32 +02:00
|
|
|
<a
|
|
|
|
target="__blank"
|
2018-01-16 13:23:00 +02:00
|
|
|
href="https://docs.joyent.com/public-cloud/instances/docker/how/start-containers#controlling-container-placement"
|
2018-01-24 04:11:33 +02:00
|
|
|
rel="noopener noreferrer"
|
2018-01-15 19:23:32 +02:00
|
|
|
>
|
|
|
|
Read the docs
|
|
|
|
</a>
|
|
|
|
</Description>
|
2018-01-12 17:25:26 +02:00
|
|
|
) : null}
|
|
|
|
{proceeded ? (
|
|
|
|
<Margin bottom={4}>
|
2018-01-16 13:23:00 +02:00
|
|
|
<H3>{affinityRules.length} Affinity Rule</H3>
|
2018-01-12 17:25:26 +02:00
|
|
|
</Margin>
|
|
|
|
) : null}
|
|
|
|
{affinityRules.map((rule, index) => (
|
|
|
|
<ReduxForm
|
|
|
|
form={FORM_NAME_EDIT(index)}
|
|
|
|
key={index}
|
|
|
|
initialValues={rule}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
2018-02-23 19:57:13 +02:00
|
|
|
shouldAsyncValidate={shouldAsyncValidate}
|
|
|
|
asyncValidation={handleAsyncValidation}
|
2018-01-12 17:25:26 +02:00
|
|
|
onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}
|
|
|
|
>
|
|
|
|
{props => (
|
2018-01-30 18:04:03 +02:00
|
|
|
<Fragment>
|
|
|
|
<KeyValue
|
|
|
|
{...props}
|
|
|
|
expanded={rule.expanded}
|
|
|
|
customHeader={<Header {...rule} />}
|
|
|
|
method="edit"
|
|
|
|
input={props => <Rule {...rule} {...props} />}
|
|
|
|
type="an affinity rule"
|
|
|
|
onToggleExpanded={() => handleToggleExpanded(index)}
|
|
|
|
onCancel={() => handleCancelEdit(index)}
|
|
|
|
onRemove={() => handleRemoveAffinityRule(index)}
|
|
|
|
/>
|
|
|
|
<Divider height={remcalc(12)} transparent />
|
|
|
|
</Fragment>
|
2018-01-12 17:25:26 +02:00
|
|
|
)}
|
|
|
|
</ReduxForm>
|
|
|
|
))}
|
2018-01-30 18:04:03 +02:00
|
|
|
<ReduxForm
|
|
|
|
form={FORM_NAME_CREATE}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
2018-02-23 19:57:13 +02:00
|
|
|
shouldAsyncValidate={shouldAsyncValidate}
|
|
|
|
asyncValidate={handleAsyncValidation}
|
2018-01-30 18:04:03 +02:00
|
|
|
onSubmit={handleAddAffinityRules}
|
|
|
|
>
|
|
|
|
{props =>
|
|
|
|
expanded && addOpen ? (
|
|
|
|
<Fragment>
|
|
|
|
<KeyValue
|
|
|
|
{...props}
|
|
|
|
method="create"
|
|
|
|
input={props => <Rule {...rule} {...props} />}
|
|
|
|
type="an affinity rule"
|
|
|
|
expanded
|
|
|
|
noRemove
|
|
|
|
onCancel={() => handleChangeAddOpen(false)}
|
|
|
|
/>
|
|
|
|
<Divider height={remcalc(12)} transparent />
|
|
|
|
</Fragment>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</ReduxForm>
|
|
|
|
{expanded ? (
|
|
|
|
<Margin top={2} bottom={4}>
|
2018-02-22 01:02:44 +02:00
|
|
|
{!addOpen && affinityRules.length === 0 ? (
|
2018-01-30 18:04:03 +02:00
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
onClick={() => handleChangeAddOpen(true)}
|
|
|
|
secondary
|
|
|
|
>
|
|
|
|
Create Affinity Rule
|
2018-01-15 19:34:15 +02:00
|
|
|
</Button>
|
2018-01-30 18:04:03 +02:00
|
|
|
) : null}
|
|
|
|
</Margin>
|
|
|
|
) : proceeded ? (
|
|
|
|
<Margin top={2} bottom={4}>
|
|
|
|
<Button type="button" onClick={handleEdit} secondary>
|
|
|
|
Edit
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : null}
|
|
|
|
<Margin bottom={7}>
|
|
|
|
{expanded || proceeded ? <Divider height={remcalc(1)} /> : null}
|
|
|
|
</Margin>
|
2018-01-12 17:25:26 +02:00
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default compose(
|
2018-02-21 18:22:30 +02:00
|
|
|
connect(({ values, form }, ownProps) => {
|
|
|
|
const proceeded = get(values, 'create-instance-affinity-proceeded', false);
|
|
|
|
const addOpen = get(values, 'create-instance-affinity-add-open', false);
|
|
|
|
const affinityRules = get(values, 'create-instance-affinity', []);
|
|
|
|
const rule = get(form, `${FORM_NAME_CREATE}.values`, {});
|
|
|
|
|
|
|
|
return {
|
|
|
|
proceeded: proceeded || affinityRules.length,
|
|
|
|
addOpen,
|
|
|
|
affinityRules,
|
2018-02-22 00:24:39 +02:00
|
|
|
rule
|
2018-02-21 18:22:30 +02:00
|
|
|
};
|
|
|
|
}),
|
2018-02-23 19:57:13 +02:00
|
|
|
connect(null, (dispatch, { affinityRules = [], rule, history }) => ({
|
|
|
|
shouldAsyncValidate: ({ trigger }) => trigger === 'change',
|
|
|
|
handleAsyncValidation: async rule => {
|
|
|
|
const validName = /^[a-zA-Z_.-]{1,16}$/.test(rule['rule-instance-name']);
|
|
|
|
const validKey = /^[a-zA-Z_.-]{1,16}$/.test(
|
|
|
|
rule['rule-instance-tag-key']
|
|
|
|
);
|
|
|
|
const validValue = /^[a-zA-Z_.-]{1,16}$/.test(
|
|
|
|
rule['rule-instance-tag-value']
|
|
|
|
);
|
|
|
|
|
|
|
|
if (validName && validKey && validValue) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// eslint-disable-next-line no-throw-literal
|
|
|
|
throw {
|
|
|
|
'rule-instance-name': fieldError,
|
|
|
|
'rule-instance-tag-key': fieldError,
|
|
|
|
'rule-instance-tag-value': fieldError
|
|
|
|
};
|
|
|
|
},
|
2018-01-12 17:25:26 +02:00
|
|
|
handleEdit: () => {
|
2018-02-15 16:37:59 +02:00
|
|
|
return history.push(`/~create/affinity${history.location.search}`);
|
2018-01-12 17:25:26 +02:00
|
|
|
},
|
|
|
|
handleAddAffinityRules: ({ ...rule }) => {
|
|
|
|
const toggleToClosed = set({
|
|
|
|
name: `create-instance-affinity-add-open`,
|
|
|
|
value: false
|
|
|
|
});
|
|
|
|
|
|
|
|
const appendAffinityRule = set({
|
|
|
|
name: `create-instance-affinity`,
|
|
|
|
value: affinityRules.concat([
|
|
|
|
{ ...RULE_DEFAULTS, ...rule, expanded: false }
|
|
|
|
])
|
|
|
|
});
|
|
|
|
|
|
|
|
return dispatch([
|
|
|
|
destroy(FORM_NAME_CREATE),
|
|
|
|
toggleToClosed,
|
|
|
|
appendAffinityRule
|
|
|
|
]);
|
|
|
|
},
|
|
|
|
handleUpdateAffinityRule: (index, newAffinityRule) => {
|
|
|
|
affinityRules[index] = {
|
|
|
|
...newAffinityRule,
|
|
|
|
expanded: false
|
|
|
|
};
|
|
|
|
|
|
|
|
return dispatch([
|
|
|
|
destroy(FORM_NAME_EDIT(index)),
|
|
|
|
set({ name: `create-instance-affinity`, value: affinityRules.slice() })
|
|
|
|
]);
|
|
|
|
},
|
|
|
|
handleChangeAddOpen: value => {
|
|
|
|
return dispatch([
|
|
|
|
reset(FORM_NAME_CREATE),
|
|
|
|
set({ name: `create-instance-affinity-add-open`, value })
|
|
|
|
]);
|
|
|
|
},
|
|
|
|
handleToggleExpanded: index => {
|
|
|
|
affinityRules[index] = {
|
|
|
|
...affinityRules[index],
|
|
|
|
expanded: !affinityRules[index].expanded
|
|
|
|
};
|
|
|
|
|
|
|
|
return dispatch(
|
|
|
|
set({
|
|
|
|
name: `create-instance-affinity`,
|
|
|
|
value: affinityRules.slice()
|
|
|
|
})
|
|
|
|
);
|
|
|
|
},
|
|
|
|
handleCancelEdit: index => {
|
|
|
|
affinityRules[index] = {
|
|
|
|
...affinityRules[index],
|
|
|
|
expanded: false
|
|
|
|
};
|
|
|
|
|
|
|
|
return dispatch([
|
|
|
|
reset(FORM_NAME_EDIT(index)),
|
|
|
|
set({ name: `create-instance-affinity`, value: affinityRules.slice() })
|
|
|
|
]);
|
|
|
|
},
|
|
|
|
handleRemoveAffinityRule: index => {
|
|
|
|
affinityRules.splice(index, 1);
|
|
|
|
|
|
|
|
return dispatch([
|
|
|
|
destroy(FORM_NAME_EDIT(index)),
|
|
|
|
set({ name: `create-instance-affinity`, value: affinityRules.slice() })
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
}))
|
|
|
|
)(Affinity);
|