2017-05-16 16:46:04 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-06-26 17:29:12 +03:00
|
|
|
import { compose, graphql } from 'react-apollo';
|
2017-05-11 20:16:52 +03:00
|
|
|
import { Link } from 'react-router-dom';
|
2017-06-26 17:29:12 +03:00
|
|
|
import styled from 'styled-components';
|
2017-05-18 21:21:33 +03:00
|
|
|
import { Col, Row } from 'react-styled-flexboxgrid';
|
2017-06-26 17:29:12 +03:00
|
|
|
import forceArray from 'force-array';
|
|
|
|
import remcalc from 'remcalc';
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
import { LayoutContainer } from '@components/layout';
|
2017-07-28 19:56:03 +03:00
|
|
|
import { Title } from '@components/navigation';
|
|
|
|
import { ErrorMessage, Loader } from '@components/messaging';
|
2017-06-26 17:29:12 +03:00
|
|
|
import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql';
|
|
|
|
import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql';
|
2017-07-26 17:28:14 +03:00
|
|
|
import { H2, H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit';
|
2017-06-26 17:29:12 +03:00
|
|
|
|
|
|
|
const DGsRows = Row.extend`
|
|
|
|
margin-top: ${remcalc(-7)};
|
|
|
|
`;
|
|
|
|
|
2017-07-17 14:41:26 +03:00
|
|
|
const Box = styled.div`
|
|
|
|
position: relative;
|
2017-06-26 17:29:12 +03:00
|
|
|
text-decoration: none;
|
|
|
|
color: ${props => props.theme.secondary};
|
|
|
|
background-color: ${props => props.theme.white};
|
|
|
|
box-shadow: 0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05);
|
|
|
|
border: solid ${remcalc(1)} ${props => props.theme.grey};
|
|
|
|
margin-top: ${remcalc(20)};
|
|
|
|
margin-bottom: 0;
|
|
|
|
padding: ${remcalc(18)};
|
|
|
|
min-height: ${remcalc(258)};
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: ${remcalc(20)};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const BoxCreate = Box.extend`
|
|
|
|
background-color: ${props => props.theme.disabled};
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: ${props => props.theme.white};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Oval = styled.div`
|
|
|
|
border: solid ${remcalc(1)} ${props => props.theme.grey};
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
width: ${remcalc(48)};
|
|
|
|
height: ${remcalc(48)};
|
|
|
|
line-height: ${remcalc(48)};
|
|
|
|
font-size: ${remcalc(24)};
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
margin-bottom: ${remcalc(20)};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const CreateTitle = Small.extend`
|
|
|
|
font-weight: 600;
|
|
|
|
text-align: center;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const ServiceTitle = H3.extend`
|
|
|
|
margin-top: ${remcalc(10)};
|
|
|
|
font-weight: 600;
|
|
|
|
`;
|
2017-05-11 20:16:52 +03:00
|
|
|
|
2017-07-17 14:41:26 +03:00
|
|
|
const StyledLink = styled(Link)`
|
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
text-decoration: none;
|
|
|
|
color: ${props => props.theme.secondary};
|
|
|
|
`;
|
|
|
|
|
2017-07-19 19:20:22 +03:00
|
|
|
const StyledCreateLink = styled(StyledLink)`
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
align-content: center;
|
|
|
|
display: flex;
|
|
|
|
`;
|
|
|
|
|
2017-07-17 14:41:26 +03:00
|
|
|
const StyledIconButton = styled(IconButton)`
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
border: none;
|
|
|
|
|
2017-07-21 13:02:28 +03:00
|
|
|
&:hover,
|
2017-07-17 14:41:26 +03:00
|
|
|
&:active,
|
|
|
|
&:active:hover,
|
|
|
|
&:active:focus {
|
|
|
|
background-color: ${props => props.theme.white};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2017-05-16 16:46:04 +03:00
|
|
|
const DeploymentGroupList = ({
|
|
|
|
location,
|
|
|
|
deploymentGroups,
|
2017-06-26 17:29:12 +03:00
|
|
|
importable,
|
2017-05-16 16:46:04 +03:00
|
|
|
loading,
|
2017-06-26 17:29:12 +03:00
|
|
|
error,
|
|
|
|
match
|
2017-05-16 16:46:04 +03:00
|
|
|
}) => {
|
2017-07-28 19:56:03 +03:00
|
|
|
const _title = <Title>Deployment groups</Title>;
|
|
|
|
|
|
|
|
if (loading) {
|
|
|
|
return (
|
|
|
|
<LayoutContainer center>
|
|
|
|
{_title}
|
|
|
|
<Loader />
|
|
|
|
</LayoutContainer>
|
|
|
|
);
|
|
|
|
}
|
2017-06-26 17:29:12 +03:00
|
|
|
|
2017-07-28 19:56:03 +03:00
|
|
|
if (error) {
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
|
|
|
{_title}
|
2017-05-18 21:21:33 +03:00
|
|
|
<ErrorMessage message="Oops, and error occured while loading your deployment groups." />
|
2017-07-28 19:56:03 +03:00
|
|
|
</LayoutContainer>
|
|
|
|
);
|
|
|
|
}
|
2017-05-16 16:46:04 +03:00
|
|
|
|
2017-06-26 17:29:12 +03:00
|
|
|
const groups = forceArray(deploymentGroups).map(({ slug, name }) =>
|
|
|
|
<Col xs={12} sm={4} md={3} lg={3} key={slug}>
|
2017-07-17 14:41:26 +03:00
|
|
|
<Box>
|
|
|
|
<StyledLink to={`${match.path}/${slug}`}>
|
2017-07-26 17:28:14 +03:00
|
|
|
<ServiceTitle>
|
|
|
|
{name}
|
|
|
|
</ServiceTitle>
|
2017-07-17 14:41:26 +03:00
|
|
|
</StyledLink>
|
2017-07-20 23:48:30 +03:00
|
|
|
<StyledIconButton to={`${match.url}/${slug}/delete`}>
|
|
|
|
<BinIcon />
|
|
|
|
</StyledIconButton>
|
2017-06-26 17:29:12 +03:00
|
|
|
</Box>
|
|
|
|
</Col>
|
|
|
|
);
|
|
|
|
|
|
|
|
const create = [
|
|
|
|
<Col xs={12} sm={4} md={3} lg={3} key="~create">
|
2017-07-19 19:20:22 +03:00
|
|
|
<BoxCreate>
|
|
|
|
<StyledCreateLink to={`${match.path}/~create`}>
|
|
|
|
<Oval>+</Oval>
|
|
|
|
<CreateTitle>Create new deployment group</CreateTitle>
|
|
|
|
</StyledCreateLink>
|
2017-06-26 17:29:12 +03:00
|
|
|
</BoxCreate>
|
|
|
|
</Col>
|
|
|
|
].concat(
|
|
|
|
forceArray(importable).map(({ slug, name }) =>
|
|
|
|
<Col xs={12} sm={4} md={3} lg={3} key={slug}>
|
2017-07-19 19:20:22 +03:00
|
|
|
<BoxCreate>
|
|
|
|
<StyledCreateLink to={`${match.path}/~import/${slug}`}>
|
|
|
|
<Oval>⤵</Oval>
|
2017-07-26 17:28:14 +03:00
|
|
|
<CreateTitle>
|
|
|
|
{name}
|
|
|
|
</CreateTitle>
|
2017-07-19 19:20:22 +03:00
|
|
|
</StyledCreateLink>
|
2017-06-26 17:29:12 +03:00
|
|
|
</BoxCreate>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
);
|
2017-05-16 16:46:04 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<LayoutContainer>
|
2017-07-28 19:56:03 +03:00
|
|
|
{_title}
|
2017-06-26 17:29:12 +03:00
|
|
|
<DGsRows>
|
|
|
|
{groups}
|
|
|
|
{create}
|
|
|
|
</DGsRows>
|
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-06-26 17:29:12 +03:00
|
|
|
export default compose(
|
|
|
|
graphql(DeploymentGroupsQuery, {
|
|
|
|
options: {
|
|
|
|
pollInterval: 1000
|
|
|
|
},
|
|
|
|
props: ({ data: { deploymentGroups, loading, error } }) => ({
|
2017-07-26 17:28:14 +03:00
|
|
|
deploymentGroups:
|
|
|
|
deploymentGroups && deploymentGroups.length
|
|
|
|
? deploymentGroups.filter(dg => dg.status !== 'DELETED')
|
|
|
|
: null,
|
2017-06-26 17:29:12 +03:00
|
|
|
loading,
|
|
|
|
error
|
|
|
|
})
|
|
|
|
}),
|
|
|
|
graphql(DeploymentGroupsImportableQuery, {
|
|
|
|
props: ({ data: { importableDeploymentGroups } }) => ({
|
|
|
|
importable: importableDeploymentGroups
|
|
|
|
})
|
2017-05-11 20:16:52 +03:00
|
|
|
})
|
2017-06-26 17:29:12 +03:00
|
|
|
)(DeploymentGroupList);
|