docs/user-guide/using-the-opendaylight-user-interface-(dlux).rst

   1 Using the OpenDaylight User Interface (DLUX)
   2 ============================================
   3
   4 This section introduces you to the OpenDaylight User Experience (DLUX)
   5 application.
   6
   7 Getting Started with DLUX
   8 -------------------------
   9
  10 DLUX provides a number of different Karaf features, which you can enable
  11 and disable separately. In Beryllum they are: . odl-dlux-core .
  12 odl-dlux-node . odl-dlux-yangui . odl-dlux-yangvisualizer
  13
  14 Logging In
  15 ----------
  16
  17 To log in to DLUX, after installing the application:
  18
  19 1. Open a browser and enter the login URL
  20    http://<your-karaf-ip>:8181/index.htm
  21    in your browser (Chrome is recommended).
  22
  23 2. Login to the application with your username and password credentials.
  24
  25 .. note::
  26
  27     OpenDaylight’s default credentials are *admin* for both the username
  28     and password.
  29
  30 Working with DLUX
  31 -----------------
  32
  33 After you login to DLUX, if you enable only odl-dlux-core feature, you
  34 will see only topology application available in the left pane.
  35
  36 .. note::
  37
  38     To make sure topology displays all the details, enable the
  39     odl-l2switch-switch feature in Karaf.
  40
  41 DLUX has other applications such as node, yang UI and those apps won’t
  42 show up, until you enable their features odl-dlux-node and
  43 odl-dlux-yangui respectively in the Karaf distribution.
  44
  45 .. figure:: ./images/dlux-login.png
  46    :alt: DLUX Modules
  47
  48    DLUX Modules
  49
  50 .. note::
  51
  52     If you install your application in dlux, they will also show up on
  53     the left hand navigation after browser page refresh.
  54
  55 Viewing Network Statistics
  56 --------------------------
  57
  58 The **Nodes** module on the left pane enables you to view the network
  59 statistics and port information for the switches in the network.
  60
  61 To use the **Nodes** module:
  62
  63 1. Select **Nodes** on the left pane. The right pane displays atable
  64    that lists all the nodes, node connectors and the statistics.
  65
  66 2. Enter a node ID in the **Search Nodes** tab to search by node
  67    connectors.
  68
  69 3. Click on the **Node Connector** number to view details such as port
  70    ID, port name, number of ports per switch, MAC Address, and so on.
  71
  72 4. Click **Flows** in the Statistics column to view Flow Table
  73    Statistics for the particular node like table ID, packet match,
  74    active flows and so on.
  75
  76 5. Click **Node Connectors** to view Node Connector Statistics for the
  77    particular node ID.
  78
  79 Viewing Network Topology
  80 ------------------------
  81
  82 The Topology tab displays a graphical representation of network topology
  83 created.
  84
  85 .. note::
  86
  87     DLUX does not allow for editing or adding topology information. The
  88     topology is generated and edited in other modules, e.g., the
  89     OpenFlow plugin. OpenDaylight stores this information in the MD-SAL
  90     datastore where DLUX can read and display it.
  91
  92 To view network topology:
  93
  94 1. Select **Topology** on the left pane. You will view the graphical
  95    representation on the right pane. In the diagram blue boxes represent
  96    the switches, the black represents the hosts available, and lines
  97    represents how the switches and hosts are connected.
  98
  99 2. Hover your mouse on hosts, links, or switches to view source and
 100    destination ports.
 101
 102 3. Zoom in and zoom out using mouse scroll to verify topology for larger
 103    topologies.
 104
 105 .. figure:: ./images/dlux-topology.png
 106    :alt: Topology Module
 107
 108    Topology Module
 109
 110 Interacting with the YANG-based MD-SAL datastore
 111 ------------------------------------------------
 112
 113 The **Yang UI** module enables you to interact with the YANG-based
 114 MD-SAL datastore. For more information about YANG and how it interacts
 115 with the MD-SAL datastore, see the *Controller* and *YANG Tools* section
 116 of the *OpenDaylight Developer Guide*.
 117
 118 .. figure:: ./images/dlux-yang-ui-screen.png
 119    :alt: Yang UI
 120
 121    Yang UI
 122
 123 To use Yang UI:
 124
 125 1. Select **Yang UI** on the left pane. The right pane is divided in two
 126    parts.
 127
 128 2. The top part displays a tree of APIs, subAPIs, and buttons to call
 129    possible functions (GET, POST, PUT, and DELETE).
 130
 131    .. note::
 132
 133        every subAPI can call every function. For example, subAPIs in
 134        the *operational* store have GET functionality only.
 135
 136    Inputs can be filled from OpenDaylight when existing data from
 137    OpenDaylight is displayed or can be filled by user on the page and
 138    sent to OpenDaylight.
 139
 140    Buttons under the API tree are variable. It depends on subAPI
 141    specifications. Common buttons are:
 142
 143    -  GET to get data from OpenDaylight,
 144
 145    -  PUT and POST for sending data to OpenDaylight for saving
 146
 147    -  DELETE for sending data to OpenDaylight for deleting.
 148
 149       You must specify the xpath for all these operations. This path is
 150       displayed in the same row before buttons and it may include text
 151       inputs for specific path element identifiers.
 152
 153       .. figure:: ./images/dlux-yang-api-specification.png
 154          :alt: Yang API Specification
 155
 156          Yang API Specification
 157
 158 3. The bottom part of the right pane displays inputs according to the
 159    chosen subAPI.
 160
 161    -  Lists are handled as a special case. For example, a device can
 162       store multiple flows. In this case "flow" is name of the list and
 163       every list element is identified by a unique key value. Elements
 164       of a list can, in turn, contain other lists.
 165
 166    -  In Yang UI, each list element is rendered with the name of the
 167       list it belongs to, its key, its value, and a button for removing
 168       it from the list.
 169
 170       .. figure:: ./images/dlux-yang-sub-api-screen.png
 171          :alt: Yang UI API Specification
 172
 173          Yang UI API Specification
 174
 175 4. After filling in the relevant inputs, click the **Show Preview**
 176    button under the API tree to display request that will be sent to
 177    OpenDaylight. A pane is displayed on the right side with text of
 178    request when some input is filled.
 179
 180 Displaying Topology on the **Yang UI**
 181 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 182
 183 To display topology:
 184
 185 1. Select subAPI network-topology <topology revision number> == >
 186    operational == > network-topology.
 187
 188 2. Get data from OpenDaylight by clicking on the "GET" button.
 189
 190 3. Click **Display Topology**.
 191
 192 .. figure:: ./images/dlux-yang-topology.png
 193    :alt: DLUX Yang Topology
 194
 195    DLUX Yang Topology
 196
 197 Configuring List Elements on the **Yang UI**
 198 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 199
 200 Lists in Yang UI are displayed as trees. To expand or collapse a list,
 201 click the arrow before name of the list. To configure list elements in
 202 Yang UI:
 203
 204 1. To add a new list element with empty inputs use the plus icon-button
 205    **+** that is provided after list name.
 206
 207 2. To remove several list elements, use the **X** button that is
 208    provided after every list element.
 209
 210    .. figure:: ./images/dlux-yang-list-elements.png
 211       :alt: DLUX List Elements
 212
 213       DLUX List Elements
 214
 215 3. In the YANG-based data store all elements of a list must have a
 216    unique key. If you try to assign two or more elements the same key, a
 217    warning icon **!** is displayed near their name buttons.
 218
 219    .. figure:: ./images/dlux-yang-list-warning.png
 220       :alt: DLUX List Warnings
 221
 222       DLUX List Warnings
 223
 224 4. When the list contains at least one list element, after the **+**
 225    icon, there are buttons to select each individual list element. You
 226    can choose one of them by clicking on it. In addition, to the right
 227    of the list name, there is a button which will display a vertically
 228    scrollable pane with all the list elements.
 229
 230    .. figure:: ./images/dlux-yang-list-button1.png
 231       :alt: DLUX List Button1
 232
 233       DLUX List Button1
 234