From f68c2ae78a291e24a7f0df723c9da7dd4bfc9764 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Sat, 15 Jul 2017 04:34:34 +0100 Subject: [PATCH] feat(cp-frontend): add and edit env_file's --- packages/cp-frontend/package.json | 6 +- .../components/deployment-groups/create.js | 93 ++++++++++++++++++- .../containers/deployment-groups/create.js | 4 +- .../src/containers/deployment-groups/index.js | 1 - .../edit-or-create.js | 75 +++++++++++++-- .../manifest.js => manifest/index.js} | 10 +- .../src/containers/rollback/index.js | 1 + .../src/graphql/DeploymentGroupConfig.gql | 4 +- .../src/graphql/DeploymentGroupProvision.gql | 4 +- packages/cp-frontend/src/graphql/Manifest.gql | 1 + packages/cp-frontend/src/router.js | 13 ++- packages/cp-frontend/src/state/state.js | 4 + 12 files changed, 191 insertions(+), 25 deletions(-) rename packages/cp-frontend/src/containers/{deployment-groups => manifest}/edit-or-create.js (83%) rename packages/cp-frontend/src/containers/{deployment-groups/manifest.js => manifest/index.js} (86%) create mode 100644 packages/cp-frontend/src/containers/rollback/index.js diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index 21c28d37..8103d2a8 100644 --- a/packages/cp-frontend/package.json +++ b/packages/cp-frontend/package.json @@ -30,6 +30,7 @@ "joyent-ui-toolkit": "^1.1.0", "lodash.get": "^4.4.2", "lodash.isstring": "^4.0.1", + "lodash.remove": "^4.7.0", "normalized-styled-components": "^1.0.8", "param-case": "^2.1.1", "prop-types": "^15.5.10", @@ -46,7 +47,7 @@ "redux": "^3.6.0", "redux-actions": "^2.0.3", "redux-batched-actions": "^0.2.0", - "redux-form": "^6.8.0", + "redux-form": "^7.0.0", "remcalc": "^1.0.8", "reselect": "^3.0.1", "simple-statistics": "^4.1.0", @@ -54,7 +55,8 @@ "styled-is": "^1.0.11", "styled-text-spinners": "^1.0.1", "title-case": "^2.1.1", - "unitcalc": "^1.0.8" + "unitcalc": "^1.0.8", + "uuid": "^3.1.0" }, "devDependencies": { "apr-for-each": "^1.0.6", diff --git a/packages/cp-frontend/src/components/deployment-groups/create.js b/packages/cp-frontend/src/components/deployment-groups/create.js index f715c30c..917a4c14 100644 --- a/packages/cp-frontend/src/components/deployment-groups/create.js +++ b/packages/cp-frontend/src/components/deployment-groups/create.js @@ -49,6 +49,30 @@ const ButtonsRow = Row.extend` margin-bottom: ${remcalc(60)}; `; +const FilenameContainer = styled.span` + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-content: stretch; + align-items: stretch; +`; + +const FilenameInput = styled(Input)` + order: 0; + flex: 1 1 auto; + align-self: stretch; +`; + +const FilenameRemove = Button.extend` + order: 0; + flex: 0 1 auto; + align-self: auto; + margin: ${remcalc(8)}; + margin-right: 0; + height: ${remcalc(48)}; +`; + const MEditor = ManifestEditor => ({ input, defaultValue }) => ; @@ -71,7 +95,13 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => ; -export const Manifest = ({ handleSubmit, onCancel, dirty, defaultValue }) => +export const Manifest = ({ + handleSubmit, + onCancel, + dirty, + defaultValue = '', + loading +}) =>
import('joyent-manifest-editor')}> {ManifestEditor => @@ -85,17 +115,67 @@ export const Manifest = ({ handleSubmit, onCancel, dirty, defaultValue }) => -
; +const Filename = ({ name, onRemoveFile }) => + + + + Remove + + ; + +export const Files = ({ loading, files, onRemoveFile }) => { + if (loading) { + return null; + } + + const _files = files.map(({ id, name, value }) => +
+ + + onRemoveFile(id)} /> + + import('joyent-manifest-editor')}> + {ManifestEditor => + ManifestEditor + ? + : } + +
+ ); + + return ( +
+

Files:

+ {_files} +
+ ); +}; + export const Environment = ({ handleSubmit, onCancel, + onAddFile, + onRemoveFile, dirty, - defaultValue, + defaultValue = '', + files = [], loading }) =>
@@ -109,9 +189,14 @@ export const Environment = ({ /> : } + - + diff --git a/packages/cp-frontend/src/containers/deployment-groups/create.js b/packages/cp-frontend/src/containers/deployment-groups/create.js index e24b7107..5aa42bb9 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/create.js +++ b/packages/cp-frontend/src/containers/deployment-groups/create.js @@ -1,6 +1,6 @@ import React from 'react'; -import DeploymentGroupEditOrCreate from './edit-or-create'; +import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; import { Progress } from '@components/deployment-groups/create'; import { LayoutContainer } from '@components/layout'; import { DeploymentGroupsLoading } from '@components/deployment-groups'; @@ -21,7 +21,7 @@ export default ({ {loading && } {error && {error.toString()}} - { - const { manifest, environment } = this.state; + const { manifest, environment, files } = this.state; const { provisionManifest } = this.props; const [err] = await intercept( @@ -141,6 +154,7 @@ class DeploymentGroupEditOrCreate extends Component { type: 'COMPOSE', format: 'YAML', environment, + files, raw: manifest }) ); @@ -161,15 +175,39 @@ class DeploymentGroupEditOrCreate extends Component { } handleManifestSubmit({ manifest = '' }) { - this.setState({ manifest }, () => { + this.setState({ manifest: manifest || this.props.manifest }, () => { this.redirect({ stage: 'environment', prog: true }); }); } - handleEnvironmentSubmit({ environment = '' }) { + handleEnvironmentSubmit(change) { + const { environment = '' } = change; const { name, manifest } = this.state; + const files = Object.values( + Object.keys(change).reduce((acc, key) => { + const match = key.match(/file-(name|value)-(.*)/); + + if (!match) { + return acc; + } + + const [_, type, id] = match; + + if (!acc[id]) { + acc[id] = { + id + }; + } + + acc[id][type] = change[key]; + return acc; + }, {}) + ); + const getConfig = async () => { + const { environment } = this.state; + const [err, conf] = await intercept( client.query({ query: DeploymentGroupConfigQuery, @@ -179,6 +217,7 @@ class DeploymentGroupEditOrCreate extends Component { type: 'COMPOSE', format: 'YAML', environment, + files, raw: manifest } }) @@ -193,12 +232,15 @@ class DeploymentGroupEditOrCreate extends Component { const { data } = conf; const { config: services } = data; - this.setState({ loading: false, services }, () => { + this.setState({ loading: false, services, files }, () => { this.redirect({ stage: 'review', prog: true }); }); }; - this.setState({ environment, loading: true }, getConfig); + this.setState( + { environment: environment || this.props.environment, loading: true }, + getConfig + ); } handleReviewSubmit() { @@ -229,6 +271,24 @@ class DeploymentGroupEditOrCreate extends Component { history.push(create ? '/' : `/deployment-groups/${deploymentGroup.slug}`); } + handleFileAdd() { + this.setState({ + files: this.state.files.concat([ + { + id: uuid(), + name: '', + value: '#' + } + ]) + }); + } + + handleRemoveFile(fileId) { + this.setState({ + files: remove(this.state.files, ({ id }) => id !== fileId) + }); + } + redirect({ stage = 'name', prog = false }) { const { match, history, create } = this.props; @@ -271,8 +331,11 @@ class DeploymentGroupEditOrCreate extends Component { return ( ); diff --git a/packages/cp-frontend/src/containers/deployment-groups/manifest.js b/packages/cp-frontend/src/containers/manifest/index.js similarity index 86% rename from packages/cp-frontend/src/containers/deployment-groups/manifest.js rename to packages/cp-frontend/src/containers/manifest/index.js index e717bbf1..bb4da477 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/manifest.js +++ b/packages/cp-frontend/src/containers/manifest/index.js @@ -5,7 +5,7 @@ import get from 'lodash.get'; import ManifestQuery from '@graphql/Manifest.gql'; import DeploymentGroupBySlugQuery from '@graphql/DeploymentGroupBySlug.gql'; -import DeploymentGroupEditOrCreate from './edit-or-create'; +import ManifestEditOrCreate from '@containers/manifest/edit-or-create'; import { Progress } from '@components/deployment-groups/create'; import { LayoutContainer } from '@components/layout'; import { DeploymentGroupsLoading } from '@components/deployment-groups'; @@ -15,6 +15,7 @@ const Manifest = ({ loading, error, manifest = '', + environment = '', deploymentGroup = null, match }) => { @@ -24,9 +25,10 @@ const Manifest = ({ const _view = loading || !deploymentGroup ? null - : ; @@ -36,7 +38,8 @@ const Manifest = ({ deploymentGroup.imported && !manifest ? - Since this DeploymentGroup was imported, it doesn't have the initial + Since this DeploymentGroup was imported, it doesn't have the + initial manifest : null; @@ -62,6 +65,7 @@ export default compose( }), props: ({ data: { deploymentGroup, loading, error } }) => ({ manifest: get(deploymentGroup, 'version.manifest.raw', ''), + environment: get(deploymentGroup, 'version.manifest.environment', ''), loading, error }) diff --git a/packages/cp-frontend/src/containers/rollback/index.js b/packages/cp-frontend/src/containers/rollback/index.js new file mode 100644 index 00000000..7646bbd1 --- /dev/null +++ b/packages/cp-frontend/src/containers/rollback/index.js @@ -0,0 +1 @@ +export default null; diff --git a/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql b/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql index 4ba3f526..ed4bcf4e 100644 --- a/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql +++ b/packages/cp-frontend/src/graphql/DeploymentGroupConfig.gql @@ -1,7 +1,7 @@ #import "./ServiceInfo.gql" -query config($deploymentGroupName: String!, $type: ManifestType!, $format: ManifestFormat!, $environment: String!, $raw: String!) { - config(deploymentGroupName: $deploymentGroupName, type: $type, format: $format, environment: $environment, raw: $raw) { +query config($deploymentGroupName: String!, $type: ManifestType!, $format: ManifestFormat!, $environment: String!, $files: [KeyValueInput]!, $raw: String!) { + config(deploymentGroupName: $deploymentGroupName, type: $type, format: $format, environment: $environment, files: $files, raw: $raw) { ...ServiceInfo config { id diff --git a/packages/cp-frontend/src/graphql/DeploymentGroupProvision.gql b/packages/cp-frontend/src/graphql/DeploymentGroupProvision.gql index 4358e6f2..a321bc61 100644 --- a/packages/cp-frontend/src/graphql/DeploymentGroupProvision.gql +++ b/packages/cp-frontend/src/graphql/DeploymentGroupProvision.gql @@ -1,5 +1,5 @@ -mutation provisionManifest($deploymentGroupId: ID!, $type: ManifestType!, $format: ManifestFormat!, $environment: String!, $raw: String!) { - provisionManifest(deploymentGroupId: $deploymentGroupId, type: $type, format: $format, environment: $environment, raw: $raw) { +mutation provisionManifest($deploymentGroupId: ID!, $type: ManifestType!, $format: ManifestFormat!, $environment: String!, $files: [KeyValueInput]!, $raw: String!) { + provisionManifest(deploymentGroupId: $deploymentGroupId, type: $type, format: $format, environment: $environment, files: $files, raw: $raw) { scale { serviceName replicas diff --git a/packages/cp-frontend/src/graphql/Manifest.gql b/packages/cp-frontend/src/graphql/Manifest.gql index 25accbd7..82f324a5 100644 --- a/packages/cp-frontend/src/graphql/Manifest.gql +++ b/packages/cp-frontend/src/graphql/Manifest.gql @@ -4,6 +4,7 @@ query ManifestById($deploymentGroupSlug: String!) { manifest { id type + environment format raw } diff --git a/packages/cp-frontend/src/router.js b/packages/cp-frontend/src/router.js index 5676e7b6..77470dbb 100644 --- a/packages/cp-frontend/src/router.js +++ b/packages/cp-frontend/src/router.js @@ -5,12 +5,13 @@ import styled from 'styled-components'; import { Header, Breadcrumb, Menu } from '@containers/navigation'; import { ServiceScale, ServiceDelete } from '@containers/service'; import { InstanceList } from '@containers/instances'; +import Manifest from '@containers/manifest'; +import Rollback from '@containers/rollback'; import { DeploymentGroupList, DeploymentGroupCreate, - DeploymentGroupImport, - DeploymentGroupManifest + DeploymentGroupImport } from '@containers/deployment-groups'; import { @@ -116,7 +117,13 @@ const Router = ( + +