@spinnaker/amazon 0.0.0-2025.1-0

package/src/serverGroup/configure/wizard/instanceType/simpleMode/SimpleModeSelector.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { NgReact } from '@spinnaker/core';
+
+import { CpuCreditsToggle } from '../CpuCreditsToggle';
+import { InstanceTypeWarning } from '../InstanceTypeWarning';
+import { AWSProviderSettings } from '../../../../../aws.settings';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface ISimpleModeSelectorProps {
+  command: IAmazonServerGroupCommand;
+  setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
+  setFieldValue: (field: keyof IAmazonServerGroupCommand, value: any, shouldValidate?: boolean) => void;
+  clearWarnings: () => void;
+}
+
+export function SimpleModeSelector(props: ISimpleModeSelectorProps) {
+  const { command } = props;
+  const { InstanceArchetypeSelector, InstanceTypeSelector } = NgReact;
+  const isLaunchTemplatesEnabled = AWSProviderSettings.serverGroups?.enableLaunchTemplates;
+  const isCpuCreditsEnabled = AWSProviderSettings.serverGroups?.enableCpuCredits;
+
+  const instanceProfileChanged = (newProfile: string) => {
+    // Instance profile is already set on values.viewState, so just use that value.
+    // Once angular is gone from this component tree, we can move all the viewState stuff
+    // into react state
+    props.setFieldValue('viewState', {
+      ...command.viewState,
+      instanceProfile: newProfile,
+    });
+  };
+
+  const instanceTypeChanged = (type: string) => {
+    command.instanceTypeChanged(command);
+    props.setFieldValue('instanceType', type);
+  };
+
+  return (
+    <div className="container-fluid form-horizontal">
+      <div className="row">
+        <InstanceArchetypeSelector
+          command={command}
+          onTypeChanged={instanceTypeChanged}
+          onProfileChanged={instanceProfileChanged}
+        />
+        <InstanceTypeWarning dirty={command.viewState.dirty} clearWarnings={props.clearWarnings} />
+        <div style={{ padding: '0 15px' }}>
+          {command.viewState.instanceProfile && command.viewState.instanceProfile !== 'custom' && (
+            <InstanceTypeSelector command={command} onTypeChanged={instanceTypeChanged} />
+          )}
+        </div>
+      </div>
+      {isLaunchTemplatesEnabled && isCpuCreditsEnabled && (
+        <div className="row">
+          <CpuCreditsToggle
+            unlimitedCpuCredits={command.unlimitedCpuCredits}
+            selectedInstanceTypes={[command.instanceType]}
+            currentProfile={command.viewState.instanceProfile}
+            setUnlimitedCpuCredits={props.setUnlimitedCpuCredits}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/serverGroup/configure/wizard/pages/ServerGroupBasicSettings.tsx

@@ -0,0 +1,354 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { Field } from 'formik';
+import React from 'react';
+
+import type { Application, IServerGroup, IWizardPageComponent } from '@spinnaker/core';
+import {
+  AccountSelectInput,
+  DeployingIntoManagedClusterWarning,
+  DeploymentStrategySelector,
+  HelpField,
+  Markdown,
+  NameUtils,
+  ReactInjector,
+  RegionSelectField,
+  ServerGroupDetailsField,
+  ServerGroupNamePreview,
+  SETTINGS,
+  TaskReason,
+} from '@spinnaker/core';
+
+import { AmazonImageSelectInput } from '../../AmazonImageSelectInput';
+import { AWSProviderSettings } from '../../../../aws.settings';
+import type { IAmazonImage } from '../../../../image';
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+import { SubnetSelectField } from '../../../../subnet';
+
+const isExpressionLanguage = (field: string) => field && field.includes('${');
+const isStackPattern = (stack: string) =>
+  !isExpressionLanguage(stack) ? /^([a-zA-Z_0-9._${}]*(\${.+})*)*$/.test(stack) : true;
+const isDetailPattern = (detail: string) =>
+  !isExpressionLanguage(detail) ? /^([a-zA-Z_0-9._${}-]*(\${.+})*)*$/.test(detail) : true;
+
+export interface IServerGroupBasicSettingsProps {
+  app: Application;
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export interface IServerGroupBasicSettingsState {
+  selectedImage: IAmazonImage;
+  namePreview: string;
+  createsNewCluster: boolean;
+  latestServerGroup: IServerGroup;
+}
+
+export class ServerGroupBasicSettings
+  extends React.Component<IServerGroupBasicSettingsProps, IServerGroupBasicSettingsState>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  constructor(props: IServerGroupBasicSettingsProps) {
+    super(props);
+    const {
+      amiName,
+      region,
+      viewState: { imageId },
+    } = props.formik.values;
+    const selectedImage = AmazonImageSelectInput.makeFakeImage(amiName, imageId, region);
+    this.state = { ...this.getStateFromProps(props), selectedImage };
+  }
+
+  private getStateFromProps(props: IServerGroupBasicSettingsProps) {
+    const { app } = props;
+    const { values } = props.formik;
+
+    const namePreview = NameUtils.getClusterName(app.name, values.stack, values.freeFormDetails);
+    const createsNewCluster = !app.clusters.find((c) => c.name === namePreview);
+
+    const inCluster = (app.serverGroups.data as IServerGroup[])
+      .filter((serverGroup) => {
+        return (
+          serverGroup.cluster === namePreview &&
+          serverGroup.account === values.credentials &&
+          serverGroup.region === values.region
+        );
+      })
+      .sort((a, b) => a.createdTime - b.createdTime);
+    const latestServerGroup = inCluster.length ? inCluster.pop() : null;
+
+    return { namePreview, createsNewCluster, latestServerGroup };
+  }
+
+  private imageChanged = (image: IAmazonImage) => {
+    const { setFieldValue, values } = this.props.formik;
+    this.setState({ selectedImage: image });
+
+    const virtualizationType = image && image.attributes.virtualizationType;
+    const amiArchitecture = image && image.attributes.architecture;
+    const imageName = image && image.imageName;
+    values.virtualizationType = virtualizationType;
+    values.amiArchitecture = amiArchitecture;
+    values.amiName = imageName;
+    setFieldValue('amiArchitecture', amiArchitecture);
+    setFieldValue('virtualizationType', virtualizationType);
+    setFieldValue('amiName', imageName);
+    values.imageChanged(values);
+
+    if (image && SETTINGS.disabledImages?.length && AWSProviderSettings.serverGroups?.enableIPv6) {
+      const isImageDisabled = SETTINGS.disabledImages.some((i) => image.imageName.includes(i));
+      if (isImageDisabled) {
+        setFieldValue('associateIPv6Address', false);
+      }
+    }
+
+    // an image change might clear the single or multiple instance types previously selected with the image, validate the form to surface related errors.
+    this.props.formik.validateForm();
+  };
+
+  private accountUpdated = (account: string): void => {
+    const { setFieldValue, values } = this.props.formik;
+    values.credentials = account;
+    values.credentialsChanged(values);
+    values.subnetChanged(values);
+    setFieldValue('credentials', account);
+
+    const accountDetails = values.backingData.credentialsKeyedByAccount[account];
+    const enableIPv6InTest =
+      AWSProviderSettings?.serverGroups?.enableIPv6 &&
+      AWSProviderSettings?.serverGroups?.setIPv6InTest &&
+      accountDetails.environment === 'test';
+
+    setFieldValue('associateIPv6Address', enableIPv6InTest);
+
+    if (AWSProviderSettings.serverGroups?.enableIMDSv2) {
+      const isIMDSv2AllowedOnAccount = !AWSProviderSettings?.serverGroups?.accountDenyListIMDSv2?.includes(account);
+      const appAgeRequirement = AWSProviderSettings.serverGroups?.defaultIMDSv2AppAgeLimit;
+      const creationDate = this.props.app?.attributes?.createTs;
+      const setIMDSv2 =
+        isIMDSv2AllowedOnAccount && appAgeRequirement && creationDate && Number(creationDate) > appAgeRequirement;
+      setFieldValue('requireIMDSv2', setIMDSv2);
+    }
+  };
+
+  private regionUpdated = (region: string): void => {
+    const { values, setFieldValue } = this.props.formik;
+    values.region = region;
+    values.regionChanged(values);
+    setFieldValue('region', region);
+  };
+
+  private subnetUpdated = (): void => {
+    const { setFieldValue, values } = this.props.formik;
+    values.subnetChanged(values);
+    setFieldValue('subnetType', values.subnetType);
+  };
+
+  public validate(values: IAmazonServerGroupCommand): FormikErrors<IAmazonServerGroupCommand> {
+    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+
+    if (!isStackPattern(values.stack)) {
+      errors.stack = 'Only dot(.) and underscore(_) special characters are allowed in the Stack field.';
+    }
+
+    if (!isDetailPattern(values.freeFormDetails)) {
+      errors.freeFormDetails =
+        'Only dot(.), underscore(_), and dash(-) special characters are allowed in the Detail field.';
+    }
+
+    if (!values.viewState.disableImageSelection && !values.amiName) {
+      errors.amiName = 'Image required.';
+    }
+
+    // this error is added exclusively to disable the "create/clone" button - it is not visible aside from the warning
+    // rendered by the DeployingIntoManagedClusterWarning component
+    if (values.resourceSummary) {
+      errors.resourceSummary = { id: 'Cluster is managed' };
+    }
+
+    return errors;
+  }
+
+  private clientRequestsChanged = () => {
+    const { values, setFieldValue } = this.props.formik;
+    values.toggleSuspendedProcess(values, 'AddToLoadBalancer');
+    setFieldValue('suspendedProcesses', values.suspendedProcesses);
+    this.setState({});
+  };
+
+  private navigateToLatestServerGroup = () => {
+    const { values } = this.props.formik;
+    const { latestServerGroup } = this.state;
+
+    const params = {
+      provider: values.selectedProvider,
+      accountId: latestServerGroup.account,
+      region: latestServerGroup.region,
+      serverGroup: latestServerGroup.name,
+    };
+
+    const { $state } = ReactInjector;
+    if ($state.is('home.applications.application.insight.clusters')) {
+      $state.go('.serverGroup', params);
+    } else {
+      $state.go('^.serverGroup', params);
+    }
+  };
+
+  private stackChanged = (stack: string) => {
+    const { setFieldValue, values } = this.props.formik;
+    values.stack = stack; // have to do it here to make sure it's done before calling values.clusterChanged
+    setFieldValue('stack', stack);
+    values.clusterChanged(values);
+  };
+
+  public componentWillReceiveProps(nextProps: IServerGroupBasicSettingsProps) {
+    this.setState(this.getStateFromProps(nextProps));
+  }
+
+  private handleReasonChanged = (reason: string) => {
+    this.props.formik.setFieldValue('reason', reason);
+  };
+
+  private strategyChanged = (values: IAmazonServerGroupCommand, strategy: any) => {
+    values.onStrategyChange(values, strategy);
+    this.props.formik.setFieldValue('strategy', strategy.key);
+  };
+
+  private onStrategyFieldChange = (key: string, value: any) => {
+    this.props.formik.setFieldValue(key, value);
+  };
+
+  public render() {
+    const { app, formik } = this.props;
+    const { errors, values } = formik;
+    const { createsNewCluster, latestServerGroup, namePreview } = this.state;
+
+    const accounts = values.backingData.accounts;
+    const readOnlyFields = values.viewState.readOnlyFields || {};
+    return (
+      <div className="container-fluid form-horizontal">
+        {values.regionIsDeprecated(values) && (
+          <div className="form-group row">
+            <div className="col-md-12 error-message">
+              <div className="alert alert-danger">
+                You are deploying into a deprecated region within the {values.credentials} account!
+              </div>
+            </div>
+          </div>
+        )}
+        <DeployingIntoManagedClusterWarning app={app} formik={formik} />
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Account</div>
+          <div className="col-md-7">
+            <AccountSelectInput
+              value={values.credentials}
+              onChange={(evt: any) => this.accountUpdated(evt.target.value)}
+              readOnly={readOnlyFields.credentials}
+              accounts={accounts}
+              provider="aws"
+            />
+          </div>
+        </div>
+        <RegionSelectField
+          readOnly={readOnlyFields.region}
+          labelColumns={3}
+          component={values}
+          field="region"
+          account={values.credentials}
+          regions={values.backingData.filtered.regions}
+          onChange={this.regionUpdated}
+        />
+        <SubnetSelectField
+          readOnly={readOnlyFields.subnet}
+          labelColumns={3}
+          helpKey="aws.serverGroup.subnet"
+          component={values}
+          field="subnetType"
+          region={values.region}
+          application={app}
+          subnets={values.backingData.filtered.subnetPurposes}
+          onChange={this.subnetUpdated}
+          showSubnetWarning={true}
+        />
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Stack <HelpField id="aws.serverGroup.stack" />
+          </div>
+          <div className="col-md-7">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.stack}
+              onChange={(e) => this.stackChanged(e.target.value)}
+            />
+          </div>
+        </div>
+        {errors.stack && (
+          <div className="form-group row slide-in">
+            <div className="col-sm-9 col-sm-offset-2 error-message">
+              <span>{errors.stack}</span>
+            </div>
+          </div>
+        )}
+        <ServerGroupDetailsField app={app} formik={formik} />
+        {values.viewState.imageSourceText && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">Image Source</div>
+            <div className="col-md-7" style={{ marginTop: '5px' }}>
+              <Markdown tag="span" message={values.viewState.imageSourceText} />
+            </div>
+          </div>
+        )}
+        {!values.viewState.disableImageSelection && (
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              Image <HelpField id="aws.serverGroup.imageName" />
+            </div>
+            {isExpressionLanguage(values.amiName) ? (
+              <Field name="amiName" />
+            ) : (
+              <AmazonImageSelectInput
+                onChange={(image) => this.imageChanged(image)}
+                value={this.state.selectedImage}
+                application={app}
+                credentials={values.credentials}
+                region={values.region}
+              />
+            )}
+          </div>
+        )}
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Traffic <HelpField id="aws.serverGroup.traffic" />
+          </div>
+          <div className="col-md-9 checkbox">
+            <label>
+              <input
+                type="checkbox"
+                onChange={this.clientRequestsChanged}
+                checked={!values.processIsSuspended(values, 'AddToLoadBalancer')}
+                disabled={values.strategy !== '' && values.strategy !== 'custom'}
+              />
+              Send client requests to new instances
+            </label>
+          </div>
+        </div>
+        {!values.viewState.disableStrategySelection && values.selectedProvider && (
+          <DeploymentStrategySelector
+            command={values}
+            onFieldChange={this.onStrategyFieldChange}
+            onStrategyChange={this.strategyChanged}
+          />
+        )}
+        {!values.viewState.hideClusterNamePreview && (
+          <ServerGroupNamePreview
+            createsNewCluster={createsNewCluster}
+            latestServerGroupName={latestServerGroup?.name}
+            mode={values.viewState.mode}
+            namePreview={namePreview}
+            navigateToLatestServerGroup={this.navigateToLatestServerGroup}
+          />
+        )}
+        <TaskReason reason={values.reason} onChange={this.handleReasonChanged} />
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/ServerGroupCapacity.tsx

@@ -0,0 +1,71 @@
+import type { FormikProps } from 'formik';
+import { Field } from 'formik';
+import React from 'react';
+
+import type { IServerGroupCommand, IWizardPageComponent } from '@spinnaker/core';
+import { parseNum } from '@spinnaker/core';
+
+import { CapacitySelector } from '../capacity/CapacitySelector';
+import { MinMaxDesired } from '../capacity/MinMaxDesired';
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupCapacityProps {
+  formik: FormikProps<IServerGroupCommand>;
+}
+
+export class ServerGroupCapacity
+  extends React.Component<IServerGroupCapacityProps>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  public validate(values: IServerGroupCommand): { [key: string]: string } {
+    const errors: { [key: string]: string } = {};
+
+    if (
+      parseNum(values.capacity.min) < 0 ||
+      parseNum(values.capacity.max) < 0 ||
+      parseNum(values.capacity.desired) < 0
+    ) {
+      errors.capacity = 'Capacity min, max, and desired all have to be non-negative values.';
+    }
+
+    const amazonValues = values as IAmazonServerGroupCommand;
+    if (
+      amazonValues.targetHealthyDeployPercentage === undefined ||
+      amazonValues.targetHealthyDeployPercentage === null
+    ) {
+      errors.targetHealthyDeployPercentage = 'Target Healthy Deploy Percentage required.';
+    }
+    return errors;
+  }
+
+  public render() {
+    const { setFieldValue, values } = this.props.formik;
+
+    return (
+      <div className="container-fluid form-horizontal">
+        <div className="row">
+          <div className="col-md-12">
+            <CapacitySelector command={values} setFieldValue={setFieldValue} MinMaxDesired={MinMaxDesired} />
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-12">
+            <div className="form-group form-inline" style={{ marginTop: '20px' }}>
+              <div className="col-md-12">
+                Consider deployment successful when{' '}
+                <Field
+                  type="number"
+                  name="targetHealthyDeployPercentage"
+                  min="0"
+                  max="100"
+                  className="form-control input-sm inline-number"
+                  required={true}
+                />{' '}
+                percent of instances are healthy.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/pages/ServerGroupInstanceType.tsx

@@ -0,0 +1,158 @@
+import type { FormikErrors, FormikProps } from 'formik';
+import { some } from 'lodash';
+import React from 'react';
+import { Subject } from 'rxjs';
+
+import type { IWizardPageComponent } from '@spinnaker/core';
+import { parseNum } from '@spinnaker/core';
+
+import type { IAmazonInstanceTypeCategory } from '../../../../instance/awsInstanceType.service';
+import { InstanceTypeSelector } from '../instanceType/InstanceTypeSelector';
+import { AwsReactInjector } from '../../../../reactShims';
+import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IServerGroupInstanceTypeProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+export interface IServerGroupInstanceTypeState {
+  instanceTypeDetails: IAmazonInstanceTypeCategory[];
+}
+
+export class ServerGroupInstanceType
+  extends React.Component<IServerGroupInstanceTypeProps, IServerGroupInstanceTypeState>
+  implements IWizardPageComponent<IAmazonServerGroupCommand> {
+  public state: IServerGroupInstanceTypeState = {
+    instanceTypeDetails: [],
+  };
+  private props$ = new Subject<IServerGroupInstanceTypeProps>();
+  private destroy$ = new Subject<void>();
+
+  public validate(values: IAmazonServerGroupCommand): FormikErrors<IAmazonServerGroupCommand> {
+    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+
+    if (values.viewState.useSimpleInstanceTypeSelector) {
+      // For the clone scenario, when values.instanceType is cleared for various reasons (see serverGroupConfiguration.service.ts),
+      // the previously selected instance type might be cleared/ unselected to fail-fast and this might look like unexpected behavior. But, there is always a reason when this happens.
+      // The error handling below adds transparency around what changed and why.
+      if (values.viewState.dirty.instanceType) {
+        errors.instanceType = 'You must confirm removed instance type and pick a compatible instance type.';
+      } else if (!values.instanceType) {
+        errors.instanceType = 'Instance Type required.';
+      }
+    } else {
+      const prevInstanceTypes = values.viewState.dirty.launchTemplateOverridesForInstanceType;
+      if (prevInstanceTypes && prevInstanceTypes.length > 0) {
+        errors.instanceType = 'You must confirm removed instance types and/or pick more instance types.';
+      } else {
+        const advancedModeErrors = this.validateAdvancedModeFields(values, errors);
+        Object.assign(errors, { ...advancedModeErrors });
+      }
+    }
+
+    return errors;
+  }
+
+  private validateAdvancedModeFields(
+    values: IAmazonServerGroupCommand,
+    errors: FormikErrors<IAmazonServerGroupCommand>,
+  ): FormikErrors<IAmazonServerGroupCommand> {
+    if (!values.launchTemplateOverridesForInstanceType.length) {
+      errors.instanceType = 'At least one instance type required.';
+    }
+    if (values.launchTemplateOverridesForInstanceType.length > 40) {
+      errors.instanceType = 'Maximum of 40 instance types are allowed.';
+    }
+    const weightsSpecified = values.launchTemplateOverridesForInstanceType.filter(
+      (it) => it.weightedCapacity !== undefined,
+    );
+    if (
+      !(
+        weightsSpecified.length === values.launchTemplateOverridesForInstanceType.length ||
+        weightsSpecified.length === 0
+      )
+    ) {
+      errors.instanceType = 'Weighted capacity must be specified for all instance types selected or none.';
+    }
+    if (
+      some(weightsSpecified, function (instanceType) {
+        const weightedCapacity = Number(instanceType.weightedCapacity);
+        return weightedCapacity < 1 || weightedCapacity > 999;
+      })
+    ) {
+      errors.instanceType = 'Weighted capacity must be a number between 1 and 999.';
+    }
+
+    if (values.onDemandBaseCapacity < 0) {
+      errors.onDemandBaseCapacity = 'On-Demand base capacity must be non-negative.';
+    }
+
+    if (values.onDemandBaseCapacity > parseNum(values.capacity.max)) {
+      errors.onDemandBaseCapacity = 'On-Demand base capacity must be less than or equal to max capacity.';
+    }
+
+    if (values.onDemandPercentageAboveBaseCapacity < 0 || values.onDemandPercentageAboveBaseCapacity > 100) {
+      errors.onDemandPercentageAboveBaseCapacity =
+        'On-Demand percentage above base capacity must be a number between 0 and 100.';
+    }
+
+    if (values.spotPrice) {
+      const spotPriceNum = Number(values.spotPrice);
+      if (Number.isNaN(spotPriceNum)) {
+        errors.spotPrice = 'Spot Max Price must be a number or empty string, used to unset previous max price.';
+      }
+      if (spotPriceNum <= 0) {
+        errors.spotPrice = 'Spot Max Price must be greater than 0, if specified.';
+      }
+    }
+
+    if (values.spotInstancePools && values.spotAllocationStrategy !== 'lowest-price') {
+      errors.spotInstancePools = "Spot Instance Pools is only supported for 'lowest-price' Spot Allocation Strategy.";
+    }
+    if (values.spotInstancePools <= 0 || values.spotInstancePools > 20) {
+      errors.spotInstancePools = 'Spot Instance Pools count must be a number between 1 and 20, when applicable.';
+    }
+
+    return errors;
+  }
+
+  public componentDidMount(): void {
+    Promise.resolve(AwsReactInjector.awsInstanceTypeService.getCategories()).then(
+      (categories: IAmazonInstanceTypeCategory[]) => {
+        this.setState({ instanceTypeDetails: categories });
+      },
+    );
+  }
+
+  public componentDidUpdate() {
+    this.props$.next(this.props);
+  }
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+  }
+
+  public render() {
+    const { values } = this.props.formik;
+    const showTypeSelector = !!(values.viewState.disableImageSelection || values.amiName);
+
+    // mark unavailable instance types for all profiles
+    const availableInstanceTypesForConfig: string[] = values.backingData?.filtered?.instanceTypes ?? [];
+    const markedInstanceTypeDetails: IAmazonInstanceTypeCategory[] = Array.from(this.state.instanceTypeDetails);
+    if (!values.viewState.disableImageSelection && availableInstanceTypesForConfig.length) {
+      markedInstanceTypeDetails.forEach((profile) => {
+        profile.families.forEach((family) => {
+          family.instanceTypes.forEach((instanceType) => {
+            instanceType.unavailable = !availableInstanceTypesForConfig.includes(instanceType.name);
+          });
+        });
+      });
+    }
+
+    if (showTypeSelector && values) {
+      return <InstanceTypeSelector formik={this.props.formik} instanceTypeDetails={markedInstanceTypeDetails} />;
+    }
+
+    return <h5 className="text-center">Please select an image.</h5>;
+  }
+}