import React from 'react'; import { compose, graphql } from 'react-apollo'; import { connect } from 'react-redux'; import { set } from 'react-redux-values'; import forceArray from 'force-array'; import { Margin } from 'styled-components-spacing'; import find from 'lodash.find'; import reverse from 'lodash.reverse'; import sortBy from 'lodash.sortby'; import get from 'lodash.get'; import { ViewContainer, StatusLoader, Message, MessageTitle, MessageDescription, H3 } from 'joyent-ui-toolkit'; import Network from '@components/network'; import Description from '@components/description'; import GetNetworks from '@graphql/list-instance-networks.gql'; export const Networks = ({ networks = [], loading = false, error = null, setMachinesExpanded, setInfoExpanded }) => ( Use predefined or customized fabric networks which can be public-facing or private. All fabrics are isolated from other customers giving you complete control over the network environment. Read more on fabrics.{' '} Read more

Networks attached to this instance

{loading ? : null} {!loading && error ? ( Ooops! An error occurred while loading your networks ) : null} {!loading && networks.map(({ id, infoExpanded, machinesExpanded, ...network }) => ( setInfoExpanded(id, !infoExpanded)} onMachinesClick={() => setMachinesExpanded(id, !machinesExpanded)} selected readOnly /> ))}
); export default compose( graphql(GetNetworks, { options: ({ match }) => ({ variables: { name: get(match, 'params.instance') } }), props: ({ data }) => { const { machines, loading, error, variables } = data; const { name } = variables; const instance = find(forceArray(machines), ['name', name]); const values = get(instance, 'networks', []); const networks = reverse(sortBy(values, 'public')); return { networks, instance, loading, error }; } }), connect( ({ values }, { networks }) => ({ networks: networks.map(({ id, ...network }) => ({ ...network, infoExpanded: get(values, `networks-${id}-info-expanded`, false), machinesExpanded: get( values, `networks-${id}-machines-expanded`, false ), id })) }), dispatch => ({ setMachinesExpanded: (id, expanded) => { return dispatch( set({ name: `networks-${id}-machines-expanded`, value: expanded }) ); }, setInfoExpanded: (id, expanded) => { return dispatch( set({ name: `networks-${id}-info-expanded`, value: expanded }) ); } }) ) )(Networks);