@spinnaker/amazon 0.11.1 → 0.12.3

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,110 @@
+.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: 80%;
+  }
+}
+
+.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);
+  }
+}

package/src/serverGroup/configure/wizard/instanceType/simpleMode/SimpleModeSelector.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+import { NgReact } from '@spinnaker/core';
+
+import { CpuCreditsToggle } from '../CpuCreditsToggle';
+import { AWSProviderSettings } from '../../../../../aws.settings';
+import type { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface ISimpleModeSelectorProps {
+  command: IAmazonServerGroupCommand;
+  setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
+  setFieldValue: (field: keyof IAmazonServerGroupCommand, value: any, shouldValidate?: boolean) => void;
+}
+
+export function SimpleModeSelector(props: ISimpleModeSelectorProps) {
+  const { command } = props;
+  const { InstanceArchetypeSelector, InstanceTypeSelector } = NgReact;
+  const isLaunchTemplatesEnabled = AWSProviderSettings.serverGroups?.enableLaunchTemplates;
+  const isCpuCreditsEnabled = AWSProviderSettings.serverGroups?.enableCpuCredits;
+
+  const instanceProfileChanged = (newProfile: string) => {
+    // Instance profile is already set on values.viewState, so just use that value.
+    // Once angular is gone from this component tree, we can move all the viewState stuff
+    // into react state
+    props.setFieldValue('viewState', {
+      ...command.viewState,
+      instanceProfile: newProfile,
+    });
+  };
+
+  const instanceTypeChanged = (type: string) => {
+    command.instanceTypeChanged(command);
+    props.setFieldValue('instanceType', type);
+  };
+
+  return (
+    <div className="container-fluid form-horizontal">
+      <div className="row">
+        <InstanceArchetypeSelector
+          command={command}
+          onTypeChanged={instanceTypeChanged}
+          onProfileChanged={instanceProfileChanged}
+        />
+        <div style={{ padding: '0 15px' }}>
+          {command.viewState.instanceProfile && command.viewState.instanceProfile !== 'custom' && (
+            <InstanceTypeSelector command={command} onTypeChanged={instanceTypeChanged} />
+          )}
+        </div>
+      </div>
+      {isLaunchTemplatesEnabled && isCpuCreditsEnabled && (
+        <div className="row">
+          <CpuCreditsToggle
+            unlimitedCpuCredits={command.unlimitedCpuCredits}
+            selectedInstanceTypes={[command.instanceType]}
+            currentProfile={command.viewState.instanceProfile}
+            setUnlimitedCpuCredits={props.setUnlimitedCpuCredits}
+          />
+        </div>
+      )}
+    </div>
+  );
+}