feat(cf): create AccountRegionClusterSelector React component (#6314)

Co-Authored-By: Stu Pollock <spollock@pivotal.io>
spinnaker · Jan 8, 2019 · 3983700 · 3983700
1 parent 672e4d3
commit 3983700
Show file tree

Hide file tree

Showing 10 changed files with 516 additions and 58 deletions.
diff --git a/app/scripts/modules/cloudfoundry/src/index.ts b/app/scripts/modules/cloudfoundry/src/index.ts
@@ -3,5 +3,6 @@ export * from './cf.settings';
 
 export * from './domain/index';
 export * from './loadBalancer/index';
-export * from './serverGroup/index';
+export * from './presentation/index';
 export * from './reactShims/index';
+export * from './serverGroup/index';
diff --git a/...modules/cloudfoundry/src/pipeline/stages/destroyAsg/CloudfoundryDestroyAsgStageConfig.tsx b/...modules/cloudfoundry/src/pipeline/stages/destroyAsg/CloudfoundryDestroyAsgStageConfig.tsx
@@ -11,6 +11,8 @@ import {
   StageConfigField,
 } from '@spinnaker/core';
 
+import { AccountRegionClusterSelector } from 'cloudfoundry/presentation';
+
 export interface ICloudfoundryDestroyAsgStageProps extends IStageConfigProps {
   pipeline: IPipeline;
 }
@@ -70,22 +72,27 @@ export class CloudfoundryDestroyAsgStageConfig extends React.Component<
     this.props.stageFieldUpdated();
   };
 
+  private componentUpdate = (stage: any): void => {
+    this.props.stage.credentials = stage.credentials;
+    this.props.stage.regions = stage.regions;
+    this.props.stage.cluster = stage.cluster;
+    this.props.stageFieldUpdated();
+  };
+
   public render() {
-    const { stage, stageFieldUpdated } = this.props;
+    const { stage } = this.props;
     const { accounts, application, pipeline, target } = this.state;
-    const { AccountRegionClusterSelector, TargetSelect } = NgReact;
+    const { TargetSelect } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (
-          <div>
-            <AccountRegionClusterSelector
-              application={application}
-              clusterField="cluster"
-              component={stage}
-              onAccountUpdate={stageFieldUpdated}
-              accounts={accounts}
-            />
-          </div>
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdate}
+            component={stage}
+          />
         )}
 
         <StageConfigField label="Target">

diff --git a/...modules/cloudfoundry/src/pipeline/stages/disableAsg/CloudfoundryDisableAsgStageConfig.tsx b/...modules/cloudfoundry/src/pipeline/stages/disableAsg/CloudfoundryDisableAsgStageConfig.tsx
@@ -11,6 +11,8 @@ import {
   StageConfigField,
 } from '@spinnaker/core';
 
+import { AccountRegionClusterSelector } from 'cloudfoundry/presentation';
+
 export interface ICloudfoundryDisableAsgStageProps extends IStageConfigProps {
   pipeline: IPipeline;
 }
@@ -65,31 +67,36 @@ export class CloudfoundryDisableAsgStageConfig extends React.Component<
   };
 
   private targetUpdated = (target: string) => {
-    this.setState({ target: target });
+    this.setState({ target });
     this.props.stage.target = target;
     this.props.stageFieldUpdated();
   };
 
+  private componentUpdate = (stage: any): void => {
+    this.props.stage.credentials = stage.credentials;
+    this.props.stage.regions = stage.regions;
+    this.props.stage.cluster = stage.cluster;
+    this.props.stageFieldUpdated();
+  };
+
   public render() {
-    const { stage, stageFieldUpdated } = this.props;
+    const { stage } = this.props;
     const { accounts, application, pipeline, target } = this.state;
-    const { AccountRegionClusterSelector, TargetSelect } = NgReact;
+    const { TargetSelect } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (
-          <div>
-            <AccountRegionClusterSelector
-              application={application}
-              clusterField="cluster"
-              component={stage}
-              onAccountUpdate={stageFieldUpdated}
-              accounts={accounts}
-            />
-          </div>
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdate}
+            component={stage}
+          />
         )}
 
         <StageConfigField label="Target">
-          <TargetSelect model={{ target: target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />
+          <TargetSelect model={{ target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />
         </StageConfigField>
       </div>
     );

diff --git a/...s/modules/cloudfoundry/src/pipeline/stages/enableAsg/CloudfoundryEnableAsgStageConfig.tsx b/...s/modules/cloudfoundry/src/pipeline/stages/enableAsg/CloudfoundryEnableAsgStageConfig.tsx
@@ -11,6 +11,8 @@ import {
   StageConfigField,
 } from '@spinnaker/core';
 
+import { AccountRegionClusterSelector } from 'cloudfoundry/presentation';
+
 export interface ICloudfoundryEnableAsgStageProps extends IStageConfigProps {
   pipeline: IPipeline;
 }
@@ -70,22 +72,27 @@ export class CloudfoundryEnableAsgStageConfig extends React.Component<
     this.props.stageFieldUpdated();
   };
 
+  private componentUpdate = (stage: any): void => {
+    this.props.stage.credentials = stage.credentials;
+    this.props.stage.regions = stage.regions;
+    this.props.stage.cluster = stage.cluster;
+    this.props.stageFieldUpdated();
+  };
+
   public render() {
-    const { stage, stageFieldUpdated } = this.props;
+    const { stage } = this.props;
     const { accounts, application, pipeline, target } = this.state;
-    const { AccountRegionClusterSelector, TargetSelect } = NgReact;
+    const { TargetSelect } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (
-          <div>
-            <AccountRegionClusterSelector
-              application={application}
-              clusterField="cluster"
-              component={stage}
-              onAccountUpdate={stageFieldUpdated}
-              accounts={accounts}
-            />
-          </div>
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdate}
+            component={stage}
+          />
         )}
 
         <StageConfigField label="Target">

diff --git a/...s/modules/cloudfoundry/src/pipeline/stages/resizeAsg/CloudfoundryResizeAsgStageConfig.tsx b/...s/modules/cloudfoundry/src/pipeline/stages/resizeAsg/CloudfoundryResizeAsgStageConfig.tsx
@@ -12,6 +12,8 @@ import {
   StageConfigField,
 } from '@spinnaker/core';
 
+import { AccountRegionClusterSelector } from 'cloudfoundry/presentation';
+
 export interface ICloudfoundryResizeAsgStageProps extends IStageConfigProps {
   pipeline: IPipeline;
 }
@@ -126,26 +128,31 @@ export class CloudfoundryResizeAsgStageConfig extends React.Component<
     this.props.stageFieldUpdated();
   };
 
+  private componentUpdate = (stage: any): void => {
+    this.props.stage.credentials = stage.credentials;
+    this.props.stage.regions = stage.regions;
+    this.props.stage.cluster = stage.cluster;
+    this.props.stageFieldUpdated();
+  };
+
   public render() {
     const { accounts, application, pipeline, resizeLabel, resizeMessage } = this.state;
     const { stage } = this.props;
     const { capacity, target } = this.props.stage;
     const diskQuota = this.props.stage.diskQuota;
     const instanceCount = capacity.desired;
     const memory = this.props.stage.memory;
-    const { AccountRegionClusterSelector, TargetSelect } = NgReact;
+    const { TargetSelect } = NgReact;
     return (
       <div className="cloudfoundry-resize-asg-stage form-horizontal">
         {!pipeline.strategy && (
-          <div>
-            <AccountRegionClusterSelector
-              application={application}
-              clusterField="cluster"
-              component={stage}
-              onAccountUpdate={this.props.stageFieldUpdated}
-              accounts={accounts}
-            />
-          </div>
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdate}
+            component={stage}
+          />
         )}
         <StageConfigField label="Target">
           <TargetSelect model={{ target: target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />

diff --git a/...oudfoundry/src/pipeline/stages/rollbackCluster/CloudfoundryRollbackClusterStageConfig.tsx b/...oudfoundry/src/pipeline/stages/rollbackCluster/CloudfoundryRollbackClusterStageConfig.tsx
@@ -6,10 +6,11 @@ import {
   IPipeline,
   IRegion,
   IStageConfigProps,
-  NgReact,
   StageConfigField,
 } from '@spinnaker/core';
 
+import { AccountRegionClusterSelector } from 'cloudfoundry/presentation';
+
 export interface ICloudfoundryRollbackClusterStageProps extends IStageConfigProps {
   pipeline: IPipeline;
 }
@@ -62,23 +63,27 @@ export class CloudfoundryRollbackClusterStageConfig extends React.Component<
     this.props.stageFieldUpdated();
   };
 
+  private componentUpdate = (stage: any): void => {
+    this.props.stage.credentials = stage.credentials;
+    this.props.stage.regions = stage.regions;
+    this.props.stage.cluster = stage.cluster;
+    this.props.stageFieldUpdated();
+  };
+
   public render() {
-    const { stage, stageFieldUpdated } = this.props;
+    const { stage } = this.props;
     const { waitTimeBetweenRegions } = stage;
     const { accounts, application, pipeline } = this.state;
-    const { AccountRegionClusterSelector } = NgReact;
     return (
       <div className="form-horizontal">
         {!pipeline.strategy && (
-          <div>
-            <AccountRegionClusterSelector
-              application={application}
-              clusterField="cluster"
-              component={stage}
-              onAccountUpdate={stageFieldUpdated}
-              accounts={accounts}
-            />
-          </div>
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdate}
+            component={stage}
+          />
         )}
 
         {stage.regions.length > 1 && (

diff --git a/app/scripts/modules/cloudfoundry/src/presentation/index.ts b/app/scripts/modules/cloudfoundry/src/presentation/index.ts
@@ -0,0 +1 @@
+export * from './widgets';