Networking UX
Contents |
Adding a network
Currently adding a network is a two part process. First you provided the basic detials, then you can select the network from the list and click Edit Routing Info. This design seeks to marry these two into one flow.
Step 1 - basics
- Fields re-ordered to match the order in the details pane
- Usage selection changed to checkboxes. This is optional, since these are essentially categories.
- Form buttons now arranged for a wizard. Note that primary commit button is on far right (this is a bug in all the form dialogs right now.)
- Tip about next step is shown in the buttonbar. Alternatively we could show step 1 of 2 in the header.
Step 2 - routing info
Assumptions
- The goal is to let users specify specific IP addresses or ranges of IP addresses to make them available to host and VM NICs on this network.
- Routing info is applicable to Physical and VLAN type networks. If this isnt true, then the previous panel should not direct you to this panel.
- Defining routing info is applicable to all all boot types. If this isn't true, then the previous panel should not direct you to this panel when DHCP or BootP is chosen.
- You can define routings for ipv4 and ipv6 in the same network.
- Question - what does this mean for IP addresses that are not specified here - are they simply not available? In ther words, is it required to set up at least one IP address here before the network is usable?
My understanding of this function is that the user could specify the following:
- individual IP addresses + associated netmask, broadcast, and gateway (ipv4)
- (New) range of IP addresses + associated netmask, broadcast, and gateway (ipv4)
- ipv6 is presumably the same, with prefix and gateway.
In this dialog the user can review the routings that have been defined on the left. On the right are the editable details of the selected routing. Using the control beneath this list, the user add and delete.
Notes
- I'm certain this is not completely accurate!
- The second panel would be further simplified if we only honor one routing
- If this is always a two step form I would make the header say "Step 1 of 2", etc.
- This could potentially be combined into one form, at least for the edit form.
Editing network devices on a host/node
These designs are based on the assumption that the primary goal when Editing network devices on a node is to work with the list of available NICs.
Assumptions and requirements
- Each NIC can either be associated with a network as a standalone device, or participate in a Bonded Interface device, but never both.
- A host can only have one device (bonding or NIC) per network. So if you want multiple nics on a network, you would create a bonding for those nics and assign that to the network.
Open issue:
- Currently NICs can only connect to physical networks, and Bonded interfaces can only connect to VLANs.
Examples
Let's say you have 4 NICs on a node. It is possible to have any of these cases:
- each NIC on a different network
- two NICs bonded as one device on one network, the remaining two individually connected to two other networks
- two NICs bonded as one device on one network, the remaining two bonded as one device on another network
- All four NICs bonded as one device on one network
In both of the options below, the sample node has 4 NICs. Two are part of a bonded interface, and two are independent. Two bonded interfaces exist (foobond, barbond). Barbond is not connected to any network and has no NICs.
Mockups
Given the above, two approaches have been mocked up for consideration.
Option 1
In this option, the emphasis is on assigning NICs to networks and Bonded Interfaces. Working with Bonded Interfaces is secondary.
NICs are displayed in a grid, and if any Bonded Interfaces exist, they are listed below the NICs grid. Users can Select one or more NICs and choose the following actions:
Connect to Network >
- Each available network is displayed in the action menu. Making a selection will assign the network to the selected NIC.
- If more than one NIC is selected we could ask the user if they want to create a bonded interface, if yes go to the bonded interfaces screen, if not the action is not allowed.
- If a NIC that is part of a bonded interface is chosen we could offer to edit the bonded interface
- If a mix of free and bonded NICs are chosen we need to handle this gracefully
- We should not let users assign to a network that is already in use by any device on the node.
Add to Bonded Interface >
- Each available bonded interface is displayed in the action menu.
- An option to Create a new Bonded Interface should be shown at the bottom of the menu after a divider.
- We should handle any conflicts gracefully
When the user clicks on Edit Bonded Interfaces they are presented with this dialog. It is important to note that when they are done editing Bonded interfaces, they should return to the NICs dialog.
Notes on this screen:
- One area for refinement is how to select NICs in this screen. In this design only NICs that are part of this bonded interface are listed in the box on the right. Clicking + would present a way to pick from among the other (available?) NICs on this node. This might be too heavy, but the intent is to make it clearer how NICs are being used. So when they choose NICs to add to a boncded interface, it should be clear if the NICs are in use by other bondings, etc.
While this option makes some actions faster, this UI is more complex than option 2.
Option 2
In this option, the user can view a list of NICs in one tab, and a list of Bonded Interfaces in the other.
Notes on this screen:
- With a selectbox style list of NICs, you have the advantage of seeing them all at once, but you cannot see anything about how they are used without clicking on them.
In the Bonded Interfaces tab, the user can create, edit and delete Bonded Interfaces. This is essentially the same as in Option 1.
Option 3
This option puts the emphasis of the list on managaging network devices (not as NIC-centric) and is a one-screen solution.
Edit network devices:
- User can see all network devices, NICs, and connected networks at a glance
- User can quickly reassign networks
- Click Edit (pencil) and a form appears inline to work with the details of a bonded interface. For delete (trashcan), a confirmation appears (user stays on this dialog, however).
- Adding a new bonded interface is done by clicking the button at the bottom of the Devices list.
Adding a new bonded interface:
- Form for new bonded interface appears inline at the bottom of the list
- This same inline form is used if you edit an existing bonded interface









