@spinnaker/amazon 0.11.0 → 0.12.2

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

@@ -0,0 +1,110 @@
+.advanced-mode-selector {
+  .instance-profile-header {
+    display: inline-block;
+    button {
+      width: 100%;
+    }
+    h4 {
+      min-height: 52px;
+    }
+    .panel-heading {
+      padding: 0 0 0 0;
+    }
+    &.profile-button {
+      width: calc(~'25% - 20px');
+      margin: 0 10px 15px 10px;
+    }
+  }
+
+  .sub-section {
+    padding: 0 15px;
+    margin-bottom: 5px;
+
+    .description {
+      padding: 0 10px;
+    }
+
+    tr {
+      &.unavailable {
+        opacity: 0.5;
+      }
+
+      &.sortable {
+        .instance-type-drag-handle {
+          display: inline-block;
+          opacity: 0.9;
+          font-size: 100%;
+          padding-top: 8px;
+        }
+      }
+    }
+
+    th {
+      font-size: 110%;
+    }
+  }
+}
+
+.custom-profile {
+  .select {
+    width: 80%;
+  }
+}
+
+.instance-profile {
+  vertical-align: top;
+  text-align: left;
+  min-height: 100px;
+  font-size: 90%;
+  border: 1px solid var(--color-silver);
+  border-radius: 3px;
+  color: var(--color-mineshaft);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    color: var(--color-mineshaft);
+    text-decoration: none;
+  }
+
+  .selected-indicator {
+    display: flex;
+    width: 100%;
+    text-align: right;
+    padding-right: 5px;
+    font-size: 150%;
+    color: var(--color-accent);
+
+    &.custom {
+      margin-top: 5px;
+    }
+  }
+
+  h4 {
+    margin-top: 0;
+    text-align: center;
+    word-spacing: 300px;
+  }
+
+  ul {
+    font-size: 95%;
+    padding-left: 20px;
+  }
+  .panel-heading {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  &:hover,
+  &:focus,
+  &.active {
+    outline: 0;
+  }
+  &.active {
+    box-shadow: inset 0 0 3px 2px var(--color-accent);
+    border-color: var(--color-accent);
+  }
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 8px 2px var(--color-accent);
+  }
+}

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

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

package/src/serverGroup/configure/wizard/pages/ServerGroupInstanceType.tsx

@@ -1,11 +1,13 @@
 import type { FormikErrors, FormikProps } from 'formik';
+import { some } from 'lodash';
 import React from 'react';
+import { Subject } from 'rxjs';
 
 import type { IWizardPageComponent } from '@spinnaker/core';
-import { NgReact } from '@spinnaker/core';
-import { AWSProviderSettings } from '../../../../aws.settings';
 
-import { CpuCreditsToggle } from '../instanceType/CpuCreditsToggle';
+import type { IAmazonInstanceTypeCategory } from '../../../../instance/awsInstanceType.service';
+import { InstanceTypeSelector } from '../instanceType/InstanceTypeSelector';
+import { AwsReactInjector } from '../../../../reactShims';
 import type { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
 
 export interface IServerGroupInstanceTypeProps {
@@ -13,88 +15,130 @@ export interface IServerGroupInstanceTypeProps {
 }
 
 export interface IServerGroupInstanceTypeState {
-  newInstanceType?: string;
-  newProfileType?: string;
+  instanceTypeDetails: IAmazonInstanceTypeCategory[];
 }
 
 export class ServerGroupInstanceType
   extends React.Component<IServerGroupInstanceTypeProps, IServerGroupInstanceTypeState>
   implements IWizardPageComponent<IAmazonServerGroupCommand> {
-  constructor(props: IServerGroupInstanceTypeProps) {
-    super(props);
-    this.state = {
-      newInstanceType: undefined,
-      newProfileType: undefined,
-    };
-  }
+  public state: IServerGroupInstanceTypeState = {
+    instanceTypeDetails: [],
+  };
+  private props$ = new Subject<IServerGroupInstanceTypeProps>();
+  private destroy$ = new Subject<void>();
 
-  public validate(values: IAmazonServerGroupCommand) {
+  public validate(values: IAmazonServerGroupCommand): FormikErrors<IAmazonServerGroupCommand> {
     const errors: FormikErrors<IAmazonServerGroupCommand> = {};
 
-    if (!values.instanceType) {
-      errors.instanceType = 'Instance Type required.';
+    if (values.viewState.useSimpleInstanceTypeSelector) {
+      if (!values.instanceType) {
+        errors.instanceType = 'Instance Type required.';
+      }
+    } else {
+      const advancedModeErrors = this.validateAdvancedModeFields(values, errors);
+      Object.assign(errors, { ...advancedModeErrors });
     }
 
     return errors;
   }
 
-  private instanceProfileChanged = (_profile: string) => {
-    // Instance profile is already set on values.viewState, so just use that value.
-    // Once angular is gone from this component tree, we can move all the viewState stuff
-    // into react state
-    this.setState({ newProfileType: _profile, newInstanceType: undefined });
-  };
+  private validateAdvancedModeFields(
+    values: IAmazonServerGroupCommand,
+    errors: FormikErrors<IAmazonServerGroupCommand>,
+  ): FormikErrors<IAmazonServerGroupCommand> {
+    if (!values.launchTemplateOverridesForInstanceType.length) {
+      errors.instanceType = 'At least one instance type required.';
+    }
+    if (values.launchTemplateOverridesForInstanceType.length > 40) {
+      errors.instanceType = 'Maximum of 40 instance types are allowed.';
+    }
+    const weightsSpecified = values.launchTemplateOverridesForInstanceType.filter(
+      (it) => it.weightedCapacity !== undefined,
+    );
+    if (
+      !(
+        weightsSpecified.length === values.launchTemplateOverridesForInstanceType.length ||
+        weightsSpecified.length === 0
+      )
+    ) {
+      errors.instanceType = 'Weighted capacity must be specified for all instance types selected or none.';
+    }
+    if (
+      some(weightsSpecified, function (instanceType) {
+        return instanceType.weightedCapacity < 1 || instanceType.weightedCapacity > 999;
+      })
+    ) {
+      errors.instanceType = 'Weighted capacity must be a number between 1 and 999.';
+    }
 
-  private instanceTypeChanged = (type: string) => {
-    const { values } = this.props.formik;
-    values.instanceTypeChanged(values);
-    this.props.formik.setFieldValue('instanceType', type);
-    this.setState({ newInstanceType: type, newProfileType: undefined });
-  };
+    if (values.onDemandBaseCapacity < 0) {
+      errors.onDemandBaseCapacity = 'On-Demand base capacity must be non-negative.';
+    }
 
-  private setUnlimitedCpuCredits = (unlimitedCpuCredits: boolean | undefined) => {
-    if (this.props.formik.values.unlimitedCpuCredits !== unlimitedCpuCredits) {
-      this.props.formik.setFieldValue('unlimitedCpuCredits', unlimitedCpuCredits);
-      this.setState({});
+    if (values.onDemandBaseCapacity > values.capacity.max) {
+      errors.onDemandBaseCapacity = 'On-Demand base capacity must be less than or equal to max capacity.';
+    }
+
+    if (values.onDemandPercentageAboveBaseCapacity < 0 || values.onDemandPercentageAboveBaseCapacity > 100) {
+      errors.onDemandPercentageAboveBaseCapacity =
+        'On-Demand percentage above base capacity must be a number between 0 and 100.';
+    }
+
+    if (values.spotPrice) {
+      const spotPriceNum = Number(values.spotPrice);
+      if (Number.isNaN(spotPriceNum)) {
+        errors.spotPrice = 'Spot Max Price must be a number or empty string, used to unset previous max price.';
+      }
+      if (spotPriceNum <= 0) {
+        errors.spotPrice = 'Spot Max Price must be greater than 0, if specified.';
+      }
     }
-  };
+
+    if (values.spotInstancePools && values.spotAllocationStrategy !== 'lowest-price') {
+      errors.spotInstancePools = "Spot Instance Pools is only supported for 'lowest-price' Spot Allocation Strategy.";
+    }
+    if (values.spotInstancePools <= 0 || values.spotInstancePools > 20) {
+      errors.spotInstancePools = 'Spot Instance Pools count must be a number between 1 and 20, when applicable.';
+    }
+
+    return errors;
+  }
+
+  public componentDidMount(): void {
+    Promise.resolve(AwsReactInjector.awsInstanceTypeService.getCategories()).then(
+      (categories: IAmazonInstanceTypeCategory[]) => {
+        this.setState({ instanceTypeDetails: categories });
+      },
+    );
+  }
+
+  public componentDidUpdate() {
+    this.props$.next(this.props);
+  }
+
+  public componentWillUnmount() {
+    this.destroy$.next();
+  }
 
   public render() {
     const { values } = this.props.formik;
-
-    const { InstanceArchetypeSelector, InstanceTypeSelector } = NgReact;
     const showTypeSelector = !!(values.viewState.disableImageSelection || values.amiName);
 
-    const isLaunchTemplatesEnabled = AWSProviderSettings.serverGroups?.enableLaunchTemplates;
-    const isCpuCreditsEnabled = AWSProviderSettings.serverGroups?.enableCpuCredits;
+    // mark unavailable instance types for all profiles
+    const availableInstanceTypesForConfig: string[] = values.backingData?.filtered?.instanceTypes ?? [];
+    const markedInstanceTypeDetails: IAmazonInstanceTypeCategory[] = Array.from(this.state.instanceTypeDetails);
+    if (!values.viewState.disableImageSelection && availableInstanceTypesForConfig.length) {
+      markedInstanceTypeDetails.forEach((profile) => {
+        profile.families.forEach((family) => {
+          family.instanceTypes.forEach((instanceType) => {
+            instanceType.unavailable = !availableInstanceTypesForConfig.includes(instanceType.name);
+          });
+        });
+      });
+    }
 
     if (showTypeSelector && values) {
-      return (
-        <div className="container-fluid form-horizontal">
-          <div className="row">
-            <InstanceArchetypeSelector
-              command={values}
-              onTypeChanged={this.instanceTypeChanged}
-              onProfileChanged={this.instanceProfileChanged}
-            />
-            <div style={{ padding: '0 15px' }}>
-              {values.viewState.instanceProfile && values.viewState.instanceProfile !== 'custom' && (
-                <InstanceTypeSelector command={values} onTypeChanged={this.instanceTypeChanged} />
-              )}
-            </div>
-          </div>
-          {isLaunchTemplatesEnabled && isCpuCreditsEnabled && (
-            <div className="row">
-              <CpuCreditsToggle
-                command={values}
-                newInstanceType={this.state.newInstanceType}
-                newProfileType={this.state.newProfileType}
-                setUnlimitedCpuCredits={this.setUnlimitedCpuCredits}
-              />
-            </div>
-          )}
-        </div>
-      );
+      return <InstanceTypeSelector formik={this.props.formik} instanceTypeDetails={markedInstanceTypeDetails} />;
     }
 
     return <h5 className="text-center">Please select an image.</h5>;

package/src/serverGroup/configure/wizard/pages/advancedSettings/ServerGroupAdvancedSettingsCommon.tsx

@@ -222,7 +222,7 @@ export class ServerGroupAdvancedSettingsCommon extends React.Component<IServerGr
             </div>
           </div>
         )}
-        {!AWSProviderSettings.disableSpotPricing && (
+        {!AWSProviderSettings.disableSpotPricing && values.viewState.useSimpleInstanceTypeSelector && (
           <div className="form-group">
             <div className="col-md-5 sm-label-right">
               <b>Spot Instances Price (optional)</b> <HelpField id="aws.serverGroup.spotMaxPrice" />

package/src/serverGroup/details/AmazonServerGroupActions.tsx

@@ -15,6 +15,7 @@ import {
   SETTINGS,
 } from '@spinnaker/core';
 
+import { AWSProviderSettings } from '../../aws.settings';
 import type { IAmazonServerGroupCommand } from '../configure';
 import { AmazonCloneServerGroupModal } from '../configure/wizard/AmazonCloneServerGroupModal';
 import type { IAmazonServerGroup, IAmazonServerGroupView } from '../../domain';
@@ -286,7 +287,7 @@ export class AmazonServerGroupActions extends React.Component<IAmazonServerGroup
 
     return (
       <>
-        {SETTINGS.awsAdHocInfraWritesEnabled && (
+        {AWSProviderSettings.adHocInfraWritesEnabled && (
           <Dropdown className="dropdown" id="server-group-actions-dropdown">
             <Dropdown.Toggle className="btn btn-sm btn-primary dropdown-toggle">Server Group Actions</Dropdown.Toggle>
             <Dropdown.Menu className="dropdown-menu">

package/src/serverGroup/details/scalingPolicy/ScalingPolicySummary.tsx

@@ -6,8 +6,6 @@ import { StepPolicySummary } from './StepPolicySummary';
 import type { IScalingPolicyView, ITargetTrackingPolicy } from '../../../domain';
 import { TargetTrackingSummary } from './targetTracking/TargetTrackingSummary';
 
-import './scalingPolicySummary.component.less';
-
 export interface IScalingPolicySummaryProps {
   application: Application;
   policy: IScalingPolicyView;
@@ -15,7 +13,13 @@ export interface IScalingPolicySummaryProps {
 }
 
 export const ScalingPolicySummary = ({ application, policy, serverGroup }: IScalingPolicySummaryProps) => {
-  if (policy.policyType === 'TargetTrackingScaling') {
+  const scalingPolicyType = policy.policyType
+    ? policy.policyType
+    : policy.targetTrackingConfiguration
+    ? 'TargetTrackingScaling'
+    : 'StepScaling';
+
+  if (scalingPolicyType === 'TargetTrackingScaling') {
     return (
       <TargetTrackingSummary
         application={application}

package/src/serverGroup/details/scalingPolicy/StepPolicySummary.tsx

@@ -83,39 +83,37 @@ export const StepPolicySummary = ({ application, policy, serverGroup }: IStepPol
     });
   };
 
-  if (!policy.alarms?.length) {
-    return <div>No alarms configured for this policy - it's safe to delete.</div>;
-  }
-
   return (
     <div className="StepPolicySummary">
       <div>
-        {policy.alarms.map((a) => (
-          <div key={`step-summary-${policy.policyName}`}>
-            <HoverablePopover
-              Component={() => (
-                <StepPolicyPopoverContent policy={policy} serverGroup={serverGroup as IAmazonServerGroup} />
-              )}
-              placement="left"
-              title={policy.policyName}
-            >
-              <div>
-                <div className="label label-default">{robotToHuman(policy.policyType).toUpperCase()}</div>
-                <AlarmSummary alarm={a} />
+        {!Boolean(policy.alarms?.length) && <div>No alarms configured for this policy - it's safe to delete.</div>}
+        {Boolean(policy.alarms?.length) &&
+          policy.alarms.map((a) => (
+            <div key={`step-summary-${policy.policyName}`}>
+              <HoverablePopover
+                Component={() => (
+                  <StepPolicyPopoverContent policy={policy} serverGroup={serverGroup as IAmazonServerGroup} />
+                )}
+                placement="left"
+                title={policy.policyName}
+              >
+                <div>
+                  <div className="label label-default">{robotToHuman(policy.policyType).toUpperCase()}</div>
+                  <AlarmSummary alarm={a} />
+                </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>
-            </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>
-        ))}
+          ))}
       </div>
     </div>
   );

package/src/serverGroup/details/scalingPolicy/chart/MetricAlarmChart.tsx

@@ -1,11 +1,7 @@
-import { module } from 'angular';
 import * as React from 'react';
-import { react2angular } from 'react2angular';
-import type { Observable } from 'rxjs';
 
 import type { ICloudMetricStatistics } from '@spinnaker/core';
-import { CloudMetricsReader, Spinner, useData, useForceUpdate, useObservable } from '@spinnaker/core';
-import { withErrorBoundary } from '@spinnaker/core';
+import { CloudMetricsReader, Spinner, useData } from '@spinnaker/core';
 
 import type { IDateLine } from './DateLineChart';
 import { DateLineChart } from './DateLineChart';
@@ -14,9 +10,6 @@ import type { IAmazonServerGroup, IScalingPolicyAlarm } from '../../../../domain
 interface IMetricAlarmChartProps {
   serverGroup: IAmazonServerGroup;
   alarm: IScalingPolicyAlarm;
-  // Allows AngularJS to tell the chart to update
-  alarmUpdated?: Observable<any>;
-  // Allows the chart data to inform the parent component of the fetched metric units
   onChartLoaded?: (stats: ICloudMetricStatistics) => void;
 }
 
@@ -46,10 +39,6 @@ export function MetricAlarmChartImpl(props: IMetricAlarmChartProps) {
     [namespace, statistic, period, type, account, region, metricName],
   );
 
-  // Used by AngularJS to tell the chart to refresh, delete when all callers are reactified
-  const forceUpdate = useForceUpdate();
-  useObservable(props.alarmUpdated, () => forceUpdate());
-
   if (status === 'PENDING') {
     return (
       <div className="flex-container-v middle center sp-margin-xl">
@@ -91,16 +80,3 @@ export function MetricAlarmChartImpl(props: IMetricAlarmChartProps) {
   };
   return <DateLineChart lines={[line, setline]} />;
 }
-
-export const AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_CHART_METRICALARMCHART_COMPONENT =
-  'spinnaker.amazon.serverGroup.details.scalingPolicy.metricAlarmChart.component';
-export const name = AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_CHART_METRICALARMCHART_COMPONENT; // for backwards compatibility
-module(AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_CHART_METRICALARMCHART_COMPONENT, []).component(
-  'metricAlarmChart',
-  react2angular(withErrorBoundary(MetricAlarmChart, 'metricAlarmChart'), [
-    'alarm',
-    'serverGroup',
-    'alarmUpdated',
-    'onChartLoaded',
-  ]),
-);

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

@@ -1,6 +1,5 @@
 export { DateLineChart } from './chart/DateLineChart';
 export { MetricAlarmChart } from './chart/MetricAlarmChart';
-export * from './ScalingPolicyTypeRegistry';
 export * from './CreateScalingPolicyButton';
 export * from './ScalingPolicyWriter';
 export * from './StepPolicySummary';

package/src/serverGroup/details/scalingPolicy/scalingPolicy.module.ts

@@ -1,14 +1,6 @@
 import { module } from 'angular';
 
-import { AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT } from './alarmBasedSummary.component';
 import { SCALING_POLICY_SUMMARY_COMPONENT } from './scalingPolicySummary.component';
-import { STEP_POLICY_SUMMARY_COMPONENT } from './stepPolicySummary.component';
-import { TARGET_TRACKING_MODULE } from './targetTracking/targetTracking.module';
 
 export const SCALING_POLICY_MODULE = 'spinnaker.amazon.scalingPolicy.module';
-module(SCALING_POLICY_MODULE, [
-  TARGET_TRACKING_MODULE,
-  AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT,
-  STEP_POLICY_SUMMARY_COMPONENT,
-  SCALING_POLICY_SUMMARY_COMPONENT,
-]);
+module(SCALING_POLICY_MODULE, [SCALING_POLICY_SUMMARY_COMPONENT]);

package/src/serverGroup/details/scalingPolicy/scalingPolicySummary.component.ts

@@ -1,10 +1,14 @@
 import { module } from 'angular';
 import { react2angular } from 'react2angular';
 import { withErrorBoundary } from '@spinnaker/core';
-import { StepPolicySummary } from './StepPolicySummary';
+import { ScalingPolicySummary } from './ScalingPolicySummary';
 
 export const SCALING_POLICY_SUMMARY_COMPONENT = 'spinnaker.amazon.scalingPolicy.scalingPolicySummary.component';
 module(SCALING_POLICY_SUMMARY_COMPONENT, []).component(
   'scalingPolicySummary',
-  react2angular(withErrorBoundary(StepPolicySummary, 'scalingPolicySummary'), ['application', 'policy', 'serverGroup']),
+  react2angular(withErrorBoundary(ScalingPolicySummary, 'scalingPolicySummary'), [
+    'application',
+    'policy',
+    'serverGroup',
+  ]),
 );

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

@@ -1,6 +1,5 @@
 import type { Dictionary } from 'lodash';
 import * as React from 'react';
-import { Subject } from 'rxjs';
 
 import type { ICloudMetricStatistics } from '@spinnaker/core';
 
@@ -8,7 +7,6 @@ import { MetricAlarmChart } from '../chart/MetricAlarmChart';
 import type { IAmazonServerGroup, IScalingPolicyAlarm, ITargetTrackingConfiguration } from '../../../../domain';
 
 export interface ITargetTrackingChartProps {
-  alarmUpdated?: Subject<void>;
   config: ITargetTrackingConfiguration;
   serverGroup: IAmazonServerGroup;
   unit?: string;
@@ -21,12 +19,7 @@ const predefinedMetricTypeMapping: Dictionary<string> = {
   ASGAverageNetworkOut: 'NetworkOut',
 };
 
-export const TargetTrackingChart = ({
-  alarmUpdated = new Subject<void>(),
-  config,
-  serverGroup,
-  updateUnit,
-}: ITargetTrackingChartProps) => {
+export const TargetTrackingChart = ({ config, serverGroup, updateUnit }: ITargetTrackingChartProps) => {
   const [alarm, setAlarm] = React.useState<IScalingPolicyAlarm>({
     alarmName: null,
     alarmArn: null,
@@ -72,15 +65,7 @@ export const TargetTrackingChart = ({
     if (updateUnit) {
       updateUnit(stats.unit);
     }
-    alarmUpdated?.next();
   };
 
-  return (
-    <MetricAlarmChart
-      alarm={alarm}
-      alarmUpdated={alarmUpdated}
-      onChartLoaded={onChartLoaded}
-      serverGroup={serverGroup}
-    />
-  );
+  return <MetricAlarmChart alarm={alarm} onChartLoaded={onChartLoaded} serverGroup={serverGroup} />;
 };

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

@@ -10,7 +10,7 @@
   }
 
   .configurer-field-med {
-    width: 48px;
+    width: 60px;
   }
 
   .number-input-field {

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

@@ -1,6 +1,5 @@
-import { IAmazonAsg, IAmazonServerGroup } from '../../../domain';
-
 import { AutoScalingProcessService } from './AutoScalingProcessService';
+import type { IAmazonAsg, IAmazonServerGroup } from '../../../domain';
 
 describe('AutoScalingProcessService', () => {
   describe('normalizeScalingProcesses', () => {