manuals/user-guide/src/main/asciidoc/ch-dlux-userguide.adoc

   1 == Using the OpenDaylight User Interface (DLUX)
   2
   3 This section introduces you to the OpenDaylight User Experience (DLUX) application.
   4
   5 === Getting Started with DLUX
   6
   7 DLUX provides a number of different Karaf features, which you can enable and disable separately. In Lithium they are:
   8 . odl-dlux-core
   9 . odl-dlux-node
  10 . odl-dlux-yangui
  11 . odl-dlux-yangvisualizer
  12
  13 === Logging In
  14
  15 To log in to DLUX, after installing the application:
  16
  17 . Open a browser and enter the login URL http://<your-karaf-ip>:8181/index.html in your browser (Chrome is recommended).
  18 . Login to the application with user ID and password credentials as *admin*.
  19
  20 NOTE: admin is the only user type available for DLUX in this release.
  21
  22 === Working with DLUX
  23
  24 After you login to DLUX, if you enable only odl-dlux-core feature, you will see only topology application available in the left pane.
  25
  26 NOTE: To make sure topology displays all the details, enable the odl-l2switch-switch feature in Karaf.
  27
  28 DLUX has other applications such as node, yang UI and those apps won't show up, until you enable their features odl-dlux-node and odl-dlux-yangui respectively in the Karaf distribution.
  29
  30 .DLUX Modules
  31 image::dlux-login.png["DLUX Page",width=500]
  32
  33 NOTE: If you install your application in dlux, they will also show up on the left hand navigation after browser page refresh.
  34
  35 === Viewing Network Statistics
  36
  37 The *Nodes* module on the left pane enables you to view the network statistics and port information for the switches in the network. +
  38
  39 To use the *Nodes* module:
  40
  41 '''
  42
  43 . Select *Nodes* on the left pane.
  44         The right pane displays atable that lists all the nodes, node connectors and the statistics.
  45 . Enter a node ID in the *Search Nodes* tab to search by node connectors.
  46 . Click on the *Node Connector* number to view details such as port ID, port name, number of ports per switch, MAC Address, and so on.
  47 . Click *Flows* in the Statistics column to view Flow Table Statistics for the particular node like table ID, packet match, active flows and so on.
  48 . Click *Node Connectors* to view Node Connector Statistics for the particular node ID.
  49
  50 '''
  51
  52 === Viewing Network Topology
  53
  54 The Topology tab displays a graphical representation of network topology created.
  55
  56 NOTE: DLUX UI does not provide ability to add topology information. The Topology should be created using an OpenFlow plugin. Controller stores this information in the database and displays on the DLUX page, when the you connect to the controller using OpenFlow.
  57
  58 To view network topology:
  59
  60 '''
  61
  62 . Select *Topology* on the left pane. You will view the graphical representation on the right pane.
  63         In the diagram blue boxes represent the switches, the black represents the hosts available, and lines represents how switches are connected.
  64 . Hover your mouse on hosts,links, or switches to view source and destination ports.
  65 . Zoom in and zoom out using mouse scroll to verify topology for huge topologies.
  66
  67 '''
  68
  69 .Topology Module
  70 image::dlux-topology.png["DLUX Topology Page",width=500]
  71
  72 === Interacting with OpenDaylight
  73
  74 The *Yang UI* module enables you to interact with the ODL. For more information about Yang Tools, see https://wiki.opendaylight.org/view/YANG_Tools:Main [YANG_Tools].
  75
  76 .Yang UI
  77 image::dlux-yang-ui-screen.png["DLUX Yang UI Page",width=500]
  78
  79 To use Yang UI:
  80
  81 '''
  82
  83 . Select *Yang UI* on the left pane. The right pane is divided in two parts.
  84
  85 . The top part displays a tree of APIs and subAPIs and buttons to call possible functions (GET, POST, PUT, DELETE, …). Not every subAPIs can call every function.
  86    For example, subAPIs “operational” have GET functionality only.
  87         Inputs can be filled from ODL when existing data from ODL is displayed or can be filled by user on the page and sent to ODL. +
  88         +
  89         Buttons under the API tree are variable. It depends on subAPI specifications. Common buttons are: +
  90          * GET to get data from ODL,
  91          * PUT and POST for sending data to ODL for saving
  92          * DELETE for sending data to ODL for deleting. +
  93          You must specify the xpath for all these operations. This path is displayed in the same row before buttons and it can include text inputs for specific path elements identifiers. +
  94 +
  95
  96 .Yang API Specification
  97 image::dlux-yang-api-specification.png["DLUX Yang UI API Specification Page",width=500]
  98
  99 . The bottom part of the right pane displays inputs according to the chosen subAPI. Every subAPI is represented by list elements of list statement. It is possible to have a many list elements of one list. +
 100     +
 101         For example, a device can store multiple flows. In this case “flow” is name of the list and every list element is different by a key value. List element of list can obtain other lists.
 102         Every list element has a list name, a key name and its value, and a button for removing this list element. Usually the key of the list statement obtains an ID.
 103         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. +
 104 +
 105
 106 .Yang UI API Specification
 107 image::dlux-yang-sub-api-screen.png["DLUX Yang UI Sub API Specification Page",width=500]
 108
 109 . Click *Show Preview* button under API tree to display request that will be sent to ODL.
 110    A pane is displayed on the right side with text of request when some input is filled.
 111
 112 '''
 113
 114 ==== Displaying Topology on the *Yang UI*
 115
 116 To display topology:
 117
 118 '''
 119
 120 . Select subAPI network-topology <topology revision number> -> operational -> network-topology.
 121 . Get data from ODL by clicking on the “GET” button.
 122 . Click *Display Topology*.
 123
 124 .DLUX Yang Topology
 125 image::dlux-yang-topology.png["DLUX Yang Topology Page",width=500]
 126
 127 '''
 128
 129 ==== Configuring List Elements on the *Yang UI*
 130
 131 The list is displayed like tree structure with possibility to expand or collapse by the arrow before name of the list. To configure list elements on the Yang UI:
 132
 133 '''
 134
 135 . To add a new list element with empty inputs use the plus icon-button **+** that is provided after list name. When some list element is added, button with his name and key value is displayed. +
 136 . To remove several list elements, use the *X* button that is provided after every list element.
 137 +
 138
 139 .DLUX List Elements
 140 image::dlux-yang-list elements.png[DLUX list elements,width=500]
 141 . 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 warning icon *!* is displayed near their name buttons.
 142 +
 143
 144 .DLUX List Warnings
 145 image::dlux-yang-list-warning.png[DLUX list warnings,width=500]
 146 . When the list obtains at least one list element, after *+* icon is icon for selecting the list element displayed. You can choose one of them by clicking the icon. The name button of the list element and name buttons of its neighbours will be displayed in the row list. You can can forward or backward row list of list elements name buttons by clicking on the arrow button on the end of row.
 147 +
 148
 149 .DLUX List Button1
 150 image::dlux-yang-list-button1.png[DLUX list button1,width=500]
 151
 152 '''