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