@spinnaker/amazon 0.11.0 → 0.12.2

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,137 @@
+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 itemToUpdate = selectedInstanceTypesMap.has(type)
+      ? {
+          ...selectedInstanceTypesMap.get(type), // update existing item
+          weightedCapacity: !isNaN(weightNum) && weightNum !== 0 ? weightNum : undefined,
+        }
+      : {
+          instanceType: type, // new item
+          weightedCapacity: !isNaN(weightNum) && weightNum !== 0 ? weightNum : undefined,
+          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>
+    );
+  }
+}

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

@@ -0,0 +1,135 @@
+import { difference, flatten, keyBy } from 'lodash';
+import React from 'react';
+import type { SortEnd } from 'react-sortable-hoc';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+
+import type { IInstanceTypeFamily } from '@spinnaker/core';
+
+import { InstanceTypeRow } from './InstanceTypeRow';
+import type { IAmazonPreferredInstanceType } from '../../../../../instance/awsInstanceType.service';
+import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
+
+export function InstanceTypeTableBody(props: {
+  isCustom: boolean;
+  profileFamiliesDetails?: IInstanceTypeFamily[];
+  selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
+  addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
+  removeInstanceType: (instanceType: string) => void;
+  handleSortEnd: (sortEnd: SortEnd) => void;
+}) {
+  return (
+    <TableRows
+      isCustom={props.isCustom}
+      selectedInstanceTypesMap={props.selectedInstanceTypesMap}
+      removeInstanceType={props.removeInstanceType}
+      addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+      instanceTypeDetails={
+        props.isCustom
+          ? null
+          : new Map(
+              Object.entries(
+                keyBy(flatten(props.profileFamiliesDetails.map((f: IInstanceTypeFamily) => f.instanceTypes)), 'name'),
+              ),
+            )
+      }
+      onSortEnd={(sortEnd) => props.handleSortEnd(sortEnd)}
+      distance={1}
+    />
+  );
+}
+
+const TableRows = SortableContainer(
+  (props: {
+    isCustom: boolean;
+    instanceTypeDetails?: Map<string, IAmazonPreferredInstanceType>;
+    selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
+    removeInstanceType: (typeToRemove: string) => void;
+    addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
+  }) => {
+    const { isCustom, selectedInstanceTypesMap } = props;
+
+    let selectedRows, unselectedRows;
+    if (isCustom) {
+      selectedRows =
+        selectedInstanceTypesMap.size > 0 &&
+        Array.from(selectedInstanceTypesMap.values())
+          .sort((i1, i2) => i1.priority - i2.priority)
+          .map((selectedType, index: number) => (
+            <SortableRow
+              key={`${selectedType.instanceType}-${index}`}
+              index={index}
+              isCustom={true}
+              selectedType={selectedType}
+              removeInstanceType={props.removeInstanceType}
+              addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+            />
+          ));
+    } else {
+      const { instanceTypeDetails } = props;
+      const instanceTypesInProfile: string[] = Array.from(instanceTypeDetails?.keys());
+      const unselectedInstanceTypes: string[] = difference(
+        instanceTypesInProfile,
+        Array.from(selectedInstanceTypesMap.keys()),
+      );
+
+      const selectedRowsOrdered: IAmazonInstanceTypeOverride[] = Array.from(selectedInstanceTypesMap.values())
+        .filter((selectedType: IAmazonInstanceTypeOverride) =>
+          instanceTypesInProfile.includes(selectedType.instanceType),
+        )
+        .sort((i1, i2) => i1.priority - i2.priority);
+
+      selectedRows =
+        selectedRowsOrdered &&
+        selectedRowsOrdered.length > 0 &&
+        selectedRowsOrdered.map((selectedType: IAmazonInstanceTypeOverride, index: number) => (
+          <SortableRow
+            key={`${selectedType.instanceType}-${index}`}
+            index={index}
+            isCustom={false}
+            selectedType={selectedType}
+            instanceTypeDetails={instanceTypeDetails}
+            removeInstanceType={props.removeInstanceType}
+            addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+          />
+        ));
+
+      unselectedRows =
+        unselectedInstanceTypes &&
+        unselectedInstanceTypes.length > 0 &&
+        unselectedInstanceTypes.map((instanceType) => (
+          <InstanceTypeRow
+            key={instanceType}
+            isCustom={false}
+            instanceTypeDetails={instanceTypeDetails.get(instanceType)}
+            addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+          />
+        ));
+    }
+
+    return (
+      <tbody>
+        {selectedRows}
+        {!isCustom ? unselectedRows : null}
+      </tbody>
+    );
+  },
+);
+
+const SortableRow = SortableElement(
+  (props: {
+    isCustom: boolean;
+    selectedType: IAmazonInstanceTypeOverride;
+    instanceTypeDetails?: Map<string, IAmazonPreferredInstanceType>;
+    removeInstanceType: (typeToRemove: string) => void;
+    addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
+  }) => (
+    <InstanceTypeRow
+      key={props.selectedType.instanceType}
+      isCustom={props.isCustom}
+      selectedType={props.selectedType}
+      instanceTypeDetails={!props.isCustom ? props.instanceTypeDetails.get(props.selectedType.instanceType) : null}
+      removeInstanceType={props.removeInstanceType}
+      addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+    />
+  ),
+);

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import { HelpField } from '@spinnaker/core';
+
+export function Heading(props: { isCustom: boolean; profileLabel?: string; profileDescriptionArr?: string[] }) {
+  let description;
+  if (props.isCustom) {
+    description = <p>Choose the instance types that best suit the needs of your application.</p>;
+  } else {
+    description = (
+      <>
+        <p>
+          <b>{props.profileLabel}</b>
+        </p>
+        <ul>
+          {props.profileDescriptionArr.map((d, index) => (
+            <li key={index}>{d}</li>
+          ))}
+        </ul>
+      </>
+    );
+  }
+
+  return (
+    <div className={'row sub-section'}>
+      <h4>Instance Types</h4>
+      <div className={'description'}>
+        {description}
+        <i>
+          <b>Note:</b>
+          <ul>
+            <li>
+              The order of instance types sets their priority when On-Demand capacity is launched; instance type at the
+              top is prioritized the highest.
+            </li>
+            <li>Some instance types might not be available for the selected configuration.</li>
+          </ul>
+        </i>
+      </div>
+    </div>
+  );
+}
+
+export function Header(props: { isCustom: boolean; showCpuCredits?: boolean }) {
+  let emptyHeaders, instanceTypeHeader, otherHeaders, tailingEmptyHeader;
+  if (props.isCustom) {
+    emptyHeaders = <th />;
+    instanceTypeHeader = (
+      <th>
+        Instance Type <HelpField id="aws.serverGroup.instanceTypes" />
+      </th>
+    );
+    otherHeaders = null;
+    tailingEmptyHeader = <th />;
+  } else {
+    emptyHeaders = (
+      <>
+        <th />
+        <th />
+      </>
+    );
+    instanceTypeHeader = <th>InstanceType</th>;
+    otherHeaders = (
+      <>
+        <th>vCPU</th>
+        <th>Mem (GiB)</th>
+        {props.showCpuCredits && <th>CPU Credits</th>}
+        <th>
+          Storage (GB)
+          <HelpField id={'aws.serverGroup.storageType'} />
+        </th>
+        <th>Cost</th>
+      </>
+    );
+    tailingEmptyHeader = null;
+  }
+
+  return (
+    <thead>
+      <tr>
+        {emptyHeaders}
+        {instanceTypeHeader}
+        {otherHeaders}
+        <th>
+          Weight <HelpField id="aws.serverGroup.instanceTypeWeight" />
+        </th>
+        {tailingEmptyHeader}
+      </tr>
+    </thead>
+  );
+}
+
+export function Footer(props: {
+  isCustom: boolean;
+  availableInstanceTypesList: string[];
+  addOrUpdateInstanceType: (type: string, weight: string) => void;
+}) {
+  return props.isCustom ? (
+    <tfoot>
+      <tr>
+        <td>
+          <span className={'glyphicon glyphicon-plus-sign'} style={{ paddingTop: '8px' }} />
+        </td>
+        <td colSpan={2}>
+          <InstanceTypeSelect
+            availableInstanceTypesList={props.availableInstanceTypesList}
+            addOrUpdateInstanceType={props.addOrUpdateInstanceType}
+          />
+        </td>
+        <td></td>
+      </tr>
+    </tfoot>
+  ) : null;
+}
+
+const InstanceTypeSelect = (props: {
+  availableInstanceTypesList: string[];
+  addOrUpdateInstanceType: (type: string, weight: string) => void;
+}): JSX.Element => {
+  const instanceTypeListOptions = props.availableInstanceTypesList.map((instanceType) => {
+    return { label: instanceType, value: instanceType };
+  });
+
+  return (
+    <Select
+      clearable={false}
+      multi={false}
+      placeholder={'Select an instance type to add...'}
+      removeSelected={true}
+      searchable={true}
+      options={instanceTypeListOptions}
+      onChange={(o: Option<string>) => props.addOrUpdateInstanceType(o.value, undefined)}
+    />
+  );
+};

package/src/serverGroup/configure/wizard/instanceType/advancedMode/InstancesDistribution.less

@@ -0,0 +1,5 @@
+.InstancesDistribution {
+  .StandardFieldLayout_Label {
+    min-width: 300px;
+  }
+}

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

@@ -0,0 +1,108 @@
+import type { FormikProps } from 'formik';
+import { get } from 'lodash';
+import React from 'react';
+
+import { FormikFormField, HelpField, NumberInput, ReactSelectInput, TextInput, Tooltip } from '@spinnaker/core';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+import './InstancesDistribution.less';
+
+export interface IInstancesDistributionProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+function useDefaultFormikValue(formik: FormikProps<IAmazonServerGroupCommand>, field: string, defaultValue: any) {
+  const value = get(formik.values, field);
+  React.useEffect(() => {
+    if (value === undefined && defaultValue !== undefined) {
+      formik.setFieldValue(field, defaultValue);
+    }
+  }, [field, defaultValue, value]);
+}
+
+export function InstancesDistribution(props: IInstancesDistributionProps) {
+  const { values: command, setFieldValue } = props.formik;
+
+  const spotAllocStrategyOptions = [
+    { label: 'capacity-optimized (recommended)', value: 'capacity-optimized' },
+    { label: 'capacity-optimized-prioritized', value: 'capacity-optimized-prioritized' },
+    { label: 'lowest-price', value: 'lowest-price' },
+  ];
+
+  // When allocation strategy toggles to/from lowest-price, update spotInstancePools
+  React.useEffect(() => {
+    if (command.spotAllocationStrategy !== 'lowest-price') {
+      setFieldValue('spotInstancePools', undefined);
+    } else if (command.spotInstancePools === undefined) {
+      setFieldValue('spotInstancePools', 2);
+    }
+  }, [command.spotAllocationStrategy]);
+
+  useDefaultFormikValue(props.formik, 'spotAllocationStrategy', 'capacity-optimized');
+
+  // prioritized is the only supported strategy for now
+  useDefaultFormikValue(props.formik, 'onDemandAllocationStrategy', 'prioritized');
+
+  // AWS defaults
+  useDefaultFormikValue(props.formik, 'onDemandBaseCapacity', 0);
+  useDefaultFormikValue(props.formik, 'onDemandPercentageAboveBaseCapacity', 100);
+
+  return (
+    <div className={'InstancesDistribution row sub-section form-group'}>
+      <h4>Instances Distribution</h4>
+      <div className={'description'}>
+        Diversify and distribute instance types across purchase options.{' '}
+        <HelpField id={'aws.serverGroup.instancesDistribution'} />
+      </div>
+      <br />
+
+      <FormikFormField
+        label={'Spot Allocation Strategy'}
+        name={'spotAllocationStrategy'}
+        help={<HelpField id={'aws.serverGroup.spotAllocationStrategy'} />}
+        input={(inputProps) => <ReactSelectInput {...inputProps} mode="PLAIN" options={spotAllocStrategyOptions} />}
+      />
+
+      {props.formik.values.spotAllocationStrategy === 'lowest-price' && (
+        <FormikFormField
+          label={'Spot Instance Pools Count'}
+          name={'spotInstancePools'}
+          help={<HelpField id={'aws.serverGroup.spotInstancePoolCount'} />}
+          input={(inputProps) => <NumberInput {...inputProps} />}
+        />
+      )}
+
+      <FormikFormField
+        label={'On-Demand Allocation Strategy'}
+        name={'onDemandAllocationStrategy'}
+        help={<HelpField id={'aws.serverGroup.odAllocationStrategy'} />}
+        input={(inputProps) => <TextInput {...inputProps} disabled={true} />}
+      />
+
+      <FormikFormField
+        label={'On-Demand Base Capacity'}
+        name={'onDemandBaseCapacity'}
+        help={<HelpField id={'aws.serverGroup.odBase'} />}
+        input={(inputProps) => <NumberInput {...inputProps} />}
+      />
+
+      <FormikFormField
+        label={'On-Demand Percentage Above Base Capacity'}
+        name={'onDemandPercentageAboveBaseCapacity'}
+        help={<HelpField id={'aws.serverGroup.odPercentAboveBase'} />}
+        input={(inputProps) => <NumberInput {...inputProps} />}
+      />
+
+      <FormikFormField
+        label={'Spot Max Price'}
+        name={'spotPrice'}
+        help={<HelpField id={'aws.serverGroup.spotMaxPrice'} />}
+        input={(inputProps) => (
+          <Tooltip value={'Recommended to leave empty and use AWS default i.e. On-Demand price'}>
+            <TextInput {...inputProps} />
+          </Tooltip>
+        )}
+      />
+    </div>
+  );
+}