@spinnaker/amazon 0.8.14 → 0.11.0

package/src/serverGroup/details/scalingPolicy/popover/AlarmSummary.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
-import { IScalingPolicyAlarmView } from '../../../../domain';
+import type { IScalingPolicyAlarmView } from '../../../../domain';
 
 export interface IAlarmSummaryProps {
   alarm: IScalingPolicyAlarmView;
 }
 
+export const comparatorMap = {
+  GreaterThanOrEqualToThreshold: '>=',
+  GreaterThanThreshold: '>',
+  LessThanOrEqualToThreshold: '<=',
+  LessThanThreshold: '<',
+};
+
 export const AlarmSummary = ({ alarm }: IAlarmSummaryProps) => (
   <div>
-    <b>Whenever</b>
-    {` ${alarm.statistic} of `}
-    <span className="alarm-name">{alarm.metricName}</span>
-    {` is ${alarm.comparator} ${alarm.threshold} `}
-    <b>for at least</b>
-    {` ${alarm.evaluationPeriods} consecutive periods of ${alarm.period} seconds`}
+    <div>
+      <b>Whenever</b>
+      {` ${alarm.statistic} of ${alarm.metricName}`}
+    </div>
+    <div>
+      <b>for at least</b>
+      {` ${alarm.evaluationPeriods} consecutive periods of ${alarm.period} seconds`}
+    </div>
   </div>
 );

package/src/serverGroup/details/scalingPolicy/popover/StepPolicyPopoverContent.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+
+import { LabeledValue, LabeledValueList } from '@spinnaker/core';
+
+import { MetricAlarmChart } from '../chart/MetricAlarmChart';
+import type {
+  IAmazonServerGroup,
+  IScalingPolicyAlarmView,
+  IScalingPolicyView,
+  IStepAdjustmentView,
+} from '../../../../domain';
+import { comparatorMap } from '../popover/AlarmSummary';
+
+export interface IStepPolicyPopoverContentProps {
+  policy: IScalingPolicyView;
+  serverGroup: IAmazonServerGroup;
+}
+
+export const StepPolicyPopoverContent = ({ policy, serverGroup }: IStepPolicyPopoverContentProps) => {
+  const { adjustmentType, alarms, cooldown, estimatedInstanceWarmup, minAdjustmentMagnitude, stepAdjustments } = policy;
+  const showWait = cooldown ? true : stepAdjustments?.[0]?.operator === 'decrease';
+  const alarm = alarms[0] || ({} as IScalingPolicyAlarmView);
+  const isGreater = alarm?.comparisonOperator.includes('Greater');
+
+  const getAdjustmentTypeString = (step: IScalingPolicyView | IStepAdjustmentView): string => {
+    if (adjustmentType === 'ExactCapacity') {
+      return `set capacity to ${step.scalingAdjustment} instance${step.scalingAdjustment > 1 ? 's' : ''}`;
+    }
+
+    return `${step.operator} capacity by ${step.absAdjustment}${
+      adjustmentType === 'PercentChangeInCapacity' ? '%' : ' instance'
+    }${adjustmentType === 'ChangeInCapacity' && step.absAdjustment > 1 ? 's' : ''}`;
+  };
+
+  const getBoundaryStr = (step: IStepAdjustmentView) => {
+    const middleBounds =
+      step.metricIntervalLowerBound !== undefined && step.metricIntervalUpperBound !== undefined
+        ? `is between ${alarm.threshold + step.metricIntervalLowerBound} and ${
+            alarm.threshold + step.metricIntervalUpperBound
+          } `
+        : '';
+
+    const sourceBound = isGreater ? step.metricIntervalLowerBound : step.metricIntervalUpperBound;
+    const finalBound = `is ${isGreater ? 'greater' : 'less'} than ${alarm.threshold + sourceBound}`;
+
+    return `if ${alarm.metricName} ${middleBounds}${finalBound}`;
+  };
+
+  return (
+    <div>
+      <LabeledValueList className="dl-horizontal dl-narrow">
+        <LabeledValue
+          label="Whenever"
+          value={`${alarm.statistic} of ${alarm.metricName} is ${comparatorMap[alarm.comparisonOperator]} ${
+            alarm.threshold
+          }`}
+        />
+        <LabeledValue
+          label="for at least"
+          value={`${alarm.evaluationPeriods} consecutive periods of ${alarm.period} seconds`}
+        />
+        {Boolean(stepAdjustments?.length) && (
+          <LabeledValue
+            label="then"
+            value={stepAdjustments.map((sa, index) => (
+              <div key={`step-adjustment-boundary-${index}`}>
+                {stepAdjustments.length > 1 && <span>{getBoundaryStr(sa)}</span>}
+                <span>{getAdjustmentTypeString(sa)}</span>
+              </div>
+            ))}
+          />
+        )}
+        {!Boolean(stepAdjustments?.length) && <LabeledValue label="then" value={getAdjustmentTypeString(policy)} />}
+        {Boolean(minAdjustmentMagnitude) && (
+          <LabeledValue
+            label="in"
+            value={`increments of at least ${minAdjustmentMagnitude} instance${minAdjustmentMagnitude > 1 ? 's' : ''}`}
+          />
+        )}
+        {Boolean(showWait) && (
+          <LabeledValue label="wait" value={`${cooldown} seconds before allowing another scaling activity.`} />
+        )}
+        {Boolean(estimatedInstanceWarmup) && (
+          <LabeledValue label="wait" value={`${estimatedInstanceWarmup} seconds to warm up after each step.`} />
+        )}
+      </LabeledValueList>
+      <MetricAlarmChart alarm={alarm} serverGroup={serverGroup} />
+    </div>
+  );
+};

package/src/serverGroup/details/scalingPolicy/popover/scalingPolicyPopover.component.ts

@@ -1,4 +1,5 @@
-import { IComponentOptions, module } from 'angular';
+import type { IComponentOptions } from 'angular';
+import { module } from 'angular';
 import { AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_CHART_METRICALARMCHART_COMPONENT } from '../chart/MetricAlarmChart';
 
 const scalingPolicyPopover: IComponentOptions = {

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

@@ -1,12 +1,14 @@
 import { module } from 'angular';
 
 import { AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT } from './alarmBasedSummary.component';
-import { DETAILS_SUMMARY } from './detailsSummary.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, [
-  DETAILS_SUMMARY,
   TARGET_TRACKING_MODULE,
   AMAZON_SERVERGROUP_DETAILS_SCALINGPOLICY_ALARMBASEDSUMMARY_COMPONENT,
+  STEP_POLICY_SUMMARY_COMPONENT,
+  SCALING_POLICY_SUMMARY_COMPONENT,
 ]);

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

@@ -0,0 +1,10 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { withErrorBoundary } from '@spinnaker/core';
+import { StepPolicySummary } from './StepPolicySummary';
+
+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']),
+);

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

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

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

@@ -3,9 +3,9 @@ import * as React from 'react';
 
 import { NumberInput, ReactSelectInput } from '@spinnaker/core';
 
-import { ITargetTrackingPolicyCommand } from '../ScalingPolicyWriter';
+import type { ITargetTrackingPolicyCommand } from '../ScalingPolicyWriter';
 import { TargetTrackingChart } from './TargetTrackingChart';
-import { IAmazonServerGroup, ICustomizedMetricSpecification, IScalingPolicyAlarmView } from '../../../../domain';
+import type { IAmazonServerGroup, ICustomizedMetricSpecification, IScalingPolicyAlarmView } from '../../../../domain';
 import { MetricSelector } from '../upsert/alarm/MetricSelector';
 
 import './TargetMetricFields.less';
@@ -18,7 +18,6 @@ export interface ITargetMetricFieldsProps {
   isCustomMetric: boolean;
   serverGroup: IAmazonServerGroup;
   toggleMetricType?: (type: MetricType) => void;
-  unit?: string;
   updateCommand: (command: ITargetTrackingPolicyCommand) => void;
 }
 
@@ -29,19 +28,15 @@ export const TargetMetricFields = ({
   isCustomMetric,
   serverGroup,
   toggleMetricType,
-  unit,
   updateCommand,
 }: ITargetMetricFieldsProps) => {
   const predefinedMetrics = ['ASGAverageCPUUtilization', 'ASGAverageNetworkOut', 'ASGAverageNetworkIn'];
   const statistics = ['Average', 'Maximum', 'Minimum', 'SampleCount', 'Sum'];
-  const [commandView, setCommandView] = React.useState<ITargetTrackingPolicyCommand>(command);
-  const [isCustom, setIsCustom] = React.useState<boolean>(isCustomMetric);
-  const [unitView, setUnitView] = React.useState<string>(unit);
+  const [unit, setUnit] = React.useState<string>(null);
 
   const setCommandField = (path: string, value: any) => {
-    const newCommand = cloneDeep(commandView);
+    const newCommand = cloneDeep(command);
     set(newCommand, path, value);
-    setCommandView(newCommand);
     updateCommand(newCommand);
   };
 
@@ -50,8 +45,8 @@ export const TargetMetricFields = ({
   };
 
   const onMetricTypeChange = () => {
-    const newCommand = cloneDeep(commandView);
-    if (isCustom) {
+    const newCommand = cloneDeep(command);
+    if (isCustomMetric) {
       set(newCommand, 'targetTrackingConfiguration.predefinedMetricSpecification', {
         predefinedMetricType: 'ASGAverageCPUUtilization',
       });
@@ -66,10 +61,8 @@ export const TargetMetricFields = ({
       });
     }
 
-    setCommandView(newCommand);
     updateCommand(newCommand);
-    setIsCustom(!isCustom);
-    toggleMetricType(isCustom ? 'predefined' : 'custom');
+    toggleMetricType(isCustomMetric ? 'predefined' : 'custom');
   };
 
   return (
@@ -88,9 +81,9 @@ export const TargetMetricFields = ({
       <div className="row sp-margin-s-yaxis">
         <div className="col-md-2 sm-label-right">Metric</div>
         <div className="col-md-10 content-fields">
-          {!isCustom && (
+          {!isCustomMetric && (
             <ReactSelectInput
-              value={commandView.targetTrackingConfiguration.predefinedMetricSpecification?.predefinedMetricType}
+              value={command.targetTrackingConfiguration.predefinedMetricSpecification?.predefinedMetricType}
               stringOptions={predefinedMetrics}
               onChange={(e) =>
                 setCommandField(
@@ -101,16 +94,16 @@ export const TargetMetricFields = ({
               inputClassName="metric-select-input"
             />
           )}
-          {isCustom && (
+          {isCustomMetric && (
             <MetricSelector
-              alarm={commandView.targetTrackingConfiguration.customizedMetricSpecification as IScalingPolicyAlarmView}
+              alarm={command.targetTrackingConfiguration.customizedMetricSpecification as IScalingPolicyAlarmView}
               serverGroup={serverGroup}
               updateAlarm={updateAlarm}
             />
           )}
           {allowDualMode && (
             <a className="clickable" onClick={onMetricTypeChange}>
-              {isCustom ? 'Use a predefined metric' : 'Select a custom metric'}
+              {isCustomMetric ? 'Use a predefined metric' : 'Select a custom metric'}
             </a>
           )}
         </div>
@@ -118,10 +111,10 @@ export const TargetMetricFields = ({
       <div className="row sp-margin-s-yaxis">
         <div className="col-md-2 sm-label-right">Target</div>
         <div className="col-md-10 content-fields horizontal">
-          {isCustom && (
+          {isCustomMetric && (
             <div className="horizontal middle">
               <ReactSelectInput
-                value={commandView.targetTrackingConfiguration.customizedMetricSpecification?.statistic}
+                value={command.targetTrackingConfiguration.customizedMetricSpecification?.statistic}
                 stringOptions={statistics}
                 onChange={(e) =>
                   setCommandField('targetTrackingConfiguration.customizedMetricSpecification.statistic', e.target.value)
@@ -133,23 +126,23 @@ export const TargetMetricFields = ({
           )}
           <div className="horizontal middle">
             <NumberInput
-              value={commandView.targetTrackingConfiguration.targetValue}
+              value={command.targetTrackingConfiguration.targetValue}
               onChange={(e) =>
                 setCommandField('targetTrackingConfiguration.targetValue', Number.parseInt(e.target.value))
               }
               inputClassName="form-control input-sm sp-margin-xs-right"
             />
-            <span>{unitView}</span>
+            <span>{unit}</span>
           </div>
         </div>
       </div>
       <div className="row">
         <div className="col-md-10 col-md-offset-1">
           <TargetTrackingChart
-            config={commandView.targetTrackingConfiguration}
+            config={command.targetTrackingConfiguration}
             serverGroup={serverGroup}
-            unit={unitView}
-            updateUnit={(u) => setUnitView(u)}
+            unit={unit}
+            updateUnit={(u) => setUnit(u)}
           />
         </div>
       </div>

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

@@ -1,7 +1,7 @@
 import { set } from 'lodash';
 import * as React from 'react';
 import { CheckboxInput, HelpField, NumberInput } from '@spinnaker/core';
-import { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import type { IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
 
 import './TargetTrackingAdditionalSettings.less';
 

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

@@ -1,11 +1,11 @@
-import { Dictionary } from 'lodash';
+import type { Dictionary } from 'lodash';
 import * as React from 'react';
 import { Subject } from 'rxjs';
 
-import { ICloudMetricStatistics } from '@spinnaker/core';
+import type { ICloudMetricStatistics } from '@spinnaker/core';
 
 import { MetricAlarmChart } from '../chart/MetricAlarmChart';
-import { IAmazonServerGroup, IScalingPolicyAlarm, ITargetTrackingConfiguration } from '../../../../domain';
+import type { IAmazonServerGroup, IScalingPolicyAlarm, ITargetTrackingConfiguration } from '../../../../domain';
 
 export interface ITargetTrackingChartProps {
   alarmUpdated?: Subject<void>;

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

@@ -1,11 +1,12 @@
 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 { ITargetTrackingPolicyCommand, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
+import type { ITargetTrackingPolicyCommand, IUpsertScalingPolicyCommand } from '../ScalingPolicyWriter';
 import { TargetMetricFields } from './TargetMetricFields';
 import { TargetTrackingAdditionalSettings } from './TargetTrackingAdditionalSettings';
-import { IAmazonServerGroup, ITargetTrackingPolicy } from '../../../../domain';
+import type { IAmazonServerGroup, ITargetTrackingPolicy } from '../../../../domain';
 import { ScalingPolicyCommandBuilder } from '../upsert/ScalingPolicyCommandBuilderService';
 
 export interface IUpsertTargetTrackingModalProps extends IModalComponentProps {

package/src/serverGroup/details/scalingPolicy/targetTracking/targetTrackingSummary.component.ts

@@ -1,85 +1,14 @@
-import { IComponentController, IComponentOptions, module } from 'angular';
-
-import { Application, ConfirmationModalService, IServerGroup, ITaskMonitorConfig, ReactModal } from '@spinnaker/core';
-
-import { ScalingPolicyWriter } from '../ScalingPolicyWriter';
-import { IUpsertTargetTrackingModalProps, UpsertTargetTrackingModal } from './UpsertTargetTrackingModal';
-import { ITargetTrackingConfiguration, ITargetTrackingPolicy } from '../../../../domain/ITargetTrackingPolicy';
-
-class TargetTrackingSummaryController implements IComponentController {
-  public policy: ITargetTrackingPolicy;
-  public serverGroup: IServerGroup;
-  public application: Application;
-  public config: ITargetTrackingConfiguration;
-  public popoverTemplate = require('./targetTrackingPopover.html');
-
-  constructor() {}
-
-  public $onInit() {
-    this.config = this.policy.targetTrackingConfiguration;
-  }
-
-  public editPolicy(): void {
-    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 {
-    const taskMonitor: ITaskMonitorConfig = {
-      application: this.application,
-      title: 'Deleting scaling policy ' + this.policy.policyName,
-    };
-
-    ConfirmationModalService.confirm({
-      header: `Really delete ${this.policy.policyName}?`,
-      buttonText: 'Delete scaling policy',
-      account: this.serverGroup.account,
-      taskMonitorConfig: taskMonitor,
-      submitMethod: () => ScalingPolicyWriter.deleteScalingPolicy(this.application, this.serverGroup, this.policy),
-    });
-  }
-}
-
-const component: IComponentOptions = {
-  bindings: {
-    policy: '<',
-    serverGroup: '<',
-    application: '<',
-  },
-  controller: TargetTrackingSummaryController,
-  template: `
-    <div uib-popover-template="$ctrl.popoverTemplate"
-       popover-placement="left"
-       popover-title="{{$ctrl.policy.policyName}}"
-       popover-trigger="'mouseenter'">
-      <p>
-        <span class="label label-default">{{$ctrl.policy.policyType | robotToHuman | uppercase }}</span>
-        <div>
-          <strong>Target</strong>
-          {{$ctrl.config.predefinedMetricSpecification.predefinedMetricType}}
-          {{$ctrl.config.customizedMetricSpecification.metricName}}
-          <span ng-if="$ctrl.config.customizedMetricSpecification">({{$ctrl.config.customizedMetricSpecification.statistic}})</span>
-          @ {{$ctrl.config.targetValue}}
-        </div>
-      </p>
-      <div class="actions text-right">
-        <button class="btn btn-xs btn-link" ng-click="$ctrl.editPolicy()">
-          <span class="glyphicon glyphicon-cog" uib-tooltip="Edit policy"></span>
-          <span class="sr-only">Edit policy</span>
-        </button>
-        <button class="btn btn-xs btn-link" ng-click="$ctrl.deletePolicy()">
-          <span class="glyphicon glyphicon-trash" uib-tooltip="Delete policy"></span>
-          <span class="sr-only">Delete policy</span>
-        </button>
-      </div>
-    </div>
-  `,
-};
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { withErrorBoundary } from '@spinnaker/core';
+import { TargetTrackingSummary } from './TargetTrackingSummary';
 
 export const TARGET_TRACKING_SUMMARY_COMPONENT = 'spinnaker.amazon.scalingPolicy.targetTracking.summary.component';
-module(TARGET_TRACKING_SUMMARY_COMPONENT, []).component('targetTrackingSummary', component);
+module(TARGET_TRACKING_SUMMARY_COMPONENT, []).component(
+  'targetTrackingSummary',
+  react2angular(withErrorBoundary(TargetTrackingSummary, 'stepPolicySummary'), [
+    'application',
+    'policy',
+    'serverGroup',
+  ]),
+);