@spinnaker/titus 0.0.0-main-2

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

@@ -0,0 +1,115 @@
+import { cloneDeep } from 'lodash';
+
+import type {
+  IScalingPolicy,
+  IScalingPolicyAlarmView,
+  IStepAdjustment,
+  IStepPolicyDescription,
+  ITargetTrackingPolicy,
+  IUpsertAlarmDescription,
+  IUpsertScalingPolicyCommand,
+} from '@spinnaker/amazon';
+import type { ITitusServerGroup } from '../../../../domain';
+
+type PolicyType = 'Step' | 'TargetTracking';
+
+export const TitusScalingPolicyCommandBuilder = {
+  buildAlarm: (policy: IScalingPolicy, region: string): IUpsertAlarmDescription => {
+    const alarm = policy?.alarms[0] as IScalingPolicyAlarmView;
+    return {
+      comparisonOperator: alarm.comparisonOperator,
+      region,
+      dimensions: alarm.dimensions,
+      disableEditingDimensions: alarm.disableEditingDimensions,
+      evaluationPeriods: alarm.evaluationPeriods,
+      metricName: alarm.metricName,
+      namespace: alarm.namespace,
+      period: alarm.period,
+      statistic: alarm.statistic,
+      threshold: alarm.threshold,
+      unit: alarm.unit,
+    } as IUpsertAlarmDescription;
+  },
+
+  buildStepPolicy: (policy: IScalingPolicy, threshold: number, cooldown: number): IStepPolicyDescription => {
+    const stepAdjustments = policy.stepAdjustments.map((adjustment) => {
+      const step = {
+        scalingAdjustment: Math.abs(adjustment.scalingAdjustment),
+      } as IStepAdjustment;
+
+      if (adjustment.metricIntervalUpperBound !== undefined) {
+        step.metricIntervalUpperBound = adjustment.metricIntervalUpperBound + threshold;
+      }
+      if (adjustment.metricIntervalLowerBound !== undefined) {
+        step.metricIntervalLowerBound = adjustment.metricIntervalLowerBound + threshold;
+      }
+
+      return step;
+    });
+
+    return {
+      cooldown: cooldown || 600,
+      estimatedInstanceWarmup: null,
+      metricAggregationType: 'Average',
+      stepAdjustments,
+    };
+  },
+
+  buildNewCommand: (
+    type: PolicyType,
+    serverGroup: ITitusServerGroup,
+    policy: ITargetTrackingPolicy,
+  ): IUpsertScalingPolicyCommand => {
+    const command = {
+      adjustmentType: type === 'Step' ? policy.adjustmentType : null,
+      cloudProvider: serverGroup.cloudProvider,
+      credentials: serverGroup.account,
+      jobId: serverGroup.id,
+      name: policy.id,
+      region: serverGroup.region,
+      scalingPolicyID: policy.id,
+      serverGroupName: serverGroup.name,
+    } as IUpsertScalingPolicyCommand;
+
+    if (type === 'Step') {
+      command.alarm = TitusScalingPolicyCommandBuilder.buildAlarm(policy, serverGroup.region);
+      command.minAdjustmentMagnitude = policy.minAdjustmentMagnitude || 1;
+      command.step = TitusScalingPolicyCommandBuilder.buildStepPolicy(policy, command.alarm.threshold, policy.cooldown);
+    }
+
+    if (type === 'TargetTracking') {
+      command.targetTrackingConfiguration = { ...policy.targetTrackingConfiguration };
+    }
+
+    return command;
+  },
+
+  prepareCommandForUpsert: (command: IUpsertScalingPolicyCommand, isRemove: boolean): IUpsertScalingPolicyCommand => {
+    const commandToSubmit = cloneDeep(command);
+
+    if (commandToSubmit.adjustmentType !== 'PercentChangeInCapacity') {
+      delete commandToSubmit.minAdjustmentMagnitude;
+    }
+
+    if (commandToSubmit.step) {
+      // adjust metricIntervalLowerBound/UpperBound for each step based on alarm threshold
+      commandToSubmit.step.stepAdjustments.forEach((step) => {
+        if (isRemove) {
+          step.scalingAdjustment = 0 - step.scalingAdjustment;
+          delete commandToSubmit.step.estimatedInstanceWarmup;
+        }
+        if (step.metricIntervalLowerBound !== undefined) {
+          step.metricIntervalLowerBound -= commandToSubmit.alarm.threshold;
+        }
+        if (step.metricIntervalUpperBound !== undefined) {
+          step.metricIntervalUpperBound -= commandToSubmit.alarm.threshold;
+        }
+      });
+    } else {
+      if (isRemove) {
+        command.simple.scalingAdjustment = 0 - command.simple.scalingAdjustment;
+      }
+    }
+    return commandToSubmit;
+  },
+};

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

@@ -0,0 +1,157 @@
+import { cloneDeep } from 'lodash';
+import * as React from 'react';
+
+import type {
+  IScalingPolicy,
+  IStepAdjustment,
+  IStepPolicyDescription,
+  ITargetTrackingPolicy,
+  IUpsertScalingPolicyCommand,
+} from '@spinnaker/amazon';
+import { AlarmConfigurer, ScalingPolicyAdditionalSettings, StepPolicyAction } from '@spinnaker/amazon';
+import type { IAmazonServerGroup, IScalingPolicyAlarm } from '@spinnaker/amazon/src/domain';
+import type { Application, IModalComponentProps } from '@spinnaker/core';
+import { TaskMonitorModal } from '@spinnaker/core';
+
+import { TitusScalingPolicyCommandBuilder } from './TitusScalingPolicyCommandBuilderService';
+import type { ITitusServerGroup } from '../../../../domain';
+
+type Operator = 'Add' | 'Remove' | 'Set to';
+type AdjustmentTypeView = 'instances' | 'percent of group';
+
+export interface IUpsertScalingPolicyModalProps extends IModalComponentProps {
+  app: Application;
+  policy: IScalingPolicy;
+  serverGroup: ITitusServerGroup;
+}
+
+export const UpsertScalingPolicyModal = ({
+  app,
+  closeModal,
+  dismissModal,
+  policy,
+  serverGroup,
+}: IUpsertScalingPolicyModalProps) => {
+  const [command, setCommand] = React.useState<IUpsertScalingPolicyCommand>({} as IUpsertScalingPolicyCommand);
+  React.useEffect(() => {
+    const baseCommand = TitusScalingPolicyCommandBuilder.buildNewCommand(
+      'Step',
+      serverGroup,
+      policy as ITargetTrackingPolicy,
+    );
+    setCommand(baseCommand);
+  }, []);
+
+  const adjustmentBasis = policy.stepAdjustments?.length
+    ? policy.stepAdjustments[0].scalingAdjustment
+    : policy.scalingAdjustment;
+  const [action, setAction] = React.useState<Operator>(
+    command.adjustmentType === 'ExactCapacity' ? 'Set to' : adjustmentBasis > 0 ? 'Add' : 'Remove',
+  );
+  const adjustmentTypeView =
+    command.adjustmentType === 'ExactCapacity' || command.adjustmentType === 'ChangeInCapacity'
+      ? 'instances'
+      : 'percent of group';
+
+  const mode = !policy.id ? 'Create' : 'Edit';
+  const comparatorBound = command?.alarm?.comparisonOperator?.indexOf('Greater') === 0 ? 'max' : 'min';
+
+  const boundsChanged = (step: IStepPolicyDescription) => {
+    const source = comparatorBound === 'min' ? 'metricIntervalLowerBound' : 'metricIntervalUpperBound';
+    const target = source === 'metricIntervalLowerBound' ? 'metricIntervalUpperBound' : 'metricIntervalLowerBound';
+
+    const adjustments = step.stepAdjustments;
+    (adjustments || []).forEach((a, index) => {
+      if (adjustments.length > index + 1) {
+        adjustments[index + 1][target] = a[source];
+      }
+    });
+    // Remove the source boundary from the last step
+    delete adjustments[adjustments.length - 1][source];
+  };
+
+  const stepsChanged = (newSteps: IStepAdjustment[]) => {
+    const newCommand = cloneDeep(command);
+    newCommand.step.stepAdjustments = newSteps;
+    boundsChanged(newCommand.step);
+    setCommand(newCommand);
+  };
+
+  const adjustmentTypeChanged = (action: Operator, type: AdjustmentTypeView) => {
+    setAction(action);
+
+    const newType =
+      type !== 'instances' ? 'PercentChangeInCapacity' : action === 'Set to' ? 'ExactCapacity' : 'ChangeInCapacity';
+    setCommand({
+      ...command,
+      adjustmentType: newType,
+    });
+  };
+
+  return (
+    <TaskMonitorModal<IUpsertScalingPolicyCommand>
+      closeModal={closeModal}
+      dismissModal={dismissModal}
+      title={`${mode} scaling policy`}
+      application={app}
+      description={`${mode} scaling policy for ${serverGroup.name}`}
+      initialValues={command}
+      mapValuesToTask={() => {
+        const preppedValues = TitusScalingPolicyCommandBuilder.prepareCommandForUpsert(command, action === 'Remove');
+        return {
+          application: app,
+          job: [
+            {
+              type: preppedValues.type || 'upsertScalingPolicy',
+              ...preppedValues,
+            },
+          ],
+        };
+      }}
+      render={() => (
+        <div>
+          <h4 className="section-heading">Conditions</h4>
+          <div className="section-body">
+            <p>
+              <b>Note:</b> metrics must be sent to Amazon CloudWatch before they can be used in auto scaling. If you do
+              not see a metric below, click "Configure available metrics" in the server group details to set up
+              forwarding from Atlas to CloudWatch.
+            </p>
+            <AlarmConfigurer
+              alarm={command.alarm}
+              multipleAlarms={Boolean(policy?.alarms?.length > 1)}
+              serverGroup={(serverGroup as unknown) as IAmazonServerGroup}
+              stepAdjustments={command.step.stepAdjustments}
+              stepsChanged={stepsChanged}
+              updateAlarm={(alarm: IScalingPolicyAlarm) =>
+                setCommand({ ...command, alarm } as IUpsertScalingPolicyCommand)
+              }
+            />
+          </div>
+          <h4 className="section-heading">Actions</h4>
+          <div className="section-body">
+            {!command.alarm?.metricName && <h4 className="text-center">Select a metric</h4>}
+            {command.alarm?.metricName && (
+              <StepPolicyAction
+                adjustmentType={adjustmentTypeView}
+                adjustmentTypeChanged={adjustmentTypeChanged}
+                alarm={command.alarm}
+                isMin={comparatorBound === 'min'}
+                operator={action}
+                step={command.step}
+                stepsChanged={stepsChanged}
+              />
+            )}
+          </div>
+          <ScalingPolicyAdditionalSettings
+            command={command}
+            isInstanceType={adjustmentTypeView === 'instances'}
+            isNew={Boolean(!policy.policyARN)}
+            operator={action}
+            updateCommand={setCommand}
+          />
+        </div>
+      )}
+    />
+  );
+};

package/src/serverGroup/details/sections/ITitusServerGroupDetailsSectionProps.ts

@@ -0,0 +1,6 @@
+import type { IServerGroupDetailsSectionProps } from '@spinnaker/core';
+import type { ITitusServerGroup } from '../../../domain';
+
+export interface ITitusServerGroupDetailsSectionProps extends IServerGroupDetailsSectionProps {
+  serverGroup: ITitusServerGroup;
+}

package/src/serverGroup/details/serverGroupDetails.html

@@ -0,0 +1,191 @@
+<div class="details-panel" ng-class="{ disabled: serverGroup.isDisabled }">
+  <div class="header" ng-if="state.loading">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <h4 class="text-center">
+      <span us-spinner="{radius:20, width:6, length: 12}"></span>
+    </h4>
+  </div>
+
+  <div class="header" ng-if="!state.loading">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="header-text horizontal middle">
+      <cloud-provider-logo provider="serverGroup.type" height="'36px'" width="'36px'"></cloud-provider-logo>
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
+        {{serverGroup.name}}
+        <render-if-feature feature="entityTags">
+          <entity-notifications
+            entity="serverGroup"
+            application="ctrl.application"
+            placement="bottom"
+            h-offset-percent="90%"
+            entity-type="serverGroup"
+            page-location="details"
+            on-update="ctrl.application.serverGroups.refresh()"
+          ></entity-notifications>
+        </render-if-feature>
+      </h3>
+    </div>
+    <div>
+      <div class="actions" ng-class="{ insights: serverGroup.insightActions.length > 0 }">
+        <div class="dropdown" uib-dropdown dropdown-append-to-body>
+          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle>
+            Server Group Actions <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li><a href ng-if="ctrl.isRollbackEnabled()" ng-click="ctrl.rollbackServerGroup()">Rollback</a></li>
+            <li role="presentation" class="divider" ng-if="ctrl.isRollbackEnabled()"></li>
+            <li><a href ng-click="ctrl.resizeServerGroup()">Resize</a></li>
+            <li><a href ng-if="!serverGroup.isDisabled" ng-click="ctrl.disableServerGroup()">Disable</a></li>
+            <li><a href ng-if="serverGroup.isDisabled" ng-click="ctrl.enableServerGroup()">Enable</a></li>
+            <li><a href ng-click="ctrl.destroyServerGroup()">Destroy</a></li>
+            <li><a href ng-click="ctrl.cloneServerGroup()">Clone</a></li>
+            <add-entity-tag-links
+              component="serverGroup"
+              application="ctrl.application"
+              entity-type="serverGroup"
+              owner-options="ctrl.entityTagTargets"
+              on-update="ctrl.application.serverGroups.refresh"
+            ></add-entity-tag-links>
+          </ul>
+        </div>
+        <div class="dropdown" ng-if="serverGroup.insightActions.length > 0" uib-dropdown dropdown-append-to-body>
+          <button type="button" class="btn btn-sm btn-default dropdown-toggle" uib-dropdown-toggle>
+            Insight <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li
+              ng-repeat="action in serverGroup.insightActions"
+              analytics-on="click"
+              analytics-category="Insight Menu (Server Group)"
+              analytics-event="{{action.label}} clicked"
+              analytics-label="{{serverGroup.account}}/{{serverGroup.region}}/{{serverGroup.name}}"
+            >
+              <a target="_blank" href="{{action.url}}">{{action.label}}</a>
+            </li>
+          </ul>
+        </div>
+        <div class="clearfix"></div>
+      </div>
+    </div>
+  </div>
+  <div class="content" ng-if="!state.loading">
+    <div class="band band-info" ng-if="serverGroup.isDisabled">Job is Disabled</div>
+    <managed-resource-details-indicator
+      ng-if="!state.loading && serverGroup.isManaged"
+      resource-summary="serverGroup.managedResourceSummary"
+      application="ctrl.application"
+    ></managed-resource-details-indicator>
+    <server-group-running-tasks-details
+      server-group="serverGroup"
+      application="ctrl.application"
+    ></server-group-running-tasks-details>
+    <collapsible-section heading="Server Group Information" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Created</dt>
+        <dd>{{serverGroup.createdTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd>
+          <account-tag account="serverGroup.account" pad="right"></account-tag>
+          {{serverGroup.region}}
+        </dd>
+        <dt>Job Id</dt>
+        <dd><a href="{{titusUiEndpoint}}jobs/{{serverGroup.id}}" target="_blank">{{serverGroup.id}}</a></dd>
+        <entity-source metadata="serverGroup.entityTags.creationMetadata"></entity-source>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Capacity" expanded="true">
+      <titus-capacity-details-section
+        app="ctrl.application"
+        server-group="serverGroup"
+      ></titus-capacity-details-section>
+    </collapsible-section>
+    <collapsible-section heading="Health" expanded="true" ng-if="serverGroup.instanceCounts.total > 0">
+      <dl class="dl-horizontal dl-narrow" ng-if="serverGroup">
+        <dt>Tasks</dt>
+        <dd>
+          <health-counts container="serverGroup.instanceCounts" class="pull-left"></health-counts>
+        </dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Launch Configuration">
+      <titus-launch-config-section server-group="serverGroup"></titus-launch-config-section>
+    </collapsible-section>
+
+    <titus-security-groups
+      app="ctrl.application"
+      server-group="serverGroup"
+      class="collapsible-section"
+      style="display: block"
+    ></titus-security-groups>
+
+    <collapsible-section heading="Service Job Processes">
+      <titus-service-job-processes-section
+        app="ctrl.application"
+        server-group="serverGroup"
+      ></titus-service-job-processes-section>
+    </collapsible-section>
+
+    <collapsible-section heading="Scaling Policies">
+      <scaling-policy-summary
+        ng-repeat="policy in serverGroup.scalingPolicies"
+        policy="policy"
+        server-group="serverGroup"
+        application="ctrl.application"
+      ></scaling-policy-summary>
+      <titus-create-scaling-policy-button
+        server-group="serverGroup"
+        application="ctrl.application"
+      ></titus-create-scaling-policy-button>
+      <div ng-if="ctrl.awsAccountId">
+        <config-bin-link
+          application="ctrl.application"
+          aws-account-id="ctrl.awsAccountId"
+          cluster-name="serverGroup.cluster"
+          region="serverGroup.region"
+          env="ctrl.env"
+          cloud-provider="'titus'"
+        ></config-bin-link>
+      </div>
+      <titus-custom-scaling-policy
+        application="ctrl.application"
+        server-group="serverGroup"
+      ></titus-custom-scaling-policy>
+    </collapsible-section>
+    <titus-package-details-section build-info="buildInfo"></titus-package-details-section>
+    <collapsible-section heading="Job Disruption Budget">
+      <titus-disruption-budget-section
+        app="ctrl.application"
+        server-group="serverGroup"
+      ></titus-disruption-budget-section>
+    </collapsible-section>
+    <collapsible-section heading="Job Attributes">
+      <div ng-if="!serverGroup.labels">No job attributes associated with this server group</div>
+      <dl ng-if="labels">
+        <dt ng-repeat-start="(key, val) in labels">{{key}}</dt>
+        <dd ng-repeat-end>{{val}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Container Attributes">
+      <div ng-if="!serverGroup.containerAttributes">No container attributes associated with this server group</div>
+      <dl ng-if="serverGroup.containerAttributes">
+        <dt ng-repeat-start="(key, val) in serverGroup.containerAttributes">{{key}}</dt>
+        <dd ng-repeat-end>{{val}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Environment Variables">
+      <div ng-if="!serverGroup.env">No environment variables associated with this server group</div>
+      <dl ng-if="serverGroup.env">
+        <dt ng-repeat-start="(key, val) in serverGroup.env">{{key}}</dt>
+        <dd ng-repeat-end>{{val}}</dd>
+      </dl>
+    </collapsible-section>
+  </div>
+</div>