From 2ea33c2a07504c4dc444a929d5c05700c76eadf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Thu, 22 Jun 2017 23:01:21 +0100 Subject: [PATCH] feat(cp-frontend): improve review stage of deployment group creation --- .../components/deployment-groups/create.js | 93 +++++++++++++++---- .../containers/deployment-groups/create.js | 61 ++++++++++-- .../src/containers/instances/list.js | 2 + .../src/graphql/DeploymentGroupConfig.gql | 8 ++ 4 files changed, 135 insertions(+), 29 deletions(-) create mode 100644 packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql diff --git a/packages/cp-frontend/src/components/deployment-groups/create.js b/packages/cp-frontend/src/components/deployment-groups/create.js index 34ecbe00..20e8b7db 100644 --- a/packages/cp-frontend/src/components/deployment-groups/create.js +++ b/packages/cp-frontend/src/components/deployment-groups/create.js @@ -1,9 +1,49 @@ import React from 'react'; -import { FormGroup, FormMeta, Input, Button } from 'joyent-ui-toolkit'; import { Field } from 'redux-form'; +import styled from 'styled-components'; import { Row, Col } from 'react-styled-flexboxgrid'; import { Dots2 } from 'styled-text-spinners'; import Bundle from 'react-bundle'; +import remcalc from 'remcalc'; +import forceArray from 'force-array'; + +import { + FormGroup, + FormMeta, + Input, + Button, + Card, + H3, + typography +} from 'joyent-ui-toolkit'; + +const Dl = styled.dl` + margin: ${remcalc(13)} ${remcalc(19)}; +`; + +const ServiceName = H3.extend` + margin-top: 0; + margin-bottom: 0; + line-height: 1.6; + font-weight: 600; +`; + +const ServiceCard = Card.extend` + min-height: ${remcalc(72)}; +`; + +const ImageTitle = ServiceName.extend` + display: inline-block; +`; + +const Image = styled.span` + ${typography.fontFamily}; +`; + +const ButtonsRow = Row.extend` + margin-top: ${remcalc(29)}; + margin-bottom: ${remcalc(60)}; +`; const Editor = ManifestEditor => ({ input }) => ; @@ -18,13 +58,13 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => - + - + ; -export const Manifest = ({ handleSubmit, onCancel, dirty, mode }) => +export const Manifest = ({ handleSubmit, onCancel, dirty, mode, loading }) =>
import('joyent-manifest-editor')}> {ManifestEditor => @@ -32,22 +72,35 @@ export const Manifest = ({ handleSubmit, onCancel, dirty, mode }) => ? : } - + - - + +
; -export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => -
- 
{state.deploymentGroupName}
- 
{state.manifest}
- - - - -
; +export const Review = ({ handleSubmit, onCancel, dirty, ...state }) => { + const serviceList = forceArray(state.services).map(({ name, image }) => + +
+
{name}
+
Image: {image}
+
+ + ); + + return ( +
+ {serviceList} + + + + +
+ ); +}; diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index cb639d63..06084b1f 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -8,6 +8,7 @@ import paramCase from 'param-case'; import DeploymentGroupBySlug from '@graphql/DeploymentGroupBySlug.gql'; import DeploymentGroupCreateMutation from '@graphql/DeploymentGroupCreate.gql'; import DeploymentGroupProvisionMutation from '@graphql/DeploymentGroupProvision.gql'; +import DeploymentGroupConfigMutation from '@graphql/DeploymentGroupConfig.gql'; import { client } from '@state/store'; import { LayoutContainer } from '@components/layout'; @@ -52,8 +53,9 @@ const ReviewForm = reduxForm({ // state between refreshes class DeploymentGroupCreate extends Component { state = { - deploymentGroupName: '', + name: '', manifest: '', + services: [], loading: false, error: null }; @@ -74,15 +76,40 @@ class DeploymentGroupCreate extends Component { } handleNameSubmit({ name = '' }) { - this.setState({ deploymentGroupName: name }, () => + this.setState({ name }, () => this.redirect({ stage: 'manifest', prog: true }) ); } handleManifestSubmit({ manifest = '' }) { - this.setState({ manifest }, () => - this.redirect({ stage: 'review', prog: true }) - ); + const { config } = this.props; + const { name } = this.state; + + const getConfig = async () => { + const [err, conf] = await intercept( + config({ + deploymentGroupName: name, + type: 'COMPOSE', + format: 'YAML', + raw: manifest + }) + ); + + if (err) { + return this.setState({ + error: err.message + }); + } + + const { data } = conf; + const { config: services } = data; + + this.setState({ loading: false, services }, () => { + this.redirect({ stage: 'review', prog: true }); + }); + }; + + this.setState({ manifest, loading: true }, getConfig); } handleReviewSubmit() { @@ -108,12 +135,10 @@ class DeploymentGroupCreate extends Component { } createDeploymentGroup = async () => { - const { deploymentGroupName } = this.state; + const { name } = this.state; const { createDeploymentGroup } = this.props; - const [err, res] = await intercept( - createDeploymentGroup({ name: deploymentGroupName }) - ); + const [err, res] = await intercept(createDeploymentGroup({ name })); if (err) { this.setState({ @@ -157,6 +182,7 @@ class DeploymentGroupCreate extends Component { ); } @@ -191,6 +217,7 @@ class DeploymentGroupCreate extends Component { } render() { + const { err } = this.state; const { match } = this.props; const stage = match.params.stage; @@ -202,11 +229,22 @@ class DeploymentGroupCreate extends Component { return this.redirect({ stage: 'name' }); } + if (stage !== 'name' && !this.state.name) { + return this.redirect({ stage: 'name' }); + } + + if (stage === 'review' && !this.state.manifest) { + return this.redirect({ stage: 'manifest' }); + } + const view = this.stages[stage](); + const error = err ? {err} : null; + return (

Creating deployment group

+ {error} {view} ); @@ -223,5 +261,10 @@ export default compose( props: ({ mutate }) => ({ provisionManifest: variables => mutate({ variables }) }) + }), + graphql(DeploymentGroupConfigMutation, { + props: ({ mutate }) => ({ + config: variables => mutate({ variables }) + }) }) )(DeploymentGroupCreate); diff --git a/packages/cp-frontend/src/containers/instances/list.js b/packages/cp-frontend/src/containers/instances/list.js index a259883f..076a94b5 100644 --- a/packages/cp-frontend/src/containers/instances/list.js +++ b/packages/cp-frontend/src/containers/instances/list.js @@ -53,7 +53,9 @@ const InstanceListGql = graphql(InstancesQuery, { const params = props.match.params; const deploymentGroupSlug = params.deploymentGroup; const serviceSlug = params.service; + return { + pollInterval: 1000, variables: { deploymentGroupSlug, serviceSlug diff --git a/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql b/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql new file mode 100644 index 00000000..48ca2c80 --- /dev/null +++ b/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql @@ -0,0 +1,8 @@ +#import "./ServiceInfo.gql" + +mutation config($deploymentGroupName: String!, $type: ManifestType!, $format: ManifestFormat!, $raw: String!) { + config(deploymentGroupName: $deploymentGroupName, type: $type, format: $format, raw: $raw) { + image + ...ServiceInfo + } +}