@spinnaker/ecs 0.0.0-main-2

package/src/serverGroup/configure/wizard/container/Container.tsx

@@ -0,0 +1,347 @@
+import { module } from 'angular';
+import { isEqual, uniqWith } from 'lodash';
+import * as React from 'react';
+import { Alert } from 'react-bootstrap';
+import type { Option } from 'react-select';
+import { react2angular } from 'react2angular';
+
+import { HelpField, TetheredSelect, withErrorBoundary } from '@spinnaker/core';
+
+import type {
+  IEcsDockerImage,
+  IEcsServerGroupCommand,
+  IEcsTargetGroupMapping,
+} from '../../serverGroupConfiguration.service';
+
+export interface IContainerProps {
+  command: IEcsServerGroupCommand;
+  notifyAngular: (key: string, value: any) => void;
+  configureCommand: (query: string) => PromiseLike<void>;
+}
+
+interface IContainerState {
+  imageDescription: IEcsDockerImage;
+  computeUnits: number;
+  reservedMemory: number;
+  dockerImages: IEcsDockerImage[];
+  targetGroupsAvailable: string[];
+  targetGroupMappings: IEcsTargetGroupMapping[];
+}
+
+export class Container extends React.Component<IContainerProps, IContainerState> {
+  constructor(props: IContainerProps) {
+    super(props);
+    const cmd = this.props.command;
+    let defaultContainer = '';
+    if (cmd.containerMappings && cmd.containerMappings.length > 0) {
+      defaultContainer = cmd.containerMappings[0].containerName;
+    }
+
+    let defaultTargetGroup: IEcsTargetGroupMapping[] = [];
+    if (cmd.targetGroupMappings && cmd.targetGroupMappings.length > 0) {
+      defaultTargetGroup = cmd.targetGroupMappings;
+    }
+
+    if (cmd.targetGroup && cmd.targetGroup.length > 0) {
+      defaultTargetGroup.push({
+        containerName: cmd.loadBalancedContainer || defaultContainer,
+        targetGroup: cmd.targetGroup,
+        containerPort: cmd.containerPort,
+      });
+      cmd.targetGroup = '';
+      cmd.loadBalancedContainer = '';
+    }
+
+    cmd.targetGroupMappings = uniqWith(defaultTargetGroup, isEqual);
+    cmd.containerMappings = null;
+
+    this.state = {
+      imageDescription: cmd.imageDescription ? cmd.imageDescription : this.getEmptyImageDescription(),
+      computeUnits: cmd.computeUnits,
+      reservedMemory: cmd.reservedMemory,
+      dockerImages: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.images : [],
+      targetGroupMappings: cmd.targetGroupMappings,
+      targetGroupsAvailable: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.targetGroups : [],
+    };
+
+    this.state.targetGroupMappings.forEach((targetGroupMapping) => {
+      targetGroupMapping.containerName = '';
+    });
+  }
+
+  public componentDidMount() {
+    this.props.configureCommand('1').then(() => {
+      this.setState({
+        dockerImages: this.props.command.backingData.filtered.images,
+        targetGroupsAvailable: this.props.command.backingData.filtered.targetGroups,
+      });
+    });
+  }
+
+  // TODO: Separate docker image component used by both TaskDefinition and Container
+
+  private getIdToImageMap = (): Map<string, IEcsDockerImage> => {
+    const imageIdToDescription = new Map<string, IEcsDockerImage>();
+    this.props.command.backingData.filtered.images.forEach((e) => {
+      imageIdToDescription.set(e.imageId, e);
+    });
+
+    return imageIdToDescription;
+  };
+
+  private getEmptyImageDescription = (): IEcsDockerImage => {
+    return {
+      imageId: '',
+      message: '',
+      fromTrigger: false,
+      fromContext: false,
+      stageId: '',
+      imageLabelOrSha: '',
+      account: '',
+      registry: '',
+      repository: '',
+      tag: '',
+    };
+  };
+
+  private pushTargetGroupMapping = () => {
+    const targetMaps = this.state.targetGroupMappings;
+    targetMaps.push({ containerName: '', targetGroup: '', containerPort: 80 });
+    this.setState({ targetGroupMappings: targetMaps });
+  };
+
+  private updateContainerMappingImage = (newImage: Option<string>) => {
+    const imageMap = this.getIdToImageMap();
+    let newImageDescription = imageMap.get(newImage.value);
+    if (!newImageDescription) {
+      newImageDescription = this.getEmptyImageDescription();
+    }
+
+    this.props.notifyAngular('imageDescription', newImageDescription);
+    this.setState({ imageDescription: newImageDescription });
+  };
+
+  private updateComputeUnits = (newComputeUnits: number) => {
+    this.props.notifyAngular('computeUnits', newComputeUnits);
+    this.setState({ computeUnits: newComputeUnits });
+  };
+
+  private updateReservedMemory = (newReservedMemory: number) => {
+    this.props.notifyAngular('reservedMemory', newReservedMemory);
+    this.setState({ reservedMemory: newReservedMemory });
+  };
+
+  private updateTargetGroupMappingTargetGroup = (index: number, newTargetGroup: Option<string>) => {
+    const currentMappings = this.state.targetGroupMappings;
+    const targetMapping = currentMappings[index];
+    targetMapping.targetGroup = newTargetGroup.value;
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+    this.updateDirtyTargetGroups();
+  };
+
+  private updateTargetGroupMappingPort = (index: number, targetPort: number) => {
+    const currentMappings = this.state.targetGroupMappings;
+    const targetMapping = currentMappings[index];
+    targetMapping.containerPort = targetPort;
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
+  private removeTargetGroupMapping = (index: number) => {
+    const currentMappings = this.state.targetGroupMappings;
+    currentMappings.splice(index, 1);
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
+  private updateDirtyTargetGroups = () => {
+    this.props.command.viewState.dirty.targetGroups = [];
+  };
+
+  public render(): React.ReactElement<Container> {
+    const removeTargetGroupMapping = this.removeTargetGroupMapping;
+    const updateContainerMappingImage = this.updateContainerMappingImage;
+    const updateTargetGroupMappingTargetGroup = this.updateTargetGroupMappingTargetGroup;
+    const updateTargetGroupMappingPort = this.updateTargetGroupMappingPort;
+    const updateComputeUnits = this.updateComputeUnits;
+    const updateReservedMemory = this.updateReservedMemory;
+    const dirtyTagetGroups =
+      this.props.command.viewState.dirty && this.props.command.viewState.dirty.targetGroups
+        ? this.props.command.viewState.dirty.targetGroups
+        : [];
+
+    const dockerImageOptions = this.state.dockerImages.map(function (image) {
+      let msg = '';
+      if (image.fromTrigger || image.fromContext) {
+        msg = image.fromTrigger ? '(TRIGGER) ' : '(FIND IMAGE RESULT) ';
+      }
+      return { label: `${msg} (${image.imageId})`, value: image.imageId };
+    });
+
+    const dirtyTargetGroupList = dirtyTagetGroups
+      ? dirtyTagetGroups.map(function (targetGroup, index) {
+          return <li key={index}>{targetGroup}</li>;
+        })
+      : '';
+
+    const dirtyTargetGroupSection = (
+      <div className="alert alert-warning">
+        <p>
+          <i className="fa fa-exclamation-triangle"></i>
+          The following target groups could not be found in the selected account/region/VPC and were removed:
+        </p>
+        <ul>{dirtyTargetGroupList}</ul>
+        <br />
+        <p className="text-left">Please select the target group(s) from the dropdown to resolve this error.</p>
+      </div>
+    );
+
+    const newTargetGroupMapping = this.state.targetGroupsAvailable.length ? (
+      <button
+        className="btn btn-block btn-sm add-new"
+        data-test-id="ContainerInputs.targetGroupAdd"
+        onClick={this.pushTargetGroupMapping}
+      >
+        <span className="glyphicon glyphicon-plus-sign" />
+        Add New Target Group Mapping
+      </button>
+    ) : (
+      <div className="sm-label-left">
+        <Alert color="warning">No target groups found in the selected account/region/VPC</Alert>
+      </div>
+    );
+
+    const targetGroupsAvailable = this.state.targetGroupsAvailable.map(function (targetGroup) {
+      return { label: `${targetGroup}`, value: targetGroup };
+    });
+
+    const targetGroupInputs = this.state.targetGroupMappings.map(function (mapping, index) {
+      return (
+        <tr key={index}>
+          <td data-test-id="ContainerInputs.targetGroup">
+            <TetheredSelect
+              placeholder="Select a target group to use..."
+              options={targetGroupsAvailable}
+              value={mapping.targetGroup.toString()}
+              onChange={(e: Option) => updateTargetGroupMappingTargetGroup(index, e as Option<string>)}
+              clearable={false}
+            />
+          </td>
+          <td>
+            <input
+              data-test-id="ContainerInputs.targetGroupPort"
+              type="number"
+              className="form-control input-sm no-spel"
+              required={true}
+              value={mapping.containerPort.toString()}
+              onChange={(e) => updateTargetGroupMappingPort(index, e.target.valueAsNumber)}
+            />
+          </td>
+          <td>
+            <div className="form-control-static">
+              <a
+                className="btn-link sm-label"
+                data-test-id="ContainerInputs.targetGroupRemove"
+                onClick={() => removeTargetGroupMapping(index)}
+              >
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove</span>
+              </a>
+            </div>
+          </td>
+        </tr>
+      );
+    });
+
+    return (
+      <div className="container-fluid form-horizontal">
+        {dirtyTagetGroups.length > 0 ? <div>{dirtyTargetGroupSection}</div> : ''}
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Container Image</b>
+            <HelpField id="ecs.containerMappingImage" />
+          </div>
+          <div className="col-md-9" data-test-id="ContainerInputs.containerImage">
+            <TetheredSelect
+              placeholder="Select an image to use..."
+              options={dockerImageOptions}
+              value={this.state.imageDescription.imageId}
+              onChange={(e: Option) => {
+                updateContainerMappingImage(e as Option<string>);
+              }}
+              clearable={false}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Compute Units</b>
+            <HelpField id="ecs.capacity.reserved.computeUnits" />
+          </div>
+          <div className="col-md-9" style={{ width: '100px' }}>
+            <input
+              data-test-id="ContainerInputs.computeUnits"
+              type="number"
+              className="form-control input-sm no-spel"
+              required={false}
+              value={this.state.computeUnits}
+              onChange={(e) => updateComputeUnits(e.target.valueAsNumber)}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            <b>Reserved Memory</b>
+            <HelpField id="ecs.capacity.reserved.memory" />
+          </div>
+          <div className="col-md-9" style={{ width: '100px' }}>
+            <input
+              data-test-id="ContainerInputs.reservedMemory"
+              type="number"
+              className="form-control input-sm no-spel"
+              required={false}
+              value={this.state.reservedMemory}
+              onChange={(e) => updateReservedMemory(e.target.valueAsNumber)}
+            />
+          </div>
+        </div>
+        <div className="form-group">
+          <div className="sm-label-left">
+            <b>Target Group Mappings</b>
+            <HelpField id="ecs.targetGroupMappings" />
+          </div>
+          <form name="ecsContainerTargetGroupMappings">
+            <table className="table table-condensed packed tags">
+              <thead>
+                <tr key="header">
+                  <th style={{ width: '80%' }}>
+                    Target group
+                    <HelpField id="ecs.loadBalancer.targetGroup" />
+                  </th>
+                  <th style={{ width: '20%' }}>
+                    Target port
+                    <HelpField id="ecs.loadbalancing.targetPort" />
+                  </th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>{targetGroupInputs}</tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={4}>{newTargetGroupMapping}</td>
+                </tr>
+              </tfoot>
+            </table>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const CONTAINER_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.container.react';
+module(CONTAINER_REACT, []).component(
+  'containerReact',
+  react2angular(withErrorBoundary(Container, 'containerReact'), ['command', 'notifyAngular', 'configureCommand']),
+);

package/src/serverGroup/configure/wizard/container/container.html

@@ -0,0 +1,9 @@
+<div class="clearfix">
+  <div class="col-md-12">
+    <container-react
+      command="command"
+      notify-angular="notifyAngular"
+      configure-command="configureCommand"
+    ></container-react>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/horizontalScaling/horizontalScaling.component.html

@@ -0,0 +1,118 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-4 sm-label-right">
+      <b>Compute options</b>
+      <help-field key="ecs.computeOptions"></help-field>
+    </div>
+    <div class="col-md-2 radio">
+      <label>
+        <input
+          data-test-id="ServerGroup.computeOptionsLaunchType"
+          type="radio"
+          ng-model="$ctrl.capacityProviderState.useCapacityProviders"
+          ng-value="false"
+          ng-click="$ctrl.capacityProviderState.updateComputeOption('launchType')"
+          id="computeOptionsLaunchType"
+        />
+        Launch type
+      </label>
+    </div>
+    <div class="col-md-1 radio">
+      <label>
+        <input
+          data-test-id="ServerGroup.computeOptionsCapacityProviders"
+          type="radio"
+          ng-model="$ctrl.capacityProviderState.useCapacityProviders"
+          ng-value="true"
+          ng-click="$ctrl.capacityProviderState.updateComputeOption('capacityProviders')"
+          id="computeOptionsCapacityProviders"
+        />
+        Capacity Providers
+      </label>
+    </div>
+  </div>
+
+  <div class="form-group" ng-if="$ctrl.capacityProviderState.useCapacityProviders">
+    <ecs-capacity-provider-react
+      command="$ctrl.command"
+      notify-angular="$ctrl.notifyAngular"
+      configure-command="$ctrl.configureCommand"
+    ></ecs-capacity-provider-react>
+  </div>
+
+  <div class="form-group" ng-if="!$ctrl.capacityProviderState.useCapacityProviders" style="padding-top: 10px">
+    <div class="col-md-5 sm-label-right">
+      Launch Type
+      <help-field key="ecs.launchtype"></help-field>
+    </div>
+    <div class="col-md-3" data-test-id="ServerGroup.launchType">
+      <ui-select ng-model="$ctrl.command.launchType" class="form-control input-sm">
+        <ui-select-match placeholder="Select...">{{ $select.selected }}</ui-select-match>
+        <ui-select-choices repeat="launchType in $ctrl.command.backingData.launchTypes | filter: $select.search">
+          <span ng-bind-html="launchType | highlight: $select.search"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <hr />
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Desired capacity
+      <help-field key="ecs.capacity.desired"></help-field>
+    </div>
+    <div class="col-md-2">
+      <input
+        type="number"
+        class="form-control input-sm no-spel"
+        name="capacity"
+        ng-model="$ctrl.command.capacity.desired"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Minimum
+      <help-field key="ecs.capacity.minimum"></help-field>
+    </div>
+    <div class="col-md-2">
+      <input type="number" class="form-control input-sm no-spel" name="min" ng-model="$ctrl.command.capacity.min" />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Maximum
+      <help-field key="ecs.capacity.maximum"></help-field>
+    </div>
+    <div class="col-md-2">
+      <input type="number" class="form-control input-sm no-spel" name="max" ng-model="$ctrl.command.capacity.max" />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-12 checkbox">
+      <label>
+        <input
+          type="checkbox"
+          ng-model="$ctrl.command.useSourceCapacity"
+          ng-change="$ctrl.command.preferSourceCapacity=$ctrl.command.useSourceCapacity"
+        />
+        <b>If available, use the previous server group's capacity</b>
+      </label>
+      <help-field key="ecs.capacity.overwrite"></help-field>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-12 checkbox">
+      <label>
+        <input type="checkbox" ng-model="$ctrl.command.copySourceScalingPoliciesAndActions" />
+        <b>If available, copy the previous server group's autoscaling policies</b>
+      </label>
+      <help-field key="ecs.capacity.copySourceScalingPoliciesAndActions"></help-field>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/horizontalScaling/horizontalScaling.component.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT =
+  'spinnaker.ecs.serverGroup.configure.wizard.horizontalScaling.component';
+export const name = ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT; // for backwards compatibility
+module(ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT, []).component(
+  'ecsServerGroupHorizontalScaling',
+  {
+    bindings: {
+      command: '=',
+      application: '=',
+      capacityProviderState: '=',
+      notifyAngular: '=',
+      configureCommand: '=',
+    },
+    templateUrl: require('./horizontalScaling.component.html'),
+  },
+);

package/src/serverGroup/configure/wizard/horizontalScaling/horizontalScaling.html

@@ -0,0 +1,13 @@
+<div class="clearfix">
+  <div class="row">
+    <div class="col-md-12">
+      <ecs-server-group-horizontal-scaling
+        command="command"
+        application="application"
+        capacity-provider-state="capacityProviderState"
+        notify-angular="notifyAngular"
+        configure-command="configureCommand"
+      ></ecs-server-group-horizontal-scaling>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/location/ServerGroupBasicSettings.controller.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import * as angular from 'angular';
+import ANGULAR_UI_BOOTSTRAP from 'angular-ui-bootstrap';
+
+import { ModalWizard } from '@spinnaker/core';
+
+export const ECS_SERVERGROUP_CONFIGURE_WIZARD_LOCATION_SERVERGROUPBASICSETTINGS_CONTROLLER =
+  'spinnaker.ecs.serverGroup.configure.basicSettings';
+export const name = ECS_SERVERGROUP_CONFIGURE_WIZARD_LOCATION_SERVERGROUPBASICSETTINGS_CONTROLLER; // for backwards compatibility
+angular
+  .module(ECS_SERVERGROUP_CONFIGURE_WIZARD_LOCATION_SERVERGROUPBASICSETTINGS_CONTROLLER, [
+    UIROUTER_ANGULARJS,
+    ANGULAR_UI_BOOTSTRAP,
+  ])
+  .controller('ecsServerGroupBasicSettingsCtrl', [
+    '$scope',
+    '$controller',
+    '$uibModalStack',
+    '$state',
+    function ($scope, $controller, $uibModalStack, $state) {
+      angular.extend(
+        this,
+        $controller('BasicSettingsMixin', {
+          $scope: $scope,
+          $uibModalStack: $uibModalStack,
+          $state: $state,
+        }),
+      );
+
+      $scope.$watch('form.$valid', function (newVal) {
+        if (newVal) {
+          ModalWizard.markClean('basicSettings');
+          ModalWizard.markComplete('basicSettings');
+        } else {
+          ModalWizard.markIncomplete('basicSettings');
+        }
+      });
+    },
+  ]);