2017-05-16 16:46:04 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-05-11 20:16:52 +03:00
|
|
|
import { graphql } from 'react-apollo';
|
|
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
|
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
import { LayoutContainer } from '@components/layout';
|
|
|
|
import { Loader, ErrorMessage } from '@components/messaging';
|
|
|
|
import { EmptyDeployementGroups } from '@components/deployment-groups';
|
|
|
|
import Button from '@ui/components/button';
|
|
|
|
import Column from '@ui/components/column';
|
|
|
|
import Row from '@ui/components/row';
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
const DeploymentGroupList = ({
|
|
|
|
location,
|
|
|
|
deploymentGroups,
|
|
|
|
loading,
|
|
|
|
error
|
|
|
|
}) => {
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
if(loading) {
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
|
|
|
<Loader />
|
|
|
|
</LayoutContainer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
else if(error) {
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
|
|
|
<ErrorMessage
|
|
|
|
message='Oops, and error occured while loading your deployment groups.'
|
|
|
|
/>
|
|
|
|
</LayoutContainer>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
let emptyDeployementGroups = null;
|
|
|
|
let deploymentGroupList = null;
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
if(deploymentGroups.length) {
|
|
|
|
|
|
|
|
const list = deploymentGroups.map(
|
|
|
|
(deploymentGroup, index) => {
|
2017-05-11 20:16:52 +03:00
|
|
|
return (
|
|
|
|
<p key={index}>
|
|
|
|
<Link
|
2017-05-17 21:02:35 +03:00
|
|
|
to={`${location.pathname}/${deploymentGroup.slug}/services`}
|
2017-05-11 20:16:52 +03:00
|
|
|
>
|
|
|
|
{deploymentGroup.name}
|
|
|
|
</Link>
|
2017-05-16 16:46:04 +03:00
|
|
|
</p>
|
|
|
|
)});
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
deploymentGroupList = (
|
|
|
|
<Row>
|
|
|
|
<Column>
|
|
|
|
<ul>
|
|
|
|
{list}
|
|
|
|
</ul>
|
|
|
|
</Column>
|
|
|
|
</Row>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
emptyDeployementGroups = (
|
|
|
|
<EmptyDeployementGroups />
|
|
|
|
)
|
2017-05-11 20:16:52 +03:00
|
|
|
}
|
2017-05-16 16:46:04 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
|
|
|
{ emptyDeployementGroups }
|
|
|
|
<Row>
|
|
|
|
<Column xs={12}>
|
|
|
|
<Button to={`/deployment-groups/~create`}>
|
|
|
|
Create new
|
|
|
|
</Button>
|
|
|
|
</Column>
|
|
|
|
</Row>
|
|
|
|
{ deploymentGroupList }
|
|
|
|
</LayoutContainer>
|
|
|
|
);
|
2017-05-11 20:16:52 +03:00
|
|
|
}
|
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
DeploymentGroupList.propTypes = {
|
|
|
|
deploymentGroups: PropTypes.arrayOf(
|
|
|
|
PropTypes.shape({
|
|
|
|
uuid: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
|
|
|
name: PropTypes.string
|
|
|
|
})
|
|
|
|
)
|
|
|
|
};
|
|
|
|
|
2017-05-11 20:16:52 +03:00
|
|
|
const DeploymentGroupListWithData = graphql(DeploymentGroupsQuery, {
|
|
|
|
props: ({ data: { deploymentGroups, loading, error }}) => ({
|
2017-05-16 16:46:04 +03:00
|
|
|
deploymentGroups: deploymentGroups,
|
2017-05-11 20:16:52 +03:00
|
|
|
loading,
|
|
|
|
error
|
|
|
|
})
|
|
|
|
})(DeploymentGroupList);
|
|
|
|
|
|
|
|
export default DeploymentGroupListWithData;
|