@spinnaker/amazon 0.0.0-main-2

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

@@ -0,0 +1,139 @@
+<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-md-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>
+            <span class="small" ng-if="previousServerGroup.buildNumber">
+              <strong>Build</strong> #{{ previousServerGroup.buildNumber }}
+            </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="'Amazon'"
+            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 ng-if="command.rollbackContext.delayBeforeDisableSeconds > 0">
+              Wait {{ command.rollbackContext.delayBeforeDisableSeconds }} seconds
+            </li>
+            <li>Disable <em>{{ serverGroup.name }}</em></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 {{ serverGroup.name }}</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/scalingPolicy/CreateScalingPolicyButton.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import type { Application } from '@spinnaker/core';
+import { ReactModal } from '@spinnaker/core';
+import type { IAmazonServerGroupView } from '../../../domain';
+import { AwsReactInjector } from '../../../reactShims';
+
+import type { IUpsertTargetTrackingModalProps } from './targetTracking/UpsertTargetTrackingModal';
+import { UpsertTargetTrackingModal } from './targetTracking/UpsertTargetTrackingModal';
+import { PolicyTypeSelectionModal } from './upsert/PolicyTypeSelectionModal';
+import type { IUpsertScalingPolicyModalProps } from './upsert/UpsertScalingPolicyModal';
+import { UpsertScalingPolicyModal } from './upsert/UpsertScalingPolicyModal';
+
+export interface ICreateScalingPolicyButtonProps {
+  application: Application;
+  serverGroup: IAmazonServerGroupView;
+}
+
+export interface ICreateScalingPolicyButtonState {
+  showSelection: boolean;
+  showModal: boolean;
+  typeSelection: string;
+}
+
+export class CreateScalingPolicyButton extends React.Component<
+  ICreateScalingPolicyButtonProps,
+  ICreateScalingPolicyButtonState
+> {
+  constructor(props: ICreateScalingPolicyButtonProps) {
+    super(props);
+    this.state = {
+      showSelection: false,
+      showModal: false,
+      typeSelection: null,
+    };
+  }
+
+  public handleClick = (): void => {
+    this.setState({ showSelection: true });
+  };
+
+  public createStepPolicy(): void {
+    const { serverGroup, application } = this.props;
+
+    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;
+
+    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 => {
+    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>
+        <a className="clickable" onClick={this.handleClick}>
+          Create new scaling policy
+        </a>
+        {this.state.showSelection && (
+          <PolicyTypeSelectionModal
+            warnOnMinMaxCapacity={min === max}
+            typeSelectedCallback={this.typeSelected}
+            showCallback={this.showModalCallback}
+          />
+        )}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import type { Application, IServerGroup } from '@spinnaker/core';
+
+import { StepPolicySummary } from './StepPolicySummary';
+import type { IScalingPolicyView, ITargetTrackingPolicy } from '../../../domain';
+import { TargetTrackingSummary } from './targetTracking/TargetTrackingSummary';
+
+export interface IScalingPolicySummaryProps {
+  application: Application;
+  policy: IScalingPolicyView;
+  serverGroup: IServerGroup;
+}
+
+export const ScalingPolicySummary = ({ application, policy, serverGroup }: IScalingPolicySummaryProps) => {
+  const scalingPolicyType = policy.policyType
+    ? policy.policyType
+    : policy.targetTrackingConfiguration
+    ? 'TargetTrackingScaling'
+    : 'StepScaling';
+
+  if (scalingPolicyType === 'TargetTrackingScaling') {
+    return (
+      <TargetTrackingSummary
+        application={application}
+        policy={policy as ITargetTrackingPolicy}
+        serverGroup={serverGroup}
+      />
+    );
+  }
+
+  return <StepPolicySummary application={application} policy={policy} serverGroup={serverGroup} />;
+};

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

@@ -0,0 +1,102 @@
+import type { Application, IJob, IMetricAlarmDimension, IServerGroup, ITask } from '@spinnaker/core';
+import { TaskExecutor } from '@spinnaker/core';
+import type {
+  AlarmComparisonOperator,
+  AlarmStatisticType,
+  IScalingPolicy,
+  IStepAdjustment,
+  ITargetTrackingConfiguration,
+  MetricAggregationType,
+  ScalingPolicyAdjustmentType,
+  StandardUnitType,
+} from '../../../domain';
+
+export interface IUpsertScalingPolicyCommand extends IJob {
+  type?: string; // Orca/Clouddriver operation type
+  cloudProvider: string;
+  credentials: string;
+  region: string;
+  serverGroupName: string;
+  adjustmentType: ScalingPolicyAdjustmentType;
+  name?: string;
+  minAdjustmentMagnitude?: number;
+  alarm?: IUpsertAlarmDescription;
+  simple?: ISimplePolicyDescription;
+  step?: IStepPolicyDescription;
+}
+
+export interface ITargetTrackingPolicyCommand extends IUpsertScalingPolicyCommand {
+  estimatedInstanceWarmup: number;
+  targetTrackingConfiguration: ITargetTrackingConfiguration;
+}
+
+export interface ISimplePolicyDescription {
+  cooldown: number;
+  scalingAdjustment: number;
+}
+
+export interface IStepPolicyDescription {
+  cooldown?: number;
+  stepAdjustments: IStepAdjustment[];
+  estimatedInstanceWarmup: number;
+  metricAggregationType: MetricAggregationType;
+}
+
+export interface IConfigurableMetric {
+  namespace: string;
+  metricName: string;
+  dimensions: IMetricAlarmDimension[];
+}
+
+export interface IUpsertAlarmDescription extends IConfigurableMetric {
+  name: string;
+  asgName: string;
+  region: string;
+  alarmDescription: string;
+  comparisonOperator: AlarmComparisonOperator;
+  evaluationPeriods: number;
+  period: number;
+  threshold: number;
+  statistic: AlarmStatisticType;
+  unit: StandardUnitType;
+  disableEditingDimensions?: boolean;
+  actionsEnabled?: boolean;
+  alarmActionArns: string[];
+  insufficientDataActionArns: string[];
+  okActionArns: string[];
+}
+
+export class ScalingPolicyWriter {
+  public static upsertScalingPolicy(
+    application: Application,
+    command: IUpsertScalingPolicyCommand,
+  ): PromiseLike<ITask> {
+    command.type = command.type || 'upsertScalingPolicy';
+    return TaskExecutor.executeTask({
+      application,
+      description: 'Upsert scaling policy ' + (command.name || command.serverGroupName),
+      job: [command],
+    });
+  }
+
+  public static deleteScalingPolicy(
+    application: Application,
+    serverGroup: IServerGroup,
+    scalingPolicy: IScalingPolicy,
+  ): PromiseLike<ITask> {
+    return TaskExecutor.executeTask({
+      application,
+      description: 'Delete scaling policy ' + scalingPolicy.policyName,
+      job: [
+        {
+          type: 'deleteScalingPolicy',
+          cloudProvider: 'aws',
+          credentials: serverGroup.account,
+          region: serverGroup.region,
+          policyName: scalingPolicy.policyName,
+          serverGroupName: serverGroup.name,
+        },
+      ],
+    });
+  }
+}

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

@@ -0,0 +1,10 @@
+.StepPolicySummary {
+  .HoverablePopover {
+    text-decoration: none;
+  }
+
+  .actions {
+    margin: 0 0 15px 0;
+    border-bottom: 1px solid var(--color-alto);
+  }
+}

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

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import {
+  CloudProviderRegistry,
+  ConfirmationModalService,
+  HoverablePopover,
+  ReactModal,
+  robotToHuman,
+  TaskExecutor,
+} from '@spinnaker/core';
+import type { Application, IServerGroup } from '@spinnaker/core';
+
+import type { IAmazonServerGroup, IScalingPolicyView } from '../../../domain';
+import { AlarmSummary } from './popover/AlarmSummary';
+import { StepPolicyPopoverContent } from './popover/StepPolicyPopoverContent';
+
+import './StepPolicySummary.less';
+
+export interface IStepPolicySummaryProps {
+  application: Application;
+  policy: IScalingPolicyView;
+  serverGroup: IServerGroup;
+}
+
+interface IDeletePolicyJob {
+  type: string;
+  cloudProvider: string;
+  credentials: string;
+  region: string;
+  policyName?: string;
+  scalingPolicyID?: string;
+  serverGroupName: string;
+}
+
+export const StepPolicySummary = ({ application, policy, serverGroup }: IStepPolicySummaryProps) => {
+  const provider = serverGroup.type || serverGroup.cloudProvider || 'aws';
+  const providerConfig = CloudProviderRegistry.getValue(provider, 'serverGroup');
+  const policyTitle = provider === 'aws' ? policy.policyName : policy.id;
+
+  const UpsertModalComponent = providerConfig.UpsertStepPolicyModal;
+
+  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],
+        }),
+    });
+  };
+
+  return (
+    <div className="StepPolicySummary">
+      <div>
+        {!Boolean(policy.alarms?.length) && <div>No alarms configured for this policy - it's safe to delete.</div>}
+        {Boolean(policy.alarms?.length) &&
+          policy.alarms.map((a) => (
+            <div key={`step-summary-${policy.policyName}`}>
+              <HoverablePopover
+                Component={() => (
+                  <StepPolicyPopoverContent policy={policy} serverGroup={serverGroup as IAmazonServerGroup} />
+                )}
+                placement="left"
+                title={policy.policyName}
+              >
+                <div>
+                  <div className="label label-default">{robotToHuman(policy.policyType).toUpperCase()}</div>
+                  <AlarmSummary alarm={a} />
+                </div>
+              </HoverablePopover>
+              <div className="actions">
+                <button className="btn btn-xs btn-link" onClick={editPolicy}>
+                  <span className="glyphicon glyphicon-cog"></span>
+                  <span className="sr-only">Edit policy</span>
+                </button>
+                <button className="btn btn-xs btn-link" onClick={deletePolicy}>
+                  <span className="glyphicon glyphicon-trash"></span>
+                  <span className="sr-only">Delete policy</span>
+                </button>
+              </div>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,117 @@
+import type {
+  CartesianScaleOptions,
+  ChartConfiguration,
+  ChartDataset,
+  LinearScaleOptions,
+  TimeScaleOptions,
+  TooltipItem,
+} from 'chart.js';
+import {
+  Chart,
+  Filler,
+  Legend,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import 'chartjs-adapter-luxon';
+import * as React from 'react';
+
+Chart.register(LineController, LineElement, PointElement, LinearScale, Title, TimeScale, Tooltip, Legend, Filler);
+
+interface IDateSeriesTuple {
+  x: Date;
+  y: number;
+}
+
+export type IDateLine = ChartDataset<'line', IDateSeriesTuple[]>;
+
+export interface IDateLineChartProps {
+  lines: IDateLine[];
+  style?: object;
+  className?: string;
+}
+
+function makeChart(canvasElement: HTMLCanvasElement) {
+  const xScaleOptions: TimeScaleOptions & any = {
+    type: 'time',
+    display: true,
+    scaleLabel: {
+      labelString: 'Date',
+    },
+    ticks: {
+      major: { enabled: true },
+    },
+  };
+
+  const yScaleOptions: Partial<CartesianScaleOptions & LinearScaleOptions> = {
+    min: 0,
+    stacked: true,
+  };
+
+  const chartConfig: ChartConfiguration<'line'> = {
+    type: 'line',
+    data: {
+      labels: [],
+      datasets: [{ data: [] }],
+    },
+    options: {
+      plugins: {
+        tooltip: {
+          mode: 'index',
+          itemSort: (a: TooltipItem<any>, b: TooltipItem<any>) => {
+            const labels = a.chart.data.datasets.map((d) => d.label);
+            const labelA = (a.dataset as { label?: string }).label ?? labels[0];
+            const labelB = (b.dataset as { label?: string }).label ?? labels[0];
+            return labels.indexOf(labelB) - labels.indexOf(labelA);
+          },
+        },
+      },
+      hover: {
+        mode: 'index',
+      },
+      elements: {
+        point: {
+          hitRadius: 12,
+          radius: 1,
+          hoverRadius: 5,
+        },
+      },
+      scales: {
+        x: xScaleOptions,
+        y: yScaleOptions,
+      },
+    },
+  };
+
+  return new Chart(canvasElement, chartConfig);
+}
+
+export function DateLineChart(props: IDateLineChartProps) {
+  const chartContainerRef = React.useRef<HTMLCanvasElement>();
+  const chartRef = React.useRef<Chart<'line', Array<{ x: Date; y: number }>>>();
+  const { lines, className = '', style = {} } = props;
+
+  React.useEffect(() => {
+    if (chartContainerRef) {
+      chartRef.current = makeChart(chartContainerRef.current) as any;
+      return () => chartRef.current?.destroy();
+    }
+    return null;
+  }, [chartContainerRef.current]);
+
+  React.useEffect(() => {
+    const chart = chartRef.current;
+    if (chart && lines) {
+      chart.options.animation = false;
+      chart.data.datasets = lines;
+      chart.update();
+    }
+  }, [chartRef.current, lines]);
+
+  return <canvas ref={chartContainerRef} {...style} className={className} />;
+}