{"id":9675,"date":"2016-01-29T16:01:44","date_gmt":"2016-01-29T14:01:44","guid":{"rendered":"http:\/\/blog.zhaw.ch\/icclab\/?p=9675"},"modified":"2016-12-12T11:24:27","modified_gmt":"2016-12-12T09:24:27","slug":"gui-for-netfloc","status":"publish","type":"post","link":"https:\/\/blog.zhaw.ch\/icclab\/gui-for-netfloc\/","title":{"rendered":"GUI for Netfloc – An OpenSource SDK for SDN"},"content":{"rendered":"

Inside the Software Defined Networking initiative we are developing a Software Development Kit for SDN, called Netfloc.<\/span><\/span><\/span><\/span><\/p>\n

NET<\/span><\/span><\/span><\/span><\/strong>work\u00a0<\/span><\/span><\/span><\/span>FLO<\/span><\/span><\/span><\/span><\/strong>ws for\u00a0<\/span><\/span><\/span><\/span>C<\/span><\/span><\/span><\/span><\/strong>louds (Netfloc) is a programmable framework solution for software defined datacenter networks. It leverages network management by offering to the network developers a set of libraries packed as Java bundles for the OpenDaylight controller. Netfloc also exposes REST API abstractions and Java interfaces to enable optimal integration in cloud datacenters and customized end-to-end management of OpenFlow equipment. For references and current status, please feel free to visit the\u00a0<\/span><\/span><\/span><\/span>Github repository.<\/u><\/span><\/span><\/span><\/span><\/a>\u00a0We will come back with a detailed post on the SDK very soon, so stay tuned.<\/span><\/span><\/span><\/span><\/p>\n

And yes being the networking guys, we are mainly dealing with command line management in the whole process of development and testing. But only until to date, when we realized that\u00a0it is time to\u00a0think as well of\u00a0the UX side and start a design process for a graphical user interface (GUI) for Netfloc.<\/span><\/span><\/span><\/span><\/p>\n

<\/p>\n

The aim of the GUI is to not only make the SDK itself easy to use (display all relevant network data and topology), but also to expose the entire\u00a0set of APIs and functional features and make them accessible to the network application developers and datacenter service providers. The GUI will provide a visual representation of the complete networking topology: networking nodes, switches, links, respective OpenFlow identifiers etc., as well as the available libraries for developing a complete end-to-end solution. It will guide the user towards performing operations within the network in an easy and intuitive manner.\u00a0Since the GUI will be a modular component, adding new features will be done in an easy plug-n-play fashion.<\/span><\/span><\/span><\/span><\/p>\n

To be aligned with the existing solutions on the market and with the open source community, we have observed the current GUIs for SDN SDKs to figure out the gaps and the requirements from a user perspective and potentially address them within the Netfloc GUI. Just to mention few, HP and Cisco have GUIs for their\u00a0<\/span><\/span><\/span><\/span>HP VAN SDN<\/u><\/span><\/span><\/span><\/span><\/a>\u00a0and\u00a0<\/span><\/span><\/span><\/span>onePK<\/u><\/span><\/span><\/span><\/span>\u00a0<\/span><\/span><\/span><\/span><\/a>SDN solutions respectively, while the EU project\u00a0<\/span><\/span><\/span><\/span>netIDE<\/u><\/span><\/span><\/span><\/span><\/a>\u00a0has delivered an open source,\u00a0<\/span><\/span><\/span><\/span>Eclipse-integrated IDE<\/u><\/span><\/span><\/span><\/span><\/a>\u00a0for the development of SDN applications.<\/span><\/span><\/span><\/span><\/p>\n

Figure 1 shows how the HP developed SDK\u2019s interface looks like. It helps to simply set up a developer environment and to create applications on the top of their own SDN controller (HP VAN SDN Controller). The design reminds a bit of the Openstack Dashboard in terms of simplistic tabular organization of the applications in the left menu, and a content representation of the currently selected application\/feature on the right.<\/span><\/span><\/span><\/span><\/p>\n

\"hp_sdk_gui\"<\/a>[Fig 1 \u2013 HP VAN SDN Controller GUI]<\/span><\/span><\/span><\/span><\/p>\n

The OpenDaylight GUI, Figure 2, looks quite similar to the one from HP and it is also a very good example on how our GUI could look like at the end, exposing the underlying network topology, the connections between the nodes and their assigned Open Flow identifiers.<\/span><\/span><\/span><\/span><\/p>\n

\"odl_gui\"<\/a>[Fig 2 \u2013 OpenDaylight Dlux]<\/span><\/span><\/span><\/span><\/p>\n

Although the final representation is very similar across solutions, the idea under the hood is different. The GUI we are working on is based on the Netfloc\u2019s native libraries and applications that are tightly coupled to the networking model and concepts offered in the SDK. We want to develop a dedicated GUI for Netfloc, but also to enable the addition of new extensions in a uniform manner.<\/span><\/span><\/span><\/span><\/p>\n

From toolset for this development we use: HTML, CSS, JavaScript and\u00a0<\/span><\/span><\/span><\/span>Angularjs<\/u><\/span><\/span><\/span><\/span><\/a>. <\/strong>AngularJS is a structural framework used for the development of dynamic Web applications. It is browser-based and works with any server technology. AngularJS can be used with HTML as a template language and its syntax can be extended to express the components of an application in a clear way. Due to\u00a0dependency injection and data binding, AngularJS is able to reduce a lot of the code you would otherwise have to write.<\/span><\/span><\/span><\/span><\/p>\n

\"netfloc_gui_diagram\"<\/a><\/p>\n

[Fig 3 \u2013 High level diagram of Netfloc SDK & GUI ]<\/span><\/span><\/span><\/span><\/p>\n

Figure 3 shows a diagram of the Netfloc components and their relations to the GUI. The top level navigation from the GUI will include a list of services offered as a final product solutions (ex. Service Function Chaining). Other view will be dedicated to the features such as: topology (including API specification and possibility to edit), connections, bridges etc. Log and monitoring status will be included in the management view. Bellow are listed some of the features currently offered by the SDK.<\/span><\/span><\/span><\/span><\/p>\n

Services:\u00a0\u00a0<\/span><\/span><\/span><\/span><\/strong><\/p>\n