@spinnaker/amazon 0.0.0-main-2

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingChart.tsx

@@ -0,0 +1,85 @@
+import type { Dictionary } from 'lodash';
+import * as React from 'react';
+
+import type { ICloudMetricStatistics } from '@spinnaker/core';
+
+import { MetricAlarmChart } from '../chart/MetricAlarmChart';
+import type { IAmazonServerGroup, IScalingPolicyAlarm, ITargetTrackingConfiguration } from '../../../../domain';
+
+export interface ITargetTrackingChartProps {
+  config: ITargetTrackingConfiguration;
+  serverGroup: IAmazonServerGroup;
+  unit?: string;
+  updateUnit?: (unit: string) => void;
+}
+
+const predefinedMetricTypeMapping: Dictionary<string> = {
+  ASGAverageCPUUtilization: 'CPUUtilization',
+  ASGAverageNetworkIn: 'NetworkIn',
+  ASGAverageNetworkOut: 'NetworkOut',
+  ALBRequestCountPerTarget: 'RequestCountPerTarget',
+};
+
+export const TargetTrackingChart = ({ config, serverGroup, updateUnit }: ITargetTrackingChartProps) => {
+  const [alarm, setAlarm] = React.useState<IScalingPolicyAlarm>({
+    alarmName: null,
+    alarmArn: null,
+    metricName: null,
+    namespace: null,
+    statistic: 'Average',
+    dimensions: [],
+    period: 60,
+    threshold: config.targetValue,
+    comparisonOperator: 'GreaterThanThreshold',
+    okactions: [],
+    insufficientDataActions: [],
+    alarmActions: [],
+    evaluationPeriods: null,
+    alarmDescription: null,
+    unit: null,
+  });
+
+  const synchronizeAlarm = () => {
+    const customMetric = config?.customizedMetricSpecification;
+    const predefMetric = config?.predefinedMetricSpecification;
+    const updatedAlarm = {
+      ...alarm,
+      dimensions: customMetric?.dimensions || [{ name: 'AutoScalingGroupName', value: serverGroup.name }],
+      metricName: customMetric?.metricName || predefinedMetricTypeMapping[predefMetric?.predefinedMetricType],
+      namespace: customMetric?.namespace || 'AWS/EC2',
+      threshold: config?.targetValue,
+    };
+
+    if (customMetric) {
+      updatedAlarm.statistic = customMetric?.statistic;
+    }
+
+    if (predefMetric && predefMetric.predefinedMetricType === 'ALBRequestCountPerTarget') {
+      updatedAlarm.statistic = 'Sum';
+      updatedAlarm.namespace = 'AWS/ApplicationELB';
+      if (predefMetric?.resourceLabel) {
+        const parts = predefMetric?.resourceLabel.split('/');
+        const loadBalancer = parts.slice(0, 3).join('/');
+        const targetGroup = parts.slice(3).join('/');
+        updatedAlarm.dimensions = [
+          { name: 'LoadBalancer', value: loadBalancer },
+          { name: 'TargetGroup', value: targetGroup },
+        ];
+      }
+    }
+
+    setAlarm(updatedAlarm);
+  };
+
+  React.useEffect(() => {
+    synchronizeAlarm();
+  }, [config]);
+
+  const onChartLoaded = (stats: ICloudMetricStatistics) => {
+    if (updateUnit) {
+      updateUnit(stats.unit);
+    }
+  };
+
+  return <MetricAlarmChart alarm={alarm} onChartLoaded={onChartLoaded} serverGroup={serverGroup} />;
+};

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingSummary.less

@@ -0,0 +1,11 @@
+.TargetTrackingSummary {
+  .HoverablePopover {
+    min-height: 600px;
+    text-decoration: none;
+  }
+
+  .actions {
+    margin: 0 0 15px 0;
+    border-bottom: 1px solid var(--color-alto);
+  }
+}

package/src/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingSummary.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import type { Application, IServerGroup } from '@spinnaker/core';
+import {
+  CloudProviderRegistry,
+  ConfirmationModalService,
+  HoverablePopover,
+  ReactModal,
+  robotToHuman,
+  TaskExecutor,
+} from '@spinnaker/core';
+
+import type { ITargetTrackingPolicy } from '../../../../domain';
+import './TargetTrackingSummary.less';
+
+export interface ITargetTrackingPolicySummaryProps {
+  application: Application;
+  policy: ITargetTrackingPolicy;
+  serverGroup: IServerGroup;
+}
+
+interface IDeletePolicyJob {
+  type: string;
+  cloudProvider: string;
+  credentials: string;
+  region: string;
+  policyName?: string;
+  scalingPolicyID?: string;
+  serverGroupName: string;
+}
+
+export const TargetTrackingSummary = ({ application, policy, serverGroup }: ITargetTrackingPolicySummaryProps) => {
+  const provider = serverGroup.type || serverGroup.cloudProvider || 'aws';
+  const providerConfig = CloudProviderRegistry.getValue(provider, 'serverGroup');
+  const policyTitle = provider === 'aws' ? policy.policyName : policy.id;
+
+  const UpsertModalComponent = providerConfig.UpsertTargetTrackingModal;
+  const PopoverContent = providerConfig.TargetTrackingChart;
+
+  const editPolicy = () => {
+    const upsertProps = {
+      app: application,
+      policy,
+      serverGroup,
+    };
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    ReactModal.show<typeof UpsertModalComponent>(UpsertModalComponent, upsertProps, modalProps);
+  };
+
+  const deletePolicy = () => {
+    const taskMonitor = {
+      application,
+      title: `Deleting scaling policy ${policyTitle}`,
+    };
+
+    const jobToSubmit: IDeletePolicyJob = {
+      type: 'deleteScalingPolicy',
+      cloudProvider: provider,
+      credentials: serverGroup.account,
+      region: serverGroup.region,
+      scalingPolicyID: policy.id,
+      serverGroupName: serverGroup.name,
+    };
+
+    if (provider === 'aws') {
+      delete jobToSubmit.scalingPolicyID;
+      jobToSubmit.policyName = policy.policyName;
+    }
+
+    ConfirmationModalService.confirm({
+      header: `Really delete ${policyTitle}?`,
+      buttonText: 'Delete scaling policy',
+      account: serverGroup.account,
+      taskMonitorConfig: taskMonitor,
+      submitMethod: () =>
+        TaskExecutor.executeTask({
+          application,
+          description: `Delete scaling policy ${policyTitle}`,
+          job: [jobToSubmit],
+        }),
+    });
+  };
+
+  const config = policy.targetTrackingConfiguration;
+  return (
+    <div className="TargetTrackingSummary">
+      <HoverablePopover
+        Component={() => <PopoverContent config={policy.targetTrackingConfiguration} serverGroup={serverGroup} />}
+        placement="left"
+        title={policyTitle}
+      >
+        <div>
+          <div className="label label-default">{robotToHuman(policy.policyType).toUpperCase()}</div>
+          <div>
+            <b>Target</b>
+            <span className="sp-margin-xs-left">
+              {config.predefinedMetricSpecification?.predefinedMetricType ||
+                config.customizedMetricSpecification?.metricName}
+            </span>
+            {Boolean(config.customizedMetricSpecification?.statistic) && <span>{` @ ${config.targetValue}`}</span>}
+          </div>
+        </div>
+      </HoverablePopover>
+
+      <div className="actions">
+        <button className="btn btn-xs btn-link" onClick={editPolicy}>
+          <span className="glyphicon glyphicon-cog"></span>
+          <span className="sr-only">Edit policy</span>
+        </button>
+        <button className="btn btn-xs btn-link" onClick={deletePolicy}>
+          <span className="glyphicon glyphicon-trash"></span>
+          <span className="sr-only">Delete policy</span>
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/targetTracking/UpsertTargetTrackingModal.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { TaskMonitorModal } from '@spinnaker/core';
+
+import type { ITargetTrackingPolicyCommand, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import { TargetMetricFields } from './TargetMetricFields';
+import { TargetTrackingAdditionalSettings } from './TargetTrackingAdditionalSettings';
+import type { IAmazonServerGroup, ITargetTrackingPolicy } from '../../../../domain';
+import { ScalingPolicyCommandBuilder } from '../upsert/ScalingPolicyCommandBuilderService';
+
+export interface IUpsertTargetTrackingModalProps extends IModalComponentProps {
+  app: Application;
+  policy: ITargetTrackingPolicy;
+  serverGroup: IAmazonServerGroup;
+}
+
+export const UpsertTargetTrackingModal = ({
+  app,
+  closeModal,
+  dismissModal,
+  policy,
+  serverGroup,
+}: IUpsertTargetTrackingModalProps) => {
+  const [isCustom, setIsCustom] = React.useState<boolean>(
+    Boolean(policy.targetTrackingConfiguration?.customizedMetricSpecification),
+  );
+
+  const [command, setCommand] = React.useState<IUpsertScalingPolicyCommand>({} as IUpsertScalingPolicyCommand);
+  React.useEffect(() => {
+    const baseCommand = ScalingPolicyCommandBuilder.buildNewCommand('TargetTracking', serverGroup, policy);
+    setCommand(baseCommand);
+  }, []);
+
+  const mode = policy.policyName ? 'Update' : 'Create';
+  return (
+    <TaskMonitorModal<IUpsertScalingPolicyCommand>
+      closeModal={closeModal}
+      dismissModal={dismissModal}
+      title={`${mode} scaling policy`}
+      application={app}
+      description={`${mode} scaling policy for ${serverGroup.name}`}
+      initialValues={command}
+      mapValuesToTask={() => ({
+        application: app,
+        job: [
+          {
+            type: 'upsertScalingPolicy',
+            ...command,
+          },
+        ],
+      })}
+      render={() => (
+        <div className="modal-body">
+          <h4 className="section-heading">Target Metric</h4>
+          <TargetMetricFields
+            allowDualMode={true}
+            cloudwatch={false}
+            command={command as ITargetTrackingPolicyCommand}
+            isCustomMetric={isCustom}
+            app={app}
+            serverGroup={serverGroup}
+            toggleMetricType={(t) => setIsCustom(t === 'custom')}
+            updateCommand={setCommand}
+          />
+          <h4 className="section-heading">Additional Settings</h4>
+          <TargetTrackingAdditionalSettings
+            command={command}
+            cooldowns={false}
+            policyName={policy.policyName}
+            updateCommand={setCommand}
+          />
+        </div>
+      )}
+    />
+  );
+};

package/src/serverGroup/details/scalingPolicy/upsert/PolicyTypeSelectionModal.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import { HelpContentsRegistry, HelpField, ValidationMessage } from '@spinnaker/core';
+
+export interface IPolicyTypeSelectionModalProps {
+  showCallback: () => void;
+  typeSelectedCallback: (type: string) => void;
+  warnOnMinMaxCapacity?: boolean;
+}
+
+export function PolicyTypeSelectionModal(props: IPolicyTypeSelectionModalProps) {
+  const [typeSelection, setTypeSelection] = React.useState(null);
+
+  const selectType = (e: React.MouseEvent<HTMLElement>): void => {
+    setTypeSelection(e.currentTarget.id);
+  };
+
+  const confirmTypeSelection = (): void => {
+    props.typeSelectedCallback(typeSelection);
+  };
+
+  const stepClass = typeSelection === 'step' ? 'card active' : 'card';
+  const targetClass = typeSelection === 'targetTracking' ? 'card active' : 'card';
+  const customHelpKey = 'aws.scalingPolicy.additionalHelp';
+  const hasCustomHelpMessage = !!HelpContentsRegistry.getHelpField(customHelpKey);
+  return (
+    <Modal show={true} onHide={props.showCallback}>
+      <Modal.Header closeButton={true}>
+        <h3>Select a policy type</h3>
+      </Modal.Header>
+      <Modal.Body>
+        <div className="card-choices">
+          <div className={targetClass} onClick={selectType} id="targetTracking">
+            <h3>Target Tracking</h3>
+            <div>Continuously adjusts the size of the ASG to keep a specified metric at the target value</div>
+          </div>
+          <div className={stepClass} onClick={selectType} id="step">
+            <h3>Step</h3>
+            <div>
+              Rule-based scaling, with the ability to define different scaling amounts depending on the magnitude of the
+              alarm breach
+            </div>
+          </div>
+        </div>
+        {hasCustomHelpMessage && (
+          <ValidationMessage type="info" message={<HelpField id={customHelpKey} expand={true} />} />
+        )}
+        {props.warnOnMinMaxCapacity && (
+          <ValidationMessage
+            type="warning"
+            message={
+              <>
+                <p>
+                  This server group's <em>min</em> and <em>max</em> capacity are identical, so scaling policies will
+                  have <b>no effect.</b>
+                </p>
+                <p>
+                  Scaling policies work by adjusting the server group's <em>desired</em> capacity to a value between the
+                  min and max.
+                </p>
+              </>
+            }
+          />
+        )}
+      </Modal.Body>
+      <Modal.Footer>
+        <button className="btn btn-default" onClick={props.showCallback}>
+          Cancel
+        </button>
+        <button className="btn btn-primary" disabled={!typeSelection} onClick={confirmTypeSelection}>
+          Next
+        </button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

package/src/serverGroup/details/scalingPolicy/upsert/ScalingPolicyAdditionalSettings.less

@@ -0,0 +1,11 @@
+.ScalingPolicyAdditionalSettings {
+  .section-additional-settings {
+    .row {
+      margin-bottom: 10px;
+    }
+
+    .number-input-sm {
+      width: 60px;
+    }
+  }
+}

package/src/serverGroup/details/scalingPolicy/upsert/ScalingPolicyAdditionalSettings.tsx

@@ -0,0 +1,105 @@
+import { set } from 'lodash';
+import * as React from 'react';
+
+import { HelpField, NumberInput } from '@spinnaker/core';
+
+import type { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import './ScalingPolicyAdditionalSettings.less';
+
+export interface IScalingPolicyAdditionalSettingsProps {
+  command: IUpsertScalingPolicyCommand;
+  isInstanceType: boolean;
+  isNew: boolean;
+  operator: string;
+  updateCommand: (command: IUpsertScalingPolicyCommand) => void;
+}
+
+export const ScalingPolicyAdditionalSettings = ({
+  command,
+  isInstanceType,
+  isNew,
+  operator,
+  updateCommand,
+}: IScalingPolicyAdditionalSettingsProps) => {
+  const setCommandField = (path: string, value: number) => {
+    const newCommand = { ...command };
+    set(newCommand, path, value);
+    updateCommand(newCommand);
+  };
+
+  return (
+    <div className="ScalingPolicyAdditionalSettings">
+      <h4 className="section-heading">Additional Settings</h4>
+      <div className="section-body section-additional-settings">
+        {!isNew && (
+          <div className="row">
+            <div className="col-md-2 sm-label-right">Policy Name</div>
+            <div className="col-md-10 horizontal middle">
+              <span className="form-control-static select-placeholder">{command.name}</span>
+            </div>
+          </div>
+        )}
+        {!isInstanceType && (
+          <div className="row">
+            <div className="col-md-2 sm-label-right">Adjustment Step</div>
+            <div className="col-md-10 horizontal middle">
+              <span className="form-control-static select-placeholder">
+                {`${operator} instances in increments of at least `}
+              </span>
+              <NumberInput
+                value={command.minAdjustmentMagnitude}
+                onChange={(e) => setCommandField('minAdjustmentMagnitude', Number.parseInt(e.target.value))}
+                inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
+              />
+              <span className="input-label"> instance(s) </span>
+            </div>
+          </div>
+        )}
+        {Boolean(command.simple) && (
+          <div className="row">
+            <div className="col-md-2 sm-label-right">Cooldown</div>
+            <div className="col-md-10 horizontal middle">
+              <span className="form-control-static select-placeholder"> Wait at least </span>
+              <NumberInput
+                value={command.simple?.cooldown}
+                onChange={(e) => setCommandField('simple.cooldown', Number.parseInt(e.target.value))}
+                inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
+              />
+              <span className="input-label"> seconds before another scaling event </span>
+            </div>
+          </div>
+        )}
+        {Boolean(command.step?.estimatedInstanceWarmup) && operator !== 'Remove' && (
+          <div className="row">
+            <div className="col-md-2 sm-label-right">Warmup</div>
+            <div className="col-md-10 horizontal middle">
+              <span className="form-control-static select-placeholder">Instances need</span>
+              <NumberInput
+                value={command.step.estimatedInstanceWarmup}
+                onChange={(e) => setCommandField('step.estimatedInstanceWarmup', Number.parseInt(e.target.value))}
+                inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
+              />
+              <span className="input-label"> seconds to warm up after each step </span>
+            </div>
+          </div>
+        )}
+        {Boolean(command.step?.cooldown) && operator !== 'Remove' && (
+          <div className="row">
+            <div className="col-md-2 sm-label-right">
+              <span className="sp-margin-xs-right">Cooldown</span>
+              <HelpField id={`${command.cloudProvider || command.provider}.autoscaling.cooldown`} />
+            </div>
+            <div className="col-md-10 horizontal middle">
+              <NumberInput
+                value={command.step?.cooldown}
+                onChange={(e) => setCommandField('step.cooldown', Number.parseInt(e.target.value))}
+                inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
+              />
+              <span className="input-label"> seconds </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/upsert/ScalingPolicyCommandBuilderService.ts

@@ -0,0 +1,133 @@
+import { cloneDeep } from 'lodash';
+
+import type {
+  ISimplePolicyDescription,
+  IStepPolicyDescription,
+  IUpsertAlarmDescription,
+  IUpsertScalingPolicyCommand,
+} from '../ScalingPolicyWriter';
+import type {
+  IAmazonServerGroup,
+  IScalingPolicy,
+  IScalingPolicyAlarm,
+  IStepAdjustment,
+  ITargetTrackingPolicy,
+} from '../../../../domain';
+
+type PolicyType = 'Step' | 'TargetTracking';
+
+export const ScalingPolicyCommandBuilder = {
+  buildAlarm: (policy: IScalingPolicy, region: string, asgName: string): IUpsertAlarmDescription => {
+    const alarm = policy?.alarms ? policy.alarms[0] : ({} as IScalingPolicyAlarm);
+    return {
+      name: alarm.alarmName,
+      actionsEnabled: true,
+      alarmActionArns: alarm.alarmActions,
+      alarmDescription: alarm.alarmDescription,
+      asgName: asgName,
+      comparisonOperator: alarm.comparisonOperator,
+      dimensions: alarm.dimensions,
+      evaluationPeriods: alarm.evaluationPeriods,
+      insufficientDataActionArns: alarm.insufficientDataActions,
+      metricName: alarm.metricName,
+      namespace: alarm.namespace,
+      okActionArns: alarm.okactions,
+      period: alarm.period,
+      region,
+      statistic: alarm.statistic,
+      threshold: alarm.threshold,
+      unit: alarm.unit,
+    };
+  },
+
+  buildStepPolicy: (policy: IScalingPolicy, threshold: number, cooldown: number): IStepPolicyDescription => {
+    const stepAdjustments = policy.stepAdjustments.map((adjustment) => {
+      const step = {
+        scalingAdjustment: Math.abs(adjustment.scalingAdjustment),
+      } as IStepAdjustment;
+
+      if (adjustment.metricIntervalUpperBound !== undefined) {
+        step.metricIntervalUpperBound = adjustment.metricIntervalUpperBound + threshold;
+      }
+      if (adjustment.metricIntervalLowerBound !== undefined) {
+        step.metricIntervalLowerBound = adjustment.metricIntervalLowerBound + threshold;
+      }
+
+      return step;
+    });
+
+    return {
+      estimatedInstanceWarmup: policy.estimatedInstanceWarmup ?? cooldown ?? 600,
+      metricAggregationType: 'Average',
+      stepAdjustments,
+    };
+  },
+
+  buildSimplePolicy: (policy: IScalingPolicy): ISimplePolicyDescription => ({
+    cooldown: policy.cooldown ?? 600,
+    scalingAdjustment: Math.abs(policy.scalingAdjustment) ?? 1,
+  }),
+
+  buildNewCommand: (
+    type: PolicyType,
+    serverGroup: IAmazonServerGroup,
+    policy: ITargetTrackingPolicy,
+  ): IUpsertScalingPolicyCommand => {
+    const command = {
+      name: policy.policyName,
+      adjustmentType: type === 'Step' ? policy.adjustmentType : null,
+      cloudProvider: serverGroup.cloudProvider,
+      credentials: serverGroup.account,
+      provider: serverGroup.type,
+      region: serverGroup.region,
+      serverGroupName: serverGroup.name,
+    } as IUpsertScalingPolicyCommand;
+
+    if (type === 'Step') {
+      command.alarm = ScalingPolicyCommandBuilder.buildAlarm(policy, serverGroup.region, serverGroup.name);
+      command.minAdjustmentMagnitude = policy.minAdjustmentMagnitude ?? 1;
+
+      if (policy.stepAdjustments?.length) {
+        command.step = ScalingPolicyCommandBuilder.buildStepPolicy(policy, command.alarm.threshold, command.cooldown);
+      } else {
+        command.simple = ScalingPolicyCommandBuilder.buildSimplePolicy(policy);
+      }
+    }
+
+    if (type === 'TargetTracking') {
+      command.estimatedInstanceWarmup = policy.estimatedInstanceWarmup ?? 600;
+      command.targetTrackingConfiguration = { ...policy.targetTrackingConfiguration };
+    }
+
+    return command;
+  },
+
+  prepareCommandForUpsert: (command: IUpsertScalingPolicyCommand, isRemove: boolean): IUpsertScalingPolicyCommand => {
+    const commandToSubmit = cloneDeep(command);
+
+    if (commandToSubmit.adjustmentType !== 'PercentChangeInCapacity') {
+      delete commandToSubmit.minAdjustmentMagnitude;
+    }
+
+    if (commandToSubmit.step) {
+      // adjust metricIntervalLowerBound/UpperBound for each step based on alarm threshold
+      commandToSubmit.step.stepAdjustments.forEach((step) => {
+        if (isRemove) {
+          step.scalingAdjustment = 0 - step.scalingAdjustment;
+          delete commandToSubmit.step.estimatedInstanceWarmup;
+        }
+        if (step.metricIntervalLowerBound !== undefined) {
+          step.metricIntervalLowerBound -= commandToSubmit.alarm.threshold;
+        }
+        if (step.metricIntervalUpperBound !== undefined) {
+          step.metricIntervalUpperBound -= commandToSubmit.alarm.threshold;
+        }
+      });
+    } else {
+      if (isRemove) {
+        command.simple.scalingAdjustment = 0 - command.simple.scalingAdjustment;
+      }
+    }
+    return commandToSubmit;
+  },
+};