import React, { Fragment } from 'react';
import { compose, graphql } from 'react-apollo';
import ReduxForm from 'declarative-redux-form';
import { destroy } from 'redux-form';
import { connect } from 'react-redux';
import get from 'lodash.get';
import { Margin, Padding } from 'styled-components-spacing';
import Flex from 'styled-flex-component';
import { set } from 'react-redux-values';
import punycode from 'punycode';
import remcalc from 'remcalc';
import {
CnsIcon,
P,
Card,
H3,
Button,
FormGroup,
FormLabel,
Toggle,
Divider,
TagList,
StatusLoader
} from 'joyent-ui-toolkit';
import {
Hostname,
Header,
AddServiceForm,
HostnamesHeader
} from '@components/create-instance/cns';
import Tag from '@components/tags';
import Title from '@components/create-instance/title';
import Description from '@components/description';
import getAccount from '@graphql/get-account.gql';
const CNS_FORM = 'create-instance-cns';
const CNSContainer = ({
submitted,
expanded,
proceeded,
serviceNames = [],
instanceName,
cnsEnabled = true,
hostnames = [],
handleNext,
handleEdit,
handleToggleCnsEnabled,
handleAddService,
handleRemoveService,
loading
}) => (
}>
Container Name Service
{expanded ? (
Triton CNS is used to automatically update hostnames for your
instances*. You can serve multiple instances (with multiple IP
addresses) under the same hostname by matching the CNS service names.{' '}
Read the docs
) : null}