@spinnaker/amazon 0.8.7 → 0.8.11

package/dist/serverGroup/details/scalingPolicy/targetTracking/TargetMetricFields.d.ts

@@ -9,7 +9,7 @@ export interface ITargetMetricFieldsProps {
     isCustomMetric: boolean;
     serverGroup: IAmazonServerGroup;
     toggleMetricType?: (type: MetricType) => void;
-    unit: string;
+    unit?: string;
     updateCommand: (command: ITargetTrackingPolicyCommand) => void;
 }
 export declare const TargetMetricFields: ({ allowDualMode, cloudwatch, command, isCustomMetric, serverGroup, toggleMetricType, unit, updateCommand, }: ITargetMetricFieldsProps) => JSX.Element;

package/dist/serverGroup/details/scalingPolicy/targetTracking/TargetTrackingAdditionalSettings.d.ts

@@ -1,4 +1,5 @@
 import { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import './TargetTrackingAdditionalSettings.less';
 export interface ITargetTrackingAdditionalSettingsProps {
     command: IUpsertScalingPolicyCommand;
     cooldowns?: Boolean;

package/dist/serverGroup/details/scalingPolicy/targetTracking/UpsertTargetTrackingModal.d.ts

@@ -0,0 +1,8 @@
+import { Application, IModalComponentProps } from '@spinnaker/core';
+import { IAmazonServerGroup, ITargetTrackingPolicy } from '../../../../domain';
+export interface IUpsertTargetTrackingModalProps extends IModalComponentProps {
+    app: Application;
+    policy: ITargetTrackingPolicy;
+    serverGroup: IAmazonServerGroup;
+}
+export declare const UpsertTargetTrackingModal: ({ app, closeModal, dismissModal, policy, serverGroup, }: IUpsertTargetTrackingModalProps) => JSX.Element;

package/dist/serverGroup/details/scalingPolicy/upsert/ScalingPolicyAdditionalSettings.d.ts

@@ -1,4 +1,5 @@
 import { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import './ScalingPolicyAdditionalSettings.less';
 export interface IScalingPolicyAdditionalSettingsProps {
     command: IUpsertScalingPolicyCommand;
     isInstanceType: boolean;

package/dist/serverGroup/details/scalingPolicy/upsert/UpsertScalingPolicyModal.d.ts

@@ -0,0 +1,8 @@
+import { Application, IModalComponentProps } from '@spinnaker/core';
+import { IAmazonServerGroup, IScalingPolicy } from '../../../../domain';
+export interface IUpsertScalingPolicyModalProps extends IModalComponentProps {
+    app: Application;
+    policy: IScalingPolicy;
+    serverGroup: IAmazonServerGroup;
+}
+export declare const UpsertScalingPolicyModal: ({ app, closeModal, dismissModal, policy, serverGroup, }: IUpsertScalingPolicyModalProps) => JSX.Element;

package/dist/serverGroup/details/scalingPolicy/upsert/step/StepPolicyAction.d.ts

@@ -1,7 +1,7 @@
 import { IScalingPolicyAlarm, IStepAdjustment } from '../../../../../domain';
 import './StepPolicyAction.less';
-declare type Operator = 'Add' | 'Remove' | 'Set to';
-declare type AdjustmentTypeView = 'instances' | 'percent of group';
+export declare type Operator = 'Add' | 'Remove' | 'Set to';
+export declare type AdjustmentTypeView = 'instances' | 'percent of group';
 export interface IStepPolicyActionProps {
     adjustmentType: AdjustmentTypeView;
     adjustmentTypeChanged: (action: Operator, type: AdjustmentTypeView) => void;
@@ -15,4 +15,3 @@ export interface IStepPolicyActionProps {
     stepsChanged: (steps: IStepAdjustment[]) => void;
 }
 export declare const StepPolicyAction: ({ adjustmentType, adjustmentTypeChanged, alarm, isMin, operator, step, stepAdjustments, stepsChanged, }: IStepPolicyActionProps) => JSX.Element;
-export {};

package/dist/serverGroup/details/sections/InstancesDistributionDetailsSection.d.ts

@@ -0,0 +1,2 @@
+import { IAmazonServerGroupDetailsSectionProps } from './IAmazonServerGroupDetailsSectionProps';
+export declare const InstancesDistributionDetailsSection: ({ serverGroup }: IAmazonServerGroupDetailsSectionProps) => JSX.Element;

package/dist/serverGroup/details/sections/index.d.ts

@@ -3,7 +3,7 @@ export * from './AmazonInfoDetailsSection';
 export * from './AmazonCapacityDetailsSection';
 export * from './HealthDetailsSection';
 export * from './IAmazonServerGroupDetailsSectionProps';
-export * from './InstancesDiversificationDetailsSection';
+export * from './InstancesDistributionDetailsSection';
 export * from './LaunchConfigDetailsSection';
 export * from './LaunchTemplateDetailsSection';
 export * from './LogsDetailsSection';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spinnaker/amazon",
   "license": "Apache-2.0",
-  "version": "0.8.7",
+  "version": "0.8.11",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
@@ -13,7 +13,7 @@
     "lib": "npm run build"
   },
   "dependencies": {
-    "@spinnaker/core": "^0.11.0",
+    "@spinnaker/core": "^0.11.4",
     "@uirouter/angularjs": "1.0.26",
     "@uirouter/core": "6.0.8",
     "@uirouter/react": "1.0.7",
@@ -55,5 +55,5 @@
     "shx": "0.3.3",
     "typescript": "4.3.5"
   },
-  "gitHead": "9fbce8ddf9831673572d66a34740322feb7343f2"
+  "gitHead": "d28eac29c463069358e8c07413a56b290af9f7ce"
 }

package/src/aws.module.ts

@@ -52,7 +52,7 @@ import {
   AmazonCapacityDetailsSection,
   AmazonInfoDetailsSection,
   HealthDetailsSection,
-  InstancesDiversificationDetailsSection,
+  InstancesDistributionDetailsSection,
   LaunchConfigDetailsSection,
   LaunchTemplateDetailsSection,
   LogsDetailsSection,
@@ -125,7 +125,7 @@ module(AMAZON_MODULE, [
         AmazonInfoDetailsSection,
         AmazonCapacityDetailsSection,
         HealthDetailsSection,
-        InstancesDiversificationDetailsSection,
+        InstancesDistributionDetailsSection,
         LaunchConfigDetailsSection,
         LaunchTemplateDetailsSection,
         SecurityGroupsDetailsSection,

package/src/domain/IAmazonServerGroup.ts

@@ -22,6 +22,7 @@ export interface IAmazonServerGroup extends IServerGroup {
   scalingPolicies?: IScalingPolicy[];
   targetGroups?: string[];
   asg: IAmazonAsg;
+  awsAccount?: string;
   launchTemplate?: IAmazonLaunchTemplate;
   mixedInstancesPolicy?: IAmazonMixedInstancesPolicy;
 }
@@ -35,12 +36,12 @@ export interface IScheduledAction {
 
 export interface IAmazonMixedInstancesPolicy {
   allowedInstanceTypes: string[];
-  instancesDiversification: IAmazonInstancesDiversification;
+  instancesDistribution: IAmazonInstancesDistribution;
   launchTemplates: IAmazonLaunchTemplate[];
   launchTemplateOverridesForInstanceType: IAmazonLaunchTemplateOverrides[];
 }
 
-export interface IAmazonInstancesDiversification {
+export interface IAmazonInstancesDistribution {
   onDemandAllocationStrategy: string;
   onDemandBaseCapacity: number;
   onDemandPercentageAboveBaseCapacity: number;
@@ -51,7 +52,8 @@ export interface IAmazonInstancesDiversification {
 
 export interface IAmazonLaunchTemplateOverrides {
   instanceType: string;
-  weightedCapacity: string;
+  weightedCapacity?: string;
+  priority?: number;
 }
 
 export interface IAmazonServerGroupView extends IAmazonServerGroup {

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

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import { Application, ModalInjector } from '@spinnaker/core';
+import { Application, ReactModal } from '@spinnaker/core';
 import { IAmazonServerGroupView } from '../../../domain';
 import { AwsReactInjector } from '../../../reactShims';
 
-import { UpsertTargetTrackingController } from './targetTracking/upsertTargetTracking.controller';
+import { IUpsertTargetTrackingModalProps, UpsertTargetTrackingModal } from './targetTracking/UpsertTargetTrackingModal';
 import { PolicyTypeSelectionModal } from './upsert/PolicyTypeSelectionModal';
+import { IUpsertScalingPolicyModalProps, UpsertScalingPolicyModal } from './upsert/UpsertScalingPolicyModal';
 
 export interface ICreateScalingPolicyButtonProps {
   application: Application;
@@ -38,37 +39,25 @@ export class CreateScalingPolicyButton extends React.Component<
   public createStepPolicy(): void {
     const { serverGroup, application } = this.props;
 
-    ModalInjector.modalService
-      .open({
-        templateUrl: require('./upsert/upsertScalingPolicy.modal.html'),
-        controller: 'awsUpsertScalingPolicyCtrl',
-        controllerAs: 'ctrl',
-        size: 'lg',
-        resolve: {
-          policy: () => AwsReactInjector.awsServerGroupTransformer.constructNewStepScalingPolicyTemplate(serverGroup),
-          serverGroup: () => serverGroup,
-          application: () => application,
-        },
-      })
-      .result.catch(() => {});
+    const upsertProps = {
+      app: application,
+      policy: AwsReactInjector.awsServerGroupTransformer.constructNewStepScalingPolicyTemplate(serverGroup),
+      serverGroup,
+    } as IUpsertScalingPolicyModalProps;
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    ReactModal.show(UpsertScalingPolicyModal, upsertProps, modalProps);
   }
 
   public createTargetTrackingPolicy(): void {
     const { serverGroup, application } = this.props;
 
-    ModalInjector.modalService
-      .open({
-        templateUrl: require('./targetTracking/upsertTargetTracking.modal.html'),
-        controller: UpsertTargetTrackingController,
-        controllerAs: '$ctrl',
-        size: 'lg',
-        resolve: {
-          policy: () => AwsReactInjector.awsServerGroupTransformer.constructNewTargetTrackingPolicyTemplate(),
-          serverGroup: () => serverGroup,
-          application: () => application,
-        },
-      })
-      .result.catch(() => {});
+    const upsertProps = {
+      app: application,
+      policy: AwsReactInjector.awsServerGroupTransformer.constructNewTargetTrackingPolicyTemplate(),
+      serverGroup,
+    } as IUpsertTargetTrackingModalProps;
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    ReactModal.show(UpsertTargetTrackingModal, upsertProps, modalProps);
   }
 
   public typeSelected = (typeSelection: string): void => {

package/src/serverGroup/details/scalingPolicy/alarmBasedSummary.component.js

@@ -2,63 +2,59 @@
 
 import { module } from 'angular';
 
-import { ConfirmationModalService } from '@spinnaker/core';
+import { ConfirmationModalService, ReactModal } from '@spinnaker/core';
 
 import { ScalingPolicyWriter } from './ScalingPolicyWriter';
 import { SCALING_POLICY_POPOVER } from './popover/scalingPolicyPopover.component';
-import { AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_UPSERT_UPSERTSCALINGPOLICY_CONTROLLER } from './upsert/upsertScalingPolicy.controller';
+import { UpsertScalingPolicyModal } from './upsert/UpsertScalingPolicyModal';
 
 import './scalingPolicySummary.component.less';
 
 export const AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT =
   'spinnaker.amazon.serverGroup.details.scalingPolicy.alarmBasedSummary.component';
 export const name = AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT; // for backwards compatibility
-module(AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT, [
-  AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_UPSERT_UPSERTSCALINGPOLICY_CONTROLLER,
-  SCALING_POLICY_POPOVER,
-]).component('alarmBasedSummary', {
-  bindings: {
-    policy: '=',
-    serverGroup: '=',
-    application: '=',
-  },
-  templateUrl: require('./alarmBasedSummary.component.html'),
-  controller: [
-    '$uibModal',
-    function ($uibModal) {
-      this.popoverTemplate = require('./popover/scalingPolicyDetails.popover.html');
-
-      this.editPolicy = () => {
-        $uibModal.open({
-          templateUrl: require('./upsert/upsertScalingPolicy.modal.html'),
-          controller: 'awsUpsertScalingPolicyCtrl',
-          controllerAs: 'ctrl',
-          size: 'lg',
-          resolve: {
-            policy: () => this.policy,
-            serverGroup: () => this.serverGroup,
-            application: () => this.application,
-          },
-        });
-      };
-
-      this.deletePolicy = () => {
-        const taskMonitor = {
-          application: this.application,
-          title: 'Deleting scaling policy ' + this.policy.policyName,
+module(AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT, [SCALING_POLICY_POPOVER]).component(
+  'alarmBasedSummary',
+  {
+    bindings: {
+      policy: '=',
+      serverGroup: '=',
+      application: '=',
+    },
+    templateUrl: require('./alarmBasedSummary.component.html'),
+    controller: [
+      '$uibModal',
+      function ($uibModal) {
+        this.popoverTemplate = require('./popover/scalingPolicyDetails.popover.html');
+
+        this.editPolicy = () => {
+          const upsertProps = {
+            app: this.application,
+            policy: this.policy,
+            serverGroup: this.serverGroup,
+          };
+          const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+          ReactModal.show(UpsertScalingPolicyModal, upsertProps, modalProps);
         };
 
-        const submitMethod = () =>
-          ScalingPolicyWriter.deleteScalingPolicy(this.application, this.serverGroup, this.policy);
-
-        ConfirmationModalService.confirm({
-          header: 'Really delete ' + this.policy.policyName + '?',
-          buttonText: 'Delete scaling policy',
-          account: this.policy.alarms.length ? this.serverGroup.account : null, // don't confirm if it's a junk policy
-          taskMonitorConfig: taskMonitor,
-          submitMethod: submitMethod,
-        });
-      };
-    },
-  ],
-});
+        this.deletePolicy = () => {
+          const taskMonitor = {
+            application: this.application,
+            title: 'Deleting scaling policy ' + this.policy.policyName,
+          };
+
+          const submitMethod = () =>
+            ScalingPolicyWriter.deleteScalingPolicy(this.application, this.serverGroup, this.policy);
+
+          ConfirmationModalService.confirm({
+            header: 'Really delete ' + this.policy.policyName + '?',
+            buttonText: 'Delete scaling policy',
+            account: this.policy.alarms.length ? this.serverGroup.account : null, // don't confirm if it's a junk policy
+            taskMonitorConfig: taskMonitor,
+            submitMethod: submitMethod,
+          });
+        };
+      },
+    ],
+  },
+);

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

@@ -32,7 +32,7 @@ export function MetricAlarmChart(props: IMetricAlarmChartProps) {
 export function MetricAlarmChartImpl(props: IMetricAlarmChartProps) {
   const alarm = props.alarm ?? ({} as IScalingPolicyAlarm);
   const serverGroup = props.serverGroup ?? ({} as IAmazonServerGroup);
-  const { type, account, region } = serverGroup;
+  const { account, awsAccount, cloudProvider, region, type } = serverGroup;
   const { metricName, namespace, statistic, period } = alarm;
 
   const { status, result } = useData<ICloudMetricStatistics>(
@@ -40,7 +40,8 @@ export function MetricAlarmChartImpl(props: IMetricAlarmChartProps) {
       const parameters: Record<string, string | number> = { namespace, statistics: statistic, period };
       alarm.dimensions.forEach((dimension) => (parameters[dimension.name] = dimension.value));
 
-      const result = await CloudMetricsReader.getMetricStatistics(type, account, region, metricName, parameters);
+      const metricAccount = cloudProvider === 'aws' ? account : awsAccount;
+      const result = await CloudMetricsReader.getMetricStatistics('aws', metricAccount, region, metricName, parameters);
       result.datapoints = result.datapoints || [];
       props.onChartLoaded?.(result);
 

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

@@ -18,7 +18,7 @@ export interface ITargetMetricFieldsProps {
   isCustomMetric: boolean;
   serverGroup: IAmazonServerGroup;
   toggleMetricType?: (type: MetricType) => void;
-  unit: string;
+  unit?: string;
   updateCommand: (command: ITargetTrackingPolicyCommand) => void;
 }
 
@@ -131,7 +131,7 @@ export const TargetMetricFields = ({
               <span className="sp-margin-xs-xaxis">of</span>
             </div>
           )}
-          <div>
+          <div className="horizontal middle">
             <NumberInput
               value={commandView.targetTrackingConfiguration.targetValue}
               onChange={(e) =>

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

@@ -0,0 +1,11 @@
+.TargetTrackingAdditionalSettings {
+  font-size: 14px;
+
+  .row {
+    margin-bottom: 10px;
+  }
+
+  .number-input-sm {
+    width: 120px;
+  }
+}

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

@@ -3,6 +3,8 @@ import * as React from 'react';
 import { CheckboxInput, HelpField, NumberInput } from '@spinnaker/core';
 import { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
 
+import './TargetTrackingAdditionalSettings.less';
+
 export interface ITargetTrackingAdditionalSettingsProps {
   command: IUpsertScalingPolicyCommand;
   cooldowns?: Boolean;
@@ -21,24 +23,24 @@ export const TargetTrackingAdditionalSettings = ({
     set(newCommand, path, value);
     updateCommand(newCommand);
   };
-  const scaleInDisabled = Boolean(command.targetTracking?.disableScaleIn);
+  const scaleInDisabled = command.targetTrackingConfiguration?.disableScaleIn;
   return (
-    <div className="section-body section-additional-settings">
+    <div className="section-body TargetTrackingAdditionalSettings">
       {policyName && (
         <div className="row">
           <div className="col-md-2 sm-label-right">Policy Name</div>
-          <div className="col-md-10 content-fields">{policyName}</div>
+          <div className="col-md-10 horizontal middle">{policyName}</div>
         </div>
       )}
-      {Boolean(command.esitmatedInstanceWarmup) && (
+      {Boolean(command.estimatedInstanceWarmup) && (
         <div className="row">
           <div className="col-md-2 sm-label-right">Warmup</div>
-          <div className="col-md-10 content-fields">
-            <span className="form-control-static select-placeholder">Instances need</span>
+          <div className="col-md-10 horizontal middle">
+            <span className="form-control-static">Instances need</span>
             <NumberInput
               value={command.estimatedInstanceWarmup}
               onChange={(e) => setCommandField('estimatedInstanceWarmup', Number.parseInt(e.target.value))}
-              inputClassName="form-control input-sm sp-margin-xs-xaxis"
+              inputClassName="form-control number-input-sm sp-margin-xs-xaxis"
             />
             <span className="input-label"> seconds to warm up </span>
           </div>
@@ -64,15 +66,15 @@ export const TargetTrackingAdditionalSettings = ({
         </div>
       </div>
       <div className="row">
-        <div className="col-md-10 col-md-offset-1 well">
+        <div className="col-md-10 col-md-offset-1">
           {scaleInDisabled && (
-            <div>
+            <div className="well">
               This policy will not scale down. Make sure you have another policy (either TT or Step) that will scale
               down this ASG.
             </div>
           )}
-          {!scaleInDisabled && (
-            <div>
+          {scaleInDisabled === false && (
+            <div className="well">
               This policy will scale both up and down. Make sure you don't have other scaling policies, as they will
               likely interfere with each other.
             </div>
@@ -85,13 +87,13 @@ export const TargetTrackingAdditionalSettings = ({
             <span className="sp-margin-xs-right">Scale In Cooldown</span>
             <HelpField id="titus.autoscaling.scaleIn.cooldown" />
           </div>
-          <div className="col-md-9 content-fields">
+          <div className="col-md-9 horizontal middle">
             <NumberInput
               value={command.targetTrackingConfiguration.scaleInCooldown}
               onChange={(e) =>
                 setCommandField('targetTrackingConfiguration.scaleInCooldown', Number.parseInt(e.target.value))
               }
-              inputClassName="sp-margin-xs-xaxis"
+              inputClassName="sp-margin-xs-xaxis number-input-sm"
             />
             <span className="input-label"> seconds </span>
           </div>
@@ -103,13 +105,13 @@ export const TargetTrackingAdditionalSettings = ({
             <span className="sp-margin-xs-right">Scale Out Cooldown</span>
             <HelpField id="titus.autoscaling.scaleOut.cooldown" />
           </div>
-          <div className="col-md-9 content-fields">
+          <div className="col-md-9 horizontal middle">
             <NumberInput
-              value={command.targetTrackingConfiguration.scaleInCooldown}
+              value={command.targetTrackingConfiguration.scaleOutCooldown}
               onChange={(e) =>
                 setCommandField('targetTrackingConfiguration.scaleOutCooldown', Number.parseInt(e.target.value))
               }
-              inputClassName="sp-margin-xs-xaxis"
+              inputClassName="sp-margin-xs-xaxis number-input-sm"
             />
             <span className="input-label"> seconds </span>
           </div>

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import { Application, IModalComponentProps, TaskMonitorModal } from '@spinnaker/core';
+
+import { ITargetTrackingPolicyCommand, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import { TargetMetricFields } from './TargetMetricFields';
+import { TargetTrackingAdditionalSettings } from './TargetTrackingAdditionalSettings';
+import { 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}
+            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/targetTracking/targetTrackingSummary.component.ts

@@ -1,11 +1,10 @@
 import { IComponentController, IComponentOptions, module } from 'angular';
-import { IModalService } from 'angular-ui-bootstrap';
 
-import { Application, ConfirmationModalService, IServerGroup, ITaskMonitorConfig } from '@spinnaker/core';
+import { Application, ConfirmationModalService, IServerGroup, ITaskMonitorConfig, ReactModal } from '@spinnaker/core';
 
 import { ScalingPolicyWriter } from '../ScalingPolicyWriter';
+import { IUpsertTargetTrackingModalProps, UpsertTargetTrackingModal } from './UpsertTargetTrackingModal';
 import { ITargetTrackingConfiguration, ITargetTrackingPolicy } from '../../../../domain/ITargetTrackingPolicy';
-import { UpsertTargetTrackingController } from './upsertTargetTracking.controller';
 
 class TargetTrackingSummaryController implements IComponentController {
   public policy: ITargetTrackingPolicy;
@@ -14,25 +13,20 @@ class TargetTrackingSummaryController implements IComponentController {
   public config: ITargetTrackingConfiguration;
   public popoverTemplate = require('./targetTrackingPopover.html');
 
-  public static $inject = ['$uibModal'];
-  constructor(private $uibModal: IModalService) {}
+  constructor() {}
 
   public $onInit() {
     this.config = this.policy.targetTrackingConfiguration;
   }
 
   public editPolicy(): void {
-    this.$uibModal.open({
-      templateUrl: require('./upsertTargetTracking.modal.html'),
-      controller: UpsertTargetTrackingController,
-      controllerAs: '$ctrl',
-      size: 'lg',
-      resolve: {
-        policy: () => this.policy,
-        serverGroup: () => this.serverGroup,
-        application: () => this.application,
-      },
-    });
+    const upsertProps = {
+      app: this.application,
+      policy: this.policy,
+      serverGroup: this.serverGroup,
+    } as IUpsertTargetTrackingModalProps;
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    ReactModal.show(UpsertTargetTrackingModal, upsertProps, modalProps);
   }
 
   public deletePolicy(): void {

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;
+    }
+  }
+}