Dashboard Design

A Real-time Dashboard is used to organize unified service assurance data (events, metrics, and topology) as well as 3rd party or integration user interfaces to a completely normalized end-user display.

Dashboards allow you create static reporting as well as real-time dynamic unified interfaces (based upon device or service). Dashboards are edited through a web interface that allows you to drag/drop individual interfaces or Panels onto the dashboard configuration.

Creating A Dashboard

Purpose

Unified Assurance administrators need to understand the functionality and portability of Dashboards.

Objectives

Create a simple Dashboard with various panels.
Create a custom Dashboard Group.

Creating a Dashboard

WARNING:

The default panel configuration options are in a "dynamic state" where data can be passed into the panels using URL parameters, and also so certain user actions can then be applied to multiple panels at the same times. When adding multiple panels to a dashboard, the different panel configuration options may need to be "locked" to avoid potential cross-panel collisions.

Open the Dashboards UI.

Configuration -> Dashboards -> Dashboards

Note:

The grid and configuration pane can be collapsed using the upwards-facing arrow to get additional configuration space. This is especially useful on smaller displays.
On the edit screen, the "Configure Dashboard" section on the right side of the screen will be automatically opened. Enter a dashboard name, and user/group owners if needed for multi-tenancy. The following Dashboard settings can be used as an example:
- Name - Overall Status Dashboard
- User Owner - (Public to All Users In Group)
- Group Owner - (Public to All Groups)
Add two additional rows to the dashboard canvas.
Note:

Adding rows to a dashboard is done in a few different ways:
1. Left clicking on the "Click here to add a panel" drop zone, then selecting "Add Row".
2. Left clicking on the cog icon in the "Click here to add a panel" drop zone, then selecting "Add Row".
Add the following panels to the dashboard.
Note:

Adding panels to a dashboard is done in a few different ways:
1. Using the "Dashboard Panels" section on the right side of the screen, then drag-and-drop a panel into a drop zone.
2. Left clicking on the "Click here to add a panel" drop zone, then selecting the panel to add.
3. Left clicking on the cog icon in the "Click here to add a panel" drop zone, highlighting "Add Panel", then selecting the panel to add.
- Add a "event -> Event List" panel to the first drop zone.
- Add a "database -> Database Grid" panel to the second drop zone.
- Add a "metric -> Adhoc Graph" panel to the third drop zone.
Edit the "Event List" panel by clicking the cog button in the panel title bar. Change the following options:
- Panel Name - (Enter a name for the panel, can be any text, for example "All Events".)
- Display - (This will change which columns are visible when the panel is loaded. Choose the "Default" display unless others are available.)
- Filter Type - (Determines which events are included. Each filter type has it's own associated fields.)
  - Event Filter - Currently defined filter, sortable by Filter Group.
    - Filter Group - Subset of event filters.
    - Filter Name - Actual filter to use within the selected Filter Group.
  - Device - Show events by a single Device.
    - Device Name - Only show events for the selected device.
  - Meta Tag - Devices can have associated data, show events by this associated data, such as Location, Department, etc.
    - Meta Type - Subset of meta tags.
    - Meta Tag - All of the tags within the selected Meta Type.
  - Transient Event List - Custom SQL query "WHERE" clause.
    - Where - Actual SQL clause used to filter events.
  - Forensic Event List - Build a custom SQL query "WHERE" clause using guided inputs.
- Other options can be changed as needed.
Once finished editing the panel, click "View".
Edit the "Database Grid" panel by clicking the cog button in the panel title bar. This allows you to display any data from pre-configured SQL queries (for basic reports, etc). Change the following options:
- Panel Name - (Enter a name for the panel, can be any text, for example "Topology Audit".)
- Query - (Select the query to display the results in the dashboard, for example "Topology Audit".)
Once finished editing the panel, click "View".
Edit the "Adhoc Graph" panel by clicking the cog button in the panel title bar. Change the following options:
- Panel Name - (Enter a name for the panel, can be any text.)
- Graph Title - (This will be the title shown in the graph. This will be automatically determined if not provided.)
- Graph State - (Whether or not to display the graph. The graph can be disabled leaving only the legend for basic reports such as trending, etc.)
- Legend State - (Whether or not to display the legend. The legend can be disabled leaving only the graph.)
- Time Range - (Set the time frame to show the data (raw data/daily, or aggregates for weekly/monthly/yearly).
- Trend - (Show the percentage change over the period of time selected in the graph.)
- Threshold Lines - (Show the threshold lines (if defined) on the graph.)
- Device Metrics - (This section is where specific metrics are selected to display on the graph. Clicking the filter icon helps search for specific devices and metrics quickly. It is recommend you collapse the grid and configuration pane to see settings more easily.)
  - Under "Device Name", search for your Unified Assurance server. Notice you see only the Unified Assurance device and its available metrics.
  - Now search for "Bandwidth" under "Metric Types". Now only Bandwidth metrics for the Unified Assurance server will be displayed.
  - Click to select a metric, then click on the "Add" button, or double-click a metric, to add it to the "Selected" box. Anything selected will be displayed in your graph.
  You can select multiple metrics of different types or just a single metric as desired.
Once finished editing the panel, click "View".
Click on the "Submit" button to save the Dashboard.

Note:

If the grid and configuration pane were collapsed using the upwards-facing arrow, it will need to be expanded to see the button again.
Open the Dashboard Groups UI.

Configuration -> Dashboards -> Dashboard Groups
Select the "Root" group, then click on the "Add" button.
The following values can be used as an example, but the specific settings used can be anything you would like. Some fields are required and validations will warn you if you missed something when submitting.
- Name - NOC Dashboards
- Diagrams - (Move the "Overall Status Dashboard" to the "Selected" option.)
- Click on the "Submit" button.
Open the "Dashboards" navigational page.
Expand the "NOC Dashboards" group.
Click on the "Overall Status Dashboard".

What is a Panel

Panels are the individual components that make up the dashboard. Panels can be configured in a static, or standalone, manner, or in a dynamic manner so changes to one panel affect all other panels in the same dashboard.

Static Tabs Panel Example

Open the Dashboards UI.

Configuration -> Dashboards -> Dashboards

Note:

The grid and configuration pane can be collapsed using the upwards-facing arrow to get additional configuration space. This is especially useful on smaller displays.
On the edit screen, the "Configure Dashboard" section on the right side of the screen will be automatically opened. Enter a dashboard name, and user/group owners if needed for multi-tenancy. The following Dashboard settings can be used as an example:
- Name - Static Tabs Example Dashboard
- User Owner - (Public to All Users In Group)
- Group Owner - (Public to All Groups)
Add a "dashboard -> Tabs" panel to the dashboard.
Note:

Adding a panel to a dashboard is done in a few different ways:
1. Using the "Dashboard Panels" section on the right side of the screen, then drag-and-drop a panel into a drop zone.
2. Left clicking on the "Click here to add a panel" drop zone, then selecting the panel to add.
3. Left clicking on the cog icon in the "Click here to add a panel" drop zone, highlighting "Add Panel", then selecting the panel to add.
Edit the "Tabs" panel by clicking the cog button in the panel title bar. Change the following options:
- Panel Name - (Enter a name for the panel, can be any text, for example "Multiple Tabs".)
- Tab Type - (Leave as "Static". Static tabs load one existing dashboard into each tab.)
- Tab Properties - (Click the "Add" button twice to add 2 tabs.)
  - (Click on the "Name" value (should be "Tab1" and "Tab2") and change the name for each.)
  - (Click on the "Value" field in each and select a dashboard.)
Once finished editing the panel, click "View". You should now see the 2 tabs you created with the specified names.
Click on the "Submit" button to save the Dashboard.

Note:

If the grid and configuration pane were collapsed using the upwards-facing arrow, it will need to be expanded to see the button again.

Dynamic Tabs Panel Example

Open the Dashboards UI.

Configuration -> Dashboards -> Dashboards

Note:

The grid and configuration pane can be collapsed using the upwards-facing arrow to get additional configuration space. This is especially useful on smaller displays.
On the edit screen, the "Configure Dashboard" section on the right side of the screen will be automatically opened. Enter a dashboard name, and user/group owners if needed for multi-tenancy. The following Dashboard settings can be used as an example:
- Name - Dynamic Tabs Example Dashboard
- User Owner - (Public to All Users In Group)
- Group Owner - (Public to All Groups)
Add a "dashboard -> Tabs" panel to the dashboard.
Note:

Adding a panel to a dashboard is done in a few different ways:
1. Using the "Dashboard Panels" section on the right side of the screen, then drag-and-drop a panel into a drop zone.
2. Left clicking on the "Click here to add a panel" drop zone, then selecting the panel to add.
3. Left clicking on the cog icon in the "Click here to add a panel" drop zone, highlighting "Add Panel", then selecting the panel to add.
Edit the "Tabs" panel by clicking the cog button in the panel title bar. Change the following options:
- Panel Name - (Enter a name for the panel, can be any text, for example "Dynamic Tabs".)
- Tab Type - (Set to "Dynamic". Dynamic tabs are defined at load time, and what tabs get created and what content they load is determined by the Tab Source.)
- Tab Source - Use the following value. The source tells the panel where to get the data needed for the tab configuration. "DeviceName" and "DeviceZoneName" are the only tokens that can be passed into the Unified Assurance source defined here. If a "DeviceName" and "DeviceZoneName" are passed to this dashboard, the tokens will be replaced with that information.
```
/api/metric/categories/readMetricTabs?DeviceName=<DeviceName>&DeviceZoneName=<DeviceZoneName>
```
Once finished editing the panel, click "View". You will see an empty "Dynamic Tabs" tab. During our configuration, no device information is provided, so there is nothing to display.
Click on the "Submit" button to save the Dashboard.

Note:

If the grid and configuration pane were collapsed using the upwards-facing arrow, it will need to be expanded to see the button again.

Open a new browser tab and enter the URL below, replacing the placeholders:

https://((PRESENTATION_SERVER))/#dashboard/Dynamic Tabs Example Dashboard?DeviceName=((DEVICE_NAME))&DeviceZoneName=((DEVICE_ZONE))

----- EXAMPLE -----

https://unified-assurance.example.com/#dashboard/Dynamic Tabs Example Dashboard?DeviceName=server.example.com&DeviceZoneName=Default First Zone

Now the tabs panel will load with a variety of tabs based on the metrics defined for the device entered. The available tabs are defined in the Overview Categories UI. Every dynamic tab panel using the "readMetricTabs" API will also have an "All Metrics" tab on the end that includes every metric available to the device.

Configuration -> Metrics -> Overview Categories

Title and Copyright Information

Implementation Guide

F88952-01