Design of main page
The ODL application main page consists of main menu on the left side and main page of specific application on the right side. The Yang UI application main page is divided to two main parts. (picture 1)
- 0. part - To install the Yang UI, you need to first, install the controller (or build) it from an RC2 or greater build. Next install the following module from within the Karaf console:
opendaylight-user@root> feature:install odl-l2switch-switch-ui
Now open your browser at the correct URL: http://localhost:8181/dlux/index.html
NOTE: The port change to 8181 from port 9000 which is shown in the figures.
- 1. part - on the top part is displayed tree of APIs and subAPIs and buttons for calling of possible functions (GET, POST, PUT, DELETE, …) when some subAPI is selected (picture 2). User can work with tree by clicking on plus or minus icon which expands or collapses node in the tree. By clicking on one node label he can select specific subAPI. Button “Expand all” expands all nodes and changes itself to “Collapse all” to make it possibility to collapse all nodes. Next button “Collapse others” collapses all expanded nodes except selected node.
Buttons under tree are variable. It depends on subAPI specification. Common buttons are GET to get data from ODL, PUT and POST for sending data to ODL for saving, and DELETE for sending data to ODL for deleting. For all this operations specification of xpath is required. This path is displayed in the same row before buttons and it can include text inputs for specific path elements identifiers. (picture 3)
- 2. part - on the bottom part are displayed inputs according chosen subAPI. Every subAPI is represented by list elements of list statement. It is possible to have a many list elements of one list. For example, on some device can be stored many flows. In this case “flow” is name of list and every list element is different by key value. List element of list can obtain other lists. Every list element has in upper part button with the list name and the key name and its value, and button for removing this list element. Usually the key of the list statement obtains ID. Inputs can be filled from ODL using GET button from xpath part, or can be filled by user on the page and sent to ODL. (picture 4)
For displaying request which will be sent to ODL user can click on the button “Show preview” under API tree. It displays white little window on the right side with text of request when some input is filled. (picture 5)
For displaying topology user can select subAPI network-topology rev.2013-10-21 -> operational -> network-topology, get data from ODL by clicking on the “GET” button and after click on the button “Display topology”. This action displays in the front new window with graph. (picture 6)
Working with list
The list is displayed like tree structure with possibility to expand or collapse by the arrow before name of the list. At the same row after list name is icon-button “plus” for adding a new list element with empty inputs. When some list element is added, button with his name and key value is displayed. After every list element button is icon-button “x” for removing several list element. (picture 7)
Key of list is one or more inputs, which are used like identifier of list element. All list elements in one list must have different key values. If some elements has the same key values, the new icon “!” is displayed near their name buttons. (picture 8)
When list obtains at least one list element, after “plus” icon is icon for select of list element displayed. User can choose one of them by click. Then its name button and name buttons of its neighbours will be displayed in the row list. User can forward or backward row list of list elements name buttons by arrow button on the end of row. (picture 9)