@spinnaker/amazon 0.11.0 → 0.12.2

package/src/serverGroup/configure/serverGroupCommandBuilder.spec.js

@@ -4,7 +4,11 @@ import { AccountService, SubnetReader } from '@spinnaker/core';
 
 import { AWSProviderSettings } from '../../aws.settings';
 
-import { createMockAmazonServerGroupWithLt, createCustomMockLaunchTemplate } from '@spinnaker/mocks';
+import {
+  createMockAmazonServerGroupWithLt,
+  createCustomMockLaunchTemplate,
+  mockLaunchTemplate,
+} from '@spinnaker/mocks';
 
 describe('awsServerGroupCommandBuilder', function () {
   const AccountServiceFixture = require('./AccountServiceFixtures');
@@ -64,7 +68,7 @@ describe('awsServerGroupCommandBuilder', function () {
 
   describe('buildServerGroupCommandFromExisting', function () {
     it('sets usePreferredZones flag based on initial value', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('custom'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(this.$q.when('custom'));
       const baseServerGroup = {
         account: 'prod',
         region: 'us-west-1',
@@ -72,6 +76,7 @@ describe('awsServerGroupCommandBuilder', function () {
           availabilityZones: ['g', 'h', 'i'],
           vpczoneIdentifier: '',
         },
+        launchTemplate: mockLaunchTemplate,
       };
       let command = null;
 
@@ -101,7 +106,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('sets profile and instance type if available', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = {
         account: 'prod',
@@ -131,7 +138,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('copies suspended processes unless the mode is "editPipeline"', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = {
         account: 'prod',
@@ -167,7 +176,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('copies tags not in the reserved list:', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = {
         account: 'prod',
@@ -208,7 +219,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('sets unlimitedCpuCredits to false when building from source server group with standard credits', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = createMockAmazonServerGroupWithLt(
         createCustomMockLaunchTemplate('testLtCpuCredits', {
@@ -229,7 +242,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('sets unlimitedCpuCredits to true when building from source server group with unlimited credits', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = createMockAmazonServerGroupWithLt(
         createCustomMockLaunchTemplate('testLtCpuCredits', {
@@ -250,7 +265,9 @@ describe('awsServerGroupCommandBuilder', function () {
     });
 
     it('sets unlimitedCpuCredits to undefined when building from source server group with cpu credits unset', function () {
-      spyOn(this.instanceTypeService, 'getCategoryForInstanceType').and.returnValue(this.$q.when('selectedProfile'));
+      spyOn(this.instanceTypeService, 'getCategoryForMultipleInstanceTypes').and.returnValue(
+        this.$q.when('selectedProfile'),
+      );
 
       const baseServerGroup = createMockAmazonServerGroupWithLt();
 

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

@@ -1,19 +1,12 @@
-import { mock, IQService, IScope, IRootScopeService } from 'angular';
+import type { IQService, IRootScopeService, IScope } from 'angular';
+import { mock } from 'angular';
 
-import {
-  AccountService,
-  ApplicationModelBuilder,
-  CacheInitializerService,
-  LoadBalancerReader,
-  SecurityGroupReader,
-  SubnetReader,
-} from '@spinnaker/core';
+import type { CacheInitializerService, LoadBalancerReader, SecurityGroupReader } from '@spinnaker/core';
+import { AccountService, ApplicationModelBuilder, SubnetReader } from '@spinnaker/core';
 
 import { KeyPairsReader } from '../../keyPairs';
-import {
-  AWS_SERVER_GROUP_CONFIGURATION_SERVICE,
-  AwsServerGroupConfigurationService,
-} from './serverGroupConfiguration.service';
+import type { AwsServerGroupConfigurationService } from './serverGroupConfiguration.service';
+import { AWS_SERVER_GROUP_CONFIGURATION_SERVICE } from './serverGroupConfiguration.service';
 
 describe('Service: awsServerGroupConfiguration', function () {
   let service: AwsServerGroupConfigurationService,

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

@@ -83,9 +83,17 @@ export interface IAmazonServerGroupCommandViewState extends IServerGroupCommandV
   dirty: IAmazonServerGroupCommandDirty;
   spelTargetGroups: string[];
   spelLoadBalancers: string[];
+  useSimpleInstanceTypeSelector: boolean;
+}
+
+export interface IAmazonInstanceTypeOverride {
+  instanceType: string;
+  weightedCapacity?: number;
+  priority?: number;
 }
 
 export interface IAmazonServerGroupCommand extends IServerGroupCommand {
+  viewState: IAmazonServerGroupCommandViewState;
   associateIPv6Address?: boolean;
   associatePublicIpAddress: boolean;
   backingData: IAmazonServerGroupCommandBackingData;
@@ -103,12 +111,18 @@ export interface IAmazonServerGroupCommand extends IServerGroupCommand {
   setLaunchTemplate?: boolean;
   unlimitedCpuCredits?: boolean;
   capacityRebalance?: boolean;
-  viewState: IAmazonServerGroupCommandViewState;
+  onDemandAllocationStrategy?: string;
+  onDemandBaseCapacity?: number;
+  onDemandPercentageAboveBaseCapacity?: number;
+  spotAllocationStrategy?: string;
+  spotInstancePools?: number;
+  launchTemplateOverridesForInstanceType?: IAmazonInstanceTypeOverride[];
 
   getBlockDeviceMappingsSource: (command: IServerGroupCommand) => IBlockDeviceMappingSource;
   selectBlockDeviceMappingsSource: (command: IServerGroupCommand, selection: string) => void;
   usePreferredZonesChanged: (command: IServerGroupCommand) => IAmazonServerGroupCommandResult;
   regionIsDeprecated: (command: IServerGroupCommand) => boolean;
+  launchTemplateOverridesChanged: (command: IServerGroupCommand) => void;
 }
 
 export class AwsServerGroupConfigurationService {
@@ -643,10 +657,21 @@ export class AwsServerGroupConfigurationService {
     cmd.imageChanged = (command: IAmazonServerGroupCommand): IServerGroupCommandResult =>
       this.configureInstanceTypes(command);
 
+    // Handles derived values for single instance type case
     cmd.instanceTypeChanged = (command: IAmazonServerGroupCommand): void => {
       command.ebsOptimized = this.awsInstanceTypeService.isEbsOptimized(command.instanceType);
     };
 
+    // Handles derived values for multiple instance types case
+    cmd.launchTemplateOverridesChanged = (command: IAmazonServerGroupCommand): void => {
+      // set ebsOptimized to true if all instance types in overrides are included in the hard-coded array in awsInstanceTypeService.
+      // this function exists for backwards compatibility with single instance type case, matching behavior in `cmd.instanceTypeChanged`
+      // note: this parameter has no effect on instance types with EBS optimization enabled by default.
+      command.ebsOptimized = command.launchTemplateOverridesForInstanceType?.every((o) =>
+        this.awsInstanceTypeService.isEbsOptimized(o.instanceType),
+      );
+    };
+
     this.applyOverrides('attachEventHandlers', cmd);
   }
 }

package/src/serverGroup/configure/wizard/AmazonCloneServerGroupModal.tsx

@@ -207,7 +207,7 @@ export class AmazonCloneServerGroupModal extends React.Component<
             />
 
             <WizardPage
-              label="Instance Type"
+              label={command.viewState.useSimpleInstanceTypeSelector ? 'Instance Type' : 'Instance Types'}
               wizard={wizard}
               order={nextIdx()}
               render={({ innerRef }) => <ServerGroupInstanceType ref={innerRef} formik={formik} />}

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