mirror of
https://github.com/yldio/copilot.git
synced 2024-11-14 15:20:06 +02:00
feat(ui-toolkit, cp-frontend, cp-gql-mock-server): Mock deleting a deployment group and filter out deleted dgs and services on frontend
This commit is contained in:
parent
6882143a98
commit
173b6c9307
@ -34,9 +34,9 @@ const TitleInnerContainer = styled.div`
|
||||
const ServiceListItem = ({
|
||||
onQuickActionsClick = () => {},
|
||||
deploymentGroup = '',
|
||||
service = {}
|
||||
service = {},
|
||||
isChild = false
|
||||
}) => {
|
||||
const isChild = Boolean(service.parent);
|
||||
|
||||
const children = service.children
|
||||
? service.children.map(service =>
|
||||
@ -44,13 +44,14 @@ const ServiceListItem = ({
|
||||
key={service.id}
|
||||
deploymentGroup={deploymentGroup}
|
||||
service={service}
|
||||
isChild
|
||||
/>
|
||||
)
|
||||
: null;
|
||||
|
||||
const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
|
||||
|
||||
const title = service.parent
|
||||
const title = isChild
|
||||
? <CardTitle>
|
||||
{service.name}
|
||||
</CardTitle>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { compose, graphql } from 'react-apollo';
|
||||
import DeploymentGroupsDeleteMutation from '@graphql/DeploymentGroupsDeleteMutation.gql';
|
||||
import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutation.gql';
|
||||
import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql';
|
||||
import { Loader, ErrorMessage } from '@components/messaging';
|
||||
import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group';
|
||||
@ -18,7 +18,7 @@ class DeploymentGroupDelete extends Component {
|
||||
);
|
||||
}
|
||||
|
||||
const { deploymentGroup, deleteDeploymentGroups, history, match } = this.props;
|
||||
const { deploymentGroup, deleteDeploymentGroup, history, match } = this.props;
|
||||
|
||||
const handleCloseClick = evt => {
|
||||
const closeUrl = match.url.split('/').slice(0, -2).join('/');
|
||||
@ -26,7 +26,8 @@ class DeploymentGroupDelete extends Component {
|
||||
};
|
||||
|
||||
const handleConfirmClick = evt => {
|
||||
deleteDeploymentGroups(deploymentGroup.id).then(() => handleCloseClick());
|
||||
console.log('deploymentGroup = ', deploymentGroup);
|
||||
deleteDeploymentGroup(deploymentGroup.id).then(() => handleCloseClick());
|
||||
};
|
||||
|
||||
return (
|
||||
@ -44,14 +45,14 @@ class DeploymentGroupDelete extends Component {
|
||||
DeploymentGroupDelete.propTypes = {
|
||||
deploymentGroup: PropTypes.object,
|
||||
history: PropTypes.object,
|
||||
deleteDeploymentGroups: PropTypes.func.isRequired
|
||||
deleteDeploymentGroup: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
const DeleteDeploymentGroupsGql = graphql(DeploymentGroupsDeleteMutation, {
|
||||
const DeleteDeploymentGroupGql = graphql(DeploymentGroupDeleteMutation, {
|
||||
props: ({ mutate }) => ({
|
||||
deleteDeploymentGroups: deploymentGroupId =>
|
||||
deleteDeploymentGroup: deploymentGroupId =>
|
||||
mutate({
|
||||
variables: { ids: [deploymentGroupId] }
|
||||
variables: { id: deploymentGroupId }
|
||||
})
|
||||
})
|
||||
});
|
||||
@ -73,7 +74,7 @@ const DeploymentGroupGql = graphql(DeploymentGroupQuery, {
|
||||
})
|
||||
});
|
||||
|
||||
const DeploymentGroupDeleteWithData = compose(DeleteDeploymentGroupsGql, DeploymentGroupGql)(
|
||||
const DeploymentGroupDeleteWithData = compose(DeleteDeploymentGroupGql, DeploymentGroupGql)(
|
||||
DeploymentGroupDelete
|
||||
);
|
||||
|
||||
|
@ -22,7 +22,6 @@ const DGsRows = Row.extend`
|
||||
margin-top: ${remcalc(-7)};
|
||||
`;
|
||||
|
||||
// const Box = Col.withComponent(Link).extend`
|
||||
const Box = styled.div`
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@ -44,11 +43,6 @@ const Box = styled.div`
|
||||
|
||||
const BoxCreate = Box.extend`
|
||||
background-color: ${props => props.theme.disabled};
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: ${props => props.theme.white};
|
||||
@ -85,6 +79,14 @@ const StyledLink = styled(Link)`
|
||||
color: ${props => props.theme.secondary};
|
||||
`;
|
||||
|
||||
const StyledCreateLink = styled(StyledLink)`
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const DeleteButtonContainer = styled.div`
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -140,17 +142,21 @@ const DeploymentGroupList = ({
|
||||
|
||||
const create = [
|
||||
<Col xs={12} sm={4} md={3} lg={3} key="~create">
|
||||
<BoxCreate to={`${match.path}/~create`}>
|
||||
<Oval>+</Oval>
|
||||
<CreateTitle>Create new deployment group</CreateTitle>
|
||||
<BoxCreate>
|
||||
<StyledCreateLink to={`${match.path}/~create`}>
|
||||
<Oval>+</Oval>
|
||||
<CreateTitle>Create new deployment group</CreateTitle>
|
||||
</StyledCreateLink>
|
||||
</BoxCreate>
|
||||
</Col>
|
||||
].concat(
|
||||
forceArray(importable).map(({ slug, name }) =>
|
||||
<Col xs={12} sm={4} md={3} lg={3} key={slug}>
|
||||
<BoxCreate to={`${match.path}/~import/${slug}`}>
|
||||
<Oval>⤵</Oval>
|
||||
<CreateTitle>{name}</CreateTitle>
|
||||
<BoxCreate>
|
||||
<StyledCreateLink to={`${match.path}/~import/${slug}`}>
|
||||
<Oval>⤵</Oval>
|
||||
<CreateTitle>{name}</CreateTitle>
|
||||
</StyledCreateLink>
|
||||
</BoxCreate>
|
||||
</Col>
|
||||
)
|
||||
@ -184,7 +190,9 @@ export default compose(
|
||||
pollInterval: 1000
|
||||
},
|
||||
props: ({ data: { deploymentGroups, loading, error } }) => ({
|
||||
deploymentGroups,
|
||||
deploymentGroups: deploymentGroups && deploymentGroups.length
|
||||
? deploymentGroups.filter(dg => dg.status !== 'DELETED')
|
||||
: null,
|
||||
loading,
|
||||
error
|
||||
})
|
||||
|
@ -0,0 +1,7 @@
|
||||
#import "./DeploymentGroupInfo.gql"
|
||||
|
||||
mutation DeleteDeploymentGroup($id: ID!) {
|
||||
deleteDeploymentGroup(id: $id) {
|
||||
...DeploymentGroupInfo
|
||||
}
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
#import "./DeploymentGroupInfo.gql"
|
||||
|
||||
mutation DeleteDeploymentGroups($ids: [ID]!) {
|
||||
deleteDeploymentGroups(ids: $ids) {
|
||||
...DeploymentGroupInfo
|
||||
}
|
||||
}
|
@ -132,14 +132,13 @@ const getService = (service, index) => {
|
||||
|
||||
const processServices = services => {
|
||||
return forceArray(services).reduce((ss, s, i) => {
|
||||
const serviceIndex = ss.findIndex(existingS => existingS.id === s.id);
|
||||
if (serviceIndex === -1) {
|
||||
ss.push(getService(s, i));
|
||||
} else {
|
||||
ss.splice(serviceIndex, 1, {
|
||||
...ss[serviceIndex],
|
||||
...getService(s, i)
|
||||
});
|
||||
|
||||
if(s.status !== 'DELETED') {
|
||||
const service = getService(s, i);
|
||||
if(s.branches && s.branches.length) {
|
||||
service.children = processServices(s.branches)
|
||||
}
|
||||
ss.push(service);
|
||||
}
|
||||
|
||||
return ss;
|
||||
|
@ -119,6 +119,34 @@ const createDeploymentGroup = ({ name }) => {
|
||||
return Promise.resolve(dg);
|
||||
};
|
||||
|
||||
const deleteDeploymentGroup = options => {
|
||||
const dgId = options.id;
|
||||
const deleteDeploymentGroup = getServices({ deploymentGroupId: dgId})
|
||||
.then(services => Promise.all(
|
||||
services.map(service => handleStatusUpdateRequest(
|
||||
service.id,
|
||||
'DELETING',
|
||||
'STOPPING',
|
||||
'DELETED',
|
||||
'DELETED'
|
||||
))
|
||||
))
|
||||
.then(() => {
|
||||
const deploymentGroup = deploymentGroups.filter(dg => dg.id === dgId).shift();
|
||||
deploymentGroup.status = 'DELETING';
|
||||
return deploymentGroup;
|
||||
return ({ deploymentGroupId: dgId });
|
||||
return getDeploymentGroups({id: dgId});
|
||||
});
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
const deploymentGroup = deploymentGroups.filter(dg => dg.id === dgId).shift();
|
||||
deploymentGroup.status = 'DELETED';
|
||||
}, 5000);
|
||||
|
||||
return Promise.resolve(deleteDeploymentGroup);
|
||||
};
|
||||
|
||||
const createServicesFromManifest = ({ deploymentGroupId, raw }) => {
|
||||
const manifest = yaml.safeLoad(raw);
|
||||
|
||||
@ -308,6 +336,7 @@ module.exports = {
|
||||
type: options.type,
|
||||
format: options.format
|
||||
})),
|
||||
deleteDeploymentGroup: (options, request, fn) => fn(null, deleteDeploymentGroup(options)),
|
||||
deleteServices: (options, request, fn) => fn(null, deleteServices(options)),
|
||||
scale: (options, reguest, fn) => fn(null, scale(options)),
|
||||
restartServices: (options, request, fn) => fn(null, restartServices(options)),
|
||||
|
@ -230,4 +230,5 @@ type Mutation {
|
||||
restartInstances(ids: [ID]!): [Instance]
|
||||
|
||||
importDeploymentGroup(deploymentGroupSlug: String!): DeploymentGroup
|
||||
deleteDeploymentGroup(id: ID!): DeploymentGroup
|
||||
}
|
||||
|
@ -15,6 +15,6 @@ const alignsFromProps = props =>
|
||||
.join(';\n');
|
||||
|
||||
export default Component =>
|
||||
/* Component.extend
|
||||
Component.extend
|
||||
? Component.extend`${alignsFromProps}`
|
||||
: */ styled(Component)`${alignsFromProps}`;
|
||||
: styled(Component)`${alignsFromProps}`;
|
||||
|
@ -110,13 +110,6 @@ const IconButton = props => {
|
||||
);
|
||||
};
|
||||
|
||||
/* ({ children, ...rest }) =>
|
||||
<StyledIconButton {...rest}>
|
||||
<StyledDiv>
|
||||
{children}
|
||||
</StyledDiv>
|
||||
</StyledIconButton>; */
|
||||
|
||||
IconButton.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClick: PropTypes.func
|
||||
|
31
yarn.lock
31
yarn.lock
@ -3723,11 +3723,11 @@ extsprintf@1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
|
||||
|
||||
extsprintf@1.2.0:
|
||||
extsprintf@1.2.0, extsprintf@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.2.0.tgz#5ad946c22f5b32ba7f8cd7426711c6e8a3fc2529"
|
||||
|
||||
extsprintf@1.3.0, extsprintf@^1.2.0:
|
||||
extsprintf@1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
|
||||
|
||||
@ -8425,7 +8425,7 @@ squad@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/squad/-/squad-1.1.3.tgz#da09f68d1e0b0a60dca172878fe1f3c9e5272401"
|
||||
|
||||
sshpk-agent@1.4.2:
|
||||
sshpk-agent@1.4.2, sshpk-agent@^1.3.0:
|
||||
version "1.4.2"
|
||||
resolved "https://registry.yarnpkg.com/sshpk-agent/-/sshpk-agent-1.4.2.tgz#5739cc08f48f98c53950a1715d20872a53804541"
|
||||
dependencies:
|
||||
@ -8434,16 +8434,7 @@ sshpk-agent@1.4.2:
|
||||
readable-stream "^2.1.4"
|
||||
sshpk ">=1.9.1 < 1.11.0"
|
||||
|
||||
sshpk-agent@^1.3.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/sshpk-agent/-/sshpk-agent-1.6.0.tgz#56da869e02ad757991c247327e80b261682399af"
|
||||
dependencies:
|
||||
assert-plus "^1.0.0"
|
||||
mooremachine "^2.0.1"
|
||||
readable-stream "^2.1.4"
|
||||
sshpk ">=1.13.0 < 1.14.0"
|
||||
|
||||
sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0":
|
||||
sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0", sshpk@^1.7.0, sshpk@^1.8.3:
|
||||
version "1.10.2"
|
||||
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"
|
||||
dependencies:
|
||||
@ -8458,20 +8449,6 @@ sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0":
|
||||
jsbn "~0.1.0"
|
||||
tweetnacl "~0.14.0"
|
||||
|
||||
"sshpk@>=1.13.0 < 1.14.0", sshpk@^1.7.0, sshpk@^1.8.3:
|
||||
version "1.13.1"
|
||||
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
|
||||
dependencies:
|
||||
asn1 "~0.2.3"
|
||||
assert-plus "^1.0.0"
|
||||
dashdash "^1.12.0"
|
||||
getpass "^0.1.1"
|
||||
optionalDependencies:
|
||||
bcrypt-pbkdf "^1.0.0"
|
||||
ecc-jsbn "~0.1.1"
|
||||
jsbn "~0.1.0"
|
||||
tweetnacl "~0.14.0"
|
||||
|
||||
stack-utils@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
|
||||
|
Loading…
Reference in New Issue
Block a user