@spinnaker/ecs 0.0.0-main-2

package/src/serverGroup/configure/wizard/location/basicSettings.html

@@ -0,0 +1,137 @@
+<div class="container-fluid form-horizontal" ng-controller="ecsServerGroupBasicSettingsCtrl as basicSettingsCtrl">
+  <ng-form name="basicSettings">
+    <div class="form-group row" ng-if="command.regionIsDeprecated(command)">
+      <div class="col-md-12 error-message">
+        <div class="alert alert-danger">
+          You are deploying into a deprecated region within the {{ command.credentials }} account!
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Account</div>
+      <div class="col-md-7">
+        <account-select-field
+          read-only="command.viewState.readOnlyFields.credentials"
+          component="command"
+          field="credentials"
+          accounts="command.backingData.accounts"
+          provider="'ecs'"
+        ></account-select-field>
+      </div>
+    </div>
+    <region-select-field
+      read-only="command.viewState.readOnlyFields.region"
+      label-columns="3"
+      component="command"
+      field="region"
+      account="command.credentials"
+      provider="'ecs'"
+      regions="command.backingData.filtered.regions"
+    ></region-select-field>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">
+        ECS Cluster name <help-field key="ecs.serverGroup.clusterName"></help-field>
+      </div>
+      <div class="col-md-7">
+        <div class="form-control-static" ng-if="!command.backingData.filtered.ecsClusters.length">
+          No ECS clusters found in the selected account/region
+        </div>
+        <ui-select
+          data-test-id="ServerGroup.clusterName"
+          ng-model="command.ecsClusterName"
+          ng-if="command.backingData.filtered.ecsClusters.length"
+          class="form-control input-sm"
+          required
+          on-select="fieldChanged()"
+        >
+          <ui-select-match>{{$select.selected}}</ui-select-match>
+          <ui-select-choices
+            repeat="ecsClusterName in command.backingData.filtered.ecsClusters | filter: $select.search"
+          >
+            <span ng-bind-html="ecsClusterName"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">
+        Stack
+        <help-field key="ecs.serverGroup.stack"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input
+          data-test-id="ServerGroup.stack"
+          type="text"
+          class="form-control input-sm no-spel"
+          ng-pattern="basicSettingsCtrl.stackPattern"
+          name="stack"
+          ng-model="command.stack"
+        />
+      </div>
+    </div>
+    <div class="form-group row slide-in" ng-if="basicSettings.stack.$error.pattern">
+      <div class="col-sm-9 col-sm-offset-2 error-message">
+        <span>Only dot(.) and underscore(_) special characters are allowed in the Stack field.</span>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">
+        Detail
+        <help-field key="ecs.serverGroup.detail"></help-field>
+      </div>
+      <div class="col-md-7">
+        <input
+          data-test-id="ServerGroup.details"
+          type="text"
+          class="form-control input-sm no-spel"
+          ng-pattern="basicSettingsCtrl.detailPattern"
+          name="details"
+          ng-model="command.freeFormDetails"
+        />
+      </div>
+    </div>
+    <div class="form-group row slide-in" ng-if="basicSettings.details.$error.pattern">
+      <div class="col-sm-9 col-sm-offset-2 error-message">
+        <span>Only dot(.), underscore(_), and dash(-) special characters are allowed in the Detail field.</span>
+      </div>
+    </div>
+    <deployment-strategy-selector
+      ng-if="!command.viewState.disableStrategySelection && command.selectedProvider"
+      command="command"
+    ></deployment-strategy-selector>
+    <div class="form-group" ng-if="!command.viewState.hideClusterNamePreview">
+      <div class="col-md-12">
+        <div class="well-compact" ng-class="basicSettingsCtrl.showPreviewAsWarning() ? 'alert alert-warning' : 'well'">
+          <h5 class="text-center">
+            <p>Your server group will be in the cluster:</p>
+            <p>
+              <strong>
+                {{basicSettingsCtrl.getNamePreview()}}
+                <span ng-if="basicSettingsCtrl.createsNewCluster()"> (new cluster)</span>
+              </strong>
+            </p>
+            <div
+              class="text-left"
+              ng-if="!basicSettingsCtrl.createsNewCluster() && command.viewState.mode === 'create' && latestServerGroup"
+            >
+              <p>There is already a server group in this cluster. Do you want to clone it?</p>
+              <p>
+                Cloning copies the entire configuration from the selected server group, allowing you to modify whichever
+                fields (e.g. image) you need to change in the new server group.
+              </p>
+              <p>
+                To clone a server group, select "Clone" from the "Server Group Actions" menu in the details view of the
+                server group.
+              </p>
+              <p>
+                <a href ng-click="basicSettingsCtrl.navigateToLatestServerGroup()">
+                  Go to details for {{latestServerGroup.name}}
+                </a>
+              </p>
+            </div>
+          </h5>
+        </div>
+      </div>
+    </div>
+  </ng-form>
+</div>

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

@@ -0,0 +1,29 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      <b>Log driver (Optional)</b> <help-field key="ecs.logDriver"></help-field>
+    </div>
+    <div class="col-md-7">
+      <ui-select ng-model="$ctrl.command.logDriver" class="form-control input-sm" data-test-id="Logging.logDriver">
+        <ui-select-match>{{ $select.selected }}</ui-select-match>
+        <ui-select-choices
+          repeat="item in ['None', 'awslogs', 'fluentd', 'gelf', 'journald', 'json-file', 'logentries', 'splunk', 'sumologic', 'syslog'] | filter: $select.search"
+        >
+          <span ng-bind-html="item"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div class="form-group" ng-if="$ctrl.command.logDriver && $ctrl.command.logDriver !== 'None'">
+    <div class="sm-label-left">
+      <b>Logging options (optional)</b>
+      <help-field key="ecs.logOptions"></help-field>
+    </div>
+    <map-editor model="$ctrl.command.logOptions" allow-empty="true"></map-editor>
+  </div>
+
+  <div class="form-group" ng-if="!$ctrl.command.logDriver || $ctrl.command.logDriver == 'None'">
+    Logging options are not available for your log driver selection.
+  </div>
+</div>

package/src/serverGroup/configure/wizard/logging/logging.component.ts

@@ -0,0 +1,12 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const ECS_SERVER_GROUP_LOGGING = 'spinnaker.ecs.serverGroup.configure.wizard.logging.component';
+module(ECS_SERVER_GROUP_LOGGING, []).component('ecsServerGroupLogging', {
+  bindings: {
+    command: '=',
+    application: '=',
+  },
+  templateUrl: require('./logging.component.html'),
+});

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

@@ -0,0 +1,7 @@
+<div class="clearfix">
+  <div class="row">
+    <div class="col-md-12">
+      <ecs-server-group-logging command="command" application="application"></ecs-server-group-logging>
+    </div>
+  </div>
+</div>

package/src/serverGroup/configure/wizard/networking/Networking.tsx

@@ -0,0 +1,261 @@
+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 type { ISubnet } from '@spinnaker/core';
+import { HelpField, TetheredSelect, withErrorBoundary } from '@spinnaker/core';
+
+import type { IEcsServerGroupCommand } from '../../serverGroupConfiguration.service';
+
+export interface IEcsNetworkingProps {
+  command: IEcsServerGroupCommand;
+  notifyAngular: (key: string, value: any) => void;
+  configureCommand: (query: string) => PromiseLike<void>;
+}
+
+interface IEcsNetworkingState {
+  associatePublicIpAddress: boolean;
+  networkMode: string;
+  networkModesAvailable: string[];
+  securityGroupNames: string[];
+  securityGroupsAvailable: string[];
+  subnetTypes: string[];
+  subnetTypesAvailable: ISubnet[];
+}
+
+export class EcsNetworking extends React.Component<IEcsNetworkingProps, IEcsNetworkingState> {
+  constructor(props: IEcsNetworkingProps) {
+    super(props);
+    const cmd = this.props.command;
+
+    let defaultSubnetTypes: string[] = [];
+    if (cmd.subnetTypes && cmd.subnetTypes.length > 0) {
+      defaultSubnetTypes = cmd.subnetTypes;
+    }
+
+    if (cmd.subnetType && cmd.subnetType.length > 0) {
+      defaultSubnetTypes.push(cmd.subnetType);
+      cmd.subnetType = '';
+    }
+
+    cmd.subnetTypes = uniqWith(defaultSubnetTypes, isEqual);
+
+    this.state = {
+      associatePublicIpAddress: cmd.associatePublicIpAddress,
+      networkMode: cmd.networkMode,
+      networkModesAvailable: cmd.backingData && cmd.backingData.networkModes ? cmd.backingData.networkModes : [],
+      securityGroupNames: cmd.securityGroupNames,
+      securityGroupsAvailable:
+        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.securityGroupNames
+          ? cmd.backingData.filtered.securityGroupNames
+          : [],
+      subnetTypes: cmd.subnetTypes,
+      subnetTypesAvailable:
+        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.subnetTypes
+          ? cmd.backingData.filtered.subnetTypes
+          : [],
+    };
+  }
+
+  public componentDidMount() {
+    const cmd = this.props.command;
+
+    this.props.configureCommand('1').then(() => {
+      this.setState({
+        networkModesAvailable: cmd.backingData && cmd.backingData.networkModes ? cmd.backingData.networkModes : [],
+        securityGroupsAvailable:
+          cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.securityGroupNames
+            ? cmd.backingData.filtered.securityGroupNames
+            : [],
+        subnetTypesAvailable:
+          cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.subnetTypes
+            ? cmd.backingData.filtered.subnetTypes
+            : [],
+      });
+    });
+  }
+
+  private updateNetworkMode = (newNetworkMode: Option<string>) => {
+    const updatedNetworkMode = newNetworkMode.value;
+    const cmd = this.props.command;
+    this.props.notifyAngular('networkMode', updatedNetworkMode);
+    this.setState({
+      networkMode: updatedNetworkMode,
+      subnetTypesAvailable:
+        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.subnetTypes
+          ? cmd.backingData.filtered.subnetTypes
+          : [],
+    });
+  };
+
+  private updateSecurityGroups = (newSecurityGroups: Option<string>) => {
+    const updatedSecurityGroups = Array.isArray(newSecurityGroups)
+      ? newSecurityGroups.map((securityGroups) => securityGroups.value)
+      : [];
+    this.props.notifyAngular('securityGroupNames', updatedSecurityGroups);
+    this.setState({ securityGroupNames: updatedSecurityGroups });
+  };
+
+  private updateSubnetTypes = (newSubnetTypes: Option<string>) => {
+    const cmd = this.props.command;
+    const updatedSubnetTypes = Array.isArray(newSubnetTypes)
+      ? newSubnetTypes.map((subnetType) => subnetType.value)
+      : [];
+    this.props.notifyAngular('subnetTypes', updatedSubnetTypes);
+    cmd.subnetTypeChanged(cmd);
+    this.setState({
+      subnetTypes: updatedSubnetTypes,
+      securityGroupsAvailable:
+        cmd.backingData && cmd.backingData.filtered && cmd.backingData.filtered.securityGroupNames
+          ? cmd.backingData.filtered.securityGroupNames
+          : [],
+    });
+  };
+
+  private updateAssociatePublicIpAddress = (usePublicIp: boolean) => {
+    this.props.notifyAngular('associatePublicIpAddress', usePublicIp);
+    this.setState({ associatePublicIpAddress: usePublicIp });
+  };
+
+  public render(): React.ReactElement<EcsNetworking> {
+    const updateAssociatePublicIpAddress = this.updateAssociatePublicIpAddress;
+    const updateNetworkMode = this.updateNetworkMode;
+    const updateSecurityGroups = this.updateSecurityGroups;
+    const updateSubnetTypes = this.updateSubnetTypes;
+
+    const networkModesAvailable = this.state.networkModesAvailable.map(function (networkMode) {
+      return { label: `${networkMode}`, value: networkMode };
+    });
+
+    const securityGroupsAvailable = this.state.securityGroupsAvailable.map(function (securityGroup) {
+      return { label: `${securityGroup}`, value: securityGroup };
+    });
+
+    const subnetTypesAvailable = this.state.subnetTypesAvailable.map(function (subnetType) {
+      return { label: `${subnetType.purpose} (${subnetType.vpcId})`, value: subnetType.purpose };
+    });
+
+    const subnetTypeOptions = this.state.subnetTypesAvailable.length ? (
+      <TetheredSelect
+        multi={true}
+        options={subnetTypesAvailable}
+        value={this.state.subnetTypes}
+        onChange={(e: Option) => {
+          updateSubnetTypes(e as Option<string>);
+        }}
+      />
+    ) : (
+      <Alert color="warning">No account was selected, or no subnet types are available for this account</Alert>
+    );
+
+    const securityGroupsOptions = this.state.securityGroupsAvailable.length ? (
+      <TetheredSelect
+        multi={true}
+        options={securityGroupsAvailable}
+        value={this.state.securityGroupNames}
+        onChange={(e: Option) => {
+          updateSecurityGroups(e as Option<string>);
+        }}
+      />
+    ) : (
+      <Alert color="warning">No security groups found in the selected account/region</Alert>
+    );
+
+    const awsVpcOptions =
+      this.state.networkMode === 'awsvpc' ? (
+        <div className="form-group">
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>VPC Subnet</b>
+              <HelpField key="ecs.subnet" />
+            </div>
+            <div className="col-md-9" data-test-id="Networking.subnetType">
+              {subnetTypeOptions}
+            </div>
+          </div>
+
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>Security Groups</b>
+              <HelpField key="ecs.securityGroups" />
+            </div>
+            <div className="col-md-9" data-test-id="Networking.securityGroups">
+              {securityGroupsOptions}
+            </div>
+          </div>
+
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>Associate Public IP Address</b>
+              <HelpField key="ecs.publicip" />
+            </div>
+            <div className="col-md-1 radio">
+              <label>
+                <input
+                  data-test-id="Networking.associatePublicIpAddressTrue"
+                  type="radio"
+                  value="true"
+                  id="associatePublicIpAddressTrue"
+                  checked={this.state.associatePublicIpAddress === true}
+                  onChange={() => updateAssociatePublicIpAddress(true)}
+                />
+                Yes
+              </label>
+            </div>
+            <div className="col-md-1 radio">
+              <label>
+                <input
+                  data-test-id="Networking.associatePublicIpAddressFalse"
+                  type="radio"
+                  value="false"
+                  id="associatePublicIpAddressFalse"
+                  checked={this.state.associatePublicIpAddress === false}
+                  onChange={() => updateAssociatePublicIpAddress(false)}
+                />
+                No
+              </label>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="col-md-3 sm-label-right"></div>
+      );
+
+    return (
+      <div className="networking-fluid form-horizontal">
+        <div className="form-group">
+          <div className="form-group">
+            <div className="col-md-3 sm-label-right">
+              <b>Network Mode</b>
+              <HelpField id="ecs.networkMode" />
+            </div>
+            <div className="col-md-9" data-test-id="Networking.networkMode">
+              <TetheredSelect
+                placeholder="Select a network mode to use ..."
+                options={networkModesAvailable}
+                value={this.state.networkMode}
+                onChange={(e: Option) => {
+                  updateNetworkMode(e as Option<string>);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+        {awsVpcOptions}
+      </div>
+    );
+  }
+}
+
+export const ECS_NETWORKING_REACT = 'spinnaker.ecs.serverGroup.configure.wizard.networking.react';
+module(ECS_NETWORKING_REACT, []).component(
+  'ecsNetworkingReact',
+  react2angular(withErrorBoundary(EcsNetworking, 'ecsNetworkingReact'), [
+    'command',
+    'notifyAngular',
+    'configureCommand',
+  ]),
+);

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

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

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

@@ -0,0 +1,55 @@
+<form name="form" class="form-horizontal" novalidate>
+  <div ng-if="state.requiresTemplateSelection">
+    <ng-include src="pages.templateSelection"></ng-include>
+  </div>
+  <div ng-if="!state.loaded" style="height: 200px">
+    <h3 us-spinner="{radius:30, width:8, length: 16}"></h3>
+  </div>
+  <div ng-if="!state.requiresTemplateSelection">
+    <v2-modal-wizard ng-show="state.loaded" heading="{{title}}" task-monitor="taskMonitor" dismiss="$dismiss()">
+      <v2-wizard-page key="basicSettings" label="Basic Settings" mark-complete-on-view="false" done="true">
+        <ng-include src="pages.basicSettings"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="networking" label="Networking" done="true">
+        <ng-include src="pages.networking"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="taskDefinition" label="Task Definition" done="true">
+        <ng-include src="pages.taskDefinition"></ng-include>
+      </v2-wizard-page>
+      <div ng-if="!command.useTaskDefinitionArtifact">
+        <v2-wizard-page key="container" label="Container" done="true">
+          <ng-include src="pages.container"></ng-include>
+        </v2-wizard-page>
+      </div>
+      <v2-wizard-page key="horizontalScaling" label="Horizontal Scaling" done="true">
+        <ng-include src="pages.horizontalScaling"></ng-include>
+      </v2-wizard-page>
+      <div ng-if="!command.useTaskDefinitionArtifact">
+        <v2-wizard-page key="logging" label="Logging" done="true">
+          <ng-include src="pages.logging"></ng-include>
+        </v2-wizard-page>
+      </div>
+      <v2-wizard-page key="serviceDiscovery" label="Service Discovery" done="true">
+        <ng-include ng-if="!command.useTaskDefinitionArtifact" src="pages.serviceDiscovery"></ng-include>
+        <ng-include ng-if="command.useTaskDefinitionArtifact" src="pages.serviceDiscovery"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="advanced" label="Advanced Settings" mark-complete-on-view="false" done="true">
+        <ng-include src="pages.advancedSettings"></ng-include>
+      </v2-wizard-page>
+    </v2-modal-wizard>
+    <div class="modal-footer" ng-if="state.loaded">
+      <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+        Cancel
+      </button>
+      <submit-button
+        data-test-id="ServerGroupWizard.submitButton"
+        ng-if="ctrl.showSubmitButton()"
+        is-disabled="!ctrl.isValid() || taskMonitor.submitting"
+        label="command.viewState.submitButtonLabel"
+        submitting="taskMonitor.submitting"
+        on-click="ctrl.submit()"
+        is-new="true"
+      ></submit-button>
+    </div>
+  </div>
+</form>