refactor(cf): make SG inputs reusable components

Co-Authored-By: Stu Pollock <spollock@pivotal.io>
spinnaker · Jan 11, 2019 · c9e93df · c9e93df
1 parent 2ac29ea
commit c9e93df
Show file tree

Hide file tree

Showing 15 changed files with 282 additions and 138 deletions.
diff --git a/...modules/cloudfoundry/src/pipeline/stages/disableAsg/CloudfoundryDisableAsgStageConfig.tsx b/...modules/cloudfoundry/src/pipeline/stages/disableAsg/CloudfoundryDisableAsgStageConfig.tsx
@@ -25,7 +25,6 @@ export interface ICloudfoundryDisableAsgStageConfigState {
   pipeline: IPipeline;
   region: string;
   regions: IRegion[];
-  serviceName: string;
   target: string;
 }
 
@@ -44,7 +43,6 @@ export class CloudfoundryDisableAsgStageConfig extends React.Component<
       pipeline: props.pipeline,
       region: props.stage.region,
       regions: [],
-      serviceName: props.stage.serviceName,
       target: props.stage.target,
     };
   }

diff --git a/...s/modules/cloudfoundry/src/pipeline/stages/enableAsg/CloudfoundryEnableAsgStageConfig.tsx b/...s/modules/cloudfoundry/src/pipeline/stages/enableAsg/CloudfoundryEnableAsgStageConfig.tsx
@@ -25,7 +25,6 @@ export interface ICloudfoundryEnableAsgStageConfigState {
   pipeline: IPipeline;
   region: string;
   regions: IRegion[];
-  serviceName: string;
   target: string;
 }
 
@@ -44,7 +43,6 @@ export class CloudfoundryEnableAsgStageConfig extends React.Component<
       pipeline: props.pipeline,
       region: props.stage.region,
       regions: [],
-      serviceName: props.stage.serviceName,
       target: props.stage.target,
     };
   }
@@ -94,7 +92,6 @@ export class CloudfoundryEnableAsgStageConfig extends React.Component<
             component={stage}
           />
         )}
-
         <StageConfigField label="Target">
           <TargetSelect model={{ target: target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />
         </StageConfigField>

diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/forms/index.ts
@@ -0,0 +1,2 @@
+export * from './inputs';
+export * from './serverGroup';
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/forms/inputs/index.ts
@@ -0,0 +1 @@
+export * from './CloudFoundryRadioButtonInput';
diff --git a/...ions/configurationSettings/Buildpacks.tsx → ...entation/forms/serverGroup/Buildpacks.tsx b/...ions/configurationSettings/Buildpacks.tsx → ...entation/forms/serverGroup/Buildpacks.tsx
@@ -1,26 +1,28 @@
 import * as React from 'react';
 import { FieldArray, getIn } from 'formik';
 
-import { FormikFormField, IWizardPageProps, TextInput } from '@spinnaker/core';
+import { FormikFormField, TextInput } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 
-export interface IBuildpacksProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {}
+export interface IBuildpacksProps {
+  fieldName: string;
+  onChange?: (value: string[]) => void;
+}
 
 export class Buildpacks extends React.Component<IBuildpacksProps> {
   public render() {
+    const { fieldName, onChange } = this.props;
     return (
       <div>
         <div className="form-group">
           <div className="col-md-12">
             <b>Buildpacks</b>
             <FieldArray
-              name="manifest.buildpacks"
+              name={fieldName}
               render={arrayHelpers => {
                 const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
-                const buildpacks: string[] = getIn(serverGroupCommand, 'manifest.buildpacks')
-                  ? getIn(serverGroupCommand, 'manifest.buildpacks')
-                  : [];
+                const buildpacks: string[] = getIn(serverGroupCommand, fieldName) || [];
 
                 return (
                   <table className="table table-condensed packed metadata">
@@ -30,7 +32,10 @@ export class Buildpacks extends React.Component<IBuildpacksProps> {
                           <td>
                             <div className="sp-margin-m-bottom">
                               <FormikFormField
-                                name={`manifest.buildpacks[${index}]`}
+                                name={`${fieldName}[${index}]`}
+                                onChange={() => {
+                                  onChange && onChange(getIn(serverGroupCommand, fieldName) || []);
+                                }}
                                 input={props => <TextInput {...props} />}
                                 required={true}
                               />

diff --git a/...gurationSettings/EnvironmentVariables.tsx → ...orms/serverGroup/EnvironmentVariables.tsx b/...gurationSettings/EnvironmentVariables.tsx → ...orms/serverGroup/EnvironmentVariables.tsx
@@ -1,27 +1,29 @@
 import * as React from 'react';
 import { FieldArray, getIn } from 'formik';
 
-import { FormikFormField, IWizardPageProps, TextInput } from '@spinnaker/core';
+import { FormikFormField, TextInput } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 import { ICloudFoundryEnvVar } from 'cloudfoundry/domain';
 
-export interface IEnvironmentVariablesProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {}
+export interface IEnvironmentVariablesProps {
+  fieldName: string;
+  onChange?: (value: string[]) => void;
+}
 
 export class EnvironmentVariables extends React.Component<IEnvironmentVariablesProps> {
   public render() {
+    const { fieldName, onChange } = this.props;
     return (
       <div>
         <div className="form-group">
           <div className="col-md-12">
             <b>Environment Variables</b>
             <FieldArray
-              name="manifest.environment"
+              name={fieldName}
               render={arrayHelpers => {
                 const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
-                const environmentVariables: string[] = getIn(serverGroupCommand, 'manifest.environment')
-                  ? getIn(serverGroupCommand, 'manifest.environment')
-                  : [];
+                const environmentVariables: string[] = getIn(serverGroupCommand, fieldName) || [];
 
                 return (
                   <table className="table table-condensed packed tags">
@@ -33,19 +35,25 @@ export class EnvironmentVariables extends React.Component<IEnvironmentVariablesP
                     </thead>
                     <tbody>
                       {environmentVariables.map((_, index: number) => {
-                        const envPath = `manifest.environment[${index}]`;
+                        const envPath = `${fieldName}[${index}]`;
                         return (
                           <tr key={index}>
                             <td>
                               <FormikFormField
                                 name={`${envPath}.key`}
+                                onChange={() => {
+                                  onChange && onChange(getIn(serverGroupCommand, fieldName) || []);
+                                }}
                                 input={props => <TextInput {...props} />}
                                 required={true}
                               />
                             </td>
                             <td>
                               <FormikFormField
                                 name={`${envPath}.value`}
+                                onChange={() => {
+                                  onChange && onChange(getIn(serverGroupCommand, fieldName) || []);
+                                }}
                                 input={props => <TextInput {...props} />}
                                 required={true}
                               />

diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/HealthCheck.tsx b/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/HealthCheck.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import { FormikFormField, TextInput } from '@spinnaker/core';
+
+import { CloudFoundryRadioButtonInput } from 'cloudfoundry/presentation/forms/inputs/CloudFoundryRadioButtonInput';
+
+export interface IHealthCheckProps {
+  healthCheckHttpEndpointFieldName: string;
+  healthCheckType: string;
+  healthCheckTypeFieldName: string;
+  onHealthCheckHttpEndpointChange?: (value: string) => void;
+  onHealthCheckTypeChange?: (value: string) => void;
+}
+
+export class HealthCheck extends React.Component<IHealthCheckProps> {
+  private HEALTH_CHECK_TYPE_OPTIONS = [
+    { label: 'port', value: 'port' },
+    { label: 'HTTP', value: 'http' },
+    { label: 'process', value: 'process' },
+  ];
+
+  public render() {
+    const {
+      healthCheckTypeFieldName,
+      healthCheckType,
+      healthCheckHttpEndpointFieldName,
+      onHealthCheckTypeChange,
+      onHealthCheckHttpEndpointChange,
+    } = this.props;
+
+    return (
+      <div className="col-md-9">
+        <div className="sp-margin-m-bottom">
+          <FormikFormField
+            name={healthCheckTypeFieldName}
+            label="Health Check Type"
+            fastField={false}
+            input={props => <CloudFoundryRadioButtonInput {...props} options={this.HEALTH_CHECK_TYPE_OPTIONS} />}
+            onChange={value => {
+              onHealthCheckTypeChange && onHealthCheckTypeChange(value);
+            }}
+          />
+        </div>
+        {healthCheckType === 'http' && (
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={healthCheckHttpEndpointFieldName}
+              label="Endpoint"
+              input={props => <TextInput {...props} required={true} />}
+              onChange={value => {
+                onHealthCheckHttpEndpointChange && onHealthCheckHttpEndpointChange(value);
+              }}
+              required={true}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/InstanceParameters.tsx b/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/InstanceParameters.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { FormikFormField, TextInput } from '@spinnaker/core';
+
+export interface IInstanceParametersProps {
+  diskQuotaFieldName: string;
+  instancesFieldName: string;
+  memoryFieldName: string;
+  onDiskQuotaChange?: (value: string) => void;
+  onInstancesChange?: (value: string) => void;
+  onMemoryChange?: (value: string) => void;
+}
+
+export class InstanceParameters extends React.Component<IInstanceParametersProps> {
+  public render() {
+    const {
+      diskQuotaFieldName,
+      instancesFieldName,
+      memoryFieldName,
+      onDiskQuotaChange,
+      onInstancesChange,
+      onMemoryChange,
+    } = this.props;
+
+    return (
+      <div>
+        <div className="col-md-9">
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={memoryFieldName}
+              fastField={false}
+              input={props => <TextInput {...props} />}
+              label="Memory"
+              onChange={value => {
+                onMemoryChange && onMemoryChange(value);
+              }}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={diskQuotaFieldName}
+              fastField={false}
+              input={props => <TextInput {...props} />}
+              label="Disk Quota"
+              onChange={value => {
+                onDiskQuotaChange && onDiskQuotaChange(value);
+              }}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={instancesFieldName}
+              fastField={false}
+              input={props => <TextInput type="number" {...props} />}
+              label="Instances"
+              onChange={value => {
+                onInstancesChange && onInstancesChange(value);
+              }}
+              required={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/...sections/configurationSettings/Routes.tsx → ...presentation/forms/serverGroup/Routes.tsx b/...sections/configurationSettings/Routes.tsx → ...presentation/forms/serverGroup/Routes.tsx
@@ -1,14 +1,18 @@
 import * as React from 'react';
 import { FieldArray, getIn } from 'formik';
 
-import { FormikFormField, HelpField, IWizardPageProps, TextInput } from '@spinnaker/core';
+import { FormikFormField, HelpField, TextInput } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 
-export interface IRoutesProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {}
+export interface IRoutesProps {
+  fieldName: string;
+  onChange?: (value: string[]) => void;
+}
 
 export class Routes extends React.Component<IRoutesProps> {
   public render() {
+    const { fieldName, onChange } = this.props;
     return (
       <div>
         <div className="form-group">
@@ -20,9 +24,7 @@ export class Routes extends React.Component<IRoutesProps> {
               name="manifest.routes"
               render={arrayHelpers => {
                 const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
-                const routes: string[] = getIn(serverGroupCommand, 'manifest.routes')
-                  ? getIn(serverGroupCommand, 'manifest.routes')
-                  : [];
+                const routes: string[] = getIn(serverGroupCommand, fieldName) || [];
 
                 return (
                   <table className="table table-condensed packed metadata">
@@ -32,7 +34,10 @@ export class Routes extends React.Component<IRoutesProps> {
                           <td>
                             <div className="sp-margin-m-bottom">
                               <FormikFormField
-                                name={`manifest.routes[${index}]`}
+                                name={`${fieldName}[${index}]`}
+                                onChange={() => {
+                                  onChange && onChange(getIn(serverGroupCommand, fieldName) || []);
+                                }}
                                 input={props => <TextInput {...props} />}
                                 required={true}
                               />

diff --git a/...ctions/configurationSettings/Services.tsx → ...esentation/forms/serverGroup/Services.tsx b/...ctions/configurationSettings/Services.tsx → ...esentation/forms/serverGroup/Services.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { FieldArray, getIn } from 'formik';
 
-import { FormikFormField, IWizardPageProps, TextInput } from '@spinnaker/core';
+import { FormikFormField, TextInput } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 
-export interface IServicesProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {}
+export interface IServicesProps {}
 
 export class Services extends React.Component<IServicesProps> {
   public render() {
@@ -18,9 +18,7 @@ export class Services extends React.Component<IServicesProps> {
               name="manifest.services"
               render={arrayHelpers => {
                 const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
-                const services: string[] = getIn(serverGroupCommand, 'manifest.services')
-                  ? getIn(serverGroupCommand, 'manifest.services')
-                  : [];
+                const services: string[] = getIn(serverGroupCommand, 'manifest.services') || [];
 
                 return (
                   <table className="table table-condensed packed metadata">

diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/index.ts
@@ -0,0 +1,6 @@
+export * from './Buildpacks';
+export * from './EnvironmentVariables';
+export * from './HealthCheck';
+export * from './InstanceParameters';
+export * from './Routes';
+export * from './Services';
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/index.ts
@@ -1 +1,2 @@
 export * from './widgets';
+export * from './forms';