@spinnaker/amazon 0.0.0-main-2

package/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx

@@ -0,0 +1,458 @@
+import type { Formik, FormikErrors, FormikProps } from 'formik';
+import { Form } from 'formik';
+import { pickBy } from 'lodash';
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import type { Application, ICapacity, IModalComponentProps, IServerGroupJob } from '@spinnaker/core';
+import {
+  CheckboxInput,
+  confirmNotManaged,
+  FormikFormField,
+  HelpField,
+  MinMaxDesiredChanges,
+  ModalClose,
+  noop,
+  NumberInput,
+  PlatformHealthOverride,
+  ReactInjector,
+  ReactModal,
+  SpinFormik,
+  TaskMonitor,
+  TaskMonitorWrapper,
+  TaskReason,
+  ValidationMessage,
+} from '@spinnaker/core';
+import { AwsModalFooter } from '../../../common';
+import type { IAmazonServerGroup } from '../../../domain';
+
+export interface IAmazonResizeServerGroupModalProps extends IModalComponentProps {
+  application: Application;
+  serverGroup: IAmazonServerGroup;
+}
+
+export interface IAmazonResizeServerGroupModalState {
+  advancedMode: boolean;
+  interestingHealthProviderNames: string[]; // managed by a separate component
+  initialValues: IAmazonResizeServerGroupValues;
+  taskMonitor: TaskMonitor;
+  platformHealthOnlyShowOverride?: boolean;
+}
+
+export interface IAmazonResizeServerGroupValues {
+  min: number;
+  max: number;
+  desired: number;
+  enforceCapacityConstraints: boolean;
+  reason?: string;
+}
+
+export interface IResizeJob extends IServerGroupJob {
+  constraints?: { capacity: ICapacity };
+  reason?: string;
+  interestingHealthProviderNames: string[];
+}
+
+export class AmazonResizeServerGroupModal extends React.Component<
+  IAmazonResizeServerGroupModalProps,
+  IAmazonResizeServerGroupModalState
+> {
+  public static defaultProps: Partial<IAmazonResizeServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private formikRef = React.createRef<Formik<IAmazonResizeServerGroupValues>>();
+
+  public static show(props: IAmazonResizeServerGroupModalProps) {
+    const modalProps = {};
+    const { serverGroup, application } = props;
+    return confirmNotManaged(serverGroup, application).then((notManaged) => {
+      notManaged && ReactModal.show(AmazonResizeServerGroupModal, props, modalProps);
+    });
+  }
+
+  constructor(props: IAmazonResizeServerGroupModalProps) {
+    super(props);
+
+    const { minSize, maxSize, desiredCapacity } = props.serverGroup.asg;
+    const { attributes } = props.application;
+    this.state = {
+      advancedMode: minSize !== maxSize,
+      initialValues: {
+        min: minSize,
+        max: maxSize,
+        desired: desiredCapacity,
+        enforceCapacityConstraints: false,
+      },
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: 'Resizing your server group',
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: () => this.props.application.serverGroups.refresh(),
+      }),
+      platformHealthOnlyShowOverride: attributes.platformHealthOnlyShowOverride,
+      interestingHealthProviderNames:
+        attributes.platformHealthOnlyShowOverride && attributes.platformHealthOnly ? ['Amazon'] : null,
+    };
+  }
+
+  private validate = (
+    values: IAmazonResizeServerGroupValues,
+  ): Partial<FormikErrors<IAmazonResizeServerGroupValues>> => {
+    const { min, max, desired } = values;
+    const errors: Partial<FormikErrors<IAmazonResizeServerGroupValues>> = {};
+
+    if (!this.state.advancedMode) {
+      return errors;
+    }
+
+    // try to only show one error message at a time
+    if (min > max && min > desired) {
+      errors.min = 'Min cannot be larger than Max/Desired';
+    } else if (max < min && max < desired) {
+      errors.max = 'Max cannot be smaller than Min/Desired';
+    } else {
+      if (min > max) {
+        errors.min = 'Min cannot be larger than Max';
+      }
+      if (!this.isDesiredControlledByAutoscaling()) {
+        if (desired < min) {
+          errors.desired = 'Desired cannot be smaller than Min';
+        }
+        if (desired > max) {
+          errors.desired = 'Desired cannot be larger than Max';
+        }
+      }
+    }
+
+    return errors;
+  };
+
+  private toggleAdvancedMode = (): void => {
+    const { desired } = this.formikRef.current.getFormikContext().values;
+    this.formikRef.current.setFieldValue('min', desired);
+    this.formikRef.current.setFieldValue('max', desired);
+    this.setState({ advancedMode: !this.state.advancedMode });
+  };
+
+  private close = (args?: any): void => {
+    this.props.dismissModal.apply(null, args);
+  };
+
+  private autoIncrementDesiredIfNeeded(): void {
+    if (!this.isDesiredControlledByAutoscaling()) {
+      return;
+    }
+
+    const formik = this.formikRef.current.getFormikContext();
+    const { asg } = this.props.serverGroup;
+    const { min, max, desired } = formik.values;
+    const newDesired = Math.min(max, Math.max(min, asg.desiredCapacity));
+    if (desired !== newDesired) {
+      formik.setFieldValue('desired', newDesired);
+    }
+  }
+
+  private platformHealthOverrideChanged = (interestingHealthProviderNames: string[]) => {
+    this.setState({ interestingHealthProviderNames });
+  };
+
+  private isDesiredControlledByAutoscaling = (): boolean => {
+    const { serverGroup } = this.props;
+    const { suspendedProcesses } = serverGroup.asg;
+    const { advancedMode } = this.state;
+    const scalingPolicies = serverGroup.scalingPolicies || [];
+    return (
+      scalingPolicies.length && advancedMode && suspendedProcesses.every((p) => p.processName !== 'AlarmNotification')
+    );
+  };
+
+  private submit = (values: IAmazonResizeServerGroupValues): void => {
+    const { min, max, desired, enforceCapacityConstraints, reason } = values;
+    const { interestingHealthProviderNames } = this.state;
+    const { serverGroup, application } = this.props;
+    const { asg } = serverGroup;
+
+    const capacity = pickBy(
+      {
+        min: min !== asg.minSize ? min : undefined,
+        max: max !== asg.maxSize ? max : undefined,
+        desired: desired !== asg.desiredCapacity ? desired : undefined,
+      },
+      (x) => x !== undefined,
+    );
+
+    const command: IResizeJob = {
+      capacity,
+      reason,
+      interestingHealthProviderNames,
+    };
+
+    if (enforceCapacityConstraints) {
+      command.constraints = {
+        capacity: {
+          min: asg.minSize,
+          max: asg.maxSize,
+          desired: asg.desiredCapacity,
+        },
+      };
+    }
+    this.state.taskMonitor.submit(() => {
+      return ReactInjector.serverGroupWriter.resizeServerGroup(serverGroup, application, command);
+    });
+  };
+
+  private renderSimpleMode(formik: FormikProps<IAmazonResizeServerGroupValues>): JSX.Element {
+    const { serverGroup } = this.props;
+    const { asg } = serverGroup;
+    return (
+      <div>
+        <p>Sets min, max, and desired instance counts to the same value.</p>
+        <p>
+          To allow autoscaling, use the{' '}
+          <a className="clickable" onClick={() => this.toggleAdvancedMode()}>
+            Advanced Mode
+          </a>
+          .
+        </p>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Current size</div>
+          <div className="col-md-4">
+            <div className="horizontal middle">
+              <input type="number" className="NumberInput form-control" value={asg.desiredCapacity} disabled={true} />
+              <div className="sp-padding-xs-xaxis">instances</div>
+            </div>
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Resize to</div>
+          <div className="col-md-4">
+            <div className="horizontal middle">
+              <FormikFormField
+                name="desired"
+                input={(props) => <NumberInput {...props} min={0} />}
+                touched={true}
+                onChange={(value) => {
+                  formik.setFieldValue('min', value);
+                  formik.setFieldValue('max', value);
+                }}
+              />
+              <div className="sp-padding-xs-xaxis">instances</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private renderAdvancedMode(formik: FormikProps<IAmazonResizeServerGroupValues>): JSX.Element {
+    const { serverGroup } = this.props;
+    const { errors } = formik;
+    const { asg } = serverGroup;
+
+    const surfacedErrorMessage: string = errors.min || errors.max || errors.desired;
+
+    return (
+      <div>
+        <p>Sets up autoscaling for this server group.</p>
+        <p>
+          To disable autoscaling, use the{' '}
+          <a className="clickable" onClick={() => this.toggleAdvancedMode()}>
+            Simple Mode
+          </a>
+          .
+        </p>
+        <div className="form-group bold">
+          <div className="col-md-2 col-md-offset-3">Min</div>
+          <div className="col-md-2">Max</div>
+          <div className="col-md-2">Desired</div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Current</div>
+          <div className="col-md-2">
+            <input type="number" className="NumberInput form-control" value={asg.minSize} disabled={true} />
+          </div>
+          <div className="col-md-2">
+            <input type="number" className="NumberInput form-control" value={asg.maxSize} disabled={true} />
+          </div>
+          <div className="col-md-2">
+            <input type="number" className="NumberInput form-control" value={asg.desiredCapacity} disabled={true} />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">Resize to</div>
+          <div className="col-md-2">
+            <FormikFormField
+              name="min"
+              input={(props) => <NumberInput {...props} min={0} />}
+              onChange={() => this.autoIncrementDesiredIfNeeded()}
+              layout={({ input }) => <>{input}</>}
+              touched={true}
+            />
+          </div>
+          <div className="col-md-2">
+            <FormikFormField
+              name="max"
+              input={(props) => <NumberInput {...props} min={0} />}
+              onChange={() => this.autoIncrementDesiredIfNeeded()}
+              layout={({ input }) => <>{input}</>}
+              touched={true}
+            />
+          </div>
+          <div className="col-md-2">
+            <FormikFormField
+              name="desired"
+              input={(props) => <NumberInput {...props} min={0} disabled={this.isDesiredControlledByAutoscaling()} />}
+              layout={({ input }) => <>{input}</>}
+              touched={true}
+            />
+          </div>
+        </div>
+
+        {!!surfacedErrorMessage && (
+          <div className="col-md-offset-3 col-md-9">
+            <ValidationMessage message={surfacedErrorMessage} type="error" />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  private renderCapacityConstraintSelector(): JSX.Element {
+    return (
+      <div className="form-group">
+        <div className="col-md-7 col-md-offset-3">
+          <FormikFormField
+            name="enforceCapacityConstraints"
+            input={(props) => (
+              <>
+                <CheckboxInput {...props} text="Enforce Capacity Constraints" />
+                <HelpField id="aws.serverGroup.capacityConstraint" />
+              </>
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  private renderScalingPolicyWarning(formik: FormikProps<IAmazonResizeServerGroupValues>): JSX.Element {
+    const { serverGroup } = this.props;
+    const { min, max } = formik.values;
+    const { advancedMode } = this.state;
+    const scalingPolicies = serverGroup.scalingPolicies || [];
+    if (scalingPolicies.length && min === max) {
+      return (
+        <div className="form-group">
+          <div className="col-md-7 col-md-offset-3">
+            <div className="well-compact alert alert-warning">
+              <b>Warning</b>: this server group has
+              {scalingPolicies.length === 1 && <span> a scaling policy. </span>}
+              {scalingPolicies.length > 1 && <span> scaling policies. </span>}
+              {!advancedMode && (
+                <span>
+                  Scaling policies will not take effect in Simple Mode. Switch to{' '}
+                  <a className="clickable" onClick={() => this.toggleAdvancedMode()}>
+                    Advanced Mode
+                  </a>
+                  .
+                </span>
+              )}
+              {advancedMode && (
+                <span>
+                  Scaling policies will not take effect when <b>Min</b> is the same as <b>Max</b>.
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      );
+    }
+    if (this.isDesiredControlledByAutoscaling()) {
+      return (
+        <div className="form-group">
+          <div className="col-md-8 col-md-offset-1">
+            <div className="well-compact alert alert-warning">
+              <p>
+                <b>Desired</b> capacity is managed by Autoscaling Policies.
+              </p>
+              <p>
+                If you need to scale <b>down</b> this server group, set <b>Max</b> to the new desired size.
+              </p>
+              <p>
+                If you need to scale <b>up</b> this server group, set <b>Min</b> to the new desired size.
+              </p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  public render() {
+    const { serverGroup } = this.props;
+    const { advancedMode, initialValues, platformHealthOnlyShowOverride } = this.state;
+    return (
+      <>
+        <TaskMonitorWrapper monitor={this.state.taskMonitor} />
+        <SpinFormik<IAmazonResizeServerGroupValues>
+          ref={this.formikRef}
+          initialValues={initialValues}
+          validate={this.validate}
+          onSubmit={this.submit}
+          render={(formik) => {
+            const { asg } = serverGroup;
+            const currentCapacity = { min: asg.minSize, max: asg.maxSize, desired: asg.desiredCapacity };
+            const nextCapacity = formik.values;
+
+            return (
+              <>
+                <ModalClose dismiss={this.close} />
+                <Modal.Header>
+                  <Modal.Title>Resize {serverGroup.name}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                  <Form className="form-horizontal">
+                    {advancedMode && this.renderAdvancedMode(formik)}
+                    {!advancedMode && this.renderSimpleMode(formik)}
+                    {this.renderScalingPolicyWarning(formik)}
+                    {this.renderCapacityConstraintSelector()}
+                    {platformHealthOnlyShowOverride && (
+                      <div className="form-group">
+                        <div className="col-md-8 col-md-offset-3">
+                          <PlatformHealthOverride
+                            interestingHealthProviderNames={this.state.interestingHealthProviderNames}
+                            platformHealthType="Amazon"
+                            onChange={this.platformHealthOverrideChanged}
+                            showHelpDetails={true}
+                          />
+                        </div>
+                      </div>
+                    )}
+
+                    <TaskReason reason={formik.values.reason} onChange={(val) => formik.setFieldValue('reason', val)} />
+
+                    <div className="form-group">
+                      <div className="col-md-3 sm-label-right">Changes</div>
+                      <div className="col-md-9 sm-control-field">
+                        <MinMaxDesiredChanges current={currentCapacity} next={nextCapacity} />
+                      </div>
+                    </div>
+                  </Form>
+                </Modal.Body>
+                <AwsModalFooter
+                  onSubmit={() => this.submit(formik.values)}
+                  onCancel={this.close}
+                  isValid={formik.isValid}
+                  account={serverGroup.account}
+                />
+              </>
+            );
+          }}
+        />
+      </>
+    );
+  }
+}

package/src/serverGroup/details/rollback/rollbackServerGroup.controller.js

@@ -0,0 +1,146 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { get } from 'lodash';
+import { SERVER_GROUP_WRITER, TaskMonitor } from '@spinnaker/core';
+
+export const AMAZON_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER =
+  'spinnaker.amazon.serverGroup.details.rollback.controller';
+export const name = AMAZON_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER; // for backwards compatibility
+module(AMAZON_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER, [SERVER_GROUP_WRITER]).controller(
+  'awsRollbackServerGroupCtrl',
+  [
+    '$scope',
+    '$uibModalInstance',
+    'serverGroupWriter',
+    'application',
+    'serverGroup',
+    'previousServerGroup',
+    'disabledServerGroups',
+    'allServerGroups',
+    function (
+      $scope,
+      $uibModalInstance,
+      serverGroupWriter,
+      application,
+      serverGroup,
+      previousServerGroup,
+      disabledServerGroups,
+      allServerGroups,
+    ) {
+      $scope.serverGroup = serverGroup;
+      $scope.disabledServerGroups = disabledServerGroups.sort((a, b) => b.name.localeCompare(a.name));
+      $scope.allServerGroups = allServerGroups.sort((a, b) => b.name.localeCompare(a.name));
+      $scope.verification = {};
+
+      const desired = serverGroup.capacity.desired;
+
+      let rollbackType = 'EXPLICIT';
+
+      if (allServerGroups.length === 0 && serverGroup.entityTags) {
+        const previousServerGroup = get(serverGroup, 'entityTags.creationMetadata.value.previousServerGroup');
+        if (previousServerGroup) {
+          rollbackType = 'PREVIOUS_IMAGE';
+          $scope.previousServerGroup = {
+            name: previousServerGroup.name,
+            imageName: previousServerGroup.imageName,
+          };
+
+          if (previousServerGroup.imageId && previousServerGroup.imageId !== previousServerGroup.imageName) {
+            $scope.previousServerGroup.imageId = previousServerGroup.imageId;
+          }
+
+          const buildNumber = get(previousServerGroup, 'buildInfo.jenkins.number');
+          if (buildNumber) {
+            $scope.previousServerGroup.buildNumber = buildNumber;
+          }
+        }
+      }
+
+      let healthyPercent;
+      if (desired < 10) {
+        healthyPercent = 100;
+      } else if (desired < 20) {
+        // accept 1 instance in an unknown state during rollback
+        healthyPercent = 90;
+      } else {
+        healthyPercent = 95;
+      }
+
+      $scope.command = {
+        rollbackType: rollbackType,
+        rollbackContext: {
+          rollbackServerGroupName: serverGroup.name,
+          restoreServerGroupName: previousServerGroup ? previousServerGroup.name : undefined,
+          targetHealthyRollbackPercentage: healthyPercent,
+          delayBeforeDisableSeconds: 0,
+        },
+      };
+
+      $scope.minHealthy = function (percent) {
+        return Math.ceil((desired * percent) / 100);
+      };
+
+      if (application && application.attributes) {
+        if (application.attributes.platformHealthOnlyShowOverride && application.attributes.platformHealthOnly) {
+          $scope.command.interestingHealthProviderNames = ['Amazon'];
+        }
+
+        $scope.command.platformHealthOnlyShowOverride = application.attributes.platformHealthOnlyShowOverride;
+      }
+
+      this.isValid = function () {
+        const command = $scope.command;
+        if (!$scope.verification.verified) {
+          return false;
+        }
+
+        if (rollbackType === 'PREVIOUS_IMAGE') {
+          // no need to validate when using an explicit image
+          return true;
+        }
+
+        return command.rollbackContext.restoreServerGroupName !== undefined;
+      };
+
+      $scope.taskMonitor = new TaskMonitor({
+        application: application,
+        title: 'Rollback ' + serverGroup.name,
+        modalInstance: $uibModalInstance,
+      });
+
+      this.rollback = function () {
+        if (!this.isValid()) {
+          return;
+        }
+
+        const submitMethod = function () {
+          return serverGroupWriter.rollbackServerGroup(serverGroup, application, $scope.command);
+        };
+
+        $scope.taskMonitor.submit(submitMethod);
+      };
+
+      this.cancel = function () {
+        $uibModalInstance.dismiss();
+      };
+
+      this.label = function (serverGroup) {
+        if (!serverGroup) {
+          return '';
+        }
+
+        if (!serverGroup.buildInfo || !serverGroup.buildInfo.jenkins || !serverGroup.buildInfo.jenkins.number) {
+          return serverGroup.name;
+        }
+
+        return serverGroup.name + ' (build #' + serverGroup.buildInfo.jenkins.number + ')';
+      };
+
+      this.group = function (serverGroup) {
+        return serverGroup.isDisabled ? 'Disabled Server Groups' : 'Enabled Server Groups';
+      };
+    },
+  ],
+);