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-18 21:21:33 +03:00
|
|
|
import { Col, Row } from 'react-styled-flexboxgrid';
|
2017-05-11 20:16:52 +03:00
|
|
|
|
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';
|
2017-05-18 21:21:33 +03:00
|
|
|
import { Button } from 'joyent-ui-toolkit';
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
const DeploymentGroupList = ({
|
|
|
|
location,
|
|
|
|
deploymentGroups,
|
|
|
|
loading,
|
|
|
|
error
|
|
|
|
}) => {
|
2017-05-18 21:21:33 +03:00
|
|
|
if (loading) {
|
2017-05-16 16:46:04 +03:00
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
|
|
|
<Loader />
|
|
|
|
</LayoutContainer>
|
2017-05-18 21:21:33 +03:00
|
|
|
);
|
|
|
|
} else if (error) {
|
2017-05-16 16:46:04 +03:00
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
2017-05-18 21:21:33 +03:00
|
|
|
<ErrorMessage message="Oops, and error occured while loading your deployment groups." />
|
2017-05-16 16:46:04 +03:00
|
|
|
</LayoutContainer>
|
2017-05-18 21:21:33 +03:00
|
|
|
);
|
2017-05-16 16:46:04 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
let emptyDeployementGroups = null;
|
|
|
|
let deploymentGroupList = null;
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-18 21:21:33 +03:00
|
|
|
if (deploymentGroups.length) {
|
|
|
|
const list = deploymentGroups.map((deploymentGroup, index) => {
|
|
|
|
return (
|
|
|
|
<p key={index}>
|
|
|
|
<Link to={`${location.pathname}/${deploymentGroup.slug}/services`}>
|
|
|
|
{deploymentGroup.name}
|
|
|
|
</Link>
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
});
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
deploymentGroupList = (
|
|
|
|
<Row>
|
2017-05-18 21:21:33 +03:00
|
|
|
<Col>
|
2017-05-16 16:46:04 +03:00
|
|
|
<ul>
|
|
|
|
{list}
|
|
|
|
</ul>
|
2017-05-18 21:21:33 +03:00
|
|
|
</Col>
|
2017-05-16 16:46:04 +03:00
|
|
|
</Row>
|
2017-05-18 21:21:33 +03:00
|
|
|
);
|
|
|
|
} else {
|
|
|
|
emptyDeployementGroups = <EmptyDeployementGroups />;
|
2017-05-11 20:16:52 +03:00
|
|
|
}
|
2017-05-16 16:46:04 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
2017-05-18 21:21:33 +03:00
|
|
|
{emptyDeployementGroups}
|
2017-05-16 16:46:04 +03:00
|
|
|
<Row>
|
2017-05-18 21:21:33 +03:00
|
|
|
<Col xs={12}>
|
2017-05-16 16:46:04 +03:00
|
|
|
<Button to={`/deployment-groups/~create`}>
|
|
|
|
Create new
|
|
|
|
</Button>
|
2017-05-18 21:21:33 +03:00
|
|
|
</Col>
|
2017-05-16 16:46:04 +03:00
|
|
|
</Row>
|
2017-05-18 21:21:33 +03:00
|
|
|
{deploymentGroupList}
|
2017-05-16 16:46:04 +03:00
|
|
|
</LayoutContainer>
|
|
|
|
);
|
2017-05-18 21:21:33 +03:00
|
|
|
};
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
DeploymentGroupList.propTypes = {
|
|
|
|
deploymentGroups: PropTypes.arrayOf(
|
|
|
|
PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
name: PropTypes.string
|
|
|
|
})
|
|
|
|
)
|
|
|
|
};
|
|
|
|
|
2017-05-11 20:16:52 +03:00
|
|
|
const DeploymentGroupListWithData = graphql(DeploymentGroupsQuery, {
|
2017-05-18 21:21:33 +03:00
|
|
|
props: ({ data: { deploymentGroups, loading, error } }) => ({
|
|
|
|
deploymentGroups,
|
2017-05-11 20:16:52 +03:00
|
|
|
loading,
|
|
|
|
error
|
|
|
|
})
|
|
|
|
})(DeploymentGroupList);
|
|
|
|
|
|
|
|
export default DeploymentGroupListWithData;
|