@spinnaker/amazon 0.0.0-main-2

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

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

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

@@ -0,0 +1,144 @@
+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 {
+  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;
+}) {
+  return (
+    <TableRows
+      isCustom={props.isCustom}
+      selectedInstanceTypesMap={props.selectedInstanceTypesMap}
+      selectedInstanceTypesInfo={props.selectedInstanceTypesInfo}
+      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>;
+    selectedInstanceTypesInfo?: IAmazonInstanceType[];
+    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}
+              selectedTypeInfo={props.selectedInstanceTypesInfo.find((it) => it.name === selectedType.instanceType)}
+              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;
+    selectedTypeInfo?: IAmazonInstanceType;
+    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}
+      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

@@ -0,0 +1,129 @@
+import React from 'react';
+
+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) {
+    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}
+        <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>
+            <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: IAmazonInstanceType[];
+  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;
+}

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,111 @@
+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}
+              placeholder={'Recommended to leave empty and use AWS default i.e. On-Demand price'}
+            />
+          </Tooltip>
+        )}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,122 @@
+.advanced-mode-selector {
+  .instance-profile-header {
+    display: inline-block;
+    button {
+      width: 100%;
+    }
+    h4 {
+      min-height: 52px;
+    }
+    .panel-heading {
+      padding: 0 0 0 0;
+    }
+    &.profile-button {
+      width: calc(~'25% - 20px');
+      margin: 0 10px 15px 10px;
+    }
+  }
+
+  .sub-section {
+    padding: 0 15px;
+    margin-bottom: 5px;
+
+    .description {
+      padding: 0 10px;
+    }
+
+    tr {
+      &.unavailable {
+        opacity: 0.5;
+      }
+
+      &.sortable {
+        .instance-type-drag-handle {
+          display: inline-block;
+          opacity: 0.9;
+          font-size: 100%;
+          padding-top: 8px;
+        }
+      }
+    }
+
+    th {
+      font-size: 110%;
+    }
+  }
+}
+
+.custom-profile {
+  .select {
+    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;
+  }
+}
+
+.instance-profile {
+  vertical-align: top;
+  text-align: left;
+  min-height: 100px;
+  font-size: 90%;
+  border: 1px solid var(--color-silver);
+  border-radius: 3px;
+  color: var(--color-mineshaft);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--color-mineshaft);
+    text-decoration: none;
+  }
+
+  .selected-indicator {
+    display: flex;
+    width: 100%;
+    text-align: right;
+    padding-right: 5px;
+    font-size: 150%;
+    color: var(--color-accent);
+
+    &.custom {
+      margin-top: 5px;
+    }
+  }
+
+  h4 {
+    margin-top: 0;
+    text-align: center;
+    word-spacing: 300px;
+  }
+
+  ul {
+    font-size: 95%;
+    padding-left: 20px;
+  }
+  .panel-heading {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  &:hover,
+  &:focus,
+  &.active {
+    outline: 0;
+  }
+  &.active {
+    box-shadow: inset 0 0 3px 2px var(--color-accent);
+    border-color: var(--color-accent);
+  }
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 8px 2px var(--color-accent);
+  }
+}