Merge pull request #803 from mesosphere/ic/fix/DCOS-15407-add-new-api…

…-support

DCOS-15407, DCOS-15570: Adding support for the new API

src/js/components/AppConfigEditFormComponent.jsx

@@ -194,8 +194,17 @@ var AppConfigEditFormComponent = React.createClass({
   getOptionalPortsComponent: function () {
     var state = this.state;
 
-    if (state.fields.dockerNetwork === ContainerConstants.NETWORK.BRIDGE ||
-      state.fields.dockerNetwork === ContainerConstants.NETWORK.USER) {
+    if (state.fields.dockerNetwork === ContainerConstants.NETWORK.MANY) {
+      return (
+          <p>
+            For more advanced port configuration options, including service
+            ports, use <a className="json-link clickable"
+            onClick={this.props.handleModeToggle}>JSON mode</a>.
+          </p>
+        );
+
+    } else if (state.fields.dockerNetwork === ContainerConstants.NETWORK.BRIDGE
+      || state.fields.dockerNetwork === ContainerConstants.NETWORK.USER) {
       return (
         <OptionalDockerPortMappingsComponent
           errorIndices={state.errorIndices}
@@ -372,6 +381,7 @@ var AppConfigEditFormComponent = React.createClass({
               errorIndices={state.errorIndices}
               fields={state.fields}
               getErrorMessage={this.getErrorMessage}
+              handleModeToggle={this.props.handleModeToggle}
               openPorts={this.setViewPorts}
               openVolumes={this.setViewVolumes}/>
           </SectionComponent>

src/js/components/ContainerSettingsComponent.jsx

@@ -7,6 +7,7 @@ import DuplicableRowsMixin from "../mixins/DuplicableRowsMixin";
 import dockerRowSchemes from "../stores/schemes/dockerRowSchemes";
 import FormActions from "../actions/FormActions";
 import FormGroupComponent from "../components/FormGroupComponent";
+import TooltipComponent from "./TooltipComponent.jsx";
 
 var ContainerSettingsComponent = React.createClass({
   displayName: "ContainerSettingsComponent",
@@ -28,6 +29,7 @@ var ContainerSettingsComponent = React.createClass({
   propTypes: {
     fields: React.PropTypes.object.isRequired,
     getErrorMessage: React.PropTypes.func.isRequired,
+    handleModeToggle: React.PropTypes.func.isRequired,
     openPorts: React.PropTypes.func,
     openVolumes: React.PropTypes.func
   },
@@ -112,6 +114,54 @@ var ContainerSettingsComponent = React.createClass({
     });
   },
 
+  getNetworkGroupComponent: function () {
+    var props = this.props;
+    var fieldIds = ContainerSettingsComponent.fieldIds;
+    var dockerNetwork = props.fields[fieldIds.dockerNetwork];
+    var label = "Network";
+    var disabled = false;
+
+    if (dockerNetwork === ContainerConstants.NETWORK.MANY) {
+      label = (
+        <span>
+          Network
+          <TooltipComponent className="right"
+              message={
+                <span>
+                  Not availble when multiple networks are defined.
+                  <a className="json-link clickable"
+                    onClick={this.props.handleModeToggle}>Use JSON Mode</a>
+                </span>
+              }>
+            <i className="icon icon-xs help" />
+          </TooltipComponent>
+        </span>
+      );
+      disabled = true;
+    }
+
+    return (
+      <FormGroupComponent
+          errorMessage={props.getErrorMessage(fieldIds.dockerNetwork)}
+          fieldId={fieldIds.dockerNetwork}
+          label={label}
+          value={dockerNetwork}
+          onChange={this.handleSingleFieldUpdate}>
+        <select defaultValue="" disabled={disabled}>
+          <option value={ContainerConstants.NETWORK.HOST}>
+            Host
+          </option>
+          <option value={ContainerConstants.NETWORK.BRIDGE}>
+            Bridged
+          </option>
+          <option value={ContainerConstants.NETWORK.USER}>
+            User
+          </option>
+        </select>
+      </FormGroupComponent>
+    );
+  },
+
   render: function () {
     var props = this.props;
     var fieldIds = ContainerSettingsComponent.fieldIds;
@@ -130,24 +180,7 @@ var ContainerSettingsComponent = React.createClass({
             </FormGroupComponent>
           </div>
           <div className="col-sm-6">
-            <FormGroupComponent
-                errorMessage={props.getErrorMessage(fieldIds.dockerNetwork)}
-                fieldId={fieldIds.dockerNetwork}
-                label="Network"
-                value={props.fields[fieldIds.dockerNetwork]}
-                onChange={this.handleSingleFieldUpdate}>
-              <select defaultValue="">
-                <option value={ContainerConstants.NETWORK.HOST}>
-                  Host
-                </option>
-                <option value={ContainerConstants.NETWORK.BRIDGE}>
-                  Bridged
-                </option>
-                <option value={ContainerConstants.NETWORK.USER}>
-                  User
-                </option>
-              </select>
-            </FormGroupComponent>
+            {this.getNetworkGroupComponent()}
           </div>
         </div>
         <div className="row">

src/js/constants/AppConfigDefaults.js

@@ -51,6 +51,9 @@ export const AllAppConfigDefaultValues = Util.deepFreeze(
     readinessChecks: [],
     user: null,
     taskKillGracePeriodSeconds: null,
-    secrets: {}
+    secrets: {},
+    networks: [
+      {mode: "host"}
+    ]
   })
 );

src/js/constants/ContainerConstants.js

@@ -2,9 +2,10 @@ import Util from "../helpers/Util";
 
 const ContainerConstants = {
   NETWORK: {
-    BRIDGE: "BRIDGE",
-    USER: "USER",
-    HOST: "HOST"
+    BRIDGE: "container/bridge",
+    USER: "container",
+    HOST: "host",
+    MANY: null
   },
   PORTMAPPINGS: {
     PROTOCOL: {

src/js/stores/AppFormStore.js

@@ -106,10 +106,10 @@ const resolveFieldIdToAppKeyMap = {
   disk: "disk",
   dockerForcePullImage: "container.docker.forcePullImage",
   dockerImage: "container.docker.image",
-  dockerNetwork: "container.docker.network",
+  dockerNetwork: "networks",
   dockerParameters: "container.docker.parameters",
   dockerPrivileged: "container.docker.privileged",
-  dockerPortMappings: "container.docker.portMappings",
+  dockerPortMappings: "container.portMappings",
   healthChecks: "healthChecks",
   instances: "instances",
   env: "env",
@@ -135,7 +135,7 @@ const responseAttributePathToFieldIdMap = {
   "/constraints": "constraints",
   "/constraints({INDEX})": "constraints",
   "/container/docker/forcePullImage": "dockerForcePullImage",
-  "/container/docker/image": "dockerImage",
+  "/networks": "dockerImage",
   "/container/docker/network": "dockerNetwork",
   "/container/docker/privileged": "dockerPrivileged",
   "/container/docker/parameters({INDEX})/key":
@@ -174,13 +174,13 @@ const responseAttributePathToFieldIdMap = {
   "/portDefinitions({INDEX})/name": "portDefinitions/{INDEX}/name",
   "/portDefinitions({INDEX})/port": "portDefinitions/{INDEX}/port",
   "/portDefinitions({INDEX})/protocol": "portDefinitions/{INDEX}/protocol",
-  "/container/docker/portMappings": "dockerPortMappings",
-  "/container/docker/portMappings({INDEX})/containerPort":
+  "/container/portMappings": "dockerPortMappings",
+  "/container/portMappings({INDEX})/containerPort":
     "dockerPortMappings/{INDEX}/port",
-  "/container/docker/portMappings({INDEX})/protocol":
+  "/container/portMappings({INDEX})/protocol":
     "dockerPortMappings/{INDEX}/protocol",
-  "/container/docker/portMappings({INDEX})/hostPort": "dockerPortMappings",
-  "/container/docker/portMappings({INDEX})/servicePort": "dockerPortMappings",
+  "/container/portMappings({INDEX})/hostPort": "dockerPortMappings",
+  "/container/portMappings({INDEX})/servicePort": "dockerPortMappings",
   "/labels": "labels",
   "/uris": "uris",
   "/user": "user",
@@ -194,12 +194,12 @@ const responseAttributePathToFieldIdMap = {
  */
 const resolveAppKeyToFieldIdMap = {
   "id": ["appId"],
+  "networks": ["dockerNetwork"],
   "container.docker.forcePullImage": ["dockerForcePullImage"],
   "container.docker.image": ["dockerImage"],
-  "container.docker.network": ["dockerNetwork"],
-  "container.docker.portMappings": ["dockerPortMappings"],
   "container.docker.parameters": ["dockerParameters"],
   "container.docker.privileged": ["dockerPrivileged"],
+  "container.portMappings": ["dockerPortMappings"],
   "container.volumes": [
     "containerVolumes",
     "localVolumes",
@@ -497,15 +497,20 @@ var AppFormStore = Util.extendObject(EventEmitter.prototype, {
       }
     });
 
-    var dockerNetwork =
-      objectPath.get(app, "container.docker.network");
+    var dockerNetwork = ContainerConstants.NETWORK.MANY;
+    var networks = app.networks || [];
+    if (networks.length) {
+      if (networks.length === 1) {
+        dockerNetwork = networks[0].mode;
+      }
+    }
 
     if (dockerNetwork != null &&
       (dockerNetwork === ContainerConstants.NETWORK.BRIDGE ||
       dockerNetwork === ContainerConstants.NETWORK.USER)) {
       delete app.portDefinitions;
-    } else if (objectPath.get(app, "container.docker.portMappings") != null) {
-      delete app.container.docker.portMappings;
+    } else if (objectPath.get(app, "container.portMappings") != null) {
+      delete app.container.portMappings;
     }
 
     return app;

src/js/stores/transforms/AppFormFieldToModelTransforms.js

@@ -1,3 +1,4 @@
+import ContainerConstants from "../../constants/ContainerConstants";
 import HealthCheckProtocols from "../../constants/HealthCheckProtocols";
 
 import dockerRowSchemes from "../schemes/dockerRowSchemes";
@@ -116,6 +117,19 @@ const AppFormFieldToModelTransforms = {
     return rows;
   },
   dockerForcePullImage: (isChecked) => !!isChecked,
+  dockerNetwork: (network) => {
+    if (network == null) {
+      return [];
+    }
+
+    const networkDefinition = {mode: network};
+
+    if (network === ContainerConstants.NETWORK.USER) {
+      networkDefinition.name = "dcos";
+    }
+
+    return [networkDefinition];
+  },
   dockerParameters: (rows) => lazy(rows)
     .map((row) => ensureObjectScheme(row, dockerRowSchemes.dockerParameters))
     .compact()

src/js/stores/transforms/AppFormModelPostProcess.js

@@ -61,11 +61,9 @@ const AppFormModelPostProcess = {
         app.cmd = null;
       }
 
-      if (app.container != null &&
-          app.container.type === ContainerConstants.TYPE.DOCKER &&
-          app.container.docker.network == null) {
-        Util.objectPathSet(app, "container.docker.network",
-          ContainerConstants.NETWORK.HOST);
+      // Make sure there is always a default network
+      if (app.networks == null) {
+        app.networks = [{mode: "host"}];
       }
     }
   },

src/js/stores/transforms/AppFormModelToFieldTransforms.js

@@ -1,3 +1,4 @@
+import ContainerConstants from "../../constants/ContainerConstants";
 import HealthCheckProtocols from "../../constants/HealthCheckProtocols";
 import HealthCheckPortTypes from "../../constants/HealthCheckPortTypes";
 import Util from "../../helpers/Util";
@@ -29,6 +30,16 @@ const AppFormModelToFieldTransforms = {
       .map((constraint) => constraint.join(":"))
       .join(", ");
   },
+  dockerNetwork: networks =>  {
+    if (!Array.isArray(networks) || networks.length === 0) {
+      return ContainerConstants.NETWORK.HOST;
+    }
+    if (networks.length > 1) {
+      return ContainerConstants.NETWORK.MANY;
+    }
+
+    return networks[0].mode;
+  },
   dockerPortMappings: portMappings => {
     return transformPortDefinitionRows(portMappings, "containerPort");
   },

src/test/scenarios/requestSpecificApplicationVersion.test.js

@@ -67,7 +67,8 @@ describe("request specific application version", function () {
           );
           expect(config).to.deep.equal({
             id: "/app-id",
-            cmd: "some --cmd"
+            cmd: "some --cmd",
+            networks: []
           });
         }, done);
       });
@@ -94,7 +95,8 @@ describe("request specific application version", function () {
           expect(config).to.deep.equal({
             id: "/app-id",
             cmd: "some --cmd",
-            labels: {testing: "123"}
+            labels: {testing: "123"},
+            networks: []
           });
         }, done);
       });

src/test/units/AppFormModelPostProcess.test.js

@@ -83,8 +83,8 @@ describe("App Form Model Post Process", function () {
       var app2 = Object.assign({}, app);
       AppFormModelPostProcess.container(app2);
 
-      expect(app2.container.docker.network)
-        .to.equal(ContainerConstants.NETWORK.HOST);
+      expect(app2.networks)
+        .to.deep.equal([{mode: ContainerConstants.NETWORK.HOST}]);
     });
 
     it("sets network mode to BRIDGE", function () {