Add binding type to NICs

src/components/CreateDeviceRow/CreateDeviceRow.js

@@ -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/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 {

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, getDefaultNetworkBinding } 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) {
@@ -173,15 +179,19 @@ export class NetworksTab extends React.Component {
     this.setState({ rows, editing: true });
   };
 
-  onRowUpdate = (rows, updatedRowId, editing) => {
+  onRowUpdate = (rows, updatedRowId, editing, property, newValue) => {
     const updatedRow = rows.find(r => r.id === updatedRowId);
     if (updatedRow.isBootable && updatedRow.network === POD_NETWORK) {
       updatedRow.isBootable = false;
     }
-    if (updatedRow.network === POD_NETWORK) {
-      updatedRow.networkType = NETWORK_TYPE_POD;
-    } else {
-      updatedRow.networkType = NETWORK_TYPE_MULTUS;
+    if (property === 'network') {
+      if (newValue === POD_NETWORK && updatedRow.networkType !== NETWORK_TYPE_POD) {
+        updatedRow.networkType = NETWORK_TYPE_POD;
+        updatedRow.binding = getDefaultNetworkBinding(NETWORK_TYPE_POD);
+      } else if (updatedRow.networkType !== NETWORK_TYPE_MULTUS) {
+        updatedRow.networkType = NETWORK_TYPE_MULTUS;
+        updatedRow.binding = getDefaultNetworkBinding(NETWORK_TYPE_MULTUS);
+      }
     }
     updatedRow.errors = validateNetwork(updatedRow);
     this.rowsChanged(rows, editing);
@@ -206,6 +216,7 @@ export class NetworksTab extends React.Component {
           name: `nic${state.nextId - 1}`,
           mac: '',
           network: '',
+          binding: '',
         },
       ],
     }));
@@ -218,7 +229,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_NAME,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -233,7 +244,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_MAC,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -251,7 +262,7 @@ export class NetworksTab extends React.Component {
           label: HEADER_NETWORK,
           props: {
             style: {
-              width: '32%',
+              width: '24%',
             },
           },
         },
@@ -267,6 +278,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) {