import React, { Fragment } from 'react'; import { Margin } from 'styled-components-spacing'; import { compose } from 'react-apollo'; import { Link } from 'react-router-dom'; import ReduxForm from 'declarative-redux-form'; import { connect } from 'react-redux'; import { set } from 'react-redux-values'; import { reset } from 'redux-form'; import { destroy } from 'redux-form'; import get from 'lodash.get'; import Step, { Header as StepHeader, Description as StepDescription, Preview as StepPreview, Outlet as StepOutlet } from 'joyent-ui-resource-step'; import { AffinityIcon, Button, KeyValue } from 'joyent-ui-toolkit'; import { Rule, Header } from './components'; import { addAffinityRule as validateRule } from '../validators'; import { Forms, Values } from '../constants'; const { IC_AFF_F_ADD, IC_AFF_F_EDIT } = Forms; const { IC_AFF_V_ADD_OPEN, IC_AFF_V_EDIT_OPEN, IC_AFF_V_AFF } = Values; const RULE_DEFAULTS = { conditional: 'should', placement: 'same', type: 'name', pattern: 'equalling', name: '', value: '' }; const Preview = ({ handleAsyncValidate, shouldAsyncValidate, handleCancelEdit, handleRemoveAffinityRule, handleUpdateAffinityRule, handleToggleExpanded, editOpen = true, editingRule, exitingRule, disabled = false }) => ( {formProps => exitingRule ? ( } method="edit" input={inputProps => ( )} type="an affinity rule" onCancel={handleCancelEdit} onRemove={handleRemoveAffinityRule} onToggleExpanded={ handleToggleExpanded && (() => handleToggleExpanded(!editOpen)) } disabled={disabled} /> ) : null } ); const Affinity = ({ handleGetValue, handleAsyncValidate, shouldAsyncValidate, handleCancelEdit, handleChangeAddOpen, handleCreateAffinityRules, handleRemoveAffinityRule, handleToggleExpanded, handleUpdateAffinityRule, preview = [], addOpen = true, editOpen = true, creatingRule, editingRule, exitingRule, ...props }) => ( }>Affinity rules Affinity rules control the location of instances, to help reduce traffic across networks and keep the workload balanced. With strict rules, instances are only provisioned when the criteria is met. {({ next }) => ( {formProps => addOpen ? ( ( )} type="an affinity rule" noRemove borderless headless onCancel={() => handleChangeAddOpen(false)} /> ) : null } {!addOpen && !exitingRule ? ( ) : null} {!addOpen && exitingRule ? ( ) : null} )} ); export default compose( connect(({ values, form }, ownProps) => { const editingRule = get(form, `${IC_AFF_F_EDIT}.values`, null); const creatingRule = get(form, `${IC_AFF_F_ADD}.values`, null); const exitingRule = get(values, IC_AFF_V_AFF, null); const addOpen = get(values, IC_AFF_V_ADD_OPEN, true); const editOpen = get(values, IC_AFF_V_EDIT_OPEN, false); return { addOpen, editOpen, creatingRule, editingRule, exitingRule, handleGetValue: () => exitingRule }; }), connect(null, (dispatch, { history }) => ({ shouldAsyncValidate: ({ trigger }) => { return trigger === 'submit'; }, handleAsyncValidate: ({ type, ...aff }) => { return type === 'name' ? validateRule({ ...aff, type, name: 'default' }) : validateRule({ ...aff, type }); }, handleCreateAffinityRules: value => { return dispatch([ destroy(IC_AFF_F_ADD), set({ name: IC_AFF_V_ADD_OPEN, value: false }), set({ name: IC_AFF_V_AFF, value }) ]); }, handleUpdateAffinityRule: value => { return dispatch([ destroy(IC_AFF_F_EDIT), set({ name: IC_AFF_V_EDIT_OPEN, value: false }), set({ name: IC_AFF_V_AFF, value }) ]); }, handleChangeAddOpen: value => { return dispatch([ reset(IC_AFF_F_ADD), set({ name: IC_AFF_V_ADD_OPEN, value }) ]); }, handleToggleExpanded: value => { return dispatch(set({ name: IC_AFF_V_EDIT_OPEN, value })); }, handleCancelEdit: () => { return dispatch([set({ name: IC_AFF_V_EDIT_OPEN, value: false })]); }, handleRemoveAffinityRule: () => { return dispatch([ destroy(IC_AFF_F_EDIT), set({ name: IC_AFF_V_AFF, value: null }) ]); } })) )(Affinity);