@spinnaker/amazon 0.12.12 → 0.13.1

package/src/instance/awsInstanceType.service.ts

@@ -21,6 +21,54 @@ export interface IAmazonInstanceTypeCategory extends IInstanceTypeCategory {
   descriptionListOverride?: string[];
 }
 
+export interface IAmazonInstanceType extends IInstanceType {
+  defaultVCpus: number;
+  memoryInGiB: number;
+  hypervisor: string;
+  instanceStorageInfo?: IAmazonInstanceTypeStorageInfo;
+  ebsInfo?: IAmazonInstanceTypeEbsInfo;
+  gpuInfo?: IAmazonInstanceGpuInfo;
+
+  instanceStorageSupported: boolean;
+  currentGeneration: boolean;
+  bareMetal: boolean;
+  ipv6Supported?: boolean;
+  burstablePerformanceSupported: boolean;
+
+  supportedArchitectures: string[];
+  supportedUsageClasses: string[];
+  supportedRootDeviceTypes: string[];
+  supportedVirtualizationTypes: string[];
+}
+
+export interface IAmazonInstanceTypeStorageInfo {
+  storageTypes: string;
+  totalSizeInGB?: number;
+  nvmeSupport?: string;
+}
+
+export interface IAmazonInstanceTypeEbsInfo {
+  ebsOptimizedSupport: string;
+  nvmeSupport?: string;
+  encryptionSupport: string;
+}
+
+export interface IAmazonInstanceGpuInfo {
+  totalGpuMemoryInMiB: number;
+  gpus: IAmazonInstanceGpuDeviceInfo[];
+}
+
+export interface IAmazonInstanceGpuDeviceInfo {
+  name: string;
+  manufacturer: string;
+  count: number;
+  gpuSizeInMiB: number;
+}
+
+export interface IAmazonInstanceTypesByRegion extends IInstanceTypesByRegion {
+  [region: string]: IAmazonInstanceType[];
+}
+
 export const AMAZON_INSTANCE_AWSINSTANCETYPE_SERVICE = 'spinnaker.amazon.instanceType.service';
 export const name = AMAZON_INSTANCE_AWSINSTANCETYPE_SERVICE; // for backwards compatibility
 
@@ -31,16 +79,14 @@ module(AMAZON_INSTANCE_AWSINSTANCETYPE_SERVICE, []).factory('awsInstanceTypeServ
       return $q.when(categories);
     }
 
-    const getAllTypesByRegion = function getAllTypesByRegion(): PromiseLike<IInstanceTypesByRegion> {
+    const getAllTypesByRegion = function getAllTypesByRegion(): PromiseLike<IAmazonInstanceTypesByRegion> {
       return REST('/instanceTypes')
         .get()
         .then(function (types) {
           return _.chain(types)
-            .map(function (type: IInstanceType) {
+            .map(function (type: IAmazonInstanceType) {
               return {
-                region: type.region,
-                account: type.account,
-                name: type.name,
+                ...type,
                 key: [type.region, type.account, type.name].join(':'),
               };
             })
@@ -95,47 +141,57 @@ module(AMAZON_INSTANCE_AWSINSTANCETYPE_SERVICE, []).factory('awsInstanceTypeServ
       return 0;
     }
 
-    function getAvailableTypesForRegions(availableInstanceTypes: IInstanceTypesByRegion, selectedRegions: string[]) {
+    function getAvailableTypesForRegions(
+      availableInstanceTypes: IAmazonInstanceTypesByRegion,
+      selectedRegions: string[],
+    ): IAmazonInstanceType[] {
       selectedRegions = selectedRegions || [];
-      let availableTypes: string[] = [];
+      let availableTypes: IAmazonInstanceType[] = [];
 
       // prime the list of available types
       if (selectedRegions && selectedRegions.length) {
-        availableTypes = _.map(availableInstanceTypes[selectedRegions[0]], 'name');
+        availableTypes = availableInstanceTypes[selectedRegions[0]] || [];
       }
 
       // this will perform an unnecessary intersection with the first region, which is fine
       selectedRegions.forEach(function (selectedRegion) {
         if (availableInstanceTypes[selectedRegion]) {
-          availableTypes = _.intersection(availableTypes, _.map(availableInstanceTypes[selectedRegion], 'name'));
+          availableTypes = _.intersectionBy(availableTypes, availableInstanceTypes[selectedRegion], 'name');
         }
       });
 
-      return availableTypes.sort(sortTypesByFamilyAndSize);
+      return availableTypes?.sort((a, b) => sortTypesByFamilyAndSize(a.name, b.name));
     }
 
     const families: { [key: string]: string[] } = {
-      paravirtual: ['c1', 'c3', 'hi1', 'hs1', 'm1', 'm2', 'm3', 't1'],
-      hvm: ['c3', 'c4', 'd2', 'i2', 'g2', 'm3', 'm4', 'm5', 'p2', 'r3', 'r4', 'r5', 't2', 'x1'],
-      vpcOnly: ['c4', 'm4', 'm5', 'r4', 'r5', 't2', 'x1'],
+      ec2ClassicSupported: ['m1', 'm3', 't1', 'c1', 'c3', 'cc2', 'cr1', 'm2', 'r3', 'd2', 'hs1', 'i2', 'g2'], // https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-classic-platform.html#ec2-classic-instance-types
       ebsOptimized: ['c4', 'd2', 'f1', 'g3', 'i3', 'm4', 'm5', 'p2', 'r4', 'r5', 'x1'],
       burstablePerf: ['t2', 't3', 't3a', 't4g'],
     };
 
-    function filterInstanceTypes(instanceTypes: string[], virtualizationType: string, vpcOnly: boolean): string[] {
-      return instanceTypes.filter((instanceType: string) => {
-        if (virtualizationType === '*') {
+    function filterInstanceTypes(
+      instanceTypes: IAmazonInstanceType[],
+      virtualizationType: string,
+      vpcConfigured: boolean,
+      architecture: string,
+    ): IAmazonInstanceType[] {
+      return _.filter(instanceTypes, function (i) {
+        if (virtualizationType === '*' && architecture === '*') {
           // show all instance types
           return true;
         }
-        const [family] = instanceType.split('.');
-        if (!vpcOnly && families.vpcOnly.includes(family)) {
+
+        if (!vpcConfigured && !families.ec2ClassicSupported.includes(i.name.split('.')[0])) {
           return false;
         }
-        if (!families.paravirtual.includes(family) && virtualizationType === 'hvm') {
-          return true;
+        if (virtualizationType && !i.supportedVirtualizationTypes.includes(virtualizationType)) {
+          return false;
+        }
+        if (architecture && !i.supportedArchitectures.includes(architecture)) {
+          return false;
         }
-        return families[virtualizationType].includes(family);
+
+        return true;
       });
     }
 

package/src/serverGroup/configure/AmazonImageSelectInput.tsx

@@ -59,7 +59,7 @@ export class AmazonImageSelectInput extends React.Component<IAmazonImageSelector
 
     // assume that the specific image exists in the selected region
     const amis = { [region]: [imageId] };
-    const attributes = { virtualizationType: '*', creationDate: new Date().toISOString() };
+    const attributes = { virtualizationType: '*', architecture: '*', creationDate: new Date().toISOString() };
 
     return { imageName, amis, attributes } as IAmazonImage;
   }

package/src/serverGroup/configure/serverGroupConfiguration.service.ts

@@ -54,6 +54,7 @@ import type {
   IScalingProcess,
 } from '../../domain';
 import { AMAZON_INSTANCE_AWSINSTANCETYPE_SERVICE } from '../../instance/awsInstanceType.service';
+import type { IAmazonInstanceType } from '../../instance/awsInstanceType.service';
 import { KeyPairsReader } from '../../keyPairs';
 
 export type IBlockDeviceMappingSource = 'source' | 'ami' | 'default';
@@ -69,6 +70,7 @@ export interface IAmazonServerGroupCommandResult extends IServerGroupCommandResu
 export interface IAmazonServerGroupCommandBackingDataFiltered extends IServerGroupCommandBackingDataFiltered {
   keyPairs: string[];
   targetGroups: string[];
+  instanceTypesInfo: IAmazonInstanceType[];
 }
 
 export interface IAmazonServerGroupCommandBackingData extends IServerGroupCommandBackingData {
@@ -77,6 +79,7 @@ export interface IAmazonServerGroupCommandBackingData extends IServerGroupComman
   keyPairs: IKeyPair[];
   targetGroups: string[];
   scalingProcesses: IScalingProcess[];
+  instanceTypesInfo: IAmazonInstanceType[];
 }
 
 export interface IAmazonServerGroupCommandViewState extends IServerGroupCommandViewState {
@@ -145,6 +148,7 @@ export interface IAmazonServerGroupCommand extends IServerGroupCommand {
   spotAllocationStrategy?: string;
   spotInstancePools?: number;
   launchTemplateOverridesForInstanceType?: IAmazonInstanceTypeOverride[];
+  amiArchitecture: string;
 
   getBlockDeviceMappingsSource: (command: IServerGroupCommand) => IBlockDeviceMappingSource;
   selectBlockDeviceMappingsSource: (command: IServerGroupCommand, selection: string) => void;
@@ -274,7 +278,7 @@ export class AwsServerGroupConfigurationService {
           subnets,
           preferredZones,
           keyPairs,
-          instanceTypes,
+          instanceTypesInfo,
           enabledMetrics,
           healthCheckTypes,
           terminationPolicies,
@@ -285,7 +289,7 @@ export class AwsServerGroupConfigurationService {
             subnets,
             preferredZones,
             keyPairs,
-            instanceTypes,
+            instanceTypesInfo,
             enabledMetrics,
             healthCheckTypes,
             terminationPolicies,
@@ -373,23 +377,29 @@ export class AwsServerGroupConfigurationService {
   public configureInstanceTypes(command: IAmazonServerGroupCommand): IServerGroupCommandResult {
     const result: IAmazonServerGroupCommandResult = { dirty: {} };
     if (command.region && (command.virtualizationType || command.viewState.disableImageSelection)) {
-      let filtered = this.awsInstanceTypeService.getAvailableTypesForRegions(command.backingData.instanceTypes, [
-        command.region,
-      ]);
-      if (command.virtualizationType) {
-        filtered = this.awsInstanceTypeService.filterInstanceTypes(
-          filtered,
+      let filteredTypesInfo: IAmazonInstanceType[] = this.awsInstanceTypeService.getAvailableTypesForRegions(
+        command.backingData.instanceTypesInfo,
+        [command.region],
+      );
+      if (command.virtualizationType || command.amiArchitecture) {
+        filteredTypesInfo = this.awsInstanceTypeService.filterInstanceTypes(
+          filteredTypesInfo,
           command.virtualizationType,
           !!command.vpcId,
+          command.amiArchitecture,
         );
       }
-      if (command.instanceType && !filtered.includes(command.instanceType)) {
+
+      const filteredTypes: string[] = map(filteredTypesInfo, 'name');
+      if (command.instanceType && !filteredTypes.includes(command.instanceType)) {
         result.dirty.instanceType = command.instanceType;
         command.instanceType = null;
       }
-      command.backingData.filtered.instanceTypes = filtered;
+      command.backingData.filtered.instanceTypes = filteredTypes;
+      command.backingData.filtered.instanceTypesInfo = filteredTypesInfo;
     } else {
       command.backingData.filtered.instanceTypes = [];
+      command.backingData.filtered.instanceTypesInfo = [];
     }
     extend(command.viewState.dirty, result.dirty);
     return result;
@@ -399,6 +409,7 @@ export class AwsServerGroupConfigurationService {
     const result: IAmazonServerGroupCommandResult = { dirty: {} };
     if (!command.amiName) {
       command.virtualizationType = null;
+      command.amiArchitecture = null;
     }
     if (command.viewState.disableImageSelection) {
       return result;

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

@@ -71,7 +71,7 @@ export function InstanceTypeSelector(props: IInstanceTypeSelectorProps) {
       <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
         <div>
           <p>
-            To configure a single instance type, use
+            Switch to
             <a className="clickable" onClick={() => handleModeChange(true)}>
               <span> Simple Mode</span>
             </a>
@@ -94,7 +94,7 @@ export function InstanceTypeSelector(props: IInstanceTypeSelectorProps) {
   return (
     <div className="container-fluid form-horizontal" style={{ padding: '0 15px' }}>
       <div>
-        <span>To configure mixed server groups with multiple instance types,</span>
+        <span>To configure mixed server groups and/or multiple instance types,</span>
         {!isLaunchTemplatesEnabled && (
           <span>
             <a

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

@@ -89,7 +89,7 @@ export function AdvancedModeSelector(props: IAdvancedModeSelectorProps) {
         unlimitedCpuCreditsInCmd={command.unlimitedCpuCredits}
         profileDetails={instanceTypeDetails.find((p) => p.type === instanceProfile)}
         availableInstanceTypesList={
-          (command.backingData && command.backingData.filtered && command.backingData.filtered.instanceTypes) || []
+          (command.backingData && command.backingData.filtered && command.backingData.filtered.instanceTypesInfo) || []
         }
         handleInstanceTypesChange={handleInstanceTypesChange}
         setUnlimitedCpuCredits={setUnlimitedCpuCredits}

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/InstanceTypeRow.tsx

@@ -1,14 +1,19 @@
 import React, { useState } from 'react';
 import { Checkbox } from 'react-bootstrap';
 import { SortableHandle } from 'react-sortable-hoc';
-import { TextInput, Tooltip } from '@spinnaker/core';
+
+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;
@@ -38,12 +43,20 @@ export function InstanceTypeRow(props: IRowProps) {
 
   let row;
   if (props.isCustom) {
+    const instanceTypeInfo = <AmazonInstanceTypeInfoRenderer instanceType={props.selectedTypeInfo} />;
     row = (
       <tr key={instanceType} className={'sortable clickable'}>
         <td>
           <DragHandle />
         </td>
-        <td>{instanceType}</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'}

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>
+  );
+}

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

@@ -8,6 +8,7 @@ import { Header, Heading } from './InstanceTypeTableParts';
 import { Footer } from './InstanceTypeTableParts';
 import { AWSProviderSettings } from '../../../../../aws.settings';
 import type { IAmazonInstanceTypeCategory } from '../../../../../instance/awsInstanceType.service';
+import type { IAmazonInstanceType } from '../../../../../instance/awsInstanceType.service';
 import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
 
 import './advancedMode.less';
@@ -17,7 +18,7 @@ export interface IInstanceTypeTableProps {
   selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
   unlimitedCpuCreditsInCmd: boolean;
   profileDetails: IAmazonInstanceTypeCategory;
-  availableInstanceTypesList: string[];
+  availableInstanceTypesList: IAmazonInstanceType[];
   handleInstanceTypesChange: (instanceTypes: IAmazonInstanceTypeOverride[]) => void;
   setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
 }
@@ -120,6 +121,9 @@ export function InstanceTypeTable(props: IInstanceTypeTableProps) {
           <InstanceTypeTableBody
             isCustom={isCustom}
             selectedInstanceTypesMap={selectedInstanceTypesMap}
+            selectedInstanceTypesInfo={props.availableInstanceTypesList.filter((it) =>
+              selectedInstanceTypeNames.includes(it.name),
+            )}
             addOrUpdateInstanceType={addOrUpdateInstanceType}
             removeInstanceType={removeInstanceType}
             handleSortEnd={handleSortEnd}
@@ -127,7 +131,7 @@ export function InstanceTypeTable(props: IInstanceTypeTableProps) {
           <Footer
             isCustom={isCustom}
             availableInstanceTypesList={props.availableInstanceTypesList.filter(
-              (it) => !selectedInstanceTypeNames.includes(it),
+              (it) => !selectedInstanceTypeNames.includes(it.name),
             )}
             addOrUpdateInstanceType={addOrUpdateInstanceType}
           />

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

@@ -6,13 +6,17 @@ 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 {
+  IAmazonInstanceType,
+  IAmazonPreferredInstanceType,
+} from '../../../../../instance/awsInstanceType.service';
 import type { IAmazonInstanceTypeOverride } from '../../../serverGroupConfiguration.service';
 
 export function InstanceTypeTableBody(props: {
   isCustom: boolean;
   profileFamiliesDetails?: IInstanceTypeFamily[];
   selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
+  selectedInstanceTypesInfo?: IAmazonInstanceType[];
   addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
   removeInstanceType: (instanceType: string) => void;
   handleSortEnd: (sortEnd: SortEnd) => void;
@@ -21,6 +25,7 @@ export function InstanceTypeTableBody(props: {
     <TableRows
       isCustom={props.isCustom}
       selectedInstanceTypesMap={props.selectedInstanceTypesMap}
+      selectedInstanceTypesInfo={props.selectedInstanceTypesInfo}
       removeInstanceType={props.removeInstanceType}
       addOrUpdateInstanceType={props.addOrUpdateInstanceType}
       instanceTypeDetails={
@@ -43,6 +48,7 @@ const TableRows = SortableContainer(
     isCustom: boolean;
     instanceTypeDetails?: Map<string, IAmazonPreferredInstanceType>;
     selectedInstanceTypesMap: Map<string, IAmazonInstanceTypeOverride>;
+    selectedInstanceTypesInfo?: IAmazonInstanceType[];
     removeInstanceType: (typeToRemove: string) => void;
     addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
   }) => {
@@ -60,6 +66,7 @@ const TableRows = SortableContainer(
               index={index}
               isCustom={true}
               selectedType={selectedType}
+              selectedTypeInfo={props.selectedInstanceTypesInfo.find((it) => it.name === selectedType.instanceType)}
               removeInstanceType={props.removeInstanceType}
               addOrUpdateInstanceType={props.addOrUpdateInstanceType}
             />
@@ -119,6 +126,7 @@ const SortableRow = SortableElement(
   (props: {
     isCustom: boolean;
     selectedType: IAmazonInstanceTypeOverride;
+    selectedTypeInfo?: IAmazonInstanceType;
     instanceTypeDetails?: Map<string, IAmazonPreferredInstanceType>;
     removeInstanceType: (typeToRemove: string) => void;
     addOrUpdateInstanceType: (instanceType: string, weight: string) => void;
@@ -127,6 +135,7 @@ const SortableRow = SortableElement(
       key={props.selectedType.instanceType}
       isCustom={props.isCustom}
       selectedType={props.selectedType}
+      selectedTypeInfo={props.selectedTypeInfo}
       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

@@ -1,9 +1,12 @@
 import React from 'react';
-import type { Option } from 'react-select';
-import Select from 'react-select';
 
 import { HelpField } from '@spinnaker/core';
 
+import { InstanceTypeSelect } from './InstanceTypeSelect';
+import type { IAmazonInstanceType } from '../../../../../instance/awsInstanceType.service';
+
+import './advancedMode.less';
+
 export function Heading(props: { isCustom: boolean; profileLabel?: string; profileDescriptionArr?: string[] }) {
   let description;
   if (props.isCustom) {
@@ -28,6 +31,16 @@ export function Heading(props: { isCustom: boolean; profileLabel?: string; profi
       <h4>Instance Types</h4>
       <div className={'description'}>
         {description}
+        <p>
+          Learn about AWS recommended best practices in{' '}
+          <a
+            target="_blank"
+            href="https://spinnaker.io/docs/setup/other_config/server-group-launch-settings/aws-ec2/launch-templates/#create-a-server-group-with-aws-recommended-best-practices-for-ec2-spot"
+          >
+            examples and docs
+          </a>
+          .
+        </p>
         <i>
           <b>Note:</b>
           <ul>
@@ -94,7 +107,7 @@ export function Header(props: { isCustom: boolean; showCpuCredits?: boolean }) {
 
 export function Footer(props: {
   isCustom: boolean;
-  availableInstanceTypesList: string[];
+  availableInstanceTypesList: IAmazonInstanceType[];
   addOrUpdateInstanceType: (type: string, weight: string) => void;
 }) {
   return props.isCustom ? (
@@ -114,24 +127,3 @@ export function Footer(props: {
     </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.tsx

@@ -99,7 +99,10 @@ export function InstancesDistribution(props: IInstancesDistributionProps) {
         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} />
+            <TextInput
+              {...inputProps}
+              placeholder={'Recommended to leave empty and use AWS default i.e. On-Demand price'}
+            />
           </Tooltip>
         )}
       />

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

@@ -47,7 +47,19 @@
 
 .custom-profile {
   .select {
-    width: 80%;
+    width: 97%;
+    display: inline-flex;
+  }
+
+  .select-option-label {
+    font-size: 100%;
+    font-weight: bold;
+  }
+
+  .select-option-label-attributes {
+    font-size: 90%;
+    font-weight: normal;
+    font-style: italic;
   }
 }