2018-01-11 17:54:24 +02:00
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
import { set } from 'react-redux-values';
|
|
|
|
import { compose, graphql } from 'react-apollo';
|
|
|
|
import ReduxForm from 'declarative-redux-form';
|
|
|
|
import { connect } from 'react-redux';
|
2018-01-16 13:54:22 +02:00
|
|
|
import { Margin } from 'styled-components-spacing';
|
2018-01-11 17:54:24 +02:00
|
|
|
import forceArray from 'force-array';
|
2018-01-24 13:28:42 +02:00
|
|
|
import includes from 'lodash.includes';
|
2018-02-21 18:22:30 +02:00
|
|
|
import find from 'lodash.find';
|
2018-01-24 13:28:42 +02:00
|
|
|
import get from 'lodash.get';
|
2018-01-11 17:54:24 +02:00
|
|
|
|
2018-01-16 13:23:00 +02:00
|
|
|
import { NetworkIcon, Button, H3, StatusLoader } from 'joyent-ui-toolkit';
|
2018-01-11 17:54:24 +02:00
|
|
|
|
|
|
|
import Title from '@components/create-instance/title';
|
2018-01-30 18:27:01 +02:00
|
|
|
import Network from '@components/create-instance/network';
|
2018-01-30 18:04:03 +02:00
|
|
|
import Description from '@components/description';
|
2018-01-11 17:54:24 +02:00
|
|
|
import ListNetworks from '@graphql/list-networks.gql';
|
|
|
|
|
|
|
|
const FORM_NAME = 'CREATE-INSTANCE-NETWORKS';
|
|
|
|
|
|
|
|
export const Networks = ({
|
|
|
|
networks = [],
|
2018-01-23 14:20:36 +02:00
|
|
|
selected = [],
|
2018-01-11 17:54:24 +02:00
|
|
|
expanded = false,
|
|
|
|
proceeded = false,
|
|
|
|
loading = false,
|
2018-02-21 18:22:30 +02:00
|
|
|
initialValues,
|
2018-01-11 17:54:24 +02:00
|
|
|
setInfoExpanded,
|
2018-01-23 14:20:36 +02:00
|
|
|
setMachinesExpanded,
|
2018-01-11 17:54:24 +02:00
|
|
|
handleNext,
|
2018-01-30 18:27:01 +02:00
|
|
|
handleEdit,
|
|
|
|
step
|
2018-01-23 14:20:36 +02:00
|
|
|
}) => (
|
|
|
|
<Fragment>
|
|
|
|
<Title
|
2018-01-30 18:27:01 +02:00
|
|
|
id={step}
|
2018-01-23 14:20:36 +02:00
|
|
|
onClick={!expanded && !proceeded && handleEdit}
|
2018-01-30 18:04:03 +02:00
|
|
|
collapsed={!expanded && !proceeded}
|
2018-02-01 17:33:58 +02:00
|
|
|
icon={<NetworkIcon />}
|
|
|
|
>
|
2018-01-23 14:20:36 +02:00
|
|
|
Networks
|
|
|
|
</Title>
|
|
|
|
{expanded ? (
|
|
|
|
<Description>
|
2018-02-01 17:33:58 +02:00
|
|
|
Instances are automatically connected to a private fabric network, which
|
|
|
|
is the best choice for internal communication within your application.
|
|
|
|
Data center networks are the best choice for exposing your application
|
|
|
|
to the public internet (if the data center network is a public network).{' '}
|
2018-01-23 14:20:36 +02:00
|
|
|
<a
|
|
|
|
target="__blank"
|
|
|
|
href="https://docs.joyent.com/public-cloud/network/sdn"
|
2018-02-01 17:33:58 +02:00
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
2018-01-23 14:20:36 +02:00
|
|
|
Read more
|
|
|
|
</a>
|
|
|
|
</Description>
|
|
|
|
) : null}
|
|
|
|
{proceeded && !expanded ? (
|
|
|
|
<H3>
|
|
|
|
{selected.length} network{selected.length === 1 ? '' : 's'} added
|
|
|
|
</H3>
|
|
|
|
) : null}
|
|
|
|
{loading && expanded ? <StatusLoader /> : null}
|
2018-02-01 17:33:58 +02:00
|
|
|
<ReduxForm
|
|
|
|
form={FORM_NAME}
|
|
|
|
destroyOnUnmount={false}
|
|
|
|
forceUnregisterOnUnmount={true}
|
2018-02-21 18:22:30 +02:00
|
|
|
initialValues={initialValues}
|
2018-02-01 17:33:58 +02:00
|
|
|
>
|
2018-01-30 18:04:03 +02:00
|
|
|
{props =>
|
|
|
|
!loading ? (
|
2018-01-23 14:20:36 +02:00
|
|
|
<form>
|
|
|
|
{networks.map(
|
|
|
|
({ id, selected, infoExpanded, machinesExpanded, ...network }) =>
|
2018-01-24 04:11:33 +02:00
|
|
|
expanded || (selected && proceeded) ? (
|
2018-01-23 14:20:36 +02:00
|
|
|
<Network
|
|
|
|
key={id}
|
|
|
|
id={id}
|
|
|
|
selected={selected}
|
|
|
|
infoExpanded={infoExpanded}
|
|
|
|
machinesExpanded={machinesExpanded}
|
|
|
|
small={!expanded && selected}
|
|
|
|
onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
|
2018-02-01 17:33:58 +02:00
|
|
|
onMachinesClick={() =>
|
|
|
|
setMachinesExpanded(id, !machinesExpanded)
|
|
|
|
}
|
2018-01-23 14:20:36 +02:00
|
|
|
{...network}
|
|
|
|
/>
|
2018-01-24 04:11:33 +02:00
|
|
|
) : null
|
2018-01-23 14:20:36 +02:00
|
|
|
)}
|
|
|
|
</form>
|
2018-02-01 17:33:58 +02:00
|
|
|
) : null
|
|
|
|
}
|
2018-01-30 18:04:03 +02:00
|
|
|
</ReduxForm>
|
|
|
|
{!loading ? (
|
|
|
|
expanded ? (
|
|
|
|
<Margin bottom={7}>
|
|
|
|
<Button type="button" onClick={handleNext}>
|
|
|
|
Next
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
2018-01-23 14:20:36 +02:00
|
|
|
) : proceeded ? (
|
2018-01-30 18:04:03 +02:00
|
|
|
<Margin top={4} bottom={7}>
|
|
|
|
<Button type="button" onClick={handleEdit} secondary>
|
|
|
|
Edit
|
|
|
|
</Button>
|
|
|
|
</Margin>
|
|
|
|
) : null
|
|
|
|
) : null}
|
2018-01-23 14:20:36 +02:00
|
|
|
</Fragment>
|
|
|
|
);
|
2018-01-11 17:54:24 +02:00
|
|
|
|
|
|
|
export default compose(
|
|
|
|
graphql(ListNetworks, {
|
|
|
|
props: ({ data }) => {
|
|
|
|
const { networks = [], loading = false, error = null, refetch } = data;
|
|
|
|
|
|
|
|
return {
|
|
|
|
networks: forceArray(networks),
|
|
|
|
loading,
|
|
|
|
error,
|
|
|
|
refetch
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
connect(
|
|
|
|
({ values, form }, { networks }) => {
|
|
|
|
const selected = get(form, `${FORM_NAME}.values`, {});
|
2018-01-24 13:28:42 +02:00
|
|
|
const empty = id => !includes(Object.keys(selected), id);
|
2018-02-21 18:22:30 +02:00
|
|
|
const _public = find(networks, ['name', 'Joyent-SDC-Public']);
|
|
|
|
|
2018-02-22 00:24:39 +02:00
|
|
|
const proceeded = get(
|
|
|
|
values,
|
|
|
|
'create-instance-networks-proceeded',
|
|
|
|
false
|
|
|
|
);
|
|
|
|
|
|
|
|
const initialValues = _public
|
|
|
|
? {
|
|
|
|
[_public.id]: true
|
|
|
|
}
|
|
|
|
: {};
|
2018-01-11 17:54:24 +02:00
|
|
|
|
2018-02-16 19:23:37 +02:00
|
|
|
const _networks = networks.map(({ id, name, ...network }) => {
|
|
|
|
if (empty(id) && name === 'Joyent-SDC-Public') {
|
|
|
|
selected[id] = true;
|
|
|
|
}
|
2018-01-23 14:20:36 +02:00
|
|
|
|
2018-02-16 19:23:37 +02:00
|
|
|
return {
|
|
|
|
...network,
|
|
|
|
name,
|
|
|
|
selected:
|
|
|
|
empty(id) && name === 'Joyent-SDC-Public'
|
|
|
|
? true
|
|
|
|
: Boolean(selected[id]),
|
|
|
|
infoExpanded: get(
|
|
|
|
values,
|
|
|
|
`create-instance-networks-${id}-info-expanded`,
|
|
|
|
false
|
|
|
|
),
|
|
|
|
machinesExpanded: get(
|
|
|
|
values,
|
|
|
|
`create-instance-networks-${id}-machines-expanded`,
|
|
|
|
false
|
|
|
|
),
|
|
|
|
id
|
|
|
|
};
|
|
|
|
});
|
2018-02-01 12:38:12 +02:00
|
|
|
|
|
|
|
return {
|
2018-02-21 18:22:30 +02:00
|
|
|
proceeded,
|
2018-02-01 12:38:12 +02:00
|
|
|
networks: _networks,
|
2018-02-21 18:22:30 +02:00
|
|
|
initialValues,
|
2018-02-01 12:38:12 +02:00
|
|
|
selected: Object.keys(selected).filter(n => selected[n])
|
2018-01-11 17:54:24 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
(dispatch, { history }) => ({
|
|
|
|
handleNext: () => {
|
2018-02-01 17:33:58 +02:00
|
|
|
dispatch(
|
|
|
|
set({ name: 'create-instance-networks-proceeded', value: true })
|
|
|
|
);
|
2018-01-11 17:54:24 +02:00
|
|
|
|
2018-02-15 16:37:59 +02:00
|
|
|
return history.push(`/~create/firewall${history.location.search}`);
|
2018-01-11 17:54:24 +02:00
|
|
|
},
|
|
|
|
handleEdit: () => {
|
2018-02-15 16:37:59 +02:00
|
|
|
return history.push(`/~create/networks${history.location.search}`);
|
2018-01-11 17:54:24 +02:00
|
|
|
},
|
|
|
|
setInfoExpanded: (id, expanded) => {
|
|
|
|
return dispatch(
|
|
|
|
set({
|
2018-01-23 14:20:36 +02:00
|
|
|
name: `create-instance-networks-${id}-info-expanded`,
|
|
|
|
value: expanded
|
|
|
|
})
|
|
|
|
);
|
|
|
|
},
|
|
|
|
setMachinesExpanded: (id, expanded) => {
|
|
|
|
return dispatch(
|
|
|
|
set({
|
|
|
|
name: `create-instance-networks-${id}-machines-expanded`,
|
2018-01-11 17:54:24 +02:00
|
|
|
value: expanded
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
)
|
|
|
|
)(Networks);
|