Containerizer type switch when using application edit form.

src/js/components/ContainerSettingsComponent.jsx

@@ -18,6 +18,7 @@ var ContainerSettingsComponent = React.createClass({
 
   statics: {
     fieldIds: Object.freeze({
+      containerType: "containerType",
       dockerForcePullImage: "dockerForcePullImage",
       dockerImage: "dockerImage",
       dockerNetwork: "dockerNetwork",
@@ -162,6 +163,31 @@ var ContainerSettingsComponent = React.createClass({
     );
   },
 
+  getContainerTypeGroupComponent: function () {
+    var props = this.props;
+    var fieldIds = ContainerSettingsComponent.fieldIds;
+    var containerType = props.fields[fieldIds.containerType];
+    var label = "Containerizer";
+
+    return (
+      <FormGroupComponent
+          errorMessage={props.getErrorMessage(fieldIds.containerType)}
+          fieldId={fieldIds.containerType}
+          label={label}
+          value={containerType}
+          onChange={this.handleSingleFieldUpdate}>
+        <select defaultValue="">
+          <option value={ContainerConstants.TYPE.DOCKER}>
+            Docker
+          </option>
+          <option value={ContainerConstants.TYPE.MESOS}>
+            Mesos
+          </option>
+        </select>
+      </FormGroupComponent>
+    );
+  },
+
   render: function () {
     var props = this.props;
     var fieldIds = ContainerSettingsComponent.fieldIds;
@@ -206,6 +232,11 @@ var ContainerSettingsComponent = React.createClass({
             </FormGroupComponent>
           </div>
         </div>
+        <div className="row">
+          <div className="col-sm-6">
+            {this.getContainerTypeGroupComponent()}
+          </div>
+        </div>
         <h4>Parameters</h4>
         <div className="duplicable-list">{this.getParametersRows()}</div>
         <div>

src/js/stores/AppFormStore.js

@@ -105,6 +105,7 @@ const resolveFieldIdToAppKeyMap = {
   externalVolumes: "container.volumes",
   cpus: "cpus",
   disk: "disk",
+  containerType: "container.type",
   dockerForcePullImage: "container.docker.forcePullImage",
   dockerImage: "container.docker.image",
   dockerNetwork: "networks",
@@ -138,6 +139,7 @@ const responseAttributePathToFieldIdMap = {
   "/constraints({INDEX})": "constraints",
   "/container/docker/forcePullImage": "dockerForcePullImage",
   "/networks": "dockerImage",
+  "/container/type": "containerType",
   "/container/docker/network": "dockerNetwork",
   "/container/docker/privileged": "dockerPrivileged",
   "/container/docker/parameters({INDEX})/key":
@@ -198,6 +200,7 @@ const responseAttributePathToFieldIdMap = {
 const resolveAppKeyToFieldIdMap = {
   "id": ["appId"],
   "networks": ["dockerNetwork"],
+  "container.type": ["containerType"],
   "container.docker.forcePullImage": ["dockerForcePullImage"],
   "container.docker.image": ["dockerImage"],
   "container.docker.parameters": ["dockerParameters"],

src/js/stores/transforms/AppFormModelPostProcess.js

@@ -44,9 +44,11 @@ const AppFormModelPostProcess = {
       });
     }
 
-    container.type = container.docker != null
-      ? ContainerConstants.TYPE.DOCKER
-      : ContainerConstants.TYPE.MESOS;
+    if (container.type == null) {
+      container.type = container.docker != null
+        ? ContainerConstants.TYPE.DOCKER
+        : ContainerConstants.TYPE.MESOS;
+    }
 
     let isEmpty = (Util.isArray(container.volumes) &&
         container.volumes.length === 0 ||

src/test/scenarios/createApplication.test.js

@@ -822,6 +822,31 @@ describe("Create Application", function () {
             });
           });
 
+          describe("the containerType field", function () {
+
+            it("updates to MESOS", function (done) {
+              AppFormStore.once(FormEvents.CHANGE, function () {
+                expectAsync(function () {
+                  expect(AppFormStore.fields.containerType)
+                    .to.equal("MESOS");
+                }, done);
+              });
+
+              FormActions.update("containerType", "MESOS");
+            });
+
+            it("updates to DOCKER", function (done) {
+              AppFormStore.once(FormEvents.CHANGE, function () {
+                expectAsync(function () {
+                  expect(AppFormStore.fields.containerType)
+                    .to.equal("DOCKER");
+                }, done);
+              });
+
+              FormActions.update("containerType", "DOCKER");
+            });
+          });
+
           describe("the privileges field", function () {
             it("updates correctly", function (done) {
               AppFormStore.once(FormEvents.CHANGE, function () {