@spinnaker/amazon 0.0.0-main-2

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

@@ -0,0 +1,243 @@
+import { get } from 'lodash';
+import React from 'react';
+
+import type { Application, IModalComponentProps, IStage } from '@spinnaker/core';
+import { FirewallLabels, noop, ReactInjector, ReactModal, TaskMonitor, WizardModal, WizardPage } from '@spinnaker/core';
+
+import { ServerGroupTemplateSelection } from './ServerGroupTemplateSelection';
+import {
+  ServerGroupAdvancedSettings,
+  ServerGroupBasicSettings,
+  ServerGroupCapacity,
+  ServerGroupInstanceType,
+  ServerGroupLoadBalancers,
+  ServerGroupSecurityGroups,
+  ServerGroupZones,
+} from './pages';
+import { AwsReactInjector } from '../../../reactShims';
+import type { IAmazonServerGroupCommand } from '../serverGroupConfiguration.service';
+
+export interface IAmazonCloneServerGroupModalProps extends IModalComponentProps {
+  title: string;
+  application: Application;
+  command: IAmazonServerGroupCommand;
+}
+
+export interface IAmazonCloneServerGroupModalState {
+  firewallsLabel: string;
+  loaded: boolean;
+  requiresTemplateSelection: boolean;
+  taskMonitor: TaskMonitor;
+}
+
+export class AmazonCloneServerGroupModal extends React.Component<
+  IAmazonCloneServerGroupModalProps,
+  IAmazonCloneServerGroupModalState
+> {
+  public static defaultProps: Partial<IAmazonCloneServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+  private refreshUnsubscribe: () => void;
+
+  public static show(props: IAmazonCloneServerGroupModalProps): Promise<IAmazonServerGroupCommand> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(AmazonCloneServerGroupModal, props, modalProps);
+  }
+
+  constructor(props: IAmazonCloneServerGroupModalProps) {
+    super(props);
+
+    const requiresTemplateSelection = get(props, 'command.viewState.requiresTemplateSelection', false);
+    if (!requiresTemplateSelection) {
+      this.configureCommand();
+    }
+
+    this.state = {
+      firewallsLabel: FirewallLabels.get('Firewalls'),
+      loaded: false,
+      requiresTemplateSelection,
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Creating your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  private templateSelected = () => {
+    this.setState({ requiresTemplateSelection: false });
+    this.configureCommand();
+  };
+
+  private onTaskComplete = () => {
+    this.props.application.serverGroups.refresh();
+    this.props.application.serverGroups.onNextRefresh(null, this.onApplicationRefresh);
+  };
+
+  protected onApplicationRefresh = (): void => {
+    if (this._isUnmounted) {
+      return;
+    }
+
+    const { command } = this.props;
+    const { taskMonitor } = this.state;
+    const cloneStage = taskMonitor.task.execution.stages.find((stage: IStage) => stage.type === 'cloneServerGroup');
+    if (cloneStage && cloneStage.context['deploy.server.groups']) {
+      const newServerGroupName = cloneStage.context['deploy.server.groups'][command.region];
+      if (newServerGroupName) {
+        const newStateParams = {
+          serverGroup: newServerGroupName,
+          accountId: command.credentials,
+          region: command.region,
+          provider: 'aws',
+        };
+        let transitionTo = '^.^.^.clusters.serverGroup';
+        if (ReactInjector.$state.includes('**.clusters.serverGroup')) {
+          // clone via details, all view
+          transitionTo = '^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters.cluster.serverGroup')) {
+          // clone or create with details open
+          transitionTo = '^.^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters')) {
+          // create new, no details open
+          transitionTo = '.serverGroup';
+        }
+        ReactInjector.$state.go(transitionTo, newStateParams);
+      }
+    }
+  };
+
+  private initializeCommand = () => {
+    const { command } = this.props;
+
+    command.credentialsChanged(command);
+    command.regionChanged(command);
+    AwsReactInjector.awsServerGroupConfigurationService.configureSubnetPurposes(command);
+  };
+
+  private configureCommand = () => {
+    const { application, command } = this.props;
+    AwsReactInjector.awsServerGroupConfigurationService.configureCommand(application, command).then(() => {
+      this.initializeCommand();
+      this.setState({ loaded: true, requiresTemplateSelection: false });
+    });
+  };
+
+  private normalizeCommand = ({ tags }: IAmazonServerGroupCommand) => {
+    if (!tags) {
+      return;
+    }
+    Object.keys(tags).forEach((key) => {
+      if (!key.length && !tags[key].length) {
+        delete tags[key];
+      }
+    });
+  };
+
+  public componentWillUnmount(): void {
+    this._isUnmounted = true;
+    if (this.refreshUnsubscribe) {
+      this.refreshUnsubscribe();
+    }
+  }
+
+  private submit = (command: IAmazonServerGroupCommand): void => {
+    this.normalizeCommand(command);
+    const forPipelineConfig = command.viewState.mode === 'editPipeline' || command.viewState.mode === 'createPipeline';
+    if (forPipelineConfig) {
+      this.props.closeModal && this.props.closeModal(command);
+    } else {
+      this.state.taskMonitor.submit(() =>
+        ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application),
+      );
+    }
+  };
+
+  public render() {
+    const { application, command, dismissModal, title } = this.props;
+    const { loaded, taskMonitor, requiresTemplateSelection } = this.state;
+
+    if (requiresTemplateSelection) {
+      return (
+        <ServerGroupTemplateSelection
+          app={application}
+          command={command}
+          onDismiss={dismissModal}
+          onTemplateSelected={this.templateSelected}
+        />
+      );
+    }
+
+    return (
+      <WizardModal<IAmazonServerGroupCommand>
+        heading={title}
+        initialValues={command}
+        loading={!loaded}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={command.viewState.submitButtonLabel}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupBasicSettings ref={innerRef} formik={formik} app={application} />}
+            />
+
+            <WizardPage
+              label="Load Balancers"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupLoadBalancers ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label={FirewallLabels.get('Firewalls')}
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupSecurityGroups ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label={command.viewState.useSimpleInstanceTypeSelector ? 'Instance Type' : 'Instance Types'}
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupInstanceType ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Capacity"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupCapacity ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Availability Zones"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <ServerGroupZones ref={innerRef} formik={formik} />}
+            />
+
+            <WizardPage
+              label="Advanced Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <ServerGroupAdvancedSettings ref={innerRef} formik={formik} app={application} />
+              )}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import type { Application, IServerGroupCommand, ITemplateSelectionText } from '@spinnaker/core';
+import { DeployInitializer, FirewallLabels } from '@spinnaker/core';
+
+export interface IServerGroupTemplateSelectionProps {
+  app: Application;
+  command: IServerGroupCommand;
+  onDismiss: () => void;
+  onTemplateSelected: () => void;
+}
+
+export interface IServerGroupTemplateSelectionState {
+  templateSelectionText: ITemplateSelectionText;
+}
+
+export class ServerGroupTemplateSelection extends React.Component<
+  IServerGroupTemplateSelectionProps,
+  IServerGroupTemplateSelectionState
+> {
+  constructor(props: IServerGroupTemplateSelectionProps) {
+    super(props);
+    this.state = {
+      templateSelectionText: {
+        copied: [
+          'account, region, subnet, cluster name (stack, details)',
+          'load balancers',
+          FirewallLabels.get('firewalls'),
+          'instance type',
+          'all fields on the Advanced Settings page',
+        ],
+        notCopied: ['the following suspended scaling processes: Launch, Terminate, AddToLoadBalancer'],
+        additionalCopyText:
+          'If a server group exists in this cluster at the time of deployment, its scaling policies will be copied over to the new server group.',
+      },
+    };
+
+    if (!props.command.viewState.disableStrategySelection) {
+      this.state.templateSelectionText.notCopied.push(
+        'the deployment strategy (if any) used to deploy the most recent server group',
+      );
+    }
+  }
+
+  public render() {
+    const { app, command, onDismiss, onTemplateSelected } = this.props;
+    const { templateSelectionText } = this.state;
+
+    return (
+      <DeployInitializer
+        cloudProvider="aws"
+        application={app}
+        command={command}
+        onDismiss={onDismiss}
+        onTemplateSelected={onTemplateSelected}
+        templateSelectionText={templateSelectionText}
+      />
+    );
+  }
+}

package/src/serverGroup/configure/wizard/capacity/CapacitySelector.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import type { IServerGroupCommand } from '@spinnaker/core';
+import { HelpField, SpelNumberInput } from '@spinnaker/core';
+import type { IMinMaxDesiredProps } from './MinMaxDesired';
+
+export interface ICapacitySelectorProps {
+  command: IServerGroupCommand;
+  setFieldValue: (field: keyof IServerGroupCommand, value: any, shouldValidate?: boolean) => void;
+  MinMaxDesired: React.ComponentClass<IMinMaxDesiredProps>;
+}
+
+export class CapacitySelector extends React.Component<ICapacitySelectorProps> {
+  private preferSourceCapacityOptions = [
+    { label: 'fail the stage', value: false },
+    { label: 'use fallback values', value: true },
+  ];
+
+  private useSourceCapacityUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const value = event.target.value === 'true';
+    const { command } = this.props;
+    this.props.setFieldValue('useSourceCapacity', value);
+
+    if (!value) {
+      delete command.preferSourceCapacity;
+      this.props.setFieldValue('preferSourceCapacity', undefined);
+    }
+    this.setState({});
+  };
+
+  private setSimpleCapacity(simpleCapacity: boolean) {
+    const { command } = this.props;
+    const newViewState = {
+      ...command.viewState,
+      useSimpleCapacity: simpleCapacity,
+    };
+    this.props.setFieldValue('useSourceCapacity', false);
+    this.props.setFieldValue('viewState', newViewState);
+    this.setMinMax(command.capacity.desired);
+    this.setState({});
+  }
+
+  private simpleInstancesChanged = (value: number | string) => {
+    this.setMinMax(value);
+  };
+
+  private setMinMax(value: number | string) {
+    const { command } = this.props;
+    if (command.viewState.useSimpleCapacity) {
+      command.capacity = { min: value, max: value, desired: value };
+      this.props.setFieldValue('useSourceCapacity', false);
+      this.props.setFieldValue('capacity', command.capacity);
+    }
+    this.setState({});
+  }
+
+  private preferSourceCapacityChanged = (option: Option<boolean>) => {
+    this.props.setFieldValue('preferSourceCapacity', option && option.value ? true : undefined);
+    this.setState({});
+  };
+
+  private capacityFieldChanged = (fieldName: 'min' | 'max' | 'desired', value: number | string) => {
+    const { command, setFieldValue } = this.props;
+    command.capacity = { ...command.capacity };
+    command.capacity[fieldName] = value;
+    setFieldValue('capacity', command.capacity);
+  };
+
+  public render() {
+    const { command, MinMaxDesired } = this.props;
+
+    const readOnlyFields = command.viewState.readOnlyFields || {};
+
+    if (!command.viewState.useSimpleCapacity || command.useSourceCapacity) {
+      return (
+        <div>
+          <div className="form-group">
+            <div className="col-md-12">
+              <p>Sets up auto-scaling constraints for this server group.</p>
+              <p>
+                To set min, max, and desired instance counts to the same value use the{' '}
+                <a className="clickable" onClick={() => this.setSimpleCapacity(true)}>
+                  Simple Mode
+                </a>
+                .
+              </p>
+            </div>
+          </div>
+
+          {/* // TODO: Test this in a clone server group dialog or an edit pipeline dialog */}
+          {!readOnlyFields.useSourceCapacity && command.viewState.mode === 'editPipeline' && (
+            <div className="form-group">
+              <div className="col-md-3 sm-label-right">Capacity</div>
+              <div className="col-md-9 radio">
+                <label>
+                  <input
+                    type="radio"
+                    checked={command.useSourceCapacity}
+                    value="true"
+                    id="useSourceCapacityTrue"
+                    onChange={this.useSourceCapacityUpdated}
+                  />
+                  Copy the capacity from the current server group
+                  <HelpField id="serverGroupCapacity.useSourceCapacityTrue" />
+                </label>
+              </div>
+              {command.useSourceCapacity && (
+                <div className="col-md-9 col-md-offset-3 radio" style={{ paddingLeft: '35px' }}>
+                  <div>
+                    If no current server group is found,
+                    <Select
+                      clearable={false}
+                      value={!!command.preferSourceCapacity}
+                      options={this.preferSourceCapacityOptions}
+                      onChange={this.preferSourceCapacityChanged}
+                    />
+                  </div>
+                  {command.preferSourceCapacity && (
+                    <div>
+                      <b>Fallback values</b>
+                      <MinMaxDesired command={command} fieldChanged={this.capacityFieldChanged} />
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <div className="col-md-9 col-md-offset-3 radio">
+                <label>
+                  <input
+                    type="radio"
+                    checked={!command.useSourceCapacity}
+                    value="false"
+                    id="useSourceCapacityFalse"
+                    onChange={this.useSourceCapacityUpdated}
+                  />
+                  Let me specify the capacity
+                  <HelpField id="serverGroupCapacity.useSourceCapacityFalse" />
+                </label>
+              </div>
+            </div>
+          )}
+
+          {(!command.useSourceCapacity || command.viewState.mode !== 'editPipeline') && (
+            <div>
+              <div className="col-md-9 col-md-offset-3">
+                <MinMaxDesired command={command} fieldChanged={this.capacityFieldChanged} />
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div className="form-group">
+          <div className="col-md-12">
+            <p>Sets the min, max, and desired instance counts to the same value.</p>
+
+            <p>
+              {' '}
+              To set capacity for auto-scaling, use the{' '}
+              <a className="clickable" onClick={() => this.setSimpleCapacity(false)}>
+                Advanced Mode
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Number of Instances</div>
+          <div className="col-md-8">
+            <SpelNumberInput value={command.capacity.desired} min={0} onChange={this.simpleInstancesChanged} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/serverGroup/configure/wizard/capacity/MinMaxDesired.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { IServerGroupCommand } from '@spinnaker/core';
+import { SpelNumberInput } from '@spinnaker/core';
+
+export interface IMinMaxDesiredProps {
+  command: IServerGroupCommand;
+  fieldChanged: (fieldName: string, value: number | string) => void;
+}
+
+export interface IMinMaxDesiredState {}
+
+export class MinMaxDesired extends React.Component<IMinMaxDesiredProps, IMinMaxDesiredState> {
+  public render() {
+    const {
+      command: {
+        capacity: { min, max, desired },
+      },
+      fieldChanged,
+    } = this.props;
+    return (
+      <div>
+        <div className="form-group">
+          <div className="col-md-2">Min</div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={min}
+              min={0}
+              max={typeof max === 'number' ? max : undefined}
+              onChange={(v) => fieldChanged('min', v)}
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-2">Max</div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={max}
+              min={typeof min === 'number' ? min : undefined}
+              onChange={(v) => fieldChanged('max', v)}
+              required={true}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-2">Desired</div>
+          <div className="col-md-8">
+            <SpelNumberInput
+              value={desired}
+              min={typeof min === 'number' ? min : undefined}
+              max={typeof max === 'number' ? max : undefined}
+              onChange={(v) => fieldChanged('desired', v)}
+              required={true}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { ToggleButtonGroup, ToggleSize } from '@spinnaker/core';
+import { AwsReactInjector } from '../../../../reactShims';
+
+export interface ICpuCreditsToggleProps {
+  unlimitedCpuCredits?: boolean;
+  selectedInstanceTypes: string[];
+  currentProfile: string;
+  setUnlimitedCpuCredits: (unlimitedCpuCredits: boolean | undefined) => void;
+}
+
+export function CpuCreditsToggle(props: ICpuCreditsToggleProps) {
+  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(isBurstingSupportedForAllTypes);
+    }
+
+    if (currentProfile) {
+      setShowToggle(
+        selectedInstanceTypes &&
+          selectedInstanceTypes.length > 0 &&
+          isBurstingSupportedForAllTypes &&
+          isAtleastOneTypeInProfile,
+      );
+    }
+  }, [currentProfile, selectedInstanceTypes]);
+
+  return (
+    <div className={'row'} style={{ fontSize: '110%' }}>
+      {showToggle && (
+        <div>
+          <ToggleButtonGroup
+            toggleSize={ToggleSize.XSMALL}
+            propLabel={'Unlimited CPU credits '}
+            propHelpFieldId={'aws.serverGroup.unlimitedCpuCredits'}
+            tooltipPropOffBtn={'Toggle to turn OFF unlimited CPU credits'}
+            displayTextPropOffBtn={'Off'}
+            tooltipPropOnBtn={'Toggle to turn ON unlimited CPU credits'}
+            displayTextPropOnBtn={'On'}
+            onClick={(b) => props.setUnlimitedCpuCredits(b)}
+            isPropertyActive={props.unlimitedCpuCredits}
+          />
+        </div>
+      )}
+    </div>
+  );
+}