126 lines
3.5 KiB
JavaScript
126 lines
3.5 KiB
JavaScript
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, Empty } from 'joyent-ui-resource-widgets';
|
|
import Description from '@components/instances/description';
|
|
import GetNetworks from '@graphql/list-instance-networks.gql';
|
|
|
|
export const Networks = ({
|
|
networks = [],
|
|
loading = false,
|
|
error = null,
|
|
setMachinesExpanded,
|
|
setInfoExpanded
|
|
}) => (
|
|
<ViewContainer main>
|
|
<Margin bottom="3">
|
|
<Description href="https://docs.joyent.com/public-cloud/network/sdn">
|
|
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.
|
|
</Description>
|
|
</Margin>
|
|
<Margin bottom={3}>
|
|
<H3>Networks attached to this instance</H3>
|
|
</Margin>
|
|
{loading ? <StatusLoader /> : null}
|
|
{!loading && error && !networks.length ? (
|
|
<Margin bottom="5">
|
|
<Message error>
|
|
<MessageTitle>Ooops!</MessageTitle>
|
|
<MessageDescription>
|
|
An error occurred while loading your networks
|
|
</MessageDescription>
|
|
</Message>
|
|
</Margin>
|
|
) : null}
|
|
{!loading &&
|
|
networks.map(({ id, infoExpanded, machinesExpanded, ...network }) => (
|
|
<Network
|
|
{...network}
|
|
key={id}
|
|
id={id}
|
|
infoExpanded={infoExpanded}
|
|
machinesExpanded={machinesExpanded}
|
|
onInfoClick={() => setInfoExpanded(id, !infoExpanded)}
|
|
onMachinesClick={() => setMachinesExpanded(id, !machinesExpanded)}
|
|
selected
|
|
readOnly
|
|
/>
|
|
))}
|
|
{!loading && !error && !networks.length ? (
|
|
<Empty transparent borderTop>
|
|
You have no networks attached to this instance
|
|
</Empty>
|
|
) : null}
|
|
</ViewContainer>
|
|
);
|
|
|
|
export default compose(
|
|
graphql(GetNetworks, {
|
|
options: ({ match }) => ({
|
|
variables: {
|
|
id: get(match, 'params.instance')
|
|
}
|
|
}),
|
|
props: ({ data }) => {
|
|
const { loading, error, variables } = data;
|
|
const { id } = variables;
|
|
|
|
const machines = get(data, 'machine', []);
|
|
const instance = find(forceArray(machines), ['id', id]);
|
|
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);
|