@spinnaker/cloudfoundry 0.0.0-main-2

package/src/presentation/forms/serverGroup/EnvironmentVariables.tsx

@@ -0,0 +1,94 @@
+import { FieldArray, getIn } from 'formik';
+import React from 'react';
+
+import { FormikFormField, TextInput } from '@spinnaker/core';
+import type { ICloudFoundryEnvVar } from '../../../domain';
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroup/configure/serverGroupConfigurationModel.cf';
+
+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={fieldName}
+              render={(arrayHelpers) => {
+                const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
+                const environmentVariables: string[] = getIn(serverGroupCommand, fieldName) || [];
+
+                return (
+                  <table className="table table-condensed packed tags">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {environmentVariables.map((_, index: number) => {
+                        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}
+                              />
+                            </td>
+                            <td>
+                              <a className="btn btn-link sm-label">
+                                <span
+                                  className="glyphicon glyphicon-trash"
+                                  onClick={() => arrayHelpers.remove(index)}
+                                />
+                              </a>
+                            </td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                    <tfoot>
+                      <tr>
+                        <td colSpan={3}>
+                          <button
+                            type="button"
+                            className="add-new col-md-12"
+                            onClick={() => arrayHelpers.push({ key: '', value: '' } as ICloudFoundryEnvVar)}
+                          >
+                            <span className="glyphicon glyphicon-plus-sign" /> Add New Environment Variable
+                          </button>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/presentation/forms/serverGroup/HealthCheck.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { FormikFormField, RadioButtonInput, TextInput } from '@spinnaker/core';
+
+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"
+            input={(props) => <RadioButtonInput {...props} inline={true} 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>
+    );
+  }
+}

package/src/presentation/forms/serverGroup/InstanceParameters.tsx

@@ -0,0 +1,63 @@
+import 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}
+              input={(props) => <TextInput {...props} />}
+              label="Memory"
+              onChange={(value) => {
+                onMemoryChange && onMemoryChange(value);
+              }}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={diskQuotaFieldName}
+              input={(props) => <TextInput {...props} />}
+              label="Disk Quota"
+              onChange={(value) => {
+                onDiskQuotaChange && onDiskQuotaChange(value);
+              }}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={instancesFieldName}
+              input={(props) => <TextInput type="number" {...props} />}
+              label="Instances"
+              onChange={(value) => {
+                onInstancesChange && onInstancesChange(value);
+              }}
+              required={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/presentation/forms/serverGroup/Routes.tsx

@@ -0,0 +1,74 @@
+import { FieldArray, getIn } from 'formik';
+import React from 'react';
+
+import { FormikFormField, HelpField, TextInput } from '@spinnaker/core';
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroup/configure/serverGroupConfigurationModel.cf';
+
+export interface IRoutesProps {
+  fieldName: string;
+  onChange?: (value: string[]) => void;
+  isRequired?: boolean;
+  singleRouteOnly?: boolean;
+}
+
+export class Routes extends React.Component<IRoutesProps> {
+  public render() {
+    const { fieldName, isRequired, onChange, singleRouteOnly } = this.props;
+    return (
+      <div>
+        <div className="form-group">
+          <div className="col-md-12">
+            <b>{singleRouteOnly ? 'Route' : 'Routes'}</b>
+            &nbsp;
+            {!isRequired && <HelpField id="cf.serverGroup.routes" />}
+            {!!isRequired && <HelpField id="cf.serverGroup.requiredRoutes" />}
+            <FieldArray
+              name={fieldName}
+              render={(arrayHelpers) => {
+                const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
+                const routes: string[] = getIn(serverGroupCommand, fieldName) || [];
+
+                return (
+                  <table className="table table-condensed packed metadata">
+                    <tbody>
+                      {routes.map((_, index: number) => (
+                        <tr key={index}>
+                          <td>
+                            <div className="sp-margin-m-bottom">
+                              <FormikFormField
+                                name={`${fieldName}[${index}]`}
+                                onChange={() => {
+                                  onChange && onChange(getIn(serverGroupCommand, fieldName) || []);
+                                }}
+                                input={(props) => <TextInput {...props} />}
+                                required={true}
+                              />
+                            </div>
+                          </td>
+                          <td hidden={singleRouteOnly}>
+                            <a className="btn btn-link sm-label" onClick={() => arrayHelpers.remove(index)}>
+                              <span className="glyphicon glyphicon-trash" />
+                            </a>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                    <tfoot>
+                      <tr hidden={singleRouteOnly}>
+                        <td colSpan={2}>
+                          <button type="button" className="add-new col-md-12" onClick={() => arrayHelpers.push('')}>
+                            <span className="glyphicon glyphicon-plus-sign" /> Add New Route
+                          </button>
+                        </td>
+                      </tr>
+                    </tfoot>
+                  </table>
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/presentation/forms/serverGroup/Services.tsx

@@ -0,0 +1,62 @@
+import { FieldArray, getIn } from 'formik';
+import React from 'react';
+
+import { FormikFormField, TextInput } from '@spinnaker/core';
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroup/configure/serverGroupConfigurationModel.cf';
+
+export interface IServicesProps {
+  fieldName: string;
+}
+
+export const Services: React.SFC<IServicesProps> = ({ fieldName }: IServicesProps) => {
+  return (
+    <div>
+      <div className="form-group">
+        <div className="col-md-12">
+          <b>Bind Services</b>
+          <FieldArray
+            name={fieldName}
+            render={(arrayHelpers) => {
+              const serverGroupCommand: ICloudFoundryCreateServerGroupCommand = arrayHelpers.form.values;
+              const services: string[] = getIn(serverGroupCommand, fieldName) || [];
+
+              return (
+                <table className="table table-condensed packed metadata">
+                  <tbody>
+                    {services.map((_, index: number) => (
+                      <tr key={index}>
+                        <td>
+                          <div className="sp-margin-m-bottom">
+                            <FormikFormField
+                              name={`${fieldName}[${index}]`}
+                              input={(props) => <TextInput {...props} />}
+                              required={true}
+                            />
+                          </div>
+                        </td>
+                        <td>
+                          <a className="btn btn-link sm-label" onClick={() => arrayHelpers.remove(index)}>
+                            <span className="glyphicon glyphicon-trash" />
+                          </a>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td colSpan={2}>
+                        <button type="button" className="add-new col-md-12" onClick={() => arrayHelpers.push('')}>
+                          <span className="glyphicon glyphicon-plus-sign" /> Add New Service
+                        </button>
+                      </td>
+                    </tr>
+                  </tfoot>
+                </table>
+              );
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/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';

package/src/presentation/index.ts

@@ -0,0 +1,3 @@
+export * from './forms';
+export * from './pipeline';
+export * from './widgets';

package/src/presentation/pipeline/index.ts

@@ -0,0 +1 @@
+export * from './stages';

package/src/presentation/pipeline/stages/CloudFoundryAsgStageConfig.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { IAccount, IStageConfigProps } from '@spinnaker/core';
+import { AccountService, NgReact, StageConfigField, StageConstants } from '@spinnaker/core';
+
+import { AccountRegionClusterSelector } from '../../widgets/accountRegionClusterSelector';
+
+export interface ICloudFoundryAsgStageConfigState {
+  accounts: IAccount[];
+}
+
+export class CloudFoundryAsgStageConfig extends React.Component<IStageConfigProps, ICloudFoundryAsgStageConfigState> {
+  private destroy$ = new Subject();
+
+  constructor(props: IStageConfigProps) {
+    super(props);
+    this.props.updateStageField({ cloudProvider: 'cloudfoundry' });
+    this.state = { accounts: [] };
+  }
+
+  public componentDidMount(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => this.setState({ accounts }));
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private targetUpdated = (target: string) => {
+    this.props.updateStageField({ target });
+  };
+
+  private componentUpdated = (stage: any): void => {
+    this.props.updateStageField({
+      credentials: stage.credentials,
+      regions: stage.regions,
+      cluster: stage.cluster,
+    });
+  };
+
+  public render() {
+    const { application, pipeline, stage } = this.props;
+    const { target } = stage;
+    const { accounts } = this.state;
+    const { TargetSelect } = NgReact;
+    return (
+      <div className="form-horizontal">
+        {!pipeline.strategy && (
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            onComponentUpdate={this.componentUpdated}
+            component={stage}
+          />
+        )}
+        <StageConfigField label="Target">
+          <TargetSelect model={{ target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />
+        </StageConfigField>
+      </div>
+    );
+  }
+}

package/src/presentation/pipeline/stages/CloudFoundryLoadBalancersExecutionDetails.tsx

@@ -0,0 +1,53 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { AccountTag, ExecutionDetailsSection, StageExecutionLogs, StageFailureMessage } from '@spinnaker/core';
+
+export function CloudFoundryLoadBalancersExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  const { context } = stage;
+  const account = get(context, 'credentials', undefined);
+  const region = get(context, 'region', undefined);
+  const loadBalancerNames = get(context, 'loadBalancerNames', undefined);
+  const serverGroupName = get(context, 'serverGroupName', undefined);
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <div className="step-section-details">
+        <div className="row">
+          <div className="col-md-12">
+            <dl className="dl-horizontal">
+              <dt>Account</dt>
+              <dd>
+                <AccountTag account={account} />
+              </dd>
+              <dt>Region</dt>
+              <dd>
+                {region}
+                <br />
+              </dd>
+              <dt>Server Group Name</dt>
+              <dd>
+                {serverGroupName}
+                <br />
+              </dd>
+              <dt>Load Balancers</dt>
+              <dd>
+                {loadBalancerNames.join(', ')}
+                <br />
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <StageFailureMessage stage={props.stage} message={props.stage.failureMessage} />
+      <StageExecutionLogs stage={props.stage} />
+    </ExecutionDetailsSection>
+  );
+}
+
+// TODO: refactor this to not use namespace
+// eslint-disable-next-line
+export namespace CloudFoundryLoadBalancersExecutionDetails {
+  export const title = 'cloudfoundryLoadBalancersConfig';
+}

package/src/presentation/pipeline/stages/CloudFoundryLoadBalancersStageConfig.tsx

@@ -0,0 +1,116 @@
+import type { Formik } from 'formik';
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IAccount, IPipeline, IStageConfigProps } from '@spinnaker/core';
+import { AccountService, NgReact, SpinFormik, StageConfigField, StageConstants } from '@spinnaker/core';
+
+import { Routes } from '../../forms/serverGroup';
+import { AccountRegionClusterSelector } from '../../widgets/accountRegionClusterSelector';
+
+interface ICloudFoundryLoadBalancerStageConfigProps extends IStageConfigProps {
+  pipeline: IPipeline;
+}
+
+interface ICloudFoundryLoadBalancersValues {
+  routes: string[];
+}
+
+interface ICloudFoundryLoadBalancersStageConfigState {
+  accounts: IAccount[];
+  application: Application;
+  initialValues: ICloudFoundryLoadBalancersValues;
+  pipeline: IPipeline;
+}
+
+export class CloudFoundryLoadBalancersStageConfig extends React.Component<
+  ICloudFoundryLoadBalancerStageConfigProps,
+  ICloudFoundryLoadBalancersStageConfigState
+> {
+  private destroy$ = new Subject();
+  private formikRef = React.createRef<Formik<ICloudFoundryLoadBalancersValues>>();
+
+  constructor(props: ICloudFoundryLoadBalancerStageConfigProps) {
+    super(props);
+    const { loadBalancerNames } = props.stage;
+    const routes = loadBalancerNames && loadBalancerNames.length ? loadBalancerNames : [''];
+    this.props.updateStageField({
+      cloudProvider: 'cloudfoundry',
+      loadBalancerNames: routes,
+    });
+    this.state = {
+      accounts: [],
+      application: props.application,
+      initialValues: {
+        routes,
+      },
+      pipeline: props.pipeline,
+    };
+  }
+
+  public componentDidMount(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => this.setState({ accounts }));
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private targetUpdated = (target: string) => {
+    this.props.updateStageField({ target });
+  };
+
+  private componentUpdated = (stage: any): void => {
+    this.props.updateStageField({
+      credentials: stage.credentials,
+      region: stage.region,
+      cluster: stage.cluster,
+      loadBalancerNames: stage.loadBalancerNames,
+    });
+  };
+
+  public render() {
+    const { stage } = this.props;
+    const { accounts, application, initialValues, pipeline } = this.state;
+    const { target } = stage;
+    const { TargetSelect } = NgReact;
+    return (
+      <div className="form-horizontal">
+        {!pipeline.strategy && (
+          <AccountRegionClusterSelector
+            accounts={accounts}
+            application={application}
+            cloudProvider={'cloudfoundry'}
+            isSingleRegion={true}
+            onComponentUpdate={this.componentUpdated}
+            component={stage}
+          />
+        )}
+        <StageConfigField label="Target">
+          <TargetSelect model={{ target }} options={StageConstants.TARGET_LIST} onChange={this.targetUpdated} />
+        </StageConfigField>
+        <SpinFormik<ICloudFoundryLoadBalancersValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          onSubmit={null}
+          render={() => {
+            return (
+              <Routes
+                fieldName={'routes'}
+                isRequired={true}
+                singleRouteOnly={true}
+                onChange={(routes: string[]) => {
+                  stage.loadBalancerNames = routes;
+                  this.componentUpdated(stage);
+                }}
+              />
+            );
+          }}
+        />
+      </div>
+    );
+  }
+}

package/src/presentation/pipeline/stages/CloudFoundryServiceExecutionDetails.tsx

@@ -0,0 +1,46 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { IExecutionDetailsSectionProps } from '@spinnaker/core';
+import { AccountTag, ExecutionDetailsSection, StageExecutionLogs, StageFailureMessage } from '@spinnaker/core';
+
+export function CloudFoundryServiceExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  const { context } = stage;
+  const account = get(context, 'service.account', undefined);
+  const region = get(context, 'service.region', undefined);
+  const serviceInstanceName = get(context, 'service.instance.name', undefined);
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <div className="step-section-details">
+        <div className="row">
+          <div className="col-md-12">
+            <dl className="dl-horizontal">
+              <dt>Account</dt>
+              <dd>
+                <AccountTag account={account} />
+              </dd>
+              <dt>Region</dt>
+              <dd>
+                {region}
+                <br />
+              </dd>
+              <dt>Service Instance Name</dt>
+              <dd>
+                {serviceInstanceName}
+                <br />
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <StageFailureMessage stage={stage} message={stage.failureMessage} />
+      <StageExecutionLogs stage={stage} />
+    </ExecutionDetailsSection>
+  );
+}
+
+// eslint-disable-next-line
+export namespace CloudFoundryServiceExecutionDetails {
+  export const title = 'cloudfoundryServiceConfig';
+}