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

@@ -5,20 +5,36 @@ import { get } from 'lodash';
 import { CreateDeviceRow } from '../CreateDeviceRow';
 import { getName, getNetworks, getInterfaces } from '../../selectors';
 import { validateDNS1123SubdomainValue } from '../../utils/validations';
+import { getNetworkBindings, getDefaultNetworkBinding } 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,15 @@ 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,
+    },
     mac: {
       id: 'mac-address',
       title: HEADER_MAC,
@@ -102,25 +129,39 @@ 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, newValue, key, onChange) => {
+  if (key === 'network' && get(settingsValue(nic, 'network'), 'networkType') !== get(newValue, 'value.networkType')) {
+    switch (get(newValue, 'value.networkType')) {
+      case NETWORK_TYPE_POD:
+        onChange({ value: getDefaultNetworkBinding(NETWORK_TYPE_POD) }, 'binding');
+        // reset mac value
+        onChange({ value: '' }, 'mac');
+        break;
+      case NETWORK_TYPE_MULTUS:
+        onChange({ value: getDefaultNetworkBinding(NETWORK_TYPE_MULTUS) }, 'binding');
+        break;
+      default:
+        break;
+    }
   }
+
   onChange(newValue, key);
 };
 
-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) => onFormChange(nic, newValue, key, 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,55 @@ 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",
+      },
       "mac": Object {
         "disabled": false,
         "id": "mac-address",
@@ -41,6 +80,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/Table/EditableDraggableTable.js

@@ -124,6 +124,8 @@ class EditableDraggableTable extends React.Component {
         type: ON_CHANGE,
         id,
         editing,
+        key: property,
+        newValue: value,
       });
     },
   };

src/components/Table/TableFactory.js

@@ -5,15 +5,15 @@ import { Button, ButtonGroup, Alert } from 'patternfly-react';
 import { default as EditableDraggableTable } from './EditableDraggableTable';
 import { ON_CONFIRM, ON_DELETE, ON_MOVE, ON_CANCEL, ON_CHANGE, ON_ACTIVATE } from './constants';
 
-const onChange = (rows, { editing, type, id }, onRowUpdate, onRowDeleteOrMove, onRowActivate) => {
+const onChange = (rows, { editing, type, id, key, newValue }, onRowUpdate, onRowDeleteOrMove, onRowActivate) => {
   switch (type) {
     case ON_ACTIVATE:
       onRowActivate(rows);
       break;
     case ON_CONFIRM:
     case ON_CANCEL:
     case ON_CHANGE:
-      onRowUpdate(rows, id, editing);
+      onRowUpdate(rows, id, editing, key, newValue);
       break;
     case ON_DELETE:
     case ON_MOVE:

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 {