Graphicaleditor
The graphical editor allows users to edit their topology, manage the topology elements and access the devices. It is completely written in Javascript, so a compatible browser with activated Javascript is needed.
All actions on the topology are immediately executed, there is no save button or undo button.
The interface of the editor has two major parts. The first part is the palette on the left that contains all usable network elements, the wizard, the auto-layout button, and the remove button. The second part is the working area in the middle where the topology is displayed.
Elements can be added to the topology by dragging the matching prototype element from the palette into the working area. The element will be created at the position where it has been dragged to. Elements can be moved simply with drag and drop. Single elements can be selected by clicking on them. To select multiple elements the shift key must be pressed while clicking on them. Users can select all elements inside an area by drawing a rectangle around them. To remove an element from the working area and thus from the topology the element must be selected and then the remove button in the palette must be clicked.
To connect elements, first the source element(s) must be selected. This element(s) can be connected to a matching element by holding the control key while clicking on the element. New connection(s) will be created between the connected elements. This means that per connection a new interface on the device will be created and then connected to the connector.
Note:
- When a device is to be connected to another device a switch is automatically created between them and connected with both devices.
- Connectors can only be connected with devices and not with other connectors.
- Interfaces are bound to the connection, there are no unconnected interfaces and no connections without interface.
- The connection can be removed like any other element by selecting it (on the handle) and clicking on the remove button.
All elements have an associated property dialog that can be accessed by double-clicking the element. In this dialog, various properties of the element can be changed. Text fields often offer a syntax check: if the contents of the field are invalid the text will be colored red.
The control panel allows users to execute various actions on the selected element. Connectors and devices can be prepared, destroyed, started and stopped with the four buttons shown in the picture. Depending on the type of the element additional actions like image upload and download, capture download etc. are available in this dialog.
All interfaces of OpenVZ devices are automatically preconfigured with the following properties:
- Every connector will be given its own 10.x.y.z/16 subnet so that all connectors have different networks. Switches and hubs will have a simple flat network where all interfaces will get a uniq ip address in their subnet so that all devices can communicate.
- Every interface on a router will have its own /24 subnet in the /16 subnet of the router. The interface will have the ip address ending in 1 and the gateway will be configured to have the ip address ending in a 254 so that all devices on the router can communicate if the routes are configured properly.
- Interfaces connected to external network connectors like the internet are configured to use DHCP to obtain an address.
The wizard can be started by clicking on the widard icon in the palette. The wizard will open and properties of the new topology can be changed. If devices have been selected before opening the wizard, these devices will be used to create the topology and the settings for new devices are greyed out. If no devices have been selected, the devices will be created by the wizard. After configuring the wizard, the area to create new devices must be selected by dragging and resizing a frame. When the create button i pressed all the devices will be created and connected according to the selected topology.
Topologies can be automatically laid out with the auto-layout button in the palette. The auto-layout uses a spring force model where all elements repel each others with a force depending on the distance. Connected elements also attract each other with a constant force.