149 lines
4.0 KiB
JavaScript
149 lines
4.0 KiB
JavaScript
/* eslint-disable camelcase */
|
|
|
|
import React, { Fragment } from 'react';
|
|
import { compose, graphql } from 'react-apollo';
|
|
import { Margin } from 'styled-components-spacing';
|
|
import ReduxForm from 'declarative-redux-form';
|
|
import { set } from 'react-redux-values';
|
|
import { connect } from 'react-redux';
|
|
import get from 'lodash.get';
|
|
import forceArray from 'force-array';
|
|
|
|
import { StatusLoader, FirewallIcon, H3, Button } from 'joyent-ui-toolkit';
|
|
|
|
import Title from '@components/create-instance/title';
|
|
import Description from '@components/description';
|
|
import FirewallForm from '@components/firewall';
|
|
import ListFwRules from '@graphql/list-fw-rules.gql';
|
|
|
|
const FORM_NAME = 'CREATE-INSTANCE-FIREWALL';
|
|
|
|
const Firewall = ({
|
|
defaultRules = [],
|
|
tagRules = [],
|
|
expanded = false,
|
|
proceeded = false,
|
|
loading = false,
|
|
enabled = false,
|
|
handleNext,
|
|
handleEdit
|
|
}) => (
|
|
<Fragment>
|
|
<Title
|
|
onClick={!expanded && !proceeded && handleEdit}
|
|
icon={<FirewallIcon />}
|
|
>
|
|
Firewall
|
|
</Title>
|
|
{expanded ? (
|
|
<Description>
|
|
Cloud Firewall rules control traffic across instances. Enabling the
|
|
firewall adds a default set of rules and rules defined by your chosen
|
|
tags.{' '}
|
|
<a
|
|
target="__blank"
|
|
href="https://docs.joyent.com/public-cloud/network/firewall"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Read more
|
|
</a>
|
|
</Description>
|
|
) : null}
|
|
<div>
|
|
{loading && expanded ? <StatusLoader /> : null}
|
|
{!loading ? (
|
|
<ReduxForm
|
|
form={FORM_NAME}
|
|
destroyOnUnmount={false}
|
|
forceUnregisterOnUnmount={true}
|
|
>
|
|
{props =>
|
|
expanded ? (
|
|
<FirewallForm
|
|
{...props}
|
|
defaultRules={defaultRules}
|
|
tagRules={tagRules}
|
|
enabled={enabled}
|
|
/>
|
|
) : null
|
|
}
|
|
</ReduxForm>
|
|
) : null}
|
|
{proceeded && !expanded ? (
|
|
<Margin bottom={4}>
|
|
<H3>{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}</H3>
|
|
</Margin>
|
|
) : null}
|
|
<Fragment>
|
|
{expanded ? (
|
|
<Margin bottom={4}>
|
|
<Button type="button" onClick={handleNext}>
|
|
Next
|
|
</Button>
|
|
</Margin>
|
|
) : proceeded ? (
|
|
<Margin bottom={4}>
|
|
<Button type="button" onClick={handleEdit} secondary>
|
|
Edit
|
|
</Button>
|
|
</Margin>
|
|
) : null}
|
|
</Fragment>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
|
|
export default compose(
|
|
connect(
|
|
({ form, values }, ownProps) => ({
|
|
...ownProps,
|
|
proceeded: get(values, 'create-instance-firewall-proceeded', false),
|
|
enabled: get(form, `${FORM_NAME}.values.enabled`, false),
|
|
showInactive: get(form, `${FORM_NAME}.values.show-inactive`, false),
|
|
tags: get(values, 'create-instance-tags', [])
|
|
}),
|
|
(dispatch, { history }) => ({
|
|
handleNext: () => {
|
|
dispatch(
|
|
set({ name: 'create-instance-firewall-proceeded', value: true })
|
|
);
|
|
|
|
return history.push('/instances/~create/cns');
|
|
},
|
|
handleEdit: () => {
|
|
return history.push('/instances/~create/firewall');
|
|
}
|
|
})
|
|
),
|
|
graphql(ListFwRules, {
|
|
options: ({ tags, expanded, enabled }) => ({
|
|
fetchPolicy: expanded && enabled ? 'cache-first' : 'cache-only',
|
|
variables: {
|
|
tags: tags.map(({ name, value }) => ({ name, value }))
|
|
}
|
|
}),
|
|
props: ({ ownProps, data }) => {
|
|
const { showInactive } = ownProps;
|
|
|
|
const {
|
|
firewall_rules_create_machine = [],
|
|
loading,
|
|
error,
|
|
refetch
|
|
} = data;
|
|
|
|
const rules = forceArray(firewall_rules_create_machine).filter(
|
|
({ enabled }) => enabled || showInactive
|
|
);
|
|
|
|
return {
|
|
defaultRules: rules.filter(({ rule_obj = {} }) => rule_obj.isWildcard),
|
|
tagRules: rules.filter(({ rule_obj = {} }) => rule_obj.tags.length),
|
|
loading,
|
|
error,
|
|
refetch
|
|
};
|
|
}
|
|
})
|
|
)(Firewall);
|