/* eslint-disable camelcase */
import React, { Fragment } from 'react';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { set } from 'react-redux-values';
import { connect } from 'react-redux';
import { Margin } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import get from 'lodash.get';
import forceArray from 'force-array';
import { FirewallIcon, H3, Button, P } from 'joyent-ui-toolkit';
import {
ToggleFirewallForm,
ToggleInactiveForm,
TagRules,
DefaultRules
} from '@components/firewall';
import Title from '@components/create-instance/title';
import Animated from '@containers/create-instance/animated';
import Description from '@components/description';
import Empty from '@components/empty';
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,
step
}) => (
}>
Firewall
{expanded ? (
Cloud Firewall rules control traffic across instances. Enabling the firewall adds a default
set of rules and rules defined by your chosen tags.{' '}
Read more
) : null}
{props =>
expanded ? (
) : null}
{props => (enabled && expanded && !loading ? : null)}
{enabled && expanded && !loading && !defaultRules.length && !tagRules.length ? (
Sorry, but we weren’t able to find any firewall rules.
) : null}
{!loading && expanded && enabled && defaultRules.length ? (
) : null}
{!loading && expanded && enabled && tagRules.length ? (
) : null}
{!loading && expanded && enabled && (tagRules.length || defaultRules.length) ? (
*Other firewall rules may apply as defined by wildcard(s), IP(s), subnet(s), tag(s) or
VM(s). Please see{' '}
firewall rule list
{' '}
for more details.
) : null}
{proceeded && !expanded ? (
{enabled ? 'Firewall Enabled' : 'Firewall Not Enabled'}