@spinnaker/ecs 0.0.0-main-2

package/src/serverGroup/configure/wizard/CloneServerGroup.ecs.controller.js

@@ -0,0 +1,259 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import {
+  ModalWizard,
+  OVERRIDE_REGISTRY,
+  SERVER_GROUP_COMMAND_REGISTRY_PROVIDER,
+  SERVER_GROUP_WRITER,
+  STAGE_ARTIFACT_SELECTOR_COMPONENT_REACT,
+  TaskMonitor,
+} from '@spinnaker/core';
+
+import { ECS_CLUSTER_READ_SERVICE } from '../../../ecsCluster/ecsCluster.read.service';
+import { IAM_ROLE_READ_SERVICE } from '../../../iamRoles/iamRole.read.service';
+import { ECS_SECRET_READ_SERVICE } from '../../../secrets/secret.read.service';
+import { ECS_SERVER_GROUP_CONFIGURATION_SERVICE } from '../serverGroupConfiguration.service';
+
+export const ECS_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_ECS_CONTROLLER =
+  'spinnaker.ecs.cloneServerGroup.controller';
+export const name = ECS_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_ECS_CONTROLLER; // for backwards compatibility
+module(ECS_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_ECS_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  ECS_SERVER_GROUP_CONFIGURATION_SERVICE,
+  SERVER_GROUP_WRITER,
+  OVERRIDE_REGISTRY,
+  SERVER_GROUP_COMMAND_REGISTRY_PROVIDER,
+  IAM_ROLE_READ_SERVICE,
+  ECS_CLUSTER_READ_SERVICE,
+  ECS_SECRET_READ_SERVICE,
+  STAGE_ARTIFACT_SELECTOR_COMPONENT_REACT,
+]).controller('ecsCloneServerGroupCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  '$q',
+  '$state',
+  'serverGroupWriter',
+  'overrideRegistry',
+  'ecsServerGroupConfigurationService',
+  'serverGroupCommandRegistry',
+  'serverGroupCommand',
+  'iamRoleReader',
+  'ecsClusterReader',
+  'secretReader',
+  'application',
+  'title',
+  function (
+    $scope,
+    $uibModalInstance,
+    $q,
+    $state,
+    serverGroupWriter,
+    overrideRegistry,
+    ecsServerGroupConfigurationService,
+    serverGroupCommandRegistry,
+    serverGroupCommand,
+    iamRoleReader,
+    ecsClusterReader,
+    secretReader,
+    application,
+    title,
+  ) {
+    $scope.pages = {
+      templateSelection: overrideRegistry.getTemplate(
+        'ecs.serverGroup.templateSelection',
+        require('./templateSelection/templateSelection.html'),
+      ),
+      basicSettings: overrideRegistry.getTemplate(
+        'ecs.serverGroup.basicSettings',
+        require('./location/basicSettings.html'),
+      ),
+      container: overrideRegistry.getTemplate('ecs.serverGroup.container', require('./container/container.html')),
+      horizontalScaling: overrideRegistry.getTemplate(
+        'ecs.serverGroup.horizontalScaling',
+        require('./horizontalScaling/horizontalScaling.html'),
+      ),
+      networking: overrideRegistry.getTemplate('ecs.serverGroup.networking', require('./networking/networking.html')),
+      logging: overrideRegistry.getTemplate('ecs.serverGroup.logging', require('./logging/logging.html')),
+      serviceDiscovery: overrideRegistry.getTemplate(
+        'ecs.serverGroup.serviceDiscovery',
+        require('./serviceDiscovery/serviceDiscovery.html'),
+      ),
+      advancedSettings: overrideRegistry.getTemplate(
+        'ecs.serverGroup.advancedSettings',
+        require('./advancedSettings/advancedSettings.html'),
+      ),
+      taskDefinition: overrideRegistry.getTemplate(
+        'ecs.taskDefinition',
+        require('./taskDefinition/taskDefinition.html'),
+      ),
+    };
+
+    $scope.title = title;
+
+    $scope.applicationName = application.name;
+    $scope.application = application;
+
+    $scope.command = serverGroupCommand;
+
+    $scope.state = {
+      loaded: false,
+      requiresTemplateSelection: !!serverGroupCommand.viewState.requiresTemplateSelection,
+    };
+
+    this.templateSelectionText = {
+      copied: ['account, region, ecs cluster, stack', 'capacity'],
+      notCopied: ['launch type, target group, network mode'],
+    };
+    if (!$scope.command.viewState.disableStrategySelection) {
+      this.templateSelectionText.notCopied.push(
+        'the deployment strategy (if any) used to deploy the most recent server group',
+      );
+    }
+
+    function onApplicationRefresh() {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      const cloneStage = $scope.taskMonitor.task.execution.stages.find((stage) => stage.type === 'cloneServerGroup');
+      if (cloneStage && cloneStage.context['deploy.server.groups']) {
+        const newServerGroupName = cloneStage.context['deploy.server.groups'][$scope.command.region];
+        if (newServerGroupName) {
+          const newStateParams = {
+            serverGroup: newServerGroupName,
+            accountId: $scope.command.credentials,
+            region: $scope.command.region,
+            provider: 'ecs',
+          };
+          let transitionTo = '^.^.^.clusters.serverGroup';
+          if ($state.includes('**.clusters.serverGroup')) {
+            // clone via details, all view
+            transitionTo = '^.serverGroup';
+          }
+          if ($state.includes('**.clusters.cluster.serverGroup')) {
+            // clone or create with details open
+            transitionTo = '^.^.serverGroup';
+          }
+          if ($state.includes('**.clusters')) {
+            // create new, no details open
+            transitionTo = '.serverGroup';
+          }
+          $state.go(transitionTo, newStateParams);
+        }
+      }
+    }
+
+    function onTaskComplete() {
+      application.serverGroups.refresh();
+      application.serverGroups.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: 'Creating your server group',
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    function configureCommand() {
+      ecsServerGroupConfigurationService.configureCommand($scope.command).then(function () {
+        $scope.state.loaded = true;
+        initializeCommand();
+        initializeSelectOptions();
+        initializeWatches();
+      });
+    }
+
+    function initializeWatches() {
+      $scope.$watch('command.subnetType', createResultProcessor($scope.command.subnetTypeChanged));
+      $scope.$watch('command.credentials', createResultProcessor($scope.command.credentialsChanged));
+      $scope.$watch('command.region', createResultProcessor($scope.command.regionChanged));
+      $scope.$watch(
+        'command.placementStrategyName',
+        createResultProcessor($scope.command.placementStrategyNameChanged),
+      );
+      $scope.$watch('command.stack', () => $scope.command.clusterChanged($scope.command));
+      $scope.$watch('command.freeFormDetails', () => $scope.command.clusterChanged($scope.command));
+    }
+
+    function initializeSelectOptions() {
+      processCommandUpdateResult($scope.command.credentialsChanged(serverGroupCommand));
+      processCommandUpdateResult($scope.command.regionChanged(serverGroupCommand));
+    }
+
+    function createResultProcessor(method) {
+      return function () {
+        processCommandUpdateResult(method(serverGroupCommand));
+      };
+    }
+
+    function processCommandUpdateResult() {
+      // TODO(Bruno Carrier) - Implement marking sections either dirty or complete
+    }
+
+    function initializeCommand() {}
+
+    this.isValid = function () {
+      return true; // TODO(Bruno Carrier) - Implement validation of the form
+    };
+
+    this.showSubmitButton = function () {
+      return ModalWizard.allPagesVisited();
+    };
+
+    this.submit = function () {
+      if ($scope.command.viewState.mode === 'editPipeline' || $scope.command.viewState.mode === 'createPipeline') {
+        return $uibModalInstance.close($scope.command);
+      }
+      $scope.taskMonitor.submit(function () {
+        return serverGroupWriter.cloneServerGroup($scope.command, application);
+      });
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+
+    if (!$scope.state.requiresTemplateSelection) {
+      configureCommand();
+    } else {
+      $scope.state.loaded = true;
+    }
+
+    this.templateSelected = () => {
+      $scope.state.requiresTemplateSelection = false;
+      configureCommand();
+    };
+
+    // used by react components to update command fields in parent (angular) scope
+    $scope.notifyAngular = function (commandKey, value) {
+      if (commandKey == 'pipeline') {
+        $scope.command.viewState.pipeline = value;
+      } else {
+        $scope.command[commandKey] = value;
+      }
+    };
+
+    // used by react components to configure command for image queries
+    $scope.configureCommand = function (query) {
+      return ecsServerGroupConfigurationService.configureCommand($scope.command, query);
+    };
+
+    // TODO: Migrate horizontalScaling component to react and move this logic there
+    $scope.capacityProviderState = {
+      useCapacityProviders:
+        $scope.command.capacityProviderStrategy && $scope.command.capacityProviderStrategy.length > 0,
+      updateComputeOption: function (chosenOption) {
+        if (chosenOption == 'launchType') {
+          $scope.command.capacityProviderStrategy = [];
+        } else if (chosenOption == 'capacityProviders') {
+          $scope.command.launchType = '';
+          $scope.command.capacityProviderStrategy = $scope.command.capacityProviderStrategy || [];
+        }
+      },
+    };
+  },
+]);

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

@@ -0,0 +1,194 @@
+<div class="container-fluid form-horizontal">
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Health Check Grace Period
+      <help-field key="ecs.healthgraceperiod"></help-field>
+    </div>
+    <div class="col-md-2">
+      <input
+        type="number"
+        class="form-control input-sm no-spel"
+        ng-model="$ctrl.command.healthCheckGracePeriodSeconds"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      <b>ECS IAM Instance Profile</b> <help-field key="ecs.iamrole"></help-field>
+    </div>
+    <!-- TODO - Add a help box that explains that the container does not share profiles with the host -->
+
+    <div class="col-md-7" ng-if="!$ctrl.command.backingData.filtered.iamRoles.length">
+      No account was selected, or no IAM roles are available for ECS tasks in this account.
+    </div>
+
+    <div class="col-md-7" ng-if="$ctrl.command.backingData.filtered.iamRoles.length">
+      <ui-select
+        ng-model="$ctrl.command.iamRole"
+        class="form-control input-sm"
+        required
+        on-select="$ctrl.fieldChanged()"
+      >
+        <ui-select-match>{{ $select.selected }}</ui-select-match>
+        <ui-select-choices repeat="iamRole in $ctrl.command.backingData.filtered.iamRoles | filter: $select.search">
+          <span ng-bind-html="iamRole"></span>
+        </ui-select-choices>
+      </ui-select>
+    </div>
+  </div>
+
+  <div ng-if="!$ctrl.command.useTaskDefinitionArtifact">
+    <div class="form-group">
+      <div class="col-md-5 sm-label-right">
+        <b>Docker Image Credentials</b> <help-field key="ecs.dockerimagecredentials"></help-field>
+      </div>
+      <div class="col-md-7" ng-if="!$ctrl.command.backingData.filtered.secrets.length">
+        No account or region was selected, or no AWS Secrets Manager secrets are available in this account and region.
+      </div>
+
+      <div class="col-md-7" ng-if="$ctrl.command.backingData.filtered.secrets.length">
+        <ui-select
+          ng-model="$ctrl.command.dockerImageCredentialsSecret"
+          class="form-control input-sm"
+          required
+          on-select="$ctrl.fieldChanged()"
+        >
+          <ui-select-match>{{ $select.selected }}</ui-select-match>
+          <ui-select-choices repeat="secret in $ctrl.command.backingData.filtered.secrets | filter: $select.search">
+            <span ng-bind-html="secret"></span>
+          </ui-select-choices>
+        </ui-select>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Fargate platform version
+      <help-field key="ecs.platformVersion"></help-field>
+    </div>
+    <div class="col-md-3">
+      <input
+        type="text"
+        class="form-control input-sm"
+        name="platformVersion"
+        ng-model="$ctrl.command.platformVersion"
+      />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      Enable Deployment Circuit Breaker
+      <help-field key="ecs.enableDeploymentCircuitBreaker"></help-field>
+    </div>
+    <div class="col-md-3">
+      <input type="checkbox" ng-model="$ctrl.command.enableDeploymentCircuitBreaker" />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-md-5 sm-label-right">
+      <b>Placement Strategy</b> <help-field key="ecs.placementStrategy"></help-field>
+    </div>
+    <div class="col-md-7">
+      <ui-select ng-model="$ctrl.command.placementStrategyName" class="form-control input-sm">
+        <ui-select-match>{{ $select.selected }}</ui-select-match>
+        <ui-select-choices
+          repeat="item in ['AZ Balanced Spread', 'AZ Balanced BinPack CPU', 'AZ Balanced BinPack Memory', 'BinPack CPU', 'BinPack Memory', 'One Task Per Host', 'None'] | filter: $select.search"
+        >
+          <span ng-bind-html="item"></span>
+        </ui-select-choices>
+      </ui-select>
+      <!-- TODO - implement handling of custom placement strategies and constraints -->
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="sm-label-left">
+      <b>Placement Constraints</b>
+      <help-field key="ecs.placementConstraints"></help-field>
+    </div>
+    <form name="ecsPlacementConstraints">
+      <table class="table table-condensed packed tags">
+        <thead>
+          <tr>
+            <th style="width: 25%">Type <help-field key="ecs.placementConstraintType"></help-field></th>
+            <th style="width: 68%">Expression <help-field key="ecs.placementConstraintExpression"></help-field></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="constraint in $ctrl.command.placementConstraints">
+            <td>
+              <select
+                class="form-control input-sm"
+                ng-model="constraint.type"
+                ng-options="type for type in ['distinctInstance', 'memberOf']"
+              ></select>
+            </td>
+            <td>
+              <input type="text" class="form-control input-sm no-spel" ng-model="constraint.expression" />
+            </td>
+            <td>
+              <div class="form-control-static">
+                <a class="btn-link sm-label" ng-click="$ctrl.command.placementConstraints.splice($index, 1)">
+                  <span class="glyphicon glyphicon-trash"></span>
+                  <span class="sr-only">Remove</span>
+                </a>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">
+              <button class="btn btn-block btn-sm add-new" ng-click="$ctrl.command.placementConstraints.push({})">
+                <span class="glyphicon glyphicon-plus-sign"></span>
+                Add New Placement Constraint
+              </button>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </form>
+  </div>
+
+  <div ng-if="!$ctrl.command.useTaskDefinitionArtifact">
+    <div class="form-group">
+      <div class="sm-label-left">
+        <b>Docker labels (optional)</b>
+        <help-field key="ecs.dockerLabels"></help-field>
+      </div>
+      <map-editor model="$ctrl.command.dockerLabels" allow-empty="true"></map-editor>
+    </div>
+
+    <div class="form-group">
+      <div class="sm-label-left">
+        <b>Environment Variables (optional)</b>
+        <help-field key="ecs.environmentVariables"></help-field>
+      </div>
+      <map-editor model="$ctrl.command.environmentVariables" allow-empty="true"></map-editor>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="sm-label-left">
+      <b>Tags (optional)</b>
+      <help-field key="ecs.tags"></help-field>
+    </div>
+    <map-editor model="$ctrl.command.tags" allow-empty="true"></map-editor>
+  </div>
+
+  <div ng-if="$ctrl.command.useTaskDefinitionArtifact" style="color: #666">
+    <hr />
+    <p>
+      <em
+        ><strong>Docker Image Credentials, Docker labels</strong>, and <strong>Environment Variables</strong> cannot be
+        individually set when using a Task Definition artifact. Please include them in their respective container
+        definition in that file.
+      </em>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+'use strict';
+
+import { module } from 'angular';
+
+export const ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT =
+  'spinnaker.ecs.serverGroup.configure.wizard.advancedSettings.component';
+export const name = ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT; // for backwards compatibility
+module(ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT, []).component(
+  'ecsServerGroupAdvancedSettings',
+  {
+    bindings: {
+      command: '=',
+      application: '=',
+    },
+    templateUrl: require('./advancedSettings.component.html'),
+  },
+);

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

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