@spinnaker/titus 0.0.0-main-2

package/src/serverGroup/details/rollback/rollbackServerGroup.controller.js

@@ -0,0 +1,149 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { get } from 'lodash';
+import { SERVER_GROUP_WRITER, TaskMonitor } from '@spinnaker/core';
+
+export const TITUS_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER =
+  'spinnaker.titus.serverGroup.details.rollback.controller';
+export const name = TITUS_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER; // for backwards compatibility
+module(TITUS_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER, [SERVER_GROUP_WRITER]).controller(
+  'titusRollbackServerGroupCtrl',
+  [
+    '$scope',
+    '$uibModalInstance',
+    'serverGroupWriter',
+    'application',
+    'serverGroup',
+    'previousServerGroup',
+    'disabledServerGroups',
+    'allServerGroups',
+    function (
+      $scope,
+      $uibModalInstance,
+      serverGroupWriter,
+      application,
+      serverGroup,
+      previousServerGroup,
+      disabledServerGroups,
+      allServerGroups,
+    ) {
+      $scope.serverGroup = serverGroup;
+      $scope.disabledServerGroups = disabledServerGroups.sort((a, b) => b.name.localeCompare(a.name));
+      $scope.allServerGroups = allServerGroups.sort((a, b) => b.name.localeCompare(a.name));
+      $scope.verification = {};
+
+      const desired = serverGroup.capacity.desired;
+
+      let rollbackType = 'EXPLICIT';
+
+      if (allServerGroups.length === 0 && serverGroup.entityTags) {
+        const previousServerGroup = get(serverGroup, 'entityTags.creationMetadata.value.previousServerGroup');
+        if (previousServerGroup) {
+          rollbackType = 'PREVIOUS_IMAGE';
+          $scope.previousServerGroup = {
+            name: previousServerGroup.name,
+            imageName: previousServerGroup.imageName,
+          };
+
+          if (previousServerGroup.imageId && previousServerGroup.imageId !== previousServerGroup.imageName) {
+            $scope.previousServerGroup.imageId = previousServerGroup.imageId;
+          }
+        }
+      }
+
+      let healthyPercent;
+      if (desired < 10) {
+        healthyPercent = 100;
+      } else if (desired < 20) {
+        // accept 1 instance in an unknown state during rollback
+        healthyPercent = 90;
+      } else {
+        healthyPercent = 95;
+      }
+
+      $scope.command = {
+        rollbackType: rollbackType,
+        rollbackContext: {
+          imageId: previousServerGroup ? previousServerGroup.imageId : undefined,
+          rollbackServerGroupName: serverGroup.name,
+          restoreServerGroupName: previousServerGroup ? previousServerGroup.name : undefined,
+          targetHealthyRollbackPercentage: healthyPercent,
+          delayBeforeDisableSeconds: 0,
+        },
+        targetGroups: serverGroup.targetGroups,
+        securityGroups: serverGroup.securityGroups,
+      };
+
+      $scope.minHealthy = function (percent) {
+        return Math.ceil((desired * percent) / 100);
+      };
+
+      if (application && application.attributes) {
+        if (application.attributes.platformHealthOnlyShowOverride && application.attributes.platformHealthOnly) {
+          $scope.command.interestingHealthProviderNames = ['Titus'];
+        }
+
+        $scope.command.platformHealthOnlyShowOverride = application.attributes.platformHealthOnlyShowOverride;
+      }
+
+      this.isValid = function () {
+        const command = $scope.command;
+        if (!$scope.verification.verified) {
+          return false;
+        }
+
+        if (rollbackType === 'PREVIOUS_IMAGE') {
+          // no need to validate when using an explicit image
+          return true;
+        }
+
+        return command.rollbackContext.restoreServerGroupName !== undefined;
+      };
+
+      $scope.taskMonitor = new TaskMonitor({
+        application: application,
+        title: 'Rollback ' + serverGroup.name,
+        modalInstance: $uibModalInstance,
+      });
+
+      this.rollback = function () {
+        if (!this.isValid()) {
+          return;
+        }
+
+        const submitMethod = function () {
+          return serverGroupWriter.rollbackServerGroup(serverGroup, application, $scope.command);
+        };
+
+        $scope.taskMonitor.submit(submitMethod);
+      };
+
+      this.cancel = function () {
+        $uibModalInstance.dismiss();
+      };
+
+      this.label = function (serverGroup) {
+        if (!serverGroup) {
+          return '';
+        }
+
+        if (!serverGroup.buildInfo || !serverGroup.buildInfo.images) {
+          return serverGroup.name;
+        }
+
+        let imageName = serverGroup.buildInfo.images[0];
+        if (imageName.indexOf('/') > 0) {
+          imageName = imageName.substring(imageName.indexOf('/') + 1);
+        }
+
+        return serverGroup.name + ' (' + imageName + ')';
+      };
+
+      this.group = function (serverGroup) {
+        return serverGroup.isDisabled ? 'Disabled Server Groups' : 'Enabled Server Groups';
+      };
+    },
+  ],
+);

package/src/serverGroup/details/rollback/rollbackServerGroup.html

@@ -0,0 +1,133 @@
+<div modal-page class="confirmation-modal">
+  <task-monitor monitor="taskMonitor"></task-monitor>
+  <form role="form">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Rollback {{serverGroup.name}}</h4>
+    </div>
+    <div class="modal-body confirmation-modal">
+      <div class="row">
+        <div class="col-sm-3 sm-label-right">Restore to</div>
+        <div class="col-sm-7">
+          <ui-select
+            ng-model="command.rollbackContext.restoreServerGroupName"
+            class="form-control input-sm"
+            ng-if="command.rollbackType === 'EXPLICIT'"
+          >
+            <ui-select-match placeholder="Select...">{{ctrl.label($select.selected)}}</ui-select-match>
+            <ui-select-choices group-by="ctrl.group" repeat="serverGroup.name as serverGroup in allServerGroups">
+              <span ng-bind-html="ctrl.label(serverGroup)"></span>
+            </ui-select-choices>
+          </ui-select>
+          <div ng-if="command.rollbackType === 'PREVIOUS_IMAGE'" style="margin-top: 5px">
+            {{ previousServerGroup.name }} <span class="small">(no longer deployed)</span><br />
+            <span class="small">
+              <strong>Image</strong>: {{ previousServerGroup.imageName}}
+              <span ng-if="previousServerGroup.imageId">({{ previousServerGroup.imageId }})</span><br />
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="row" ng-if="command.platformHealthOnlyShowOverride">
+        <div class="col-sm-10 col-sm-offset-1">
+          <platform-health-override
+            command="command"
+            platform-health-type="'Titus'"
+            show-help-details="true"
+            field-columns="12"
+          >
+          </platform-health-override>
+        </div>
+      </div>
+
+      <task-reason command="command"></task-reason>
+
+      <div class="row">
+        <div class="col-sm-11 col-sm-offset-1">
+          Wait
+          <input
+            placeholder="0"
+            min="0"
+            type="number"
+            ng-model="command.rollbackContext.delayBeforeDisableSeconds"
+            class="form-control input-sm inline-number"
+          />
+          seconds before disabling <em>{{ ctrl.label(serverGroup) }}</em>.
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-11 col-sm-offset-1">
+          Consider rollback successful when
+          <input
+            type="number"
+            min="0"
+            max="100"
+            ng-model="command.rollbackContext.targetHealthyRollbackPercentage"
+            class="form-control input-sm inline-number"
+          />
+          percent of instances are healthy.
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-sm-4 sm-label-right">Rollback Operations</div>
+      </div>
+      <div class="row" ng-if="command.rollbackType === 'EXPLICIT'">
+        <div class="col-sm-11 col-sm-offset-1">
+          <ol>
+            <li>Enable <em>{{ command.rollbackContext.restoreServerGroupName || 'previous server group' }}</em></li>
+            <li>
+              Resize <em>{{ command.rollbackContext.restoreServerGroupName || 'previous server group' }}</em> to [
+              <strong>min</strong>: {{serverGroup.capacity.desired}}, <strong>max</strong>: {{ serverGroup.capacity.max
+              }}, <strong>desired</strong>: {{ serverGroup.capacity.desired }} ]<br />(minimum capacity pinned at
+              {{serverGroup.capacity.desired}} to prevent autoscaling down during rollback)
+            </li>
+
+            <li ng-if="command.rollbackContext.targetHealthyRollbackPercentage < 100">
+              Wait for at least {{minHealthy(command.rollbackContext.targetHealthyRollbackPercentage)}} instances to
+              report as healthy
+            </li>
+            <li>Disable {{ serverGroup.name }}</li>
+            <li>
+              Restore minimum capacity of
+              <em>{{ command.rollbackContext.restoreServerGroupName || 'previous server group' }}</em> [
+              <strong>min</strong>: {{ serverGroup.capacity.min }} ]
+            </li>
+          </ol>
+          <p>This rollback will affect server groups in {{ serverGroup.account }} ({{ serverGroup.region }}).</p>
+        </div>
+      </div>
+      <div class="row" ng-if="command.rollbackType === 'PREVIOUS_IMAGE'">
+        <div class="col-sm-11 col-sm-offset-1">
+          <ol>
+            <li>
+              Deploy <em>{{ previousServerGroup.imageId }}</em> [ <strong>min</strong>:
+              {{serverGroup.capacity.desired}}, <strong>max</strong>: {{ serverGroup.capacity.max }},
+              <strong>desired</strong>: {{ serverGroup.capacity.desired }} ]<br />(minimum capacity pinned at
+              {{serverGroup.capacity.desired}} to prevent autoscaling down during deploy)
+            </li>
+            <li ng-if="command.rollbackContext.targetHealthyRollbackPercentage < 100">
+              Wait for at least {{minHealthy(command.rollbackContext.targetHealthyRollbackPercentage)}} instances to
+              report as healthy
+            </li>
+            <li>Disable <em>{{ serverGroup.name }}</em></li>
+            <li>
+              Restore minimum capacity of <em>new server group</em> [ <strong>min</strong>: {{ serverGroup.capacity.min
+              }} ]
+            </li>
+          </ol>
+          <p>This rollback will affect server groups in {{ serverGroup.account }} ({{ serverGroup.region }}).</p>
+        </div>
+      </div>
+    </div>
+    <aws-footer
+      action="ctrl.rollback()"
+      cancel="ctrl.cancel()"
+      is-valid="ctrl.isValid()"
+      account="serverGroup.account"
+      verification="verification"
+    ></aws-footer>
+  </form>
+</div>

package/src/serverGroup/details/scalingActivity/TitusScalingActivitiesModal.tsx

@@ -0,0 +1,81 @@
+import { DateTime } from 'luxon';
+import * as React from 'react';
+
+import type { ICapacity, IModalComponentProps } from '@spinnaker/core';
+import { ModalBody, ModalFooter, ModalHeader, ServerGroupReader, Spinner, useData } from '@spinnaker/core';
+
+import type { ITitusServerGroup } from '../../../domain';
+
+export interface ITitusScalingActivitiesProps extends IModalComponentProps {
+  serverGroup: ITitusServerGroup;
+}
+
+type JobState = 'Accepted' | 'KillInitiated' | 'Finished';
+
+interface ITitusScalingEvent {
+  capacity: ICapacity;
+  date: string;
+  jobId: string;
+  jobState: JobState;
+  reasonCode: string;
+  reasonMessage: string;
+}
+
+export const TitusScalingActivitiesModal = ({ dismissModal, serverGroup }: ITitusScalingActivitiesProps) => {
+  const fetchScalingActivities = () => ServerGroupReader.getScalingActivities(serverGroup);
+
+  const { result: scalingActivities, status, error } = useData(fetchScalingActivities, [], [serverGroup.id]);
+  const loading = status === 'PENDING';
+
+  const formatDate = (date: string) => {
+    const newDate = new Date(date);
+    return DateTime.fromJSDate(newDate).toFormat('yyyy-MM-dd HH:mm:ss ZZZZ');
+  };
+
+  return (
+    <>
+      <ModalHeader>{`Scaling activities for ${serverGroup.name}`}</ModalHeader>
+      <ModalBody>
+        <div className="flex-1 heading-3">
+          {loading && (
+            <div className="horizontal center sp-margin-xl-yaxis">
+              <Spinner />
+            </div>
+          )}
+          {!loading && Boolean(error) && (
+            <div className="horizontal center sp-margin-xl-yaxis">
+              <h4>{`There was an error loading scaling activities for ${serverGroup.name}. Please try again later.`}</h4>
+            </div>
+          )}
+          {!loading && !error && !Boolean(scalingActivities.length) && (
+            <div className="horizontal center sp-margin-xl-yaxis">
+              <h4>{`No scaling activities found for ${serverGroup.name}.`}</h4>
+            </div>
+          )}
+          {!loading && !error && Boolean(scalingActivities.length) && (
+            <div className="middle sp-margin-xl-yaxis">
+              {scalingActivities.map((a: ITitusScalingEvent, i) => (
+                <div key={`${i}-${a.jobId}`} className="sp-margin-xl-yaxis">
+                  <p className="clearfix">
+                    <span className={`label label-${a.jobState !== 'KillInitiated' ? 'success' : 'danger'} pull-left`}>
+                      {a.jobState}
+                    </span>
+                    <span className="label label-default pull-right">{formatDate(a.date)}</span>
+                  </p>
+                  <p>{`${a.reasonMessage} Desired capacity is ${a.capacity?.desired || 'unknown'}.`}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </ModalBody>
+      <ModalFooter
+        primaryActions={
+          <button className="btn btn-primary" onClick={dismissModal}>
+            Close
+          </button>
+        }
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,102 @@
+import React from 'react';
+
+import { PolicyTypeSelectionModal } from '@spinnaker/amazon';
+import type { Application, IServerGroup } from '@spinnaker/core';
+import { AccountService, ReactModal } from '@spinnaker/core';
+
+import { TitusReactInjector } from '../../../reactShims';
+import type { IUpsertTargetTrackingModalProps } from './targetTracking/UpsertTargetTrackingModal';
+import { UpsertTargetTrackingModal } from './targetTracking/UpsertTargetTrackingModal';
+import type { IUpsertScalingPolicyModalProps } from './upsert/UpsertScalingPolicyModal';
+import { UpsertScalingPolicyModal } from './upsert/UpsertScalingPolicyModal';
+
+export interface ICreateScalingPolicyButtonProps {
+  application: Application;
+  serverGroup: IServerGroup;
+}
+
+export interface ICreateScalingPolicyButtonState {
+  showSelection: boolean;
+  showModal: boolean;
+  typeSelection: string;
+  awsAccount: string;
+}
+
+export class CreateScalingPolicyButton extends React.Component<
+  ICreateScalingPolicyButtonProps,
+  ICreateScalingPolicyButtonState
+> {
+  constructor(props: ICreateScalingPolicyButtonProps) {
+    super(props);
+    this.state = {
+      showSelection: false,
+      showModal: false,
+      typeSelection: null,
+      awsAccount: null,
+    };
+    AccountService.getAccountDetails(props.serverGroup.account).then((details) => {
+      this.setState({ awsAccount: details.awsAccount });
+    });
+  }
+
+  public handleClick = (): void => {
+    this.setState({ showSelection: true });
+  };
+
+  public createStepPolicy(): void {
+    const { serverGroup, application } = this.props;
+
+    const upsertProps = {
+      app: application,
+      policy: TitusReactInjector.titusServerGroupTransformer.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;
+    const upsertProps = {
+      app: application,
+      policy: TitusReactInjector.titusServerGroupTransformer.constructNewTargetTrackingPolicyTemplate(serverGroup),
+      serverGroup,
+    } as IUpsertTargetTrackingModalProps;
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    ReactModal.show(UpsertTargetTrackingModal, upsertProps, modalProps);
+  }
+
+  public typeSelected = (typeSelection: string): void => {
+    this.setState({ typeSelection, showSelection: false, showModal: true });
+    if (typeSelection === 'step') {
+      this.createStepPolicy();
+    }
+    if (typeSelection === 'targetTracking') {
+      this.createTargetTrackingPolicy();
+    }
+  };
+
+  public showModalCallback = (): void => {
+    this.setState({ showSelection: false, showModal: false, typeSelection: null });
+  };
+
+  public render() {
+    const { min, max } = this.props.serverGroup.capacity;
+    return (
+      <div>
+        {this.state.awsAccount ? (
+          <a className="clickable" onClick={this.handleClick}>
+            Create new scaling policy
+          </a>
+        ) : null}
+        {this.state.showSelection && (
+          <PolicyTypeSelectionModal
+            warnOnMinMaxCapacity={min === max}
+            typeSelectedCallback={this.typeSelected}
+            showCallback={this.showModalCallback}
+          />
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { Application, IServerGroup } from '@spinnaker/core';
+import { overridableComponent } from '@spinnaker/core';
+
+export interface ITitusCustomScalingPolicyProps {
+  application: Application;
+  serverGroup: IServerGroup;
+}
+
+export const TitusCustomScalingPolicy: React.ComponentType<ITitusCustomScalingPolicyProps> = overridableComponent(
+  () => null,
+  'titus.serverGroup.details.customScaling',
+);

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

@@ -0,0 +1,15 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { CreateScalingPolicyButton } from './CreateScalingPolicyButton';
+
+export const TITUS_CREATE_SCALING_POLICY_BUTTON = 'spinnaker.titus.serverGroup.details.scaling.policy.button';
+module(TITUS_CREATE_SCALING_POLICY_BUTTON, []).component(
+  'titusCreateScalingPolicyButton',
+  react2angular(withErrorBoundary(CreateScalingPolicyButton, 'titusCreateScalingPolicyButton'), [
+    'application',
+    'serverGroup',
+  ]),
+);

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

@@ -0,0 +1,3 @@
+export * from './targetTracking/TitusTargetTrackingChart';
+export { UpsertTargetTrackingModal as TitusUpsertTargetTrackingModal } from './targetTracking/UpsertTargetTrackingModal';
+export { UpsertScalingPolicyModal as TitusUpsertScalingPolicyModal } from './upsert/UpsertScalingPolicyModal';

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

@@ -0,0 +1,7 @@
+import { module } from 'angular';
+
+import { TITUS_CREATE_SCALING_POLICY_BUTTON } from './createScalingPolicyButton.component';
+import { TITUS_SERVERGROUP_CUSTOM_SCALING_COMPONENT } from './titusCustomScalingPolicy.component';
+
+export const SCALING_POLICY_MODULE = 'spinnaker.titus.scalingPolicy.module';
+module(SCALING_POLICY_MODULE, [TITUS_CREATE_SCALING_POLICY_BUTTON, TITUS_SERVERGROUP_CUSTOM_SCALING_COMPONENT]);

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import type { IAmazonServerGroup, IScalingPolicyAlarm, ITargetTrackingConfiguration } from '@spinnaker/amazon';
+import { MetricAlarmChart } from '@spinnaker/amazon';
+import type { ICloudMetricStatistics } from '@spinnaker/core';
+
+export interface ITitusTargetTrackingChartProps {
+  config: ITargetTrackingConfiguration;
+  serverGroup: IAmazonServerGroup;
+  unit?: string;
+  updateUnit?: (unit: string) => void;
+}
+
+export const TitusTargetTrackingChart = ({ config, serverGroup, unit, updateUnit }: ITitusTargetTrackingChartProps) => {
+  const [alarm, setAlarm] = React.useState<IScalingPolicyAlarm>({
+    alarmName: null,
+    alarmArn: null,
+    metricName: null,
+    namespace: null,
+    statistic: 'Average',
+    dimensions: [],
+    period: 60,
+    threshold: config.targetValue,
+    comparisonOperator: 'GreaterThanThreshold',
+    okactions: [],
+    insufficientDataActions: [],
+    alarmActions: [],
+    evaluationPeriods: null,
+    alarmDescription: null,
+    unit: null,
+  });
+
+  const synchronizeAlarm = () => {
+    const customMetric = config?.customizedMetricSpecification;
+    const updatedAlarm = {
+      ...alarm,
+      dimensions: customMetric?.dimensions,
+      metricName: customMetric?.metricName,
+      namespace: customMetric?.namespace,
+      statistic: customMetric?.statistic,
+      threshold: config?.targetValue,
+    };
+    setAlarm(updatedAlarm);
+  };
+
+  React.useEffect(() => {
+    synchronizeAlarm();
+  }, [config]);
+
+  const onChartLoaded = (stats: ICloudMetricStatistics) => {
+    if (unit) {
+      updateUnit(stats.unit);
+    }
+  };
+
+  return <MetricAlarmChart alarm={alarm} onChartLoaded={onChartLoaded} serverGroup={serverGroup} />;
+};

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+import type {
+  IAmazonServerGroup,
+  ITargetTrackingPolicy,
+  ITargetTrackingPolicyCommand,
+  IUpsertScalingPolicyCommand,
+} from '@spinnaker/amazon';
+import { TargetMetricFields, TargetTrackingAdditionalSettings } from '@spinnaker/amazon';
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { TaskMonitorModal } from '@spinnaker/core';
+
+import type { ITitusServerGroup } from '../../../../domain';
+import { TitusScalingPolicyCommandBuilder } from '../upsert/TitusScalingPolicyCommandBuilderService';
+
+export interface IUpsertTargetTrackingModalProps extends IModalComponentProps {
+  app: Application;
+  policy: ITargetTrackingPolicy;
+  serverGroup: ITitusServerGroup;
+}
+
+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 = TitusScalingPolicyCommandBuilder.buildNewCommand('TargetTracking', serverGroup, policy);
+    setCommand(baseCommand);
+  }, []);
+
+  const mode = policy.id ? '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={false}
+            cloudwatch={true}
+            command={command as ITargetTrackingPolicyCommand}
+            isCustomMetric={isCustom}
+            app={app}
+            serverGroup={(serverGroup as unknown) as IAmazonServerGroup}
+            toggleMetricType={(t) => setIsCustom(t === 'custom')}
+            updateCommand={setCommand}
+          />
+          <h4 className="section-heading">Additional Settings</h4>
+          <TargetTrackingAdditionalSettings
+            command={command}
+            cooldowns={true}
+            policyName={policy.policyName}
+            updateCommand={setCommand}
+          />
+        </div>
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,17 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { withErrorBoundary } from '@spinnaker/core';
+
+import { TitusCustomScalingPolicy } from './TitusCustomScalingPolicy';
+
+export const TITUS_SERVERGROUP_CUSTOM_SCALING_COMPONENT =
+  'spinnaker.application.titus.serverGroup.customScaling.component';
+
+module(TITUS_SERVERGROUP_CUSTOM_SCALING_COMPONENT, []).component(
+  'titusCustomScalingPolicy',
+  react2angular(withErrorBoundary(TitusCustomScalingPolicy, 'titusCustomScalingPolicy'), [
+    'application',
+    'serverGroup',
+  ]),
+);