@spinnaker/cloudfoundry 0.0.0-main-2

package/src/serverGroup/configure/wizard/CreateServerGroupModal.tsx

@@ -0,0 +1,194 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { Application, IModalComponentProps, IPipeline, IStage } from '@spinnaker/core';
+import { noop, ReactInjector, ReactModal, TaskMonitor, WizardModal, WizardPage } from '@spinnaker/core';
+
+import { ServerGroupTemplateSelection } from './ServerGroupTemplateSelection';
+import type { ICloudFoundryServerGroup } from '../../../domain';
+import { CloudFoundryServerGroupArtifactSettings } from './sections/artifactSettings/ArtifactSettings.cf';
+import { CloudFoundryServerGroupConstantArtifactSettings } from './sections/artifactSettings/ConstantArtifactSettings.cf';
+import { CloudFoundryServerGroupBasicSettings } from './sections/basicSettings/BasicSettings.cf';
+import { CloudFoundryServerGroupCloneSettings } from './sections/cloneSettings/CloneSettings.cf';
+import { CloudFoundryServerGroupConfigurationSettings } from './sections/configurationSettings/ConfigurationSettings.cf';
+import type { ICloudFoundryCreateServerGroupCommand } from '../serverGroupConfigurationModel.cf';
+
+import './serverGroup.less';
+
+export interface ICloudFoundryCreateServerGroupProps extends IModalComponentProps {
+  application: Application;
+  command: ICloudFoundryCreateServerGroupCommand;
+  isSourceConstant?: boolean;
+  serverGroup?: ICloudFoundryServerGroup;
+  title: string;
+}
+
+export interface ICloudFoundryCreateServerGroupState {
+  pipeline: IPipeline;
+  isClone: boolean;
+  loading: boolean;
+  requiresTemplateSelection: boolean;
+  stage?: IStage;
+  taskMonitor: TaskMonitor;
+}
+
+export class CloudFoundryCreateServerGroupModal extends React.Component<
+  ICloudFoundryCreateServerGroupProps,
+  ICloudFoundryCreateServerGroupState
+> {
+  public static defaultProps: Partial<ICloudFoundryCreateServerGroupProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  public static show(props: ICloudFoundryCreateServerGroupProps): Promise<ICloudFoundryCreateServerGroupCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(CloudFoundryCreateServerGroupModal, props, modalProps);
+  }
+
+  constructor(props: ICloudFoundryCreateServerGroupProps) {
+    super(props);
+    const pipeline = get(props, 'command.viewState.pipeline', undefined);
+    const stage = get(props, 'command.viewState.stage', undefined);
+    const mode = get(props, 'command.viewState.mode', undefined);
+    this.state = {
+      pipeline: pipeline,
+      isClone: !!props.isSourceConstant || mode === 'editClonePipeline',
+      loading: false,
+      requiresTemplateSelection: get(props, 'command.viewState.requiresTemplateSelection', false),
+      stage,
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Creating your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  private templateSelected = () => {
+    this.setState({ requiresTemplateSelection: false });
+    this.initialize();
+  };
+
+  private initialize = () => {
+    this.setState({ loading: false });
+  };
+
+  private onTaskComplete = () => {
+    this.props.application.serverGroups.refresh();
+  };
+
+  private submit = (command: ICloudFoundryCreateServerGroupCommand): void => {
+    command.selectedProvider = 'cloudfoundry';
+    if (
+      command.viewState.mode === 'createPipeline' ||
+      command.viewState.mode === 'editPipeline' ||
+      command.viewState.mode === 'editClonePipeline'
+    ) {
+      this.props.closeModal && this.props.closeModal(command);
+    } else if (command.viewState.mode === 'clone') {
+      this.state.taskMonitor.submit(() =>
+        ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application),
+      );
+    } else {
+      this.state.taskMonitor.submit(() =>
+        ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application),
+      );
+    }
+  };
+
+  public render(): React.ReactElement<CloudFoundryCreateServerGroupModal> {
+    const { loading, pipeline, isClone, requiresTemplateSelection, stage, taskMonitor } = this.state;
+    const { application, command, dismissModal, title, isSourceConstant } = this.props;
+
+    if (requiresTemplateSelection) {
+      return (
+        <ServerGroupTemplateSelection
+          app={application}
+          command={command}
+          onDismiss={dismissModal}
+          onTemplateSelected={this.templateSelected}
+        />
+      );
+    }
+
+    return (
+      <WizardModal<ICloudFoundryCreateServerGroupCommand>
+        heading={title}
+        initialValues={command}
+        loading={loading}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={command.viewState.submitButtonLabel}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <CloudFoundryServerGroupBasicSettings ref={innerRef} formik={formik} />}
+            />
+
+            {isClone && isSourceConstant && (
+              <WizardPage
+                label="Application"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <CloudFoundryServerGroupConstantArtifactSettings
+                    ref={innerRef}
+                    formik={formik}
+                    source={command.source}
+                  />
+                )}
+              />
+            )}
+
+            {isClone && !isSourceConstant && (
+              <WizardPage
+                label="Source"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <CloudFoundryServerGroupCloneSettings application={application} ref={innerRef} formik={formik} />
+                )}
+              />
+            )}
+
+            {!isClone && (
+              <WizardPage
+                label="Application"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <CloudFoundryServerGroupArtifactSettings
+                    ref={innerRef}
+                    formik={formik}
+                    pipeline={pipeline}
+                    stage={stage}
+                  />
+                )}
+              />
+            )}
+
+            <WizardPage
+              label="Manifest"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <CloudFoundryServerGroupConfigurationSettings
+                  ref={innerRef}
+                  formik={formik}
+                  pipeline={pipeline}
+                  stage={stage}
+                />
+              )}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}

package/src/serverGroup/configure/wizard/ServerGroupTemplateSelection.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import type { Application, ITemplateSelectionText } from '@spinnaker/core';
+import { DeployInitializer } from '@spinnaker/core';
+
+import type { ICloudFoundryCreateServerGroupCommand } from '../serverGroupConfigurationModel.cf';
+
+export interface IServerGroupTemplateSelectionProps {
+  app: Application;
+  command: ICloudFoundryCreateServerGroupCommand;
+  onDismiss: () => void;
+  onTemplateSelected: () => void;
+}
+
+export interface IServerGroupTemplateSelectionState {
+  templateSelectionText: ITemplateSelectionText;
+}
+
+export class ServerGroupTemplateSelection extends React.Component<
+  IServerGroupTemplateSelectionProps,
+  IServerGroupTemplateSelectionState
+> {
+  constructor(props: IServerGroupTemplateSelectionProps) {
+    super(props);
+    this.state = {
+      templateSelectionText: {
+        copied: [
+          'account, region, cluster name (stack, details)',
+          'routes',
+          'service instances',
+          'instance settings',
+          'environment variables',
+        ],
+        notCopied: ['artifacts'],
+        additionalCopyText: '',
+      },
+    };
+  }
+
+  public render() {
+    const { app, command, onDismiss, onTemplateSelected } = this.props;
+    const { templateSelectionText } = this.state;
+
+    return (
+      <DeployInitializer
+        cloudProvider="cloudfoundry"
+        application={app}
+        command={command}
+        onDismiss={onDismiss}
+        onTemplateSelected={onTemplateSelected}
+        templateSelectionText={templateSelectionText}
+      />
+    );
+  }
+}

package/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactSettings.cf.tsx

@@ -0,0 +1,78 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { IArtifact, IExpectedArtifact, IPipeline, IStage, IWizardPageComponent } from '@spinnaker/core';
+import { ArtifactTypePatterns, StageArtifactSelector } from '@spinnaker/core';
+import { FormikConfigField } from '../../../../../presentation';
+
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroupConfigurationModel.cf';
+
+export interface ICloudFoundryCreateServerGroupArtifactSettingsProps {
+  formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
+  stage: IStage;
+  pipeline: IPipeline;
+}
+
+export class CloudFoundryServerGroupArtifactSettings
+  extends React.Component<ICloudFoundryCreateServerGroupArtifactSettingsProps>
+  implements IWizardPageComponent<ICloudFoundryCreateServerGroupCommand> {
+  public static get LABEL() {
+    return 'Artifact';
+  }
+
+  private excludedArtifactTypePatterns = [
+    ArtifactTypePatterns.KUBERNETES,
+    ArtifactTypePatterns.FRONT50_PIPELINE_TEMPLATE,
+  ];
+
+  private onExpectedArtifactSelected = (expectedArtifact: IExpectedArtifact): void => {
+    this.props.formik.setFieldValue('applicationArtifact', { artifactId: expectedArtifact.id });
+  };
+
+  private onArtifactChanged = (artifact: IArtifact): void => {
+    this.props.formik.setFieldValue('applicationArtifact', { artifact: artifact });
+  };
+
+  public validate(_values: ICloudFoundryCreateServerGroupCommand) {
+    const { applicationArtifact } = this.props.formik.values;
+    const errors = {} as any;
+    if (
+      !applicationArtifact ||
+      !(
+        (applicationArtifact.artifact && applicationArtifact.artifact.type && applicationArtifact.artifact.reference) ||
+        applicationArtifact.artifactId
+      )
+    ) {
+      errors.applicationArtifact = 'Application artifact information is required';
+    }
+
+    return errors;
+  }
+
+  public render() {
+    const { formik, stage, pipeline } = this.props;
+    const applicationArtifact = formik.values.applicationArtifact;
+    return (
+      <div className="form-group">
+        <div className="col-md-11">
+          <div className="StandardFieldLayout flex-container-h margin-between-lg">
+            <div className="flex-grow">
+              <StageArtifactSelector
+                pipeline={pipeline}
+                stage={stage}
+                expectedArtifactId={applicationArtifact && applicationArtifact.artifactId}
+                artifact={applicationArtifact && applicationArtifact.artifact}
+                onExpectedArtifactSelected={this.onExpectedArtifactSelected}
+                onArtifactEdited={this.onArtifactChanged}
+                excludedArtifactTypePatterns={this.excludedArtifactTypePatterns}
+                renderLabel={(field: React.ReactNode) => {
+                  return <FormikConfigField label={'Artifact'}>{field}</FormikConfigField>;
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/sections/artifactSettings/ConstantArtifactSettings.cf.tsx

@@ -0,0 +1,49 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type {
+  ICloudFoundryCreateServerGroupCommand,
+  ICloudFoundrySource,
+} from '../../../serverGroupConfigurationModel.cf';
+
+export interface ICloudFoundryCloneServerGroupProps {
+  formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
+  source: ICloudFoundrySource;
+}
+
+export class CloudFoundryServerGroupConstantArtifactSettings extends React.Component<
+  ICloudFoundryCloneServerGroupProps
+> {
+  constructor(props: ICloudFoundryCloneServerGroupProps) {
+    super(props);
+    const { source } = props;
+    this.props.formik.setFieldValue('source', source);
+  }
+
+  public render(): JSX.Element {
+    const { source } = this.props;
+
+    return (
+      <div>
+        <div className="form-group row">
+          <label className="col-md-3 col-form-label sm-label-right">Account</label>
+          <div className="col-md-7">
+            <input className="form-control" type="text" id="cluster" value={source.account} readOnly={true} />
+          </div>
+        </div>
+        <div className="form-group row">
+          <label className="col-md-3 col-form-label sm-label-right">Region</label>
+          <div className="col-md-7">
+            <input className="form-control" type="text" id="cluster" value={source.region} readOnly={true} />
+          </div>
+        </div>
+        <div className="form-group row">
+          <label className="col-md-3 col-form-label sm-label-right">Server Group</label>
+          <div className="col-md-7">
+            <input className="form-control" type="text" id="cluster" value={source.asgName} readOnly={true} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/sections/basicSettings/BasicSettings.cf.tsx

@@ -0,0 +1,163 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { IAccount, IRegion, IWizardPageComponent } from '@spinnaker/core';
+import {
+  AccountService,
+  CheckboxInput,
+  FormikFormField,
+  HelpField,
+  ReactSelectInput,
+  TextInput,
+} from '@spinnaker/core';
+import { CloudFoundryDeploymentStrategySelector } from '../../../../../deploymentStrategy/CloudFoundryDeploymentStrategySelector';
+
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroupConfigurationModel.cf';
+
+import '../../../../../common/cloudFoundry.less';
+
+export interface ICloudFoundryServerGroupBasicSettingsProps {
+  formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
+}
+
+export interface ICloudFoundryServerGroupLocationSettingsState {
+  accounts: IAccount[];
+  regions: IRegion[];
+}
+
+export class CloudFoundryServerGroupBasicSettings
+  extends React.Component<ICloudFoundryServerGroupBasicSettingsProps, ICloudFoundryServerGroupLocationSettingsState>
+  implements IWizardPageComponent<ICloudFoundryCreateServerGroupCommand> {
+  private destroy$ = new Subject();
+  public state: ICloudFoundryServerGroupLocationSettingsState = {
+    accounts: [],
+    regions: [],
+  };
+
+  public componentDidMount(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => {
+        this.setState({ accounts });
+        this.updateRegionList();
+      });
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private accountChanged = (): void => {
+    this.updateRegionList();
+    this.props.formik.setFieldValue('region', '');
+  };
+
+  private updateRegionList = (): void => {
+    const credentials = get(this.props.formik.values, 'credentials', undefined);
+    if (credentials) {
+      observableFrom(AccountService.getRegionsForAccount(credentials))
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((regions) => this.setState({ regions }));
+    }
+  };
+
+  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 {
+    const { formik } = this.props;
+    const { accounts, regions } = this.state;
+    const { values } = formik;
+    return (
+      <div className="form-group">
+        <div className="col-md-11">
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name="credentials"
+              label="Account"
+              input={(props) => (
+                <ReactSelectInput
+                  inputClassName="cloudfoundry-react-select"
+                  {...props}
+                  stringOptions={accounts && accounts.map((acc: IAccount) => acc.name)}
+                  clearable={false}
+                />
+              )}
+              onChange={this.accountChanged}
+              required={true}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name="region"
+              label="Region"
+              input={(props) => (
+                <ReactSelectInput
+                  {...props}
+                  stringOptions={regions && regions.map((region: IRegion) => region.name)}
+                  inputClassName={'cloudfoundry-react-select'}
+                  clearable={false}
+                />
+              )}
+              required={true}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name="stack"
+              label="Stack"
+              input={(props) => <TextInput {...props} />}
+              help={<HelpField id="cf.serverGroup.stack" />}
+            />
+          </div>
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name="freeFormDetails"
+              label="Detail"
+              input={(props) => <TextInput {...props} />}
+              help={<HelpField id="cf.serverGroup.detail" />}
+            />
+          </div>
+          <div className="sp-margin-m-bottom cloud-foundry-checkbox">
+            <FormikFormField
+              name="startApplication"
+              label="Start on creation"
+              input={(props) => <CheckboxInput {...props} />}
+              help={<HelpField id="cf.serverGroup.startApplication" />}
+            />
+          </div>
+          {(values.viewState.mode === 'editPipeline' ||
+            values.viewState.mode === 'createPipeline' ||
+            values.viewState.mode === 'editClonePipeline') && (
+            <CloudFoundryDeploymentStrategySelector
+              onFieldChange={this.onStrategyFieldChange}
+              onStrategyChange={this.strategyChanged}
+              command={values}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  public validate(values: ICloudFoundryCreateServerGroupCommand) {
+    const errors = {} as FormikErrors<ICloudFoundryCreateServerGroupCommand>;
+
+    if (values.stack && !values.stack.match(/^[a-zA-Z0-9]*$/)) {
+      errors.stack = 'Stack can only contain letters and numbers.';
+    }
+    if (values.freeFormDetails && !values.freeFormDetails.match(/^[a-zA-Z0-9-]*$/)) {
+      errors.freeFormDetails = 'Detail can only contain letters, numbers, and dashes.';
+    }
+
+    return errors;
+  }
+}

package/src/serverGroup/configure/wizard/sections/cloneSettings/CloneSettings.cf.tsx

@@ -0,0 +1,101 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import React from 'react';
+import { from as observableFrom, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import type { Application, IAccount, IDeploymentStrategy, IWizardPageComponent } from '@spinnaker/core';
+import { AccountService, FormikFormField, Markdown, ReactSelectInput, StageConstants } from '@spinnaker/core';
+import { FormikAccountRegionClusterSelector } from '../../../../../presentation';
+
+import type { ICloudFoundryCreateServerGroupCommand } from '../../../serverGroupConfigurationModel.cf';
+
+import '../../../../../common/cloudFoundry.less';
+
+export interface ICloudFoundryCloneSettingsProps {
+  formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
+  application: Application;
+}
+
+export interface ICloudFoundryCloneSettingsState {
+  accounts: IAccount[];
+}
+
+export class CloudFoundryServerGroupCloneSettings
+  extends React.Component<ICloudFoundryCloneSettingsProps, ICloudFoundryCloneSettingsState>
+  implements IWizardPageComponent<ICloudFoundryCreateServerGroupCommand> {
+  private destroy$ = new Subject();
+  public state: ICloudFoundryCloneSettingsState = {
+    accounts: [],
+  };
+
+  public componentDidMount(): void {
+    observableFrom(AccountService.listAccounts('cloudfoundry'))
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((accounts) => this.setState({ accounts }));
+  }
+
+  public componentWillUnmount(): void {
+    this.destroy$.next();
+  }
+
+  private strategyOptionRenderer = (option: IDeploymentStrategy) => {
+    return (
+      <div className="body-regular">
+        <strong>
+          <Markdown tag="span" message={option.label} />
+        </strong>
+        <div>
+          <Markdown tag="span" message={option.description} />
+        </div>
+      </div>
+    );
+  };
+
+  public render(): JSX.Element {
+    const { application, formik } = this.props;
+    const { accounts } = this.state;
+    return (
+      <div className="form-group">
+        <FormikAccountRegionClusterSelector
+          componentName={'source'}
+          accounts={accounts}
+          application={application}
+          cloudProvider={'cloudfoundry'}
+          clusterField={'clusterName'}
+          credentialsField={'account'}
+          formik={formik}
+        />
+        <div className="col-md-9">
+          <div className="sp-margin-m-bottom">
+            <FormikFormField
+              name={'target'}
+              label="Target"
+              input={(props) => (
+                <ReactSelectInput
+                  inputClassName="cloudfoundry-react-select"
+                  {...props}
+                  options={StageConstants.TARGET_LIST.map((t) => {
+                    return {
+                      label: t.label,
+                      value: t.val,
+                      description: t.description,
+                    };
+                  })}
+                  optionRenderer={this.strategyOptionRenderer}
+                  clearable={false}
+                />
+              )}
+              required={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  public validate(_values: ICloudFoundryCreateServerGroupCommand) {
+    const errors = {} as FormikErrors<ICloudFoundryCreateServerGroupCommand>;
+
+    return errors;
+  }
+}