@spinnaker/amazon 0.0.0-main-2

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

@@ -0,0 +1,167 @@
+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, setFieldValue } = props.formik;
+  const isLaunchTemplatesEnabled = AWSProviderSettings.serverGroups?.enableLaunchTemplates;
+
+  const useSimpleMode = values.viewState.useSimpleInstanceTypeSelector;
+  const [unlimitedCpuCredits, setUnlimitedCpuCredits] = useState(values.unlimitedCpuCredits);
+
+  useEffect(() => {
+    if (values.unlimitedCpuCredits !== unlimitedCpuCredits) {
+      setFieldValue('unlimitedCpuCredits', unlimitedCpuCredits);
+    }
+  }, [unlimitedCpuCredits]);
+
+  const clearWarnings = () => {
+    const { formik } = props;
+
+    // clear for both keys to support consistency between simple and advanced modes
+    formik.values.viewState.dirty['instanceType'] = null;
+    formik.values.viewState.dirty['launchTemplateOverridesForInstanceType'] = null;
+
+    formik.validateForm();
+  };
+
+  const handleModeChange = (useSimpleModeNew: boolean) => {
+    if (useSimpleMode !== useSimpleModeNew) {
+      setFieldValue('viewState', {
+        ...values.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.
+      if (useSimpleModeNew) {
+        const multipleInstanceTypesInProps = values.launchTemplateOverridesForInstanceType;
+        const dirtyMultipleInstanceTypesInProps = values.viewState.dirty.launchTemplateOverridesForInstanceType;
+
+        if (multipleInstanceTypesInProps?.length) {
+          const instanceTypeWithHighestPriority = multipleInstanceTypesInProps.reduce((prev, current) => {
+            return prev.priority < current.priority ? prev : current;
+          }).instanceType;
+          setFieldValue('instanceType', instanceTypeWithHighestPriority);
+          setFieldValue('launchTemplateOverridesForInstanceType', []);
+          values.instanceTypeChanged(values);
+        }
+
+        if (dirtyMultipleInstanceTypesInProps?.length) {
+          const instanceTypeWithHighestPriorityDirty = dirtyMultipleInstanceTypesInProps.reduce((prev, current) => {
+            return prev.priority < current.priority ? prev : current;
+          }).instanceType;
+          setFieldValue('viewState.dirty.instanceType', instanceTypeWithHighestPriorityDirty);
+          setFieldValue('viewState.dirty.launchTemplateOverridesForInstanceType', []);
+        }
+      } else if (!useSimpleModeNew) {
+        const singleInstanceTypeInProps = values.instanceType;
+        const dirtySingleInstanceTypeInProps = values.viewState.dirty.instanceType;
+
+        if (singleInstanceTypeInProps) {
+          const instanceTypes: IAmazonInstanceTypeOverride[] = [
+            {
+              instanceType: singleInstanceTypeInProps,
+              priority: 1,
+            },
+          ];
+          setFieldValue('instanceType', undefined);
+          setFieldValue('launchTemplateOverridesForInstanceType', instanceTypes);
+          values.launchTemplateOverridesChanged(values);
+        }
+
+        if (dirtySingleInstanceTypeInProps) {
+          const dirtyInstanceTypes: IAmazonInstanceTypeOverride[] = [
+            {
+              instanceType: dirtySingleInstanceTypeInProps,
+              priority: 1,
+            },
+          ];
+          setFieldValue('viewState.dirty.instanceType', undefined);
+          setFieldValue('viewState.dirty.launchTemplateOverridesForInstanceType', dirtyInstanceTypes);
+        }
+      }
+    }
+  };
+
+  const showAdvancedMode = isLaunchTemplatesEnabled && !useSimpleMode;
+  if (showAdvancedMode) {
+    return (
+      <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
+        <div>
+          <p>
+            Switch to
+            <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}
+          clearWarnings={clearWarnings}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
+      <div>
+        <span>To configure mixed server groups and/or 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={values}
+        setUnlimitedCpuCredits={setUnlimitedCpuCredits}
+        setFieldValue={setFieldValue}
+        clearWarnings={clearWarnings}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { IAmazonServerGroupCommandDirty } from '../../serverGroupConfiguration.service';
+
+export function InstanceTypeWarning(props: { dirty: IAmazonServerGroupCommandDirty; clearWarnings: () => void }) {
+  if (
+    props.dirty.instanceType ||
+    (props.dirty.launchTemplateOverridesForInstanceType &&
+      props.dirty.launchTemplateOverridesForInstanceType.length > 0)
+  ) {
+    return (
+      <div className="col-md-12">
+        <div className="alert alert-warning">
+          <p>
+            <i className="fa fa-exclamation-triangle" />
+            {props.dirty.instanceType &&
+              'The following instance type was found incompatible with the selected image/region and was removed:'}
+            {props.dirty.launchTemplateOverridesForInstanceType &&
+              props.dirty.launchTemplateOverridesForInstanceType.length > 0 &&
+              'The following instance type(s) were found incompatible with the selected image/region and were removed:'}
+          </p>
+          <ul>
+            {props.dirty.instanceType && <li key={props.dirty.instanceType}>{props.dirty.instanceType}</li>}
+            {props.dirty.launchTemplateOverridesForInstanceType &&
+              props.dirty.launchTemplateOverridesForInstanceType.length > 0 &&
+              props.dirty.launchTemplateOverridesForInstanceType.map((it) => (
+                <li key={it.instanceType}>
+                  {it.instanceType}
+                  {it.weightedCapacity ? ' with weight ' + it.weightedCapacity : ''}
+                </li>
+              ))}
+          </ul>
+          <p className="text-right">
+            <a className="btn btn-sm btn-default dirty-flag-dismiss clickable" onClick={() => props.clearWarnings()}>
+              Okay
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  } else {
+    return null;
+  }
+}

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

@@ -0,0 +1,102 @@
+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;
+  clearWarnings: () => 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.instanceTypesInfo) || []
+        }
+        handleInstanceTypesChange={handleInstanceTypesChange}
+        setUnlimitedCpuCredits={setUnlimitedCpuCredits}
+        viewState={command.viewState}
+        clearWarnings={props.clearWarnings}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import _ from 'lodash';
+import React from 'react';
+
+import type { IAmazonInstanceType } from '../../../../../instance/awsInstanceType.service';
+
+export function AmazonInstanceTypeInfoRenderer(props: { instanceType: IAmazonInstanceType }) {
+  const spotSupport = props.instanceType?.supportedUsageClasses?.includes('spot') ? '| SPOT supported' : '';
+  const CpuMem = `${props.instanceType?.defaultVCpus} vCPU | ${props.instanceType?.memoryInGiB} Gib Memory ${spotSupport}`;
+  const instanceStorageInfo = props.instanceType?.instanceStorageSupported && (
+    <span>
+      <br />
+      <span className={`select-option-label-attributes`}>
+        {`Instance Storage: ${_.toUpper(props.instanceType?.instanceStorageInfo?.storageTypes)} | ${
+          props.instanceType?.instanceStorageInfo?.totalSizeInGB
+        } Gib total size`}
+      </span>
+    </span>
+  );
+  const ebsInfo = props.instanceType?.ebsInfo && (
+    <span>
+      <br />
+      <span className={`select-option-label-attributes`}>
+        {`EBS: optimization ${props.instanceType?.ebsInfo?.ebsOptimizedSupport} | NVMe ${props.instanceType?.ebsInfo?.nvmeSupport} | Encryption ${props.instanceType?.ebsInfo?.encryptionSupport}`}
+      </span>
+    </span>
+  );
+  const gpuInfo = props.instanceType?.gpuInfo && (
+    <span>
+      <br />
+      <span className={`select-option-label-attributes`}>
+        {`GPU: ${props.instanceType?.gpuInfo?.totalGpuMemoryInMiB} MiB total memory`}
+        {props.instanceType?.gpuInfo?.gpus.map(
+          (g) => ` | ${g.count} ${g.manufacturer} ${g.name} GPUs, size: ${g.gpuSizeInMiB} MiB`,
+        )}
+      </span>
+    </span>
+  );
+  const generationInfo = typeof props.instanceType?.currentGeneration !== 'undefined' &&
+    props.instanceType?.currentGeneration !== null && (
+      <span>
+        <br />
+        <span className={`select-option-label-attributes`}>
+          {props.instanceType?.currentGeneration ? 'Current Generation' : 'Previous Generation'}
+        </span>
+      </span>
+    );
+
+  return (
+    <span>
+      <span className={`select-option-label`}>{props.instanceType?.name}</span>
+      <br />
+      <span className={`select-option-label-attributes`}>{CpuMem}</span>
+      {instanceStorageInfo}
+      {ebsInfo}
+      {gpuInfo}
+      {generationInfo}
+    </span>
+  );
+}

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,157 @@
+import React, { useState } from 'react';
+import { Checkbox } from 'react-bootstrap';
+import { SortableHandle } from 'react-sortable-hoc';
+
+import { HoverablePopover, TextInput, Tooltip } from '@spinnaker/core';
+
+import { AmazonInstanceTypeInfoRenderer } from './AmazonInstanceTypeInfoRenderer';
+import type { IAmazonPreferredInstanceType } from '../../../../../instance/awsInstanceType.service';
+import type { IAmazonInstanceType } from '../../../../../instance/awsInstanceType.service';
+import { CostFactor } from '../../../../../instance/details/CostFactor';
+import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
+
+export interface IRowProps {
+  isCustom: boolean;
+  selectedType?: IAmazonInstanceTypeOverride;
+  selectedTypeInfo?: IAmazonInstanceType;
+  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) {
+    const instanceTypeInfo = <AmazonInstanceTypeInfoRenderer instanceType={props.selectedTypeInfo} />;
+    row = (
+      <tr key={instanceType} className={'sortable clickable'}>
+        <td>
+          <DragHandle />
+        </td>
+        <td>
+          {`${instanceType} `}
+          <HoverablePopover placement={'right'} template={instanceTypeInfo} className={'custom-profile'}>
+            <span className="clickable help-field">
+              <i className="small glyphicon glyphicon-info-sign" />
+            </span>
+          </HoverablePopover>
+        </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/InstanceTypeSelect.tsx

@@ -0,0 +1,78 @@
+import _ from 'lodash';
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import { HelpField } from '@spinnaker/core';
+
+import { AmazonInstanceTypeInfoRenderer } from './AmazonInstanceTypeInfoRenderer';
+import type { IAmazonInstanceType } from '../../../../../instance/awsInstanceType.service';
+
+export interface InstanceTypeSelectProps {
+  availableInstanceTypesList: IAmazonInstanceType[];
+  addOrUpdateInstanceType: (type: string, weight: string) => void;
+}
+
+export function InstanceTypeSelect(props: InstanceTypeSelectProps) {
+  /**
+   * Filters implemented:
+   * - instance family / size / type e.g. c3/ large/ c3.large
+   * - min vcpu e.g. 16vcpu
+   * - min memory e.g 32gib
+   * - instance storage type e.g. ssd, hdd
+   * - spot support
+   * - ebs support
+   * - gpu support
+   * - current generation v/s old generation like 'currentGen' / 'oldGen'
+   */
+  const filterOption = (option: IAmazonInstanceType, inputValue: string) => {
+    const {
+      name,
+      defaultVCpus,
+      memoryInGiB,
+      instanceStorageInfo,
+      ebsInfo,
+      gpuInfo,
+      supportedUsageClasses,
+      currentGeneration,
+    } = option;
+
+    return inputValue.split(',').every((inputVal: string) => {
+      const searchVal = _.toLower(inputVal.trim());
+      return (
+        (searchVal.match(/\d+\s*vcpu/) && defaultVCpus >= _.toNumber(searchVal.split('vcpu')[0].trim())) ||
+        (searchVal.match(/\d+\s*gib/) && memoryInGiB >= _.toNumber(searchVal.split('gib')[0].trim())) ||
+        (searchVal.match(/\b(ssd|hdd)\b/) && instanceStorageInfo?.storageTypes.includes(searchVal)) ||
+        (searchVal === 'spot' && supportedUsageClasses?.includes(searchVal)) ||
+        (searchVal === 'ebs' && ebsInfo) ||
+        (searchVal === 'gpu' && gpuInfo) ||
+        (searchVal === 'currentgen' && currentGeneration) ||
+        (searchVal === 'oldgen' && !currentGeneration) ||
+        name.match(searchVal)
+      );
+    });
+  };
+
+  const optionRenderer = (option: IAmazonInstanceType) => {
+    return <AmazonInstanceTypeInfoRenderer instanceType={option} />;
+  };
+
+  return (
+    <div className={'custom-profile'}>
+      <Select
+        className={`select`}
+        clearable={false}
+        multi={false}
+        placeholder={'Filter like 16vcpu, 32gib, spot, oldGen or Select an instance type to add'}
+        removeSelected={true}
+        searchable={true}
+        options={props.availableInstanceTypesList}
+        optionRenderer={optionRenderer}
+        filterOption={filterOption}
+        valueRenderer={(o) => <>{o.name}</>}
+        onChange={(o: Option<IAmazonInstanceType>) => props.addOrUpdateInstanceType(o.name, undefined)}
+      />{' '}
+      <HelpField id="aws.serverGroup.instanceTypesSelect" />
+    </div>
+  );
+}