Add binding type to NICs

src/components/CreateDeviceRow/CreateDeviceRow.js

@@ -17,9 +17,9 @@ export class CreateDeviceRow extends React.Component {
   };
 
   onFormChange = (newValue, key, valid) => {
-    this.props.onChange(newValue, key);
+    const changeValid = this.props.onChange(newValue, key, valid);
     this.setState({
-      valid,
+      valid: typeof changeValid === 'boolean' ? changeValid : valid,
     });
   };
 
@@ -46,5 +46,5 @@ CreateDeviceRow.propTypes = {
   onCancel: PropTypes.func.isRequired,
   LoadingComponent: PropTypes.func.isRequired,
   deviceFields: PropTypes.object.isRequired,
-  columnSizes: PropTypes.object.isRequired,
+  columnSizes: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
 };

src/components/CreateDeviceRow/tests/CreateDeviceRow.test.js

@@ -1,9 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { CreateDeviceRow } from '..';
 
 import { default as CreateDeviceRowFixture } from '../fixtures/CreateDeviceRow.fixture';
+import { setInput } from '../../../tests/enzyme';
+import { Text } from '../../Form';
 
 const testCreateDeviceRow = () => <CreateDeviceRow {...CreateDeviceRowFixture.props} />;
 
@@ -12,4 +14,17 @@ describe('<CreateDeviceRow />', () => {
     const component = shallow(testCreateDeviceRow());
     expect(component).toMatchSnapshot();
   });
+
+  it('uses valid value from onChange', () => {
+    const onChange = value => value.value === 'truthyValue';
+    const component = mount(<CreateDeviceRow {...CreateDeviceRowFixture.props} onChange={onChange} />);
+
+    setInput(component.find('#device-name').find(Text), 'truthyValue');
+    component.update();
+    expect(component.state('valid')).toBeTruthy();
+
+    setInput(component.find('#device-name').find(Text), 'otherValue');
+    component.update();
+    expect(component.state('valid')).toBeFalsy();
+  });
 });

src/components/CreateNicRow/CreateNicRow.js

@@ -4,21 +4,37 @@ import { get } from 'lodash';
 
 import { CreateDeviceRow } from '../CreateDeviceRow';
 import { getName, getNetworks, getInterfaces } from '../../selectors';
-import { validateDNS1123SubdomainValue } from '../../utils/validations';
+import { validateDNS1123SubdomainValue, validateNetworkBinding } from '../../utils/validations';
+import { getNetworkBindings } from '../../utils/utils';
 import { POD_NETWORK } from '../../constants';
-import { HEADER_NAME, HEADER_MAC, SELECT_NETWORK } from '../Wizard/CreateVmWizard/strings';
+import {
+  HEADER_NAME,
+  HEADER_MAC,
+  SELECT_NETWORK,
+  HEADER_BINDING_METHOD,
+  SELECT_BINDING,
+} from '../Wizard/CreateVmWizard/strings';
 import { NETWORK_TYPE_POD, NETWORK_TYPE_MULTUS, NAME_KEY } from '../Wizard/CreateVmWizard/constants';
 import { Loading } from '../Loading';
 import { settingsValue } from '../../k8s/selectors';
 import { DROPDOWN, CUSTOM, LABEL } from '../Form';
 
-const columnSizes = {
+const mainColumnSize = {
   lg: 3,
   md: 3,
   sm: 3,
   xs: 3,
 };
 
+const otherColumnSize = {
+  lg: 2,
+  md: 2,
+  sm: 2,
+  xs: 2,
+};
+
+const columnSizes = [mainColumnSize, mainColumnSize, otherColumnSize, otherColumnSize, otherColumnSize];
+
 const getUsedNetworks = vm => {
   const interfaces = getInterfaces(vm);
   const networks = getNetworks(vm);
@@ -61,6 +77,7 @@ const getNetworkChoices = (vm, networks) => {
 };
 
 const getNicColumns = (nic, networks, LoadingComponent) => {
+  const bindingChoices = getNetworkBindings(get(settingsValue(nic, 'network'), 'networkType'));
   let network;
   if (networks) {
     const networkChoices = getNetworkChoices(nic.vm, networks);
@@ -71,6 +88,7 @@ const getNicColumns = (nic, networks, LoadingComponent) => {
       choices: networkChoices,
       disabled: nic.creating || networkChoices.length === 0,
       required: true,
+      title: 'Network',
     };
   } else {
     network = {
@@ -94,6 +112,20 @@ const getNicColumns = (nic, networks, LoadingComponent) => {
       type: LABEL,
     },
     network,
+    binding: {
+      id: 'binding',
+      type: DROPDOWN,
+      defaultValue: SELECT_BINDING,
+      title: HEADER_BINDING_METHOD,
+      required: true,
+      disabled: nic.creating,
+      choices: bindingChoices,
+      validate: settings =>
+        validateNetworkBinding(
+          get(settingsValue(settings, 'network'), 'networkType'),
+          settingsValue(settings, 'binding')
+        ),
+    },
     mac: {
       id: 'mac-address',
       title: HEADER_MAC,
@@ -102,25 +134,44 @@ const getNicColumns = (nic, networks, LoadingComponent) => {
   };
 };
 
-const onFormChange = (newValue, key, onChange) => {
-  if (key === 'network' && get(newValue, 'value.networkType') === NETWORK_TYPE_POD) {
-    // reset mac value
-    onChange({ value: '' }, 'mac');
+const onFormChange = (nic, formFields, newValue, key, valid, onChange) => {
+  let changeValid = valid;
+  if (key === 'network') {
+    const newNic = {
+      ...nic,
+      [key]: newValue,
+    };
+    const validation = formFields.binding.validate(newNic);
+    if (validation && validation.message) {
+      changeValid = false;
+      validation.message = `Network ${validation.message}`;
+    }
+    onChange({ value: settingsValue(nic, 'binding'), validation }, 'binding');
+
+    if (get(newValue, 'value.networkType') === NETWORK_TYPE_POD) {
+      // reset mac value
+      onChange({ value: '' }, 'mac');
+    }
   }
+
   onChange(newValue, key);
+  return changeValid;
 };
 
-export const CreateNicRow = ({ nic, onAccept, onCancel, onChange, networks, LoadingComponent }) => (
-  <CreateDeviceRow
-    onAccept={onAccept}
-    onCancel={onCancel}
-    onChange={(newValue, key) => onFormChange(newValue, key, onChange)}
-    device={nic}
-    LoadingComponent={LoadingComponent}
-    columnSizes={columnSizes}
-    deviceFields={getNicColumns(nic, networks, LoadingComponent)}
-  />
-);
+export const CreateNicRow = ({ nic, onAccept, onCancel, onChange, networks, LoadingComponent }) => {
+  const fields = getNicColumns(nic, networks, LoadingComponent);
+  return (
+    <CreateDeviceRow
+      onAccept={onAccept}
+      onCancel={onCancel}
+      onChange={(newValue, key, valid) => onFormChange(nic, fields, newValue, key, valid, onChange)}
+      device={nic}
+      LoadingComponent={LoadingComponent}
+      columnSizes={columnSizes}
+      deviceFields={fields}
+    />
+  );
+};
 
 CreateNicRow.propTypes = {
   nic: PropTypes.object.isRequired,

src/components/CreateNicRow/tests/__snapshots__/CreateNicRow.test.js.snap

@@ -4,16 +4,56 @@ exports[`<CreateNicRow /> renders correctly 1`] = `
 <CreateDeviceRow
   LoadingComponent={[Function]}
   columnSizes={
-    Object {
-      "lg": 3,
-      "md": 3,
-      "sm": 3,
-      "xs": 3,
-    }
+    Array [
+      Object {
+        "lg": 3,
+        "md": 3,
+        "sm": 3,
+        "xs": 3,
+      },
+      Object {
+        "lg": 3,
+        "md": 3,
+        "sm": 3,
+        "xs": 3,
+      },
+      Object {
+        "lg": 2,
+        "md": 2,
+        "sm": 2,
+        "xs": 2,
+      },
+      Object {
+        "lg": 2,
+        "md": 2,
+        "sm": 2,
+        "xs": 2,
+      },
+      Object {
+        "lg": 2,
+        "md": 2,
+        "sm": 2,
+        "xs": 2,
+      },
+    ]
   }
   device={Object {}}
   deviceFields={
     Object {
+      "binding": Object {
+        "choices": Array [
+          "masquerade",
+          "bridge",
+          "sriov",
+        ],
+        "defaultValue": "--- Select binding ---",
+        "disabled": undefined,
+        "id": "binding",
+        "required": true,
+        "title": "Binding method",
+        "type": "dropdown",
+        "validate": [Function],
+      },
       "mac": Object {
         "disabled": false,
         "id": "mac-address",
@@ -41,6 +81,7 @@ exports[`<CreateNicRow /> renders correctly 1`] = `
         "disabled": false,
         "id": "network-type",
         "required": true,
+        "title": "Network",
         "type": "dropdown",
       },
     }

src/components/Form/FormFactory.js

@@ -270,7 +270,7 @@ export const ListFormFactory = ({ fields, fieldsValues, onFormChange, actions, c
   const form = formGroups.map((formGroup, index) => (
     <Col
       key={`col-${index}`}
-      {...columnSizes}
+      {...(Array.isArray(columnSizes) ? columnSizes[index] : columnSizes)}
       className={classNames('kubevirt-list-form-factory__column', {
         'kubevirt-list-form-factory__column--last': index === formGroups.length - 1,
       })}
@@ -296,7 +296,7 @@ ListFormFactory.propTypes = {
   fieldsValues: PropTypes.object.isRequired,
   onFormChange: PropTypes.func.isRequired,
   actions: PropTypes.object.isRequired,
-  columnSizes: PropTypes.object.isRequired,
+  columnSizes: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   showLabels: PropTypes.bool,
 };
 

src/components/Wizard/CreateVmWizard/CreateVmWizard.js

@@ -35,6 +35,7 @@ import {
   NAMESPACE_KEY,
   PROVIDER_VMWARE_VM_KEY,
   INTERMEDIARY_STORAGE_TAB_KEY,
+  NETWORK_BINDING_MASQUERADE,
 } from './constants';
 
 import {
@@ -264,6 +265,7 @@ const podNetwork = {
   editable: true,
   edit: false,
   networkType: NETWORK_TYPE_POD,
+  binding: NETWORK_BINDING_MASQUERADE,
 };
 
 export class CreateVmWizard extends React.Component {

src/components/Wizard/CreateVmWizard/NetworksTab.js

@@ -6,6 +6,7 @@ import { TableFactory } from '../../Table/TableFactory';
 import { ACTIONS_TYPE, DELETE_ACTION } from '../../Table/constants';
 import { POD_NETWORK, PROVISION_SOURCE_PXE } from '../../../constants';
 import { getValidationObject } from '../../../utils/validations';
+import { getNetworkBindings } from '../../../utils/utils';
 import { NETWORK_TYPE_POD, NETWORK_TYPE_MULTUS } from './constants';
 
 import {
@@ -23,7 +24,10 @@ import {
   HEADER_MAC,
   HEADER_NAME,
   HEADER_NETWORK,
+  HEADER_BINDING_METHOD,
+  SELECT_BINDING,
 } from './strings';
+import { getInterfaceBinding } from '../../../selectors';
 
 const validateNetwork = network => {
   const errors = Array(4).fill(null);
@@ -106,6 +110,7 @@ const resolveInitialNetworks = (networks, networkConfigs, namespace, sourceType)
         editable: true,
         edit: false,
         networkType,
+        binding: getInterfaceBinding(templateNetwork.interface),
       };
     }
     return {
@@ -138,7 +143,7 @@ export class NetworksTab extends React.Component {
   publishResults = rows => {
     let valid = this.props.sourceType === PROVISION_SOURCE_PXE ? rows.some(row => row.isBootable) : true;
     const nics = rows.map(
-      ({ templateNetwork, rootNetwork, id, isBootable, name, mac, network, errors, networkType }) => {
+      ({ templateNetwork, rootNetwork, id, isBootable, name, mac, network, errors, networkType, binding }) => {
         const result = {
           id,
           isBootable,
@@ -148,6 +153,7 @@ export class NetworksTab extends React.Component {
           errors,
           networkType,
           rootNetwork,
+          binding,
         };
 
         if (templateNetwork) {
@@ -206,6 +212,7 @@ export class NetworksTab extends React.Component {
           name: `nic${state.nextId - 1}`,
           mac: '',
           network: '',
+          binding: '',
         },
       ],
     }));
@@ -218,7 +225,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_NAME,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -233,7 +240,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_MAC,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -251,7 +258,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_NETWORK,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -267,6 +274,23 @@ export class NetworksTab extends React.Component {
           initialValue: SELECT_NETWORK,
         }),
       },
+      {
+        header: {
+          label: HEADER_BINDING_METHOD,
+          props: {
+            style: {
+              width: '24%',
+            },
+          },
+        },
+        property: 'binding',
+        renderConfig: nic => ({
+          id: 'binding-edit',
+          type: DROPDOWN,
+          choices: getNetworkBindings(nic.networkType),
+          initialValue: SELECT_BINDING,
+        }),
+      },
     ];
 
     if (!this.props.isCreateRemoveDisabled) {