The Panel Widgets allow you to populate your Grafana dashboards with data visualizations from your Synthetic Monitoring according to your needs.

Open

Add Dashboard

You can create new dashboards directly from the Dashboard Search menu.

To add a new dashboard:

Open

• Click the Dashboard Search

• Click New Dashboard

A new empty dashboard called New Dashboard is added:

You can now go on to add Panel Widgets and/or Configure Dashboard the dashboard settings.

Configure Dashboards

All configurations for dashboards are available from the dashboard configuration menu.

Edit Panel Widget

To edit a panel widget:

• Click configuration to open the menu

Select the configuration option you want to work with.

Annotations

With Annotations, you can add events to your graphs, either in Grafana itself, or through queries from supporting Data Source.

Add Annotation

Annotations can be added directly in the graph.

Display Annotation Events

Annotation events are displayed as icons and vertical lines and icons on graph panels.

Hovering over annotations will display details about the event. The dashboard configuration allows you to filter which annotations to display.

Query

Filter Method

Filtering by Tags will display only the annotations that match any of the tags in the list.

With Dashboard filtering, all annotations are displayed on their originating panel widget.

Configure Dash History

In the Version History, you can see a list of all saved versions of the dashboard.

Compare Dashboards

With the Compare feature, you can see the differences between two versions of a dashboard.

The view shows all differences in the JSON between the selected versions.

Restore

You can Restore previous versions of the dashboard. This will replace the latest version with the selected version. The restore button is available from two places:

1. on the right-hand side in the History:

At the top of the Compare:

Dialog

View JSON

The View JSON menu option opens a panel displaying the JSON for the current dashboard.

Menu

Dialog

You can select and copy the JSON code from the panel, but not edit and save it in place.

Save As

The Save As menu option allows you to save a complete copy of the current dashboard under a different name.

Menu

Dialog

Configure Dash Settings

The Dashboard Settings allow you to configure options and parameters for the dashboard.

Edit Settings

Edit

All settings for a panel widget are available from the panel widget settings dialog.

Edit Settings

To edit Dashboard Settings:

• Click configuration to open the menu

• Click Settings

You can now select the appropriate settings tab to work with.

“General” Settings Tab

General

The General tab covers settings relating to the dashboard display.

View

Toggles

In the Toggles section you can set parameters relating to

Panel Options

The Panel Options governs the default Graph Tooltips behavior for the panel widgets in the dashboard.

The default behavior is single mode.

You can also toogle between behaviors by pressing ctrl-o/command-o while working in the dashboard.

Hide Controls

The dashboard controls - the row menu and the add row button, can be hidden from the display.

Controls on:

Controls off:

Links Tab

In the Links tab you can create links to web pages or other dashboards.

View

Add Link

To add more than one link:

• Click the Add Link button

Dashboard

In the Links tab you can create links to web pages or other dashboards. optionally based on a tag filter.

View

Dashboard Display

Creating Links to Web Pages

In the Links tab you can create links to web pages or other dashboards. optionally based on a tag filter.

View

Dashboard Display

Metadata

The *Metadata tab shows administrative information about the dashboard.

View

Rows

In the Rows tab, you can configure individual settings for the rows in the dashboard.

View

This feature is useful if you want provide the row with a title, when multiple panel widgets are related to the same theme.

The

Dashboard Display

Time Picker

With the Time Picker tab, you can configure how often the dashboard should be refreshed and define now for relative time calculations.

View

The Timepicker settings apply per Dashboard.

Shortcuts

The Shortcuts view provides a list of keyboard shortcuts for Grafana.

Menu

Dialog

Templates

Dashboard templates allows you to create more dynamic dashboards, by providing dropdown menus where you can select what to display based on predefined variables.

Menu

View

Add Variable

You can add multiple variables of different types as needed.

View

• Click the New button

The New tab opens

• Select the type of variable you want to add

• Add settings according to the variable type

• Click the Add button

The variable is added to the list.

Template Ad Hoc

Ad Hoc

Ad Hoc filters are currently not supported by The Synthetic Monitoring data source.

View

Ad hoc filters allows you to add key/value filters that will automatically be added to all metric queries that use the specified data source.

Constant

Constant

A Constant can be used as a defined as a metric path prefixes for shared dashboards.

View

When the dashboard is ExportImport, constant variables are concerted to import options.

Variable

Constant Options

Preview

List of values that will be displayed in the dropdown.

Template Custom

In Custom variables, you provide a manually defined list of values .

View

Variable

Custom Options

Selection Options

Custom All Value

The standard All value combines all options, which can result in a very long expression and possibly affect performance.

It may therefore be better to provide a custom expression more suitable for your data source, for example a Regular Expression.

Note: Characters in the expression are not escaped.

Preview

List of values that will be displayed in the dropdown.

Interval

With the Interval variable you can provide a selector for different time spans to apply to the dashboard.

View

Variable

Interval Options

Preview

List of values that will be displayed in the dropdown.

Query

Query

The Query variable type uses a Data Source query to return a list of values.

View

Variable

Query Options

Selection Options

Custom All Value

The standard All value combines all options, which can result in a very long expression and possibly affect performance.

It may therefore be better to provide a custom expression more suitable for your data source, for example a Regular Expression.

Note: Characters in the expression are not escaped.

Template Source Data Source

Data Source

The Datasource variable lets you create a dropdown containing multiple Data Source.

View

With the Datasource variable, you can quickly change the data source for an entire Dashboard. This is useful if you have multiple data source instances for different environments.

Variable

Data Source Options

Preview

List of values that will be displayed in the dropdown.

Export/Import/Format

Export/Import

Dashboards can be exported as JSON files, modified as text files, and imported.

Export

An existing dashboard can be exported as a JSON file. The exported file contains everything needed to create a dashboard.

Export Dashboard

To save the dashboard as a JSON file:

• Click the Share

• Select Export

The Export tab in the Share dialog is shown:

• Click Save to file

The file is saved to your default download location.

Import

There are multiple ways to import an existing or previously used dashboard to an organization.

Process

The import consist of three steps:

• Verify that you have an appropriate Data Source for the dashboard

• Start import

• Add JSON code

• Save the new dashboard

When the dashboard is imported, you can can perform additional configuration.

File

File

A previously exported dashboard JSON file can be imported to create a new dashboard.

Import Dashboard File

• Click the Dashboard Search

• Click Import Dashboard

The Import Dashboard dialog is shown:

• Click Upload .JSON File

• Browse to the .JSON file

• Click Open

• Enter a Name for the new dashboard

• Select a DataSource for the new dashboard

• Click Import

The dashboard is created and added to the organization.

Paste JSON

If you have JSON code copied from somewhere else, you can paste it into the import dialog.

Create Dashboard From JSON

• Make sure that the code you want to paste is available and correct.

• Click the Dashboard Search

• Click Import Dashboard

The Import Dashboard dialog is shown:

• Copy the JSON code and paste it into the Paste JSON box.

• Click Load

• Enter a Name for the new dashboard

• Select a DataSource for the new dashboard

• Click Import

The dashboard is created and added to the organization.

Format

The format is a standard JSON object containing the dashboard description and settings.

A dashboard in Grafana is represented by a JSON object, which stores metadata of its dashboard. Dashboard metadata includes dashboard properties, metadata from rows, panels, template variables, panel queries, and so on.

View JSON

To view the JSON for a dashboard:

• Click on Manage

• Select View JSON

The JSON for the current dashboard is shown in a separate frame:

More Information

For more information, see the http://docs.grafana.org/reference/dashboard/

Sharing Grafana Links

With Dashboard links, you can share a dashboard through a direct link. The link will show the dashboard according to the settings you provide, so the view can be different from the current state.

Note: This requires access to Grafana for whomever is supposed to see the dashboard.

View

Note: Make sure that any changes you made to the dashboard has been saved before creating the link.

Create a Shareable Link

Create Link

Dashboard links can be created from the Share menu.

Create Dashboard Link

To create a dashboard link:

• Click the Share

• Select Link To Dashboard

The Link tab in the Share dialog is shown:

• Select options as desired:

• Time range

• Variables

• Theme

• Click Copy

You can now paste the link wherever you need it.

Time Range

Time Range

The dashboards display data according to the Time Range settings.

Add Grafana Dashboard

The current setting is shown in the top right corner:

Clicking the time range will open the configuration dialog.

Dashboard

The Dashboard time range settings apply to all Panel widgets in the Dashboard, except panels with Time Range Time Override.

Configuration

Time Range

The time range section allows you to mix both explicit and relative ranges.

Quick Ranges

Quick ranges are a list of preset values that you can choose from to select a predefined relative time.

Explicit Time Range

The explicit time range format is YYYY-MM-DD HH:MM:SS.

Relative Time Range

Relative time ranges are created by using time formatting:

Examples

Time Override

If you want individual panel widgets to display metrics from different time periods in the same dashboard, you can override the relative time range for individual panel widgets

View

Feature Notes

Note: Only relative time ranges can be used for panel widget time override.

Some considerations to keep in mind when using time overrides in panel widgets:

• The panel relative time override is only active when the dashboard time is also relative.

• The panel timeshift override is always active, even when the dashboard time is absolute.

• If the dashboard time range is manually selected (zoomed), all panel widget overrides will be disabled.

•  

Graph Tooltips

When viewing panel widgets, you can hover the mouse pointer over various sections to get detailed information in tooltips.

The tooltip hover can work in crosshair (single) or shared (multiple) mode.

Crosshair

In crosshair/single mode, only one panel widget at a time is affected.

Shared

In shared/multiple mode, the crosshair is shown on multiple widgets and tooltip contains information for all affected panel widgets.

Configuration

The default behavior can be changed from the Settings General.

You can also toogle between behaviors by pressing ctrl-o/command-o.

Kiosk Mode

Displaying a dashboard in kiosk mode provides a cleaner view without the toolbar is visible at the top of the window.

Typical uses for this is to show the dashboard on a office TV or other public display.

Apica Link

In order to provide access to the kiosk dashboard through your Apica account, you need to create a special link to the kiosk mode.

Create External Link

The external link for a dashboard looks something like this:

https://wpm.apicasystem.com/Account/Login?returnUrl={returnUrl}&authToken={authToken}&onAuth=setApic aDashboardToken

Replace the {strings} with the values relevant for your panel.

Dashboard URL - returnURL

The returnURL string is a URL encoded link to the Panel.

Access Token - authToken

 Note: For security purposes, the user must be a dedicated read-only user created specifically for this purpose. Make sure that the use has no user role assigned to it.

The authToken string is a base64 and url encoded string containing your login and password:

 Note: the string must include the : colon separator.

 Note: This is not the API auth_ticket , but a base64 encoding of a string consisting of your login and password.

Grafana Setup

Grafana Setup

Creating a kiosk mode link in Grafana is done by adding a modifier at the end of the Share Link Grafana Link.

Enabling Kiosk Mode

• Click the Share

• Select Link To Dashboard

The Link tab in the Share dialog is shown:

• Select link Share Link Grafana Link as desired:

• Time range

• Variables

• Theme

• Add &kiosk at the end of the link:

• Click Copy

You can now paste the external link wherever you need it.

Browser Fullscreen

In addition to using the kiosk mode link, you may want to set the browser to fullscreen mode.

Example: Google Chrome

• Open the view menu

• Select Enter Fullscreen (or use the keyboard command for your OS)

With kiosk mode and browser fullscreen, nothing but the dashboard is shown:

UI Theme

You can select different UI Themes for display purposes.

Overview

The theme can either be a user profile setting and affect the entire interface, or as an option for the display Share Link Grafana Link, for example in Kiosk Mode mode.

Theme Link

Link

Using a theme in links is simply a matter of adding the theme name at the end of the link.

Examples

Dark

Dark is the default theme.

Note: If you set the profile default theme Light, you cannot currently override it in links.

Currently the

Light

Light is the the inverse of the Dark theme.

To use it in links, add &theme=light to the end of the link.

Profile

The UI Theme can be set for the whole interface from the user profile. For more information, see the Preferences section.

User Profile

In the user profile, you can change configurations for your account and view associated organizations.

Menu

Panels User Information

The information section covers settings relating to the account itself.

View

User Password

Password

With Apica Panels, the user password can not be changed from the profile, since the access is handled from Synthetic Monitoring.

Preferences

In the Preferences section, you can configure various interface settings for the account.

View

Starring

Starring a dashboard marks it as a favorite, and allows you to set it as the home dashboard for your account. You can star dashboards directly from the main page. The star button is at the top right next to the dashboard name.

• Click the Star button

The star is filled in:

A notification is also shown:

The dashboard is not available in the profile Home Dashboard dropdown list.

Playlist

You can create a Playlist to display multiple dashboards in sequence as a slideshow.

The playlist displays each dashboard for a defined amount of time and then goes on to the next.

Note: The playlist view can currently not be combined with Kiosk Mode mode.

Add Playlist

You can create a Playlist to display multiple dashboards in sequence as a slideshow.

Create New Playlist

• Click New Playlist

A blank playlist is created

• Provide a Name for the playlist

• Set a display time Interval for each dashboard

• Search for dashboards by name in the freetext search for
  Available dashboards

• Click Add To Playlist for each dashboard to include

• Click Create New Playlist

The playlist is created and added to the saved playlists table:

The playlist can be accessed by adding the Start URL to the base address panels.apicasystem.com, or played with the play button.

Playlist Control

When the playlist is running, playback buttons are available at the top of the dashboard view.