refactor(provider/cf): use DeploymentStrategySelector react component

spinnaker · Nov 21, 2018 · 4a67136 · 4a67136
1 parent 8847146
commit 4a67136
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 51 deletions.
diff --git a/app/scripts/modules/cloudfoundry/src/cf.module.ts b/app/scripts/modules/cloudfoundry/src/cf.module.ts
@@ -1,6 +1,6 @@
 import { module } from 'angular';
 
-import { CloudProviderRegistry } from '@spinnaker/core';
+import { CloudProviderRegistry, DeploymentStrategyRegistry } from '@spinnaker/core';
 
 import { CLOUD_FOUNDRY_INSTANCE_DETAILS_CTRL } from './instance/details/details.controller';
 import { CLOUD_FOUNDRY_LOAD_BALANCER_MODULE } from './loadBalancer/loadBalancer.module';
@@ -84,3 +84,5 @@ module(CLOUD_FOUNDRY_MODULE, [
     },
   });
 });
+
+DeploymentStrategyRegistry.registerProvider('cloudfoundry', ['redblack']);
diff --git a/...ts/modules/cloudfoundry/src/serverGroup/configure/serverGroupCommandBuilder.service.cf.ts b/...ts/modules/cloudfoundry/src/serverGroup/configure/serverGroupCommandBuilder.service.cf.ts
@@ -67,6 +67,7 @@ export class CloudFoundryServerGroupCommandBuilder {
         reference: '',
         account: '',
       },
+      selectedProvider: 'cloudfoundry',
       startApplication: true,
     } as ICloudFoundryCreateServerGroupCommand);
   }

diff --git a/...ripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx b/...ripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
 
 import { Field, FormikErrors } from 'formik';
-import Select, { Option } from 'react-select';
 
 import {
   AccountSelectField,
   AccountService,
+  DeploymentStrategySelector,
   IAccount,
-  IDeploymentStrategy,
   IRegion,
   IWizardPageProps,
   wizardPage,
@@ -29,26 +28,6 @@ class BasicSettingsImpl extends React.Component<
   ICloudFoundryServerGroupBasicSettingsProps,
   ICloudFoundryServerGroupLocationSettingsState
 > {
-  private deploymentStrategies: IDeploymentStrategy[] = [
-    {
-      label: 'Red/Black',
-      description:
-        'Disables <i>all</i> previous server groups in the cluster as soon as new server group passes health checks',
-      key: 'redblack',
-    },
-    {
-      label: 'Highlander',
-      description:
-        'Destroys <i>all</i> previous server groups in the cluster as soon as new server group passes health checks',
-      key: 'highlander',
-    },
-    {
-      label: 'None',
-      description: 'Creates the next server group with no impact on existing server groups',
-      key: '',
-      providerRestricted: false,
-    },
-  ];
   public static get LABEL() {
     return 'Basic Settings';
   }
@@ -65,12 +44,6 @@ class BasicSettingsImpl extends React.Component<
     });
   }
 
-  private startApplicationUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const startApplication = event.target.checked;
-    this.props.formik.values.startApplication = startApplication;
-    this.props.formik.setFieldValue('startApplication', startApplication);
-  };
-
   private accountUpdated = (account: string): void => {
     this.props.formik.values.credentials = account;
     this.props.formik.setFieldValue('credentials', account);
@@ -91,9 +64,12 @@ class BasicSettingsImpl extends React.Component<
     this.props.formik.setFieldValue('region', region);
   };
 
-  private deploymentStrategyUpdated = (option: Option<string>): void => {
-    this.props.formik.values.strategy = option.value;
-    this.props.formik.setFieldValue('strategy', option.value);
+  private strategyChanged = (_values: ICloudFoundryCreateServerGroupCommand, strategy: any) => {
+    this.props.formik.setFieldValue('strategy', strategy.key);
+  };
+
+  private onStrategyFieldChange = (key: string, value: any) => {
+    this.props.formik.setFieldValue(key, value);
   };
 
   public render(): JSX.Element {
@@ -142,28 +118,15 @@ class BasicSettingsImpl extends React.Component<
             Start on creation <HelpField id="cf.serverGroup.startApplication" />
           </div>
           <div className="checkbox checkbox-inline">
-            <input
-              type="checkbox"
-              checked={this.props.formik.values.startApplication}
-              onChange={this.startApplicationUpdated}
-            />
+            <Field type="checkbox" name="startApplication" />
           </div>
         </div>
         {(values.viewState.mode === 'editPipeline' || values.viewState.mode === 'createPipeline') && (
-          <div className="form-group row">
-            <label className="col-md-3 sm-label-right">Deployment Strategy</label>
-            <div className="col-md-7">
-              <Select
-                options={this.deploymentStrategies.map((deploymentStrategy: IDeploymentStrategy) => ({
-                  label: deploymentStrategy.label,
-                  value: deploymentStrategy.key,
-                }))}
-                clearable={false}
-                value={values.strategy}
-                onChange={this.deploymentStrategyUpdated}
-              />
-            </div>
-          </div>
+          <DeploymentStrategySelector
+            onFieldChange={this.onStrategyFieldChange}
+            onStrategyChange={this.strategyChanged}
+            command={values}
+          />
         )}
         {errors.credentials && (
           <div className="wizard-pod-row-errors">