@spinnaker/amazon 0.11.1 → 0.12.3

package/src/serverGroup/configure/wizard/instanceType/CpuCreditsToggle.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-
+import React, { useEffect, useState } from 'react';
 import { ToggleButtonGroup, ToggleSize } from '@spinnaker/core';
 import { AwsReactInjector } from '../../../../reactShims';
 
-import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
-
 export interface ICpuCreditsToggleProps {
-  command: IAmazonServerGroupCommand;
-  newInstanceType?: string;
-  newProfileType?: string;
+  unlimitedCpuCredits?: boolean;
+  selectedInstanceTypes: string[];
+  currentProfile: string;
   setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
 }
 
 export function CpuCreditsToggle(props: ICpuCreditsToggleProps) {
-  const [showToggle, setShowToggle] = React.useState(false);
-  React.useEffect(() => {
-    if (props.newInstanceType) {
-      const isBurstingSupportedForNewInstance = AwsReactInjector.awsInstanceTypeService.isBurstingSupported(
-        props.newInstanceType,
-      );
-      if (!isBurstingSupportedForNewInstance) {
+  const { selectedInstanceTypes, currentProfile } = props;
+  const isBurstingSupportedForAllTypes = AwsReactInjector.awsInstanceTypeService.isBurstingSupportedForAllTypes(
+    selectedInstanceTypes,
+  );
+  const isAtleastOneTypeInProfile = AwsReactInjector.awsInstanceTypeService.getInstanceTypesInCategory(
+    selectedInstanceTypes,
+    currentProfile,
+  ).length
+    ? true
+    : false;
+
+  const [showToggle, setShowToggle] = useState(false);
+  useEffect(() => {
+    if (selectedInstanceTypes && selectedInstanceTypes.length) {
+      if (!isBurstingSupportedForAllTypes) {
         props.setUnlimitedCpuCredits(undefined);
       }
-      setShowToggle(isBurstingSupportedForNewInstance);
+      setShowToggle(isBurstingSupportedForAllTypes);
     }
 
-    if (props.newProfileType) {
-      const { instanceType } = props.command;
-      const isTypeInProfile = AwsReactInjector.awsInstanceTypeService.isInstanceTypeInCategory(
-        instanceType,
-        props.newProfileType,
+    if (currentProfile) {
+      setShowToggle(
+        selectedInstanceTypes &&
+          selectedInstanceTypes.length > 0 &&
+          isBurstingSupportedForAllTypes &&
+          isAtleastOneTypeInProfile,
       );
-      const isBurstingSupportedForInstance = AwsReactInjector.awsInstanceTypeService.isBurstingSupported(instanceType);
-      setShowToggle(instanceType && isTypeInProfile && isBurstingSupportedForInstance);
     }
-  }, [props.newProfileType, props.newInstanceType]);
-
-  const handleToggleChange = (state: boolean) => {
-    props.setUnlimitedCpuCredits(state);
-  };
+  }, [currentProfile, selectedInstanceTypes]);
 
   return (
-    <div>
+    <div className={'row'} style={{ fontSize: '110%' }}>
       {showToggle && (
-        <div className="row">
+        <div>
           <ToggleButtonGroup
             toggleSize={ToggleSize.XSMALL}
             propLabel={'Unlimited CPU credits '}
@@ -52,8 +52,8 @@ export function CpuCreditsToggle(props: ICpuCreditsToggleProps) {
             displayTextPropOffBtn={'Off'}
             tooltipPropOnBtn={'Toggle to turn ON unlimited CPU credits'}
             displayTextPropOnBtn={'On'}
-            onClick={handleToggleChange}
-            isPropertyActive={props.command.unlimitedCpuCredits}
+            onClick={(b) => props.setUnlimitedCpuCredits(b)}
+            isPropertyActive={props.unlimitedCpuCredits}
           />
         </div>
       )}

package/src/serverGroup/configure/wizard/instanceType/InstanceTypeSelector.tsx

@@ -0,0 +1,133 @@
+import type { FormikProps } from 'formik/dist/types';
+import React, { useEffect, useState } from 'react';
+
+import type { IInstanceTypeCategory } from '@spinnaker/core';
+import { HelpField } from '@spinnaker/core';
+
+import { AdvancedModeSelector } from './advancedMode/AdvancedModeSelector';
+import { AWSProviderSettings } from '../../../../aws.settings';
+import type { IAmazonInstanceTypeOverride, IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+import { SimpleModeSelector } from './simpleMode/SimpleModeSelector';
+
+export interface IInstanceTypeSelectorProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+  instanceTypeDetails: IInstanceTypeCategory[];
+}
+
+export function InstanceTypeSelector(props: IInstanceTypeSelectorProps) {
+  const { instanceTypeDetails } = props;
+  const { values: command, setFieldValue } = props.formik;
+  const isLaunchTemplatesEnabled = AWSProviderSettings.serverGroups?.enableLaunchTemplates;
+
+  const useSimpleMode = command.viewState.useSimpleInstanceTypeSelector;
+  const [unlimitedCpuCredits, setUnlimitedCpuCredits] = useState(command.unlimitedCpuCredits);
+
+  useEffect(() => {
+    if (command.unlimitedCpuCredits !== unlimitedCpuCredits) {
+      setFieldValue('unlimitedCpuCredits', unlimitedCpuCredits);
+    }
+  }, [unlimitedCpuCredits]);
+
+  const handleModeChange = (useSimpleModeNew: boolean) => {
+    if (useSimpleMode !== useSimpleModeNew) {
+      setFieldValue('viewState', {
+        ...command.viewState,
+        useSimpleInstanceTypeSelector: useSimpleModeNew,
+      });
+
+      // update selected instance type(s) if mode changed.
+      // Simple mode uses command.instanceType to track selected type. Advanced mode uses command.launchTemplateOverridesForInstanceType to track selected types.
+      const multipleInstanceTypesInProps = command.launchTemplateOverridesForInstanceType;
+      const singleInstanceTypeInProps = command.instanceType;
+
+      const toSimple = useSimpleModeNew && multipleInstanceTypesInProps?.length;
+      const toAdvanced = !useSimpleModeNew && singleInstanceTypeInProps;
+      if (toSimple) {
+        const highestPriorityNum = Math.min(...multipleInstanceTypesInProps.map((it) => it.priority));
+        const instanceTypeWithHighestPriority = multipleInstanceTypesInProps.find(
+          (it) => it.priority === highestPriorityNum,
+        ).instanceType;
+
+        setFieldValue('instanceType', instanceTypeWithHighestPriority);
+        setFieldValue('launchTemplateOverridesForInstanceType', []);
+        command.instanceTypeChanged(command);
+      } else if (toAdvanced) {
+        const instanceTypes: IAmazonInstanceTypeOverride[] = [
+          {
+            instanceType: singleInstanceTypeInProps,
+            priority: 1,
+          },
+        ];
+        setFieldValue('instanceType', undefined);
+        setFieldValue('launchTemplateOverridesForInstanceType', instanceTypes);
+        command.launchTemplateOverridesChanged(command);
+      }
+    }
+  };
+
+  const showAdvancedMode = isLaunchTemplatesEnabled && !useSimpleMode;
+  if (showAdvancedMode) {
+    return (
+      <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
+        <div>
+          <p>
+            To configure a single instance type, use
+            <a className="clickable" onClick={() => handleModeChange(true)}>
+              <span> Simple Mode</span>
+            </a>
+            .
+          </p>
+          <i>
+            <b>Note:</b> If multiple instance types are already selected in advanced mode, the instance type with
+            highest priority will be preserved in simple mode.
+          </i>
+        </div>
+        <AdvancedModeSelector
+          formik={props.formik}
+          instanceTypeDetails={instanceTypeDetails}
+          setUnlimitedCpuCredits={setUnlimitedCpuCredits}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
+      <div>
+        <span>To configure mixed server groups with multiple instance types,</span>
+        {!isLaunchTemplatesEnabled && (
+          <span>
+            <a
+              href={
+                'https://spinnaker.io/docs/setup/other_config/server-group-launch-settings/aws-ec2/launch-templates-setup/'
+              }
+            >
+              <span> enable launch templates</span>
+            </a>
+            <span> and</span>
+          </span>
+        )}
+        <span>
+          <a
+            className={isLaunchTemplatesEnabled ? 'clickable' : 'disabled'}
+            onClick={isLaunchTemplatesEnabled ? () => handleModeChange(false) : () => {}}
+          >
+            <span> use Advanced Mode </span>
+          </a>
+          <HelpField id={'aws.serverGroup.advancedMode'} />.
+        </span>
+        <p></p>
+        {isLaunchTemplatesEnabled && (
+          <i>
+            <b>Note:</b> If an instance type is already selected in simple mode, it will be preserved in advanced mode.
+          </i>
+        )}
+      </div>
+      <SimpleModeSelector
+        command={command}
+        setUnlimitedCpuCredits={setUnlimitedCpuCredits}
+        setFieldValue={setFieldValue}
+      />
+    </div>
+  );
+}

package/src/serverGroup/configure/wizard/instanceType/advancedMode/AdvancedModeSelector.tsx

@@ -0,0 +1,99 @@
+import type { FormikProps } from 'formik/dist/types';
+import { keyBy } from 'lodash';
+import React, { useEffect, useState } from 'react';
+
+import { usePrevious } from '@spinnaker/core';
+
+import { InstanceProfileSelector } from './InstanceProfileSelector';
+import { InstanceTypeTable } from './InstanceTypeTable';
+import { InstancesDistribution } from './InstancesDistribution';
+import type { IAmazonInstanceTypeCategory } from '../../../../../instance/awsInstanceType.service';
+import { AwsReactInjector } from '../../../../../reactShims';
+import type { IAmazonInstanceTypeOverride, IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface IAdvancedModeSelectorProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+  instanceTypeDetails: IAmazonInstanceTypeCategory[];
+  setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
+}
+
+/**
+ * Note: Launch templates support is expected to be enabled if this component is rendered.
+ */
+export function AdvancedModeSelector(props: IAdvancedModeSelectorProps) {
+  const { instanceTypeDetails, setUnlimitedCpuCredits } = props;
+  const { values: command, setFieldValue } = props.formik;
+
+  // for the case of MixedInstancesPolicy without overrides, copy command.instanceType to command.launchTemplateOverridesForInstanceType
+  const { instanceType, launchTemplateOverridesForInstanceType } = command;
+  useEffect(() => {
+    if (!launchTemplateOverridesForInstanceType && instanceType) {
+      props.formik.setFieldValue('launchTemplateOverridesForInstanceType', [
+        { instanceType: command.instanceType, priority: 1 },
+      ]);
+    }
+  });
+
+  const instanceTypesInProps: IAmazonInstanceTypeOverride[] = command.launchTemplateOverridesForInstanceType
+    ? command.launchTemplateOverridesForInstanceType
+    : undefined;
+
+  const selectedInstanceTypesMap = new Map<string, IAmazonInstanceTypeOverride>(
+    Object.entries(keyBy(instanceTypesInProps, 'instanceType')),
+  );
+
+  const [instanceProfile, setInstanceProfile] = useState(command.viewState.instanceProfile || 'custom');
+  const prevInstanceProfile = usePrevious(instanceProfile);
+
+  const handleProfileChange = (newProfile: string) => {
+    setInstanceProfile(newProfile);
+    setFieldValue('viewState', {
+      ...command.viewState,
+      instanceProfile: newProfile,
+    });
+
+    // update instance types on profile change
+    const hasProfileChanged = prevInstanceProfile && newProfile && prevInstanceProfile !== newProfile;
+    const isInstanceTypesUpdateNeeded = newProfile !== 'custom' && instanceTypesInProps && instanceTypesInProps.length;
+    if (hasProfileChanged && isInstanceTypesUpdateNeeded) {
+      const instanceTypesInProfile: string[] = AwsReactInjector.awsInstanceTypeService.getInstanceTypesInCategory(
+        instanceTypesInProps.map((it) => it.instanceType),
+        newProfile,
+      );
+      const newMultipleTypes = instanceTypesInProps.filter((o) => instanceTypesInProfile.includes(o.instanceType));
+      setFieldValue('launchTemplateOverridesForInstanceType', newMultipleTypes);
+      command.launchTemplateOverridesChanged(command);
+    }
+  };
+
+  const handleInstanceTypesChange = (types: IAmazonInstanceTypeOverride[]): void => {
+    setFieldValue('launchTemplateOverridesForInstanceType', types);
+    command.launchTemplateOverridesChanged(command);
+  };
+
+  if (!(instanceTypeDetails && instanceTypeDetails.length > 0)) {
+    return null;
+  }
+
+  return (
+    <div className={'advanced-mode-selector'}>
+      <InstanceProfileSelector
+        currentProfile={instanceProfile}
+        handleProfileChange={handleProfileChange}
+        instanceProfileList={instanceTypeDetails}
+      />
+      <InstancesDistribution formik={props.formik} />
+      <InstanceTypeTable
+        currentProfile={instanceProfile}
+        selectedInstanceTypesMap={selectedInstanceTypesMap}
+        unlimitedCpuCreditsInCmd={command.unlimitedCpuCredits}
+        profileDetails={instanceTypeDetails.find((p) => p.type === instanceProfile)}
+        availableInstanceTypesList={
+          (command.backingData && command.backingData.filtered && command.backingData.filtered.instanceTypes) || []
+        }
+        handleInstanceTypesChange={handleInstanceTypesChange}
+        setUnlimitedCpuCredits={setUnlimitedCpuCredits}
+      />
+    </div>
+  );
+}

package/src/serverGroup/configure/wizard/instanceType/advancedMode/InstanceProfileSelector.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { IAmazonInstanceTypeCategory } from '../../../../../instance/awsInstanceType.service';
+
+import './advancedMode.less';
+
+export interface IInstanceProfileSelectorProps {
+  currentProfile: string;
+  handleProfileChange: (profile: string) => void;
+  instanceProfileList: IAmazonInstanceTypeCategory[];
+}
+
+export function InstanceProfileSelector(props: IInstanceProfileSelectorProps) {
+  return (
+    <div>
+      <h4 style={{ marginTop: '10px' }}>This application is</h4>
+      {props.instanceProfileList.map((profile) => (
+        <div key={profile.type} className={`instance-profile-header profile-button`}>
+          <button
+            type="button"
+            onClick={() => props.handleProfileChange(profile.type)}
+            className={props.currentProfile === profile.type ? 'instance-profile active' : 'instance-profile'}
+          >
+            {props.currentProfile === profile.type && <span className="far fa-check-circle selected-indicator" />}
+            <div className="panel-heading">
+              <h4>
+                <span className={`glyphicon glyphicon-${profile.icon}`} />
+                <div>{profile.label}</div>
+              </h4>
+            </div>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/serverGroup/configure/wizard/instanceType/advancedMode/InstanceTypeRow.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Checkbox } from 'react-bootstrap';
+import { SortableHandle } from 'react-sortable-hoc';
+import { TextInput, Tooltip } from '@spinnaker/core';
+import type { IAmazonPreferredInstanceType } from '../../../../../instance/awsInstanceType.service';
+import { CostFactor } from '../../../../../instance/details/CostFactor';
+import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
+
+export interface IRowProps {
+  isCustom: boolean;
+  selectedType?: IAmazonInstanceTypeOverride;
+  instanceTypeDetails?: IAmazonPreferredInstanceType;
+  removeInstanceType?: (typeToRemove: string) => void;
+  addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
+}
+
+export function InstanceTypeRow(props: IRowProps) {
+  const isRowSelected = props.selectedType ? true : false;
+  const [newWeightedCap, setNewWeightedCap] = useState('');
+  const instanceType = isRowSelected ? props.selectedType.instanceType : props.instanceTypeDetails.name;
+  const disableRow = isRowSelected ? false : props.instanceTypeDetails.unavailable;
+
+  const selectOrUpdateRow = (instanceType: string, weight: string) => {
+    if (!disableRow) {
+      props.addOrUpdateInstanceType(instanceType, weight);
+    }
+    setNewWeightedCap('');
+  };
+
+  const handleWeightChange = (e: React.ChangeEvent<any>): void => {
+    setNewWeightedCap(e.target.value);
+    if (isRowSelected) {
+      selectOrUpdateRow(instanceType, e.target.value);
+    } else {
+      document.getElementById(`selectInstanceType-${instanceType}`).focus();
+    }
+  };
+
+  let row;
+  if (props.isCustom) {
+    row = (
+      <tr key={instanceType} className={'sortable clickable'}>
+        <td>
+          <DragHandle />
+        </td>
+        <td>{instanceType}</td>
+        <td title={'Enter optional weight (allowed values: 1 to 999).'}>
+          <TextInput
+            className={'form-control input input-sm'}
+            pattern="[0-9]*"
+            placeholder="Enter optional weight (allowed values: 1 to 999)."
+            value={props.selectedType?.weightedCapacity || ''}
+            onChange={(e) => selectOrUpdateRow(instanceType, e.target.value)}
+          />
+        </td>
+        <td>
+          <div>
+            <span>
+              <a
+                className="btn btn-sm btn-link clickable"
+                onClick={() => props.removeInstanceType(instanceType)}
+                style={{ padding: '5px' }}
+              >
+                <Tooltip value={'Remove instance type'}>
+                  <span className="glyphicon glyphicon-trash" />
+                </Tooltip>
+              </a>
+            </span>
+          </div>
+        </td>
+      </tr>
+    );
+  } else {
+    const { cpu, memory, cpuCreditsPerHour, storage, costFactor } = props.instanceTypeDetails;
+    row = (
+      <tr
+        key={instanceType}
+        className={isRowSelected ? 'sortable clickable' : `non-sortable ${disableRow ? 'unavailable' : 'clickable'}`}
+        title={
+          isRowSelected
+            ? 'Click to unselect instance type'
+            : disableRow
+            ? 'This instance type is not available for the selected configuration'
+            : 'Click to select instance type'
+        }
+        onClick={(e) => {
+          if (!$(e.target).is('input')) {
+            isRowSelected ? props.removeInstanceType(instanceType) : selectOrUpdateRow(instanceType, newWeightedCap);
+          }
+        }}
+      >
+        {isRowSelected ? (
+          <td>
+            <DragHandle />
+          </td>
+        ) : (
+          <td></td>
+        )}
+        <td>
+          <Checkbox
+            id={`selectInstanceType-${instanceType}`}
+            checked={isRowSelected ? true : false}
+            disabled={disableRow}
+            onChange={() => {
+              isRowSelected ? props.removeInstanceType(instanceType) : selectOrUpdateRow(instanceType, newWeightedCap);
+            }}
+          />
+        </td>
+        <td>{instanceType}</td>
+        <td>{cpu}</td>
+        <td>{memory}</td>
+        {cpuCreditsPerHour ? (
+          <td>{cpuCreditsPerHour}</td>
+        ) : (
+          <td title={'Cpu credits not applicable to instance type.'}>-</td>
+        )}
+        {storage.type === 'EBS' && <td>EBS Only</td>}
+        {storage.type === 'SSD' && <td>{storage.count + 'x' + storage.size}</td>}
+        <td>
+          <CostFactor min={costFactor} />
+        </td>
+        <td title={!disableRow ? 'Enter optional weight (allowed values: 1 to 999).' : ''}>
+          <TextInput
+            inputClassName={'form-control input input-sm'}
+            id={`weightedCapacity-${instanceType}`}
+            pattern="[0-9]*"
+            placeholder="Enter optional weight (allowed values: 1 to 999)."
+            disabled={disableRow}
+            value={props.selectedType?.weightedCapacity || newWeightedCap || ''}
+            onChange={handleWeightChange}
+          />
+        </td>
+      </tr>
+    );
+  }
+
+  return row;
+}
+
+const DragHandle = SortableHandle(() => (
+  <Tooltip value={'Drag to change priority'}>
+    <span className="instance-type-drag-handle glyphicon glyphicon-resize-vertical" />
+  </Tooltip>
+));

package/src/serverGroup/configure/wizard/instanceType/advancedMode/InstanceTypeTable.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import type { SortEnd } from 'react-sortable-hoc';
+import { arrayMove } from 'react-sortable-hoc';
+
+import { CpuCreditsToggle } from '../CpuCreditsToggle';
+import { InstanceTypeTableBody } from './InstanceTypeTableBody';
+import { Header, Heading } from './InstanceTypeTableParts';
+import { Footer } from './InstanceTypeTableParts';
+import { AWSProviderSettings } from '../../../../../aws.settings';
+import type { IAmazonInstanceTypeCategory } from '../../../../../instance/awsInstanceType.service';
+import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
+
+import './advancedMode.less';
+
+export interface IInstanceTypeTableProps {
+  currentProfile: string;
+  selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
+  unlimitedCpuCreditsInCmd: boolean;
+  profileDetails: IAmazonInstanceTypeCategory;
+  availableInstanceTypesList: string[];
+  handleInstanceTypesChange: (instanceTypes: IAmazonInstanceTypeOverride[]) => void;
+  setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
+}
+
+export function InstanceTypeTable(props: IInstanceTypeTableProps) {
+  const { currentProfile, selectedInstanceTypesMap } = props;
+
+  const handleSortEnd = (sortEnd: SortEnd): void => {
+    const sortedInstanceTypes: string[] = Array.from(selectedInstanceTypesMap.values())
+      .sort((i1, i2) => i1.priority - i2.priority)
+      .map((it) => it.instanceType);
+    const instanceTypesInNewOrder = arrayMove(sortedInstanceTypes, sortEnd.oldIndex, sortEnd.newIndex);
+
+    updatePriorityForSelectedTypes(instanceTypesInNewOrder);
+  };
+
+  const updatePriorityForSelectedTypes = (instanceTypesInNewOrder: string[]): void => {
+    selectedInstanceTypesMap.forEach((value, key) => {
+      const newPriority = 1 + instanceTypesInNewOrder.indexOf(key);
+      if (value.priority !== newPriority) {
+        value.priority = newPriority;
+      }
+    });
+    props.handleInstanceTypesChange(Array.from(selectedInstanceTypesMap.values()));
+  };
+
+  const removeInstanceType = (instanceType: string): void => {
+    const selectedInstanceTypesMapNew = new Map(selectedInstanceTypesMap);
+    selectedInstanceTypesMapNew.delete(instanceType);
+    props.handleInstanceTypesChange(Array.from(selectedInstanceTypesMapNew.values()));
+  };
+
+  const addOrUpdateInstanceType = (type: string, weight: string) => {
+    const weightNum = Number(weight);
+    const weightedCapacity = isNaN(weightNum) || weightNum === 0 ? undefined : weightNum.toString();
+    const itemToUpdate = selectedInstanceTypesMap.has(type)
+      ? {
+          ...selectedInstanceTypesMap.get(type), // update existing item
+          weightedCapacity,
+        }
+      : {
+          instanceType: type, // new item
+          weightedCapacity,
+          priority:
+            1 +
+            Array.from(selectedInstanceTypesMap.values()).reduce(
+              (max, it) => (it.priority > max ? it.priority : max),
+              0,
+            ),
+        };
+    selectedInstanceTypesMap.set(type, itemToUpdate);
+    props.handleInstanceTypesChange(Array.from(selectedInstanceTypesMap.values()));
+  };
+
+  const isCpuCreditsEnabled: boolean = AWSProviderSettings.serverGroups?.enableCpuCredits;
+  const selectedInstanceTypeNames = Array.from(selectedInstanceTypesMap.keys());
+  const cpuCreditsToggle = (
+    <div>
+      <CpuCreditsToggle
+        unlimitedCpuCredits={props.unlimitedCpuCreditsInCmd}
+        currentProfile={currentProfile}
+        selectedInstanceTypes={selectedInstanceTypeNames}
+        setUnlimitedCpuCredits={props.setUnlimitedCpuCredits}
+      />
+    </div>
+  );
+
+  if (currentProfile && currentProfile !== 'custom') {
+    const { label, descriptionListOverride, families, showCpuCredits } = props.profileDetails;
+    const isCustom = false;
+    return (
+      <div className={'row sub-section'}>
+        <Heading
+          isCustom={isCustom}
+          profileLabel={label}
+          profileDescriptionArr={descriptionListOverride ? descriptionListOverride : families.map((f) => f.description)}
+        />
+        {isCpuCreditsEnabled && cpuCreditsToggle}
+        <table className="table table-hover">
+          <Header isCustom={isCustom} showCpuCredits={showCpuCredits} />
+          <InstanceTypeTableBody
+            isCustom={isCustom}
+            profileFamiliesDetails={families}
+            selectedInstanceTypesMap={selectedInstanceTypesMap}
+            addOrUpdateInstanceType={addOrUpdateInstanceType}
+            removeInstanceType={removeInstanceType}
+            handleSortEnd={handleSortEnd}
+          />
+        </table>
+      </div>
+    );
+  } else {
+    const isCustom = true;
+    return (
+      <div className={'row sub-section'}>
+        <Heading isCustom={isCustom} />
+        {isCpuCreditsEnabled && cpuCreditsToggle}
+        <table className="table table-hover">
+          <Header isCustom={isCustom} />
+          <InstanceTypeTableBody
+            isCustom={isCustom}
+            selectedInstanceTypesMap={selectedInstanceTypesMap}
+            addOrUpdateInstanceType={addOrUpdateInstanceType}
+            removeInstanceType={removeInstanceType}
+            handleSortEnd={handleSortEnd}
+          />
+          <Footer
+            isCustom={isCustom}
+            availableInstanceTypesList={props.availableInstanceTypesList.filter(
+              (it) => !selectedInstanceTypeNames.includes(it),
+            )}
+            addOrUpdateInstanceType={addOrUpdateInstanceType}
+          />
+        </table>
+      </div>
+    );
+  }
+}