/* eslint-disable camelcase */ import React, { Fragment } from 'react'; import { Field } from 'redux-form'; import { Row, Col } from 'joyent-react-styled-flexboxgrid'; import { Margin, Padding } from 'styled-components-spacing'; import styled from 'styled-components'; import Flex, { FlexItem } from 'styled-flex-component'; import remcalc from 'remcalc'; import { H4, P, Small, DotIcon, Card, CardHeader, CardHeaderMeta, CardHeaderBox, CardOutlet, FormGroup, FormLabel, Input, Checkbox, Divider, FabricIcon, InstanceCountIcon, DataCenterIcon, PublicIcon, PrivateIcon, ArrowIcon } from 'joyent-ui-toolkit'; const Box = styled.div` display: inline-block; background-color: ${props => props.theme.white}; border: ${remcalc(1)} solid ${props => props.theme.grey}; border-radius: ${remcalc(4)}; min-width: ${remcalc(300)}; `; export const Collapsed = ({ name, fabric, ...network }) => (

{name}

{network.public ? : }

{network.public ? 'Public' : 'Private'}

{fabric ? : }

{fabric ? 'Fabric network' : 'Data center network'}

); export const Expanded = ({ id, name, fabric, subnet, description, machines = [], provision_start_ip, provision_end_ip, selected = false, infoExpanded = false, machinesExpanded = false, readOnly = false, onInfoClick, onMachinesClick, ...network }) => ( {!readOnly ? ( ) : null}

{name}

{description && (

{description}

)} {network.public ? : }

{network.public ? 'Public' : 'Private'}

{fabric ? : }

{fabric ? 'Fabric network' : 'Data center network'}

{fabric ? (

{`${machines.length} instance${ machines.length === 1 ? '' : 's' }`}

) : null}
{fabric ? (

Network information

{infoExpanded ? ( {network.internet_nat ? ( Outbound internet access enabled ) : null} ID Subnet IP range ) : null}
{machines.length ? (

Instances on network

{machinesExpanded ? ( {machines.map(({ name }) => (

{name}

))}
) : null}
) : null}
) : null}
); export default ({ small = false, ...rest }) => small ? : ;