diff --git a/app/scripts/modules/ecs/src/ecs.help.ts b/app/scripts/modules/ecs/src/ecs.help.ts
index 8a6a16ef3ef..27ae11df7a7 100644
--- a/app/scripts/modules/ecs/src/ecs.help.ts
+++ b/app/scripts/modules/ecs/src/ecs.help.ts
@@ -60,6 +60,8 @@ const helpContents: { [key: string]: string } = {
   'ecs.containerMappingName':
     '<p>The name of the container. Name should match the <a href="https://docs.aws.amazon.com/AmazonECS/latest/APIReference/API_ContainerDefinition.html#ECS-Type-ContainerDefinition-name"><b>containerDefinition.name</b></a> field as it appears in the Task Definition.</p>',
   'ecs.containerMappingImage': '<p>The container image the named container should run.</p>',
+  'ecs.targetGroupMappings':
+    '<p>The list of target groups through which the ECS service will receive load balancer traffic. Each target group is mapped to a container name and port within the Task Definition to specify which container should be registered to the target group.</p>',
   'ecs.loadBalancedContainer':
     '<p>The container in the Task Definition that should receive traffic from the load balancer. Required if a load balancer target group has been specified.</p>',
   'ecs.tags': '<p>The tags to apply to the task definition and the service',
diff --git a/app/scripts/modules/ecs/src/ecs.module.ts b/app/scripts/modules/ecs/src/ecs.module.ts
index 500cbd6f4d4..614e8f54c24 100644
--- a/app/scripts/modules/ecs/src/ecs.module.ts
+++ b/app/scripts/modules/ecs/src/ecs.module.ts
@@ -16,13 +16,13 @@ import './ecs.help';
 import { COMMON_MODULE } from './common/common.module';
 import { ECS_SERVERGROUP_MODULE } from './serverGroup/serverGroup.module';
 import { ECS_SERVER_GROUP_LOGGING } from './serverGroup/configure/wizard/logging/logging.component';
+import { CONTAINER_REACT } from './serverGroup/configure/wizard/container/Container';
 import { TASK_DEFINITION_REACT } from './serverGroup/configure/wizard/taskDefinition/TaskDefinition';
 import { ECS_SECURITY_GROUP_MODULE } from './securityGroup/securityGroup.module';
 
 import './logo/ecs.logo.less';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_CLONESERVERGROUP_ECS_CONTROLLER } from './serverGroup/configure/wizard/CloneServerGroup.ecs.controller';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT } from './serverGroup/configure/wizard/advancedSettings/advancedSettings.component';
-import { ECS_SERVERGROUP_CONFIGURE_WIZARD_CONTAINER_CONTAINER_COMPONENT } from './serverGroup/configure/wizard/container/container.component';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT } from './serverGroup/configure/wizard/horizontalScaling/horizontalScaling.component';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_SERVICEDISCOVERY_SERVICEDISCOVERY_COMPONENT } from './serverGroup/configure/wizard/serviceDiscovery/serviceDiscovery.component';
 import { ECS_SERVERGROUP_CONFIGURE_WIZARD_LOCATION_SERVERGROUPBASICSETTINGS_CONTROLLER } from './serverGroup/configure/wizard/location/ServerGroupBasicSettings.controller';
@@ -53,9 +53,9 @@ module(ECS_MODULE, [
   ECS_SERVER_GROUP_TRANSFORMER,
   // require('./pipeline/stages/cloneServerGroup/ecsCloneServerGroupStage').name,  // TODO(Bruno Carrier): We should enable this on Clouddriver before revealing this stage
   ECS_SERVERGROUP_CONFIGURE_WIZARD_ADVANCEDSETTINGS_ADVANCEDSETTINGS_COMPONENT,
-  ECS_SERVERGROUP_CONFIGURE_WIZARD_CONTAINER_CONTAINER_COMPONENT,
   ECS_SERVERGROUP_CONFIGURE_WIZARD_HORIZONTALSCALING_HORIZONTALSCALING_COMPONENT,
   TASK_DEFINITION_REACT,
+  CONTAINER_REACT,
   ECS_SERVER_GROUP_LOGGING,
   ECS_NETWORKING_SECTION,
   ECS_CLUSTER_READ_SERVICE,
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts b/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts
index d4cadaf80af..e5957b711f5 100644
--- a/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts
+++ b/app/scripts/modules/ecs/src/serverGroup/configure/serverGroupConfiguration.service.ts
@@ -102,10 +102,19 @@ export interface IEcsContainerMapping {
   imageDescription: IEcsDockerImage;
 }
 
+export interface IEcsTargetGroupMapping {
+  containerName: string;
+  containerPort: number;
+  targetGroup: string;
+}
+
 export interface IEcsServerGroupCommand extends IServerGroupCommand {
   backingData: IEcsServerGroupCommandBackingData;
+  computeUnits: number;
+  reservedMemory: number;
   targetHealthyDeployPercentage: number;
   targetGroup: string;
+  containerPort: number;
   placementStrategyName: string;
   placementStrategySequence: IPlacementStrategy[];
   imageDescription: IEcsDockerImage;
@@ -114,6 +123,7 @@ export interface IEcsServerGroupCommand extends IServerGroupCommand {
   taskDefinitionArtifactAccount: string;
   containerMappings: IEcsContainerMapping[];
   loadBalancedContainer: string;
+  targetGroupMappings: IEcsTargetGroupMapping[];
 
   subnetTypeChanged: (command: IEcsServerGroupCommand) => IServerGroupCommandResult;
   placementStrategyNameChanged: (command: IEcsServerGroupCommand) => IServerGroupCommandResult;
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/Container.tsx b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/Container.tsx
new file mode 100644
index 00000000000..20d7d4b9d76
--- /dev/null
+++ b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/Container.tsx
@@ -0,0 +1,269 @@
+import * as React from 'react';
+import { module, IPromise } from 'angular';
+import { uniqWith, isEqual } from 'lodash';
+import { react2angular } from 'react2angular';
+import {
+  IEcsDockerImage,
+  IEcsServerGroupCommand,
+  IEcsTargetGroupMapping,
+} from '../../serverGroupConfiguration.service';
+import { HelpField } from '@spinnaker/core';
+import { Alert } from 'react-bootstrap';
+
+export interface IContainerProps {
+  command: IEcsServerGroupCommand;
+  notifyAngular: (key: string, value: any) => void;
+  configureCommand: (query: string) => IPromise<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.targetGroupMappings = uniqWith(defaultTargetGroup, isEqual);
+
+    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 : [],
+    };
+  }
+
+  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: string) => {
+    const imageMap = this.getIdToImageMap();
+    let newImageDescription = imageMap.get(newImage);
+    if (!newImageDescription) {
+      newImageDescription = this.getEmptyImageDescription();
+    }
+
+    this.props.notifyAngular('imageDescription', newImageDescription);
+    this.setState({ imageDescription: newImageDescription });
+  };
+
+  private updateTargetGroupMappingTargetGroup = (index: number, newTargetGroup: string) => {
+    const currentMappings = this.state.targetGroupMappings;
+    const targetMapping = currentMappings[index];
+    targetMapping.targetGroup = newTargetGroup;
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
+  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 });
+  };
+
+  public render(): React.ReactElement<Container> {
+    const removeTargetGroupMapping = this.removeTargetGroupMapping;
+    const updateContainerMappingImage = this.updateContainerMappingImage;
+    const updateTargetGroupMappingTargetGroup = this.updateTargetGroupMappingTargetGroup;
+    const updateTargetGroupMappingPort = this.updateTargetGroupMappingPort;
+
+    const dockerImages = this.state.dockerImages.map(function(image, index) {
+      let msg = '';
+      if (image.fromTrigger || image.fromContext) {
+        msg = image.fromTrigger ? '(TRIGGER) ' : '(FIND IMAGE RESULT) ';
+      }
+      return (
+        <option key={index} value={image.imageId}>
+          {msg}
+          {image.imageId}
+        </option>
+      );
+    });
+
+    const newTargetGroupMapping = this.state.targetGroupsAvailable.length ? (
+      <button className="btn btn-block btn-sm add-new" 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, index) {
+      return (
+        <option key={index} value={targetGroup}>
+          {targetGroup}
+        </option>
+      );
+    });
+
+    const targetGroupInputs = this.state.targetGroupMappings.map(function(mapping, index) {
+      return (
+        <tr key={index}>
+          <td>
+            <select
+              className="form-control input-sm"
+              value={mapping.targetGroup.toString()}
+              required={true}
+              onChange={e => updateTargetGroupMappingTargetGroup(index, e.target.value)}
+            >
+              <option value={''}>Select a target group to use...</option>
+              {targetGroupsAvailable}
+            </select>
+          </td>
+          <td>
+            <input
+              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" 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">
+        <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">
+            <select
+              className="form-control input-sm"
+              value={this.state.imageDescription.imageId}
+              required={true}
+              onChange={e => updateContainerMappingImage(e.target.value)}
+            >
+              <option value={''}>Select an image to use...</option>
+              {dockerImages}
+            </select>
+          </div>
+        </div>
+        <div className="form-group">
+          <hr />
+          <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(Container, ['command', 'notifyAngular', 'configureCommand']),
+);
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.html b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.html
deleted file mode 100644
index 13e2c531e7b..00000000000
--- a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="container-fluid form-horizontal" ng-controller="ecsContainerImageController as containerImageController">
-  <div class="form-group">
-    <div class="col-md-4 sm-label-right">Container Image <help-field key="ecs.dockerimage"></help-field></div>
-    <div class="col-md-8">
-      <ui-select name="imageSelect" ng-model="$ctrl.command.imageDescription" class="form-control input-sm">
-        <ui-select-match placeholder="Please type your search...">{{ $select.selected.imageId }}</ui-select-match>
-        <ui-select-choices
-          repeat="image in $ctrl.command.backingData.filtered.images"
-          group-by="containerImageController.groupByRegistry"
-          refresh-delay="0"
-          refresh="containerImageController.searchImages($ctrl.command, $select.search)"
-        >
-          <span ng-bind-html="image.imageId | highlight: $select.search"></span>
-        </ui-select-choices>
-      </ui-select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <div class="col-md-4 sm-label-right">
-      Reserved Compute Units <help-field key="ecs.capacity.reserved.computeUnits"></help-field>
-    </div>
-    <div class="col-md-2">
-      <input
-        type="number"
-        class="form-control input-sm no-spel"
-        name="computeUnits"
-        ng-model="$ctrl.command.computeUnits"
-      />
-    </div>
-  </div>
-
-  <div class="form-group">
-    <div class="col-md-4 sm-label-right">
-      Reserved Memory <help-field key="ecs.capacity.reserved.memory"></help-field>
-    </div>
-    <div class="col-md-2">
-      <input
-        type="number"
-        class="form-control input-sm no-spel"
-        name="memory"
-        ng-model="$ctrl.command.reservedMemory"
-      />
-    </div>
-  </div>
-</div>
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.js b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.js
deleted file mode 100644
index 06dc5abe273..00000000000
--- a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.component.js
+++ /dev/null
@@ -1,48 +0,0 @@
-'use strict';
-
-import { module } from 'angular';
-import { Observable, Subject } from 'rxjs';
-
-export const ECS_SERVERGROUP_CONFIGURE_WIZARD_CONTAINER_CONTAINER_COMPONENT =
-  'spinnaker.ecs.serverGroup.configure.wizard.container.component';
-export const name = ECS_SERVERGROUP_CONFIGURE_WIZARD_CONTAINER_CONTAINER_COMPONENT; // for backwards compatibility
-module(ECS_SERVERGROUP_CONFIGURE_WIZARD_CONTAINER_CONTAINER_COMPONENT, [])
-  .component('ecsServerGroupContainer', {
-    bindings: {
-      command: '=',
-      application: '=',
-    },
-    templateUrl: require('./container.component.html'),
-  })
-  .controller('ecsContainerImageController', [
-    '$scope',
-    'ecsServerGroupConfigurationService',
-    function($scope, ecsServerGroupConfigurationService) {
-      this.groupByRegistry = function(image) {
-        if (image) {
-          if (image.fromContext) {
-            return 'Find Image Result(s)';
-          } else if (image.fromTrigger) {
-            return 'Images from Trigger(s)';
-          } else {
-            return image.registry;
-          }
-        }
-      };
-
-      function searchImages(cmd, q) {
-        return Observable.fromPromise(ecsServerGroupConfigurationService.configureCommand(cmd, q));
-      }
-
-      const imageSearchResultsStream = new Subject();
-
-      imageSearchResultsStream
-        .debounceTime(250)
-        .switchMap(searchImages)
-        .subscribe();
-
-      this.searchImages = function(q) {
-        imageSearchResultsStream.next(q);
-      };
-    },
-  ]);
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.html b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.html
index b89b9ca579e..b9a95345bbb 100644
--- a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.html
+++ b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/container/container.html
@@ -1,7 +1,9 @@
 <div class="clearfix">
-  <div class="row">
-    <div class="col-md-12">
-      <ecs-server-group-container command="command" application="application"></ecs-server-group-container>
-    </div>
+  <div class="col-md-12">
+    <container-react
+      command="command"
+      notify-angular="notifyAngular"
+      configure-command="configureCommand"
+    ></container-react>
   </div>
 </div>
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/networking/networkingSelector.component.html b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/networking/networkingSelector.component.html
index 102ed085b19..0cbe28080b1 100644
--- a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/networking/networkingSelector.component.html
+++ b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/networking/networkingSelector.component.html
@@ -94,62 +94,4 @@
       </div>
     </div>
   </div>
-
-  <div class="col-md-12" ng-if="$ctrl.command.viewState.dirty.targetGroup">
-    <div class="alert alert-warning">
-      <p>
-        <i class="fa fa-exclamation-triangle"></i>
-        The following target groups could not be found in the selected account/region/VPC and were removed:
-      </p>
-      <ul>
-        <li ng-repeat="targetGroup in $ctrl.command.viewState.dirty.targetGroup">{{ targetGroup }}</li>
-      </ul>
-      <p class="text-right">
-        <a
-          class="btn btn-sm btn-default dirty-flag-dismiss"
-          href
-          ng-click="$ctrl.command.viewState.dirty.targetGroup = null"
-          >Okay</a
-        >
-      </p>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="col-md-4 sm-label-right">
-      <b>Target Group</b>
-      <help-field key="ecs.loadBalancer.targetGroup"></help-field>
-    </div>
-    <div class="col-md-6">
-      <div class="form-control-static" ng-if="!$ctrl.command.backingData.filtered.targetGroups.length">
-        No target groups found in the selected account/region/VPC
-      </div>
-      <ui-select
-        ng-if="$ctrl.command.backingData.filtered.targetGroups.length"
-        ng-model="$ctrl.command.targetGroup"
-        class="form-control input-sm"
-      >
-        <ui-select-match>{{ $select.selected }}</ui-select-match>
-        <ui-select-choices
-          repeat="targetGroup in $ctrl.command.backingData.filtered.targetGroups | filter: $select.search"
-        >
-          <span ng-bind-html="targetGroup | highlight: $select.search"></span>
-        </ui-select-choices>
-      </ui-select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <div class="col-md-4 sm-label-right">
-      Target container port <help-field key="ecs.loadbalancing.targetPort"></help-field>
-    </div>
-    <div class="col-md-2">
-      <input
-        type="number"
-        class="form-control input-sm no-spel"
-        ng-pattern="basicSettingsCtrl.detailPattern"
-        name="targetContainerPort"
-        ng-model="$ctrl.command.containerPort"
-      />
-    </div>
-  </div>
 </div>
diff --git a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.tsx b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.tsx
index 84ebe29bb81..4e9fb320436 100644
--- a/app/scripts/modules/ecs/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.tsx
+++ b/app/scripts/modules/ecs/src/serverGroup/configure/wizard/taskDefinition/TaskDefinition.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { module, IPromise } from 'angular';
-import { concat, uniq } from 'lodash';
+import { concat, uniq, uniqWith, isEqual } from 'lodash';
 import { react2angular } from 'react2angular';
 import {
   IEcsContainerMapping,
   IEcsDockerImage,
   IEcsServerGroupCommand,
   IEcsTaskDefinitionArtifact,
+  IEcsTargetGroupMapping,
 } from '../../serverGroupConfiguration.service';
 import {
   ArtifactTypePatterns,
@@ -16,6 +17,7 @@ import {
   IPipeline,
   StageArtifactSelectorDelegate,
 } from '@spinnaker/core';
+import { Alert } from 'react-bootstrap';
 
 export interface ITaskDefinitionProps {
   command: IEcsServerGroupCommand;
@@ -27,7 +29,9 @@ interface ITaskDefinitionState {
   taskDefArtifact: IEcsTaskDefinitionArtifact;
   taskDefArtifactAccount: string;
   containerMappings: IEcsContainerMapping[];
+  targetGroupMappings: IEcsTargetGroupMapping[];
   dockerImages: IEcsDockerImage[];
+  targetGroupsAvailable: string[];
   loadBalancedContainer: string;
 }
 
@@ -40,18 +44,40 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
       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.targetGroupMappings = uniqWith(defaultTargetGroup, isEqual);
+
     this.state = {
       taskDefArtifact: cmd.taskDefinitionArtifact,
       containerMappings: cmd.containerMappings ? cmd.containerMappings : [],
+      targetGroupMappings: cmd.targetGroupMappings,
+      targetGroupsAvailable: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.targetGroups : [],
       dockerImages: cmd.backingData && cmd.backingData.filtered ? cmd.backingData.filtered.images : [],
       loadBalancedContainer: cmd.loadBalancedContainer || defaultContainer,
       taskDefArtifactAccount: cmd.taskDefinitionArtifactAccount,
     };
   }
 
+  // TODO: Separate docker image component used by both TaskDefinition and Container
   public componentDidMount() {
     this.props.configureCommand('1').then(() => {
-      this.setState({ dockerImages: this.props.command.backingData.filtered.images });
+      this.setState({
+        dockerImages: this.props.command.backingData.filtered.images,
+        targetGroupsAvailable: this.props.command.backingData.filtered.targetGroups,
+      });
     });
   }
 
@@ -109,6 +135,12 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     this.setState({ containerMappings: conMaps });
   };
 
+  private pushTargetGroupMapping = () => {
+    const targetMaps = this.state.targetGroupMappings;
+    targetMaps.push({ containerName: '', targetGroup: '', containerPort: 80 });
+    this.setState({ targetGroupMappings: targetMaps });
+  };
+
   private updateContainerMappingName = (index: number, newName: string) => {
     const currentMappings = this.state.containerMappings;
     const targetMapping = currentMappings[index];
@@ -131,9 +163,28 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     this.setState({ containerMappings: currentMappings });
   };
 
-  private updateLoadBalancedContainer = (containerName: string) => {
-    this.props.notifyAngular('loadBalancedContainer', containerName);
-    this.setState({ loadBalancedContainer: containerName });
+  private updateTargetGroupMappingTargetGroup = (index: number, newTargetGroup: string) => {
+    const currentMappings = this.state.targetGroupMappings;
+    const targetMapping = currentMappings[index];
+    targetMapping.targetGroup = newTargetGroup;
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
+  private updateTargetGroupMappingContainer = (index: number, targetContainer: string) => {
+    const currentMappings = this.state.targetGroupMappings;
+    const targetMapping = currentMappings[index];
+    targetMapping.containerName = targetContainer;
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
+  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 removeMapping = (index: number) => {
@@ -143,6 +194,13 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
     this.setState({ containerMappings: currentMappings });
   };
 
+  private removeTargetGroupMapping = (index: number) => {
+    const currentMappings = this.state.targetGroupMappings;
+    currentMappings.splice(index, 1);
+    this.props.notifyAngular('targetGroupMappings', currentMappings);
+    this.setState({ targetGroupMappings: currentMappings });
+  };
+
   private updatePipeline = (pipeline: IPipeline): void => {
     if (pipeline.expectedArtifacts && pipeline.expectedArtifacts.length > 0) {
       const oldArtifacts = this.props.command.viewState.pipeline.expectedArtifacts;
@@ -155,8 +213,12 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
   public render(): React.ReactElement<TaskDefinition> {
     const { command } = this.props;
     const removeMapping = this.removeMapping;
+    const removeTargetGroupMapping = this.removeTargetGroupMapping;
     const updateContainerMappingName = this.updateContainerMappingName;
     const updateContainerMappingImage = this.updateContainerMappingImage;
+    const updateTargetGroupMappingContainer = this.updateTargetGroupMappingContainer;
+    const updateTargetGroupMappingTargetGroup = this.updateTargetGroupMappingTargetGroup;
+    const updateTargetGroupMappingPort = this.updateTargetGroupMappingPort;
 
     const dockerImages = this.state.dockerImages.map(function(image, index) {
       let msg = '';
@@ -171,6 +233,14 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
       );
     });
 
+    const targetGroupsAvailable = this.state.targetGroupsAvailable.map(function(targetGroup, index) {
+      return (
+        <option key={index} value={targetGroup}>
+          {targetGroup}
+        </option>
+      );
+    });
+
     const mappingInputs = this.state.containerMappings.map(function(mapping, index) {
       return (
         <tr key={index}>
@@ -206,14 +276,61 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
       );
     });
 
-    const containerOptions = this.state.containerMappings.map(function(mapping, index) {
+    const targetGroupInputs = this.state.targetGroupMappings.map(function(mapping, index) {
       return (
-        <option key={index} value={mapping.containerName}>
-          {mapping.containerName}
-        </option>
+        <tr key={index}>
+          <td>
+            <input
+              className="form-control input-sm"
+              required={true}
+              placeholder="Enter a container name ..."
+              value={mapping.containerName.toString()}
+              onChange={e => updateTargetGroupMappingContainer(index, e.target.value)}
+            />
+          </td>
+          <td>
+            <select
+              className="form-control input-sm"
+              value={mapping.targetGroup.toString()}
+              required={true}
+              onChange={e => updateTargetGroupMappingTargetGroup(index, e.target.value)}
+            >
+              <option value={''}>Select a target group to use...</option>
+              {targetGroupsAvailable}
+            </select>
+          </td>
+          <td>
+            <input
+              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" onClick={() => removeTargetGroupMapping(index)}>
+                <span className="glyphicon glyphicon-trash" />
+                <span className="sr-only">Remove</span>
+              </a>
+            </div>
+          </td>
+        </tr>
       );
     });
 
+    const newTargetGroupMapping = this.state.targetGroupsAvailable.length ? (
+      <button className="btn btn-block btn-sm add-new" 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>
+    );
+
     return (
       <div className="container-fluid form-horizontal">
         <div className="form-group">
@@ -236,23 +353,6 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
             />
           </div>
         </div>
-        <div className="form-group">
-          <div className="col-md-3 sm-label-right">
-            <strong>Load balanced container</strong>
-            <HelpField id="ecs.loadBalancedContainer" />
-          </div>
-          <div className="col-md-9">
-            <select
-              className="form-control input-sm"
-              required={command.targetGroup ? true : false}
-              value={this.state.loadBalancedContainer}
-              onChange={e => this.updateLoadBalancedContainer(e.target.value)}
-            >
-              <option value={''}>{'Select a container for load balancer traffic...'}</option>
-              {containerOptions}
-            </select>
-          </div>
-        </div>
         <div className="form-group">
           <div className="sm-label-left">
             <b>Container Mappings</b>
@@ -287,6 +387,39 @@ export class TaskDefinition extends React.Component<ITaskDefinitionProps, ITaskD
             </table>
           </form>
         </div>
+        <div className="form-group">
+          <div className="sm-label-left">
+            <b>Target Group Mappings</b>
+            <HelpField id="ecs.targetGroupMappings" />
+          </div>
+          <form name="ecsTaskDefinitionTargetGroupMappings">
+            <table className="table table-condensed packed tags">
+              <thead>
+                <tr key="header">
+                  <th style={{ width: '30%' }}>
+                    Container name
+                    <HelpField id="ecs.loadBalancedContainer" />
+                  </th>
+                  <th style={{ width: '55%' }}>
+                    Target group
+                    <HelpField id="ecs.loadBalancer.targetGroup" />
+                  </th>
+                  <th style={{ width: '15%' }}>
+                    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>
     );
   }