import React, { Fragment } from 'react'; import styled from 'styled-components'; import remcalc from 'remcalc'; import { Margin, Padding } from 'styled-components-spacing'; import Flex, { FlexItem } from 'styled-flex-component'; import { Field } from 'redux-form'; import { P, H3, Card, Divider, TagList, Input, Toggle, Small, Button, FormGroup, FormLabel, PublicIcon, PrivateIcon, CopiableField, FormMeta } from 'joyent-ui-toolkit'; import Tag from '@components/tags'; const SmallBordered = styled(Small)` padding-right: ${remcalc(12)}; margin-right: ${remcalc(12)}; border-right: ${remcalc(1)} solid ${props => props.theme.grey}; `; export const Header = () => (

Hostnames

Default hostnames are automatically generated from both the instance name and any attached networks.

); export const Footer = ({ enabled, submitting, onToggle }) => ( Disabled CNS Enabled CNS {enabled ? (

*All hostnames listed here will be confirmed after deployment.

) : null}
); export const HostnamesHeader = () => (

CNS service hostnames

CNS service hostnames are created by attaching a CNS service name to one or more instances. You can serve multiple instances under the same hostname by assigning them to a matching CNS service name.

); export const AddServiceForm = ({ handleSubmit, submitting, disabled, pristine, invalid }) => (
Attach to new CNS service name
); export const Hostname = ({ copy, values = [], network, service, ...hostname }) => ( {values.length ? ( {network && service ? 'Network CNS service' : network ? 'Network' : service ? 'CNS service' : 'Instance name'}{' '} hostname{values.length === 1 ? '' : 's'} {hostname.public ? : } {hostname.public ? 'Public' : 'Private'} {values.map((value, i) => ( {copy ? ( ) : ( )} ))} ) : null} ); const DefaultHostnames = ({ hostnames, copy }) => (
{hostnames.map(({ value, ...hostname }) => ( ))} ); const CnsHostnames = ({ hostnames = [], services = [], onRemoveService = () => null, children = null, copy = false }) => ( {services.length ? ( Existing CNS service name(s) {services.map(value => ( onRemoveService(value)) } /> ))} ) : null} {children} {hostnames.map(({ value, ...hostname }) => ( ))} ); export default ({ copy, hostnames = [], services = [], onRemoveService, children = null }) => ( !service)} /> service)} onRemoveService={onRemoveService} > {children} );