Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Overview

Tabular views show a tabular list of each type of information (devices, links, hosts, etc.) that is being viewed. An example of a tabular view (the Device View) is shown below:

Image Removed

You can make your own tabular view by following this tutorialdisplay information in table form, typically showing one item per row, and providing the ability to sort the rows by clicking on column headers. For example, the Device View is shown here:

Image Added

See this tutorial for details on how to develop a tabular view for your ONOS Application.

View Header

At the top of every tabular view , there is a header that displays the network component you are viewing, with how many of that component is connected. In this example, we are seeing devices, and there are 25 of them in totalproviding the table title on the left, and a set of control buttons on the right.

Control Buttons

On the right, there is an area for The control buttons . On all views, there is a refresh buttonprovide additional functionality for the table view. Most tables include a Refresh-enabled toggle button. Other buttons may also be provided, depending on the view.

Refresh ButtonImage ModifiedRefresh:

...

 Tables with this button auto-refresh every two seconds. Click on this button to

...

disable or enable the auto-refresh

...

feature.

Table Body

The body of the table is scrollable so you can view all components on the network. Your ; the column headers will remain in place while the table data scrolls underneath.

You may use your browser's Find/Search capabilities work in the view, so if you want to quickly find something in the table you can use . (Use Cmd-F (Mac) or for Mac OS,  or Ctrl-F (for Windows).

Table Columns

The column headers for each section in the table are sortable. Once any header is clicked on, table will be sorted in ascending order and an icon will appear indicating the sorting direction.

Image Removed

If the same table header is clicked on again, then the sorting direction will reverse and the table will be sorted in descending order by that header. The icon will change to indicate the new sorting direction.

Image Removed

...

"Loading..." Animation

If the server takes more than a few hundred milliseconds to respond, a "loading..." animation will appear, indicating that the client is waiting for a response from the server:

Image Added

Table Columns

Typically, the data in a table is sortable; click on a column header to sort rows by ascending values in that column. Click again to reverse the sort.

A small triangle indicating the sort direction will be displayed after the column name:

Image Added

Table Rows

Each row in the table represents one of the components you are viewing.a single item. When an item is added or updated, the row will briefly flash yellow, as shown below:

Image Added

Selectable Rows

Tables may implement selectable rows: clicking on a row highlights it and displays a details panel with more information about the selected item. Clicking on a different row selects a new item and updates the details panel appropriately. Clicking on the selected row again (or pressing the Esc key) deselects the item:

Image Added

Empty Tables

If there are no components of that type, then items to display, an "empty" table " will be displayed instead. The example below is the Intent View, with no intentsshown: