@spinnaker/amazon 0.8.14 → 0.11.0

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { HelpField, NumberInput } from '@spinnaker/core';
 
-import { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import type { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
 import './ScalingPolicyAdditionalSettings.less';
 
 export interface IScalingPolicyAdditionalSettingsProps {
@@ -21,11 +21,9 @@ export const ScalingPolicyAdditionalSettings = ({
   operator,
   updateCommand,
 }: IScalingPolicyAdditionalSettingsProps) => {
-  const [commandView, setCommandView] = React.useState<IUpsertScalingPolicyCommand>(command);
   const setCommandField = (path: string, value: number) => {
     const newCommand = { ...command };
     set(newCommand, path, value);
-    setCommandView(newCommand);
     updateCommand(newCommand);
   };
 
@@ -37,7 +35,7 @@ export const ScalingPolicyAdditionalSettings = ({
           <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">{commandView.name}</span>
+              <span className="form-control-static select-placeholder">{command.name}</span>
             </div>
           </div>
         )}
@@ -49,7 +47,7 @@ export const ScalingPolicyAdditionalSettings = ({
                 {`${operator} instances in increments of at least `}
               </span>
               <NumberInput
-                value={commandView.minAdjustmentMagnitude}
+                value={command.minAdjustmentMagnitude}
                 onChange={(e) => setCommandField('minAdjustmentMagnitude', Number.parseInt(e.target.value))}
                 inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
               />
@@ -57,13 +55,13 @@ export const ScalingPolicyAdditionalSettings = ({
             </div>
           </div>
         )}
-        {Boolean(commandView.simple) && (
+        {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={commandView.simple?.cooldown}
+                value={command.simple?.cooldown}
                 onChange={(e) => setCommandField('simple.cooldown', Number.parseInt(e.target.value))}
                 inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
               />
@@ -71,13 +69,13 @@ export const ScalingPolicyAdditionalSettings = ({
             </div>
           </div>
         )}
-        {Boolean(commandView.step?.estimatedInstanceWarmup) && operator !== 'Remove' && (
+        {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={commandView.step.estimatedInstanceWarmup}
+                value={command.step.estimatedInstanceWarmup}
                 onChange={(e) => setCommandField('step.estimatedInstanceWarmup', Number.parseInt(e.target.value))}
                 inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
               />
@@ -85,15 +83,15 @@ export const ScalingPolicyAdditionalSettings = ({
             </div>
           </div>
         )}
-        {Boolean(commandView.step?.cooldown) && operator !== 'Remove' && (
+        {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={`${commandView.cloudProvider || commandView.provider}.autoscaling.cooldown`} />
+              <HelpField id={`${command.cloudProvider || command.provider}.autoscaling.cooldown`} />
             </div>
             <div className="col-md-10 horizontal middle">
               <NumberInput
-                value={commandView.step?.cooldown}
+                value={command.step?.cooldown}
                 onChange={(e) => setCommandField('step.cooldown', Number.parseInt(e.target.value))}
                 inputClassName="sp-margin-xs-xaxis input-sm number-input-sm"
               />

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

@@ -1,12 +1,12 @@
 import { cloneDeep } from 'lodash';
 
-import {
+import type {
   ISimplePolicyDescription,
   IStepPolicyDescription,
   IUpsertAlarmDescription,
   IUpsertScalingPolicyCommand,
 } from '../ScalingPolicyWriter';
-import {
+import type {
   IAmazonServerGroup,
   IScalingPolicy,
   IScalingPolicyAlarm,

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

@@ -1,15 +1,17 @@
 import { cloneDeep } from 'lodash';
 import * as React from 'react';
 
-import { Application, IModalComponentProps, TaskMonitorModal } from '@spinnaker/core';
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { TaskMonitorModal } from '@spinnaker/core';
 
 import { ScalingPolicyAdditionalSettings } from './ScalingPolicyAdditionalSettings';
 import { ScalingPolicyCommandBuilder } from './ScalingPolicyCommandBuilderService';
-import { IStepPolicyDescription, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import type { IStepPolicyDescription, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
 import { AlarmConfigurer } from './alarm/AlarmConfigurer';
-import { IAmazonServerGroup, IScalingPolicy, IStepAdjustment, ITargetTrackingPolicy } from '../../../../domain';
+import type { IAmazonServerGroup, IScalingPolicy, IStepAdjustment, ITargetTrackingPolicy } from '../../../../domain';
 import { SimplePolicyAction } from './simple/SimplePolicyAction';
-import { AdjustmentTypeView, Operator, StepPolicyAction } from './step/StepPolicyAction';
+import type { AdjustmentTypeView, Operator } from './step/StepPolicyAction';
+import { StepPolicyAction } from './step/StepPolicyAction';
 
 export interface IUpsertScalingPolicyModalProps extends IModalComponentProps {
   app: Application;

package/src/serverGroup/details/scalingPolicy/upsert/alarm/AlarmConfigurer.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 
-import { ICloudMetricStatistics, NumberInput, ReactSelectInput, usePrevious } from '@spinnaker/core';
+import type { ICloudMetricStatistics } from '@spinnaker/core';
+import { NumberInput, ReactSelectInput, usePrevious } from '@spinnaker/core';
 
 import { MetricSelector } from './MetricSelector';
 import { MetricAlarmChart } from '../../chart/MetricAlarmChart';
-import { IAmazonServerGroup, IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
+import type { IAmazonServerGroup, IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
 
 import './AlarmConfigurer.less';
 
@@ -19,7 +20,7 @@ export interface IAlarmConfigurerProps {
 
 const STATISTICS = ['Average', 'Maximum', 'Minimum', 'SampleCount', 'Sum'];
 
-const COMPARATORS = [
+export const COMPARATORS = [
   { label: '>=', value: 'GreaterThanOrEqualToThreshold' },
   { label: '>', value: 'GreaterThanThreshold' },
   { label: '<=', value: 'LessThanOrEqualToThreshold' },
@@ -44,8 +45,7 @@ export const AlarmConfigurer = ({
   updateAlarm,
 }: IAlarmConfigurerProps) => {
   const comparatorBound = alarm.comparisonOperator?.indexOf('Greater') === 0 ? 'max' : 'min';
-  const [alarmView, setAlarmView] = React.useState<IScalingPolicyAlarm>(alarm);
-  const [unit, setUnit] = React.useState<string>(alarmView?.unit);
+  const [unit, setUnit] = React.useState<string>(alarm?.unit);
   const prevComparator = usePrevious(comparatorBound);
 
   React.useEffect(() => {
@@ -64,24 +64,22 @@ export const AlarmConfigurer = ({
     if (stepAdjustments?.length) {
       const updatedStepAdjustments = [...stepAdjustments];
       // Always set the first step at the alarm threshold
-      updatedStepAdjustments[0][source] = alarmView.threshold;
+      updatedStepAdjustments[0][source] = alarm.threshold;
       stepsChanged(updatedStepAdjustments);
     }
-  }, [alarmView.threshold]);
+  }, [alarm.threshold]);
 
   const onChartLoaded = (stats: ICloudMetricStatistics) => setUnit(stats.unit);
 
   const onAlarmChange = (key: string, value: any) => {
     const newAlarm = {
-      ...alarmView,
+      ...alarm,
       [key]: value,
     };
-    setAlarmView(newAlarm);
     updateAlarm(newAlarm);
   };
 
   const onMetricChange = (newAlarm: IScalingPolicyAlarm) => {
-    setAlarmView(newAlarm);
     updateAlarm(newAlarm);
   };
 
@@ -100,7 +98,7 @@ export const AlarmConfigurer = ({
           </div>
         </div>
       )}
-      {alarmView.alarmActionArns?.length > 1 && (
+      {alarm.alarmActionArns?.length > 1 && (
         <div className="row">
           <div className="col-md-12">
             <div className="alert alert-warning">
@@ -116,21 +114,21 @@ export const AlarmConfigurer = ({
         <div className="col-md-2 sm-label-right">Whenever</div>
         <div className="col-md-10 horizontal">
           <ReactSelectInput
-            value={alarmView.statistic}
+            value={alarm.statistic}
             onChange={(e) => onAlarmChange('statistic', e.target.value)}
             stringOptions={STATISTICS}
             clearable={false}
             inputClassName="sp-margin-xs-right configurer-field-lg"
           />
           <span className="input-label sp-margin-xs-right sp-margin-s-top"> of </span>
-          <MetricSelector alarm={alarmView} serverGroup={serverGroup} updateAlarm={onMetricChange} />
+          <MetricSelector alarm={alarm} serverGroup={serverGroup} updateAlarm={onMetricChange} />
         </div>
       </div>
       <div className="row sp-margin-s-yaxis">
         <div className="col-md-2 sm-label-right">is</div>
         <div className="col-md-10 horizontal middle">
           <ReactSelectInput
-            value={alarmView.comparisonOperator}
+            value={alarm.comparisonOperator}
             onChange={(e) => onAlarmChange('comparisonOperator', e.target.value)}
             options={COMPARATORS}
             clearable={false}
@@ -138,7 +136,7 @@ export const AlarmConfigurer = ({
           />
           <div className="sp-margin-xl-left">
             <NumberInput
-              value={alarmView.threshold}
+              value={alarm.threshold}
               onChange={(e) => onAlarmChange('threshold', Number.parseInt(e.target.value))}
               inputClassName="sp-margin-xs-right configurer-field-lg"
             />
@@ -150,13 +148,13 @@ export const AlarmConfigurer = ({
         <div className="col-md-2 sm-label-right">for at least</div>
         <div className="col-md-10 horizontal middle">
           <NumberInput
-            value={alarmView.evaluationPeriods}
+            value={alarm.evaluationPeriods}
             onChange={(e) => onAlarmChange('evaluationPeriods', Number.parseInt(e.target.value))}
             inputClassName="configurer-field-med number-input-field"
           />
           <span className="input-label sp-margin-s-xaxis"> consecutive period(s) of </span>
           <ReactSelectInput
-            value={alarmView.period}
+            value={alarm.period}
             onChange={(e) => onAlarmChange('period', e.target.value)}
             options={PERIODS}
             clearable={false}
@@ -168,7 +166,7 @@ export const AlarmConfigurer = ({
         <div className="col-md-10 col-md-offset-1">
           {alarm && (
             <div>
-              <MetricAlarmChart alarm={alarmView} serverGroup={serverGroup} onChartLoaded={onChartLoaded} />
+              <MetricAlarmChart alarm={alarm} serverGroup={serverGroup} onChartLoaded={onChartLoaded} />
             </div>
           )}
         </div>

package/src/serverGroup/details/scalingPolicy/upsert/alarm/DimensionsEditor.tsx

@@ -1,17 +1,11 @@
 import { flatMap, uniq } from 'lodash';
 import * as React from 'react';
-import { Subject } from 'rxjs';
+import type { Subject } from 'rxjs';
 
-import {
-  CloudMetricsReader,
-  IMetricAlarmDimension,
-  IServerGroup,
-  ReactSelectInput,
-  TextInput,
-  useData,
-} from '@spinnaker/core';
+import type { IMetricAlarmDimension, IServerGroup } from '@spinnaker/core';
+import { CloudMetricsReader, ReactSelectInput, TextInput, useData } from '@spinnaker/core';
 
-import { IScalingPolicyAlarmView } from '../../../../../domain';
+import type { IScalingPolicyAlarmView } from '../../../../../domain';
 
 import './dimensionsEditor.less';
 
@@ -23,37 +17,37 @@ export interface IDimensionsEditorProps {
 }
 
 export const DimensionsEditor = ({ alarm, serverGroup, updateAvailableMetrics }: IDimensionsEditorProps) => {
-  const [dimensions, setDimensions] = React.useState(alarm.dimensions || []);
+  const dimensions = alarm.dimensions || [];
 
   const fetchDimensions = () => {
     return CloudMetricsReader.listMetrics('aws', serverGroup.account, serverGroup.region, {
       namespace: alarm.namespace,
-    }).then((results) => {
-      const allDimensions = flatMap(results, (r) => r.dimensions);
-      const sortedDimensions = uniq(allDimensions.map((d) => d.name)).sort();
-      return sortedDimensions;
-    });
+    })
+      .then((results) => {
+        const allDimensions = flatMap(results, (r) => r.dimensions);
+        const sortedDimensions = uniq(allDimensions.filter((d) => d).map((d) => d.name)).sort();
+        return sortedDimensions;
+      })
+      .catch(() => {
+        return [];
+      });
   };
   const { result: dimensionOptions } = useData(fetchDimensions, [], [alarm.namespace, serverGroup.name]);
 
   const addDimension = () => {
     const newDimensions = [...dimensions, {} as IMetricAlarmDimension];
-    setDimensions(newDimensions);
     updateAvailableMetrics(newDimensions);
   };
   const removeDimension = (index: number) => {
     const newDimensions = alarm.dimensions.filter((_d, i) => i !== index);
-    setDimensions(newDimensions);
     updateAvailableMetrics(newDimensions);
   };
   const updateDimension = (key: 'name' | 'value', value: string, index: number) => {
     const newDimensions = [...dimensions];
     const updatedDimension = newDimensions[index];
     updatedDimension[key] = value;
-    setDimensions(newDimensions);
     updateAvailableMetrics(newDimensions);
   };
-
   return (
     <div>
       <div className="row">

package/src/serverGroup/details/scalingPolicy/upsert/alarm/MetricSelector.tsx

@@ -1,18 +1,12 @@
-import { Dictionary } from 'lodash';
+import type { Dictionary } from 'lodash';
 import * as React from 'react';
 
-import {
-  CloudMetricsReader,
-  HelpField,
-  ICloudMetricDescriptor,
-  IMetricAlarmDimension,
-  ReactSelectInput,
-  useData,
-} from '@spinnaker/core';
+import type { ICloudMetricDescriptor, IMetricAlarmDimension } from '@spinnaker/core';
+import { CloudMetricsReader, HelpField, ReactSelectInput, useData } from '@spinnaker/core';
 
 import { DimensionsEditor } from './DimensionsEditor';
 import { AWSProviderSettings } from '../../../../../aws.settings';
-import { IAmazonServerGroup, IScalingPolicyAlarmView } from '../../../../../domain';
+import type { IAmazonServerGroup, IScalingPolicyAlarmView } from '../../../../../domain';
 import { NAMESPACES } from './namespaces';
 
 import './MetricSelector.less';
@@ -32,10 +26,6 @@ export interface IMetricSelectorProps {
 export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelectorProps) => {
   const namespaces = (AWSProviderSettings?.metrics?.customNamespaces || []).concat(NAMESPACES);
   const [advancedMode, setAdvancedMode] = React.useState<boolean>(false);
-  // TODO: Remove useState once rendering speed improve (after refactoring to React)
-  const [selectedMetric, setSelectedMetric] = React.useState({});
-  const [metricName, setMetricName] = React.useState<string>(alarm?.metricName);
-  const [namespace, setNamespace] = React.useState<string>(alarm?.namespace);
 
   const dimensionsObject = (alarm?.dimensions || []).reduce(
     (acc: Dictionary<string>, dimension: IMetricAlarmDimension) => {
@@ -50,49 +40,35 @@ export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelec
       .sort((a: IMetricAlarmDimension, b: IMetricAlarmDimension) => a.name?.localeCompare(b.name))
       .map((d: IMetricAlarmDimension) => d.value)
       .join(', ');
-  const dimensionValuesStr = buildDimensionValues(alarm?.dimensions || []);
 
   const fetchCloudMetrics = () => {
     const account = serverGroup.cloudProvider === 'aws' ? serverGroup.account : serverGroup?.awsAccount;
-    return CloudMetricsReader.listMetrics('aws', account, serverGroup.region, dimensionsObject).then(
-      (metrics: ICloudMetricDescriptor[]) => {
-        const sortedMetrics: IMetricOption[] = metrics
+    const queryParams = advancedMode ? { namespace: alarm?.namespace } : { AutoScalingGroupName: serverGroup.name };
+    return CloudMetricsReader.listMetrics('aws', account, serverGroup.region, queryParams)
+      .then((results: ICloudMetricDescriptor[]) => {
+        const sortedMetrics: IMetricOption[] = (results || [])
           .map((m) => ({
             label: `(${m.namespace}) ${m.name}`,
             dimensions: [],
-            dimensionValues: buildDimensionValues(m.dimensions),
+            dimensionValues: buildDimensionValues(m.dimensions || []),
             value: m,
             ...m,
           }))
           .sort((a, b) => a.label?.localeCompare(b.label));
-
-        const chosenMetric =
-          sortedMetrics.find(
-            (m: IMetricOption) =>
-              m.name === alarm?.metricName &&
-              m.namespace === alarm?.namespace &&
-              m.dimensionValues === dimensionValuesStr,
-          ) ||
-          sortedMetrics.find((m) => m.name.match('CPUUtilization')) ||
-          sortedMetrics[0];
-        setSelectedMetric(chosenMetric);
-        setMetricName(chosenMetric.name);
-        setNamespace(chosenMetric.namespace);
-
-        const newAlarm = {
-          ...alarm,
-          metricName: chosenMetric.name,
-          namespace: chosenMetric.namespace,
-          dimensions: chosenMetric.dimensions,
-        };
-        updateAlarm(newAlarm);
         return sortedMetrics;
-      },
-    );
+      })
+      .catch(() => {
+        return [];
+      });
   };
 
   const { result: metrics } = useData(fetchCloudMetrics, [], [serverGroup, alarm?.namespace]);
-  // TODO: Once rendering speeds improve, infer `selectedMetric` from the result of useData metrics. useState is needed now to update dropdown until data propagates.
+  const metricsByNamespace = (metrics || []).filter((m) => m.namespace === alarm?.namespace);
+  const selectedMetric =
+    metricsByNamespace.find((m: IMetricOption) => m.name === alarm?.metricName && m.namespace === alarm?.namespace) ||
+    metricsByNamespace.find((m) => m.name.match('CPUUtilization')) ||
+    metricsByNamespace[0];
+  const { name: metricName, namespace } = selectedMetric || {};
 
   const toggleMode = () => {
     const newMode = !advancedMode;
@@ -115,11 +91,6 @@ export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelec
       namespace: metric.namespace,
       dimensions: metric.dimensions,
     };
-
-    const newMetric = metrics.find((m) => m.namespace === metric.namespace && m.name === metric.name);
-    setSelectedMetric(newMetric);
-    setMetricName(newMetric.name);
-    setNamespace(newMetric.namespace);
     updateAlarm(newAlarm);
   };
 
@@ -129,8 +100,6 @@ export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelec
       metricName: newName,
       namespace: newNamespace,
     };
-    setMetricName(newName);
-    setNamespace(newNamespace);
     updateAlarm(newAlarm);
   };
 
@@ -141,6 +110,13 @@ export const MetricSelector = ({ alarm, updateAlarm, serverGroup }: IMetricSelec
     };
     updateAlarm(newAlarm);
   };
+
+  React.useEffect(() => {
+    if (selectedMetric) {
+      onMetricChange(selectedMetric);
+    }
+  }, [selectedMetric]);
+
   if (!advancedMode) {
     return (
       <div className="MetricSelector horizontal middle">

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

@@ -4,3 +4,4 @@ export * from './alarm/MetricSelector';
 export * from './PolicyTypeSelectionModal';
 export * from './ScalingPolicyAdditionalSettings';
 export * from './step/StepPolicyAction';
+export { UpsertScalingPolicyModal as AmazonUpsertScalingPolicyModal } from './UpsertScalingPolicyModal';

package/src/serverGroup/details/scalingPolicy/upsert/simple/SimplePolicyAction.tsx

@@ -24,17 +24,15 @@ export const SimplePolicyAction = ({
 }: ISimplePolicyActionProps) => {
   const availableActions = ['Add', 'Remove', 'Set to'];
 
-  const [action, setAction] = React.useState<Operator>(operator);
-  const adjustmentTypeOptions = action === 'Set to' ? ['instances'] : ['instances', 'percent of group'];
+  const adjustmentTypeOptions = operator === 'Set to' ? ['instances'] : ['instances', 'percent of group'];
   const onActionChange = (val: Operator) => {
-    setAction(val);
     adjustmentTypeChanged(val, adjustmentType);
   };
 
   const [adjustmentTypeView, setAdjustmentTypeView] = React.useState<AdjustmentTypeView>(adjustmentType);
   const onAdjustmentTypeChange = (type: AdjustmentTypeView) => {
     setAdjustmentTypeView(type);
-    adjustmentTypeChanged(action, type);
+    adjustmentTypeChanged(operator, type);
   };
 
   const [adjustment, setAdjustment] = React.useState<number>(scalingAdjustment);
@@ -47,7 +45,7 @@ export const SimplePolicyAction = ({
     <div className="SimplePolicyAction row">
       <div className="col-md-10 col-md-offset-1 horizontal middle">
         <ReactSelectInput
-          value={action}
+          value={operator}
           stringOptions={availableActions}
           onChange={(e) => onActionChange(e.target.value)}
           clearable={false}

package/src/serverGroup/details/scalingPolicy/upsert/step/StepPolicyAction.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { NumberInput, ReactSelectInput } from '@spinnaker/core';
 
-import { IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
+import type { IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
 
 import './StepPolicyAction.less';
 
@@ -33,50 +33,40 @@ export const StepPolicyAction = ({
   const hasEqualTo = alarm?.comparisonOperator.includes('Equal');
   const availableActions = ['Add', 'Remove', 'Set to'];
 
-  const [action, setAction] = React.useState<Operator>(operator);
-  const adjustmentTypeOptions = action === 'Set to' ? ['instances'] : ['instances', 'percent of group'];
+  const adjustmentTypeOptions = operator === 'Set to' ? ['instances'] : ['instances', 'percent of group'];
   const onActionChange = (val: Operator) => {
-    setAction(val);
     adjustmentTypeChanged(val, adjustmentType);
   };
 
-  const [adjustmentTypeView, setAdjustmentTypeView] = React.useState<AdjustmentTypeView>(adjustmentType);
   const onAdjustmentTypeChange = (type: AdjustmentTypeView) => {
-    setAdjustmentTypeView(type);
-    adjustmentTypeChanged(action, type);
+    adjustmentTypeChanged(operator, type);
   };
 
-  const [steps, setSteps] = React.useState<IStepAdjustment[]>(step?.stepAdjustments || stepAdjustments);
+  const steps = step?.stepAdjustments || stepAdjustments;
   const addStep = () => {
     const newStep = { scalingAdjustment: 1 } as IStepAdjustment;
     const newSteps = [...steps, newStep];
-    setSteps(newSteps);
     stepsChanged(newSteps);
   };
   const removeStep = (index: number) => {
     const newSteps = steps.filter((_s, i) => i !== index);
-    setSteps(newSteps);
     stepsChanged(newSteps);
   };
   const updateStep = (updatedStep: IStepAdjustment, index: number) => {
     const newSteps = [...steps];
     newSteps[index] = updatedStep;
-    setSteps(newSteps);
     stepsChanged(newSteps);
   };
 
-  React.useEffect(() => {
-    setSteps(step.stepAdjustments);
-  }, [step?.stepAdjustments]);
   return (
     <div className="StepPolicyAction row">
       {steps?.map((step: IStepAdjustment, index: number) => (
         <div key={`step-adjustment-${index}`} className="step-policy-row col-md-10 col-md-offset-1 horizontal middle">
           {Boolean(index) ? (
-            <span className="action-input sp-margin-xs-left">{action}</span>
+            <span className="action-input sp-margin-xs-left">{operator}</span>
           ) : (
             <ReactSelectInput
-              value={action}
+              value={operator}
               stringOptions={availableActions}
               onChange={(e) => onActionChange(e.target.value)}
               clearable={false}
@@ -90,10 +80,10 @@ export const StepPolicyAction = ({
             inputClassName="action-input"
           />
           {Boolean(index) ? (
-            <span className="sp-margin-xs-left">{adjustmentTypeView}</span>
+            <span className="sp-margin-xs-left">{adjustmentType}</span>
           ) : (
             <ReactSelectInput
-              value={adjustmentTypeView}
+              value={adjustmentType}
               stringOptions={adjustmentTypeOptions}
               onChange={(e) => onAdjustmentTypeChange(e.target.value)}
               clearable={false}

package/src/serverGroup/details/scalingProcesses/AutoScalingProcessService.ts

@@ -1,4 +1,4 @@
-import { IAmazonServerGroup, IScalingProcess } from '../../../domain';
+import type { IAmazonServerGroup, IScalingProcess } from '../../../domain';
 
 export class AutoScalingProcessService {
   public static getDisabledDate(serverGroup: IAmazonServerGroup): number {

package/src/serverGroup/details/scheduledAction/ScheduledAction.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IScheduledAction } from '../../../domain';
+import type { IScheduledAction } from '../../../domain';
 
 export interface IScheduledActionProps {
   action: IScheduledAction;

package/src/serverGroup/details/sections/AdvancedSettingsDetailsSection.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { CollapsibleSection, confirmNotManaged, ModalInjector } from '@spinnaker/core';
+import { CollapsibleSection, confirmNotManaged, ModalInjector, SETTINGS } from '@spinnaker/core';
 import { HelpField } from '@spinnaker/core';
 
-import { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
 
 export class AdvancedSettingsDetailsSection extends React.Component<IAmazonServerGroupDetailsSectionProps> {
   private editAdvancedSettings = (): void => {
@@ -49,9 +49,11 @@ export class AdvancedSettingsDetailsSection extends React.Component<IAmazonServe
             <dd>{`${asg.capacityRebalance}`}</dd>,
           ]}
         </dl>
-        <a className="clickable" onClick={this.editAdvancedSettings}>
-          Edit Advanced Settings
-        </a>
+        {SETTINGS.awsAdHocInfraWritesEnabled && (
+          <a className="clickable" onClick={this.editAdvancedSettings}>
+            Edit Advanced Settings
+          </a>
+        )}
       </CollapsibleSection>
     );
   }

package/src/serverGroup/details/sections/AmazonCapacityDetailsSection.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 
+import type { ICapacity } from '@spinnaker/core';
 import {
   CapacityDetailsSection,
   CollapsibleSection,
-  ICapacity,
   Overridable,
+  SETTINGS,
   ViewScalingActivitiesLink,
 } from '@spinnaker/core';
 
-import { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+import type { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
 import { AmazonResizeServerGroupModal } from '../resize/AmazonResizeServerGroupModal';
 
 @Overridable('amazon.serverGroup.CapacityDetailsSection')
@@ -27,9 +28,11 @@ export class AmazonCapacityDetailsSection extends React.Component<IAmazonServerG
         <CapacityDetailsSection current={serverGroup.instances.length} capacity={capacity} />
 
         <div>
-          <a className="clickable" onClick={() => AmazonResizeServerGroupModal.show({ application, serverGroup })}>
-            Resize Server Group
-          </a>
+          {SETTINGS.awsAdHocInfraWritesEnabled && (
+            <a className="clickable" onClick={() => AmazonResizeServerGroupModal.show({ application, serverGroup })}>
+              Resize Server Group
+            </a>
+          )}
         </div>
 
         <div>