Using the Apica Panels Dashboards

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

Add Dashboard

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

To add a new dashboard:

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.

Item

Description

Name

Display name for the filter.

Data Source

Source for the annotations.

Grafana / Dashboard data source

Enabled

Show annotations.

Hidden

Hide the filter from the dashboard.

Color

Display color for the indicator lines.

Query

Item

Description

Filter By

Filter method.

Dashboard / Tags

Max Limit

Maximum number of annotations to display.

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:

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

Item

Description

Name

Identifier/title for the dashboard.

Description

Longer description of the dashboard.

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

Item

Description

Comment

Type

Type of link.

dashboard/link (web)

Wit Tags

Filter for dashboard Settings General.

As Dropdown

Show the filtered list as dropdown menu to select individual dashboards.

Title

Title for the link.

Include

Time Range

Apply the current Time Range to the linked dashboard view.

Variable Values

Apply any current Templates to the linked dashboard view.

Open In New Tab

Link will open in separate browser tab.

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

Item

Description

Comment

Type

Type of link.

dashboard/link (web)

Url

External link to access.

Title

Title for the link.

Tooltip

Tooltip to display when hovering over the link.

Icon

Icon to display before the link.

external link/ dashboard/ question/ info/ bolt/ doc/ cloud

Include

Time Range

n/a

Variable Values

n/a

Open In New Tab

Link will open in separate browser tab.

Dashboard Display

Metadata

The *Metadata tab shows administrative information about the dashboard.

View

Item

Description

Commment

Last Updated At

Timestamp for last change.

Last Updated By

User that did the last change.

Created At

Dashboard creation timestamp.

Created By

User who created the dashboard.

Current Version

Version of dashboard.

Corresponds to number of times saved.

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

Icon

Item

Description

Title

Title to display for the row.

Show Title

Turn title display on or off.

Move Up

Change display order in the dashboard.

Move Down

Changes display order in the dashboard.

Delete

Remove the row and all panel widgets it contains.

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.

Item

Description

Comment

Auto-Refresh

Interval between automatic reloads and data refresh in the dashboard.

Now Delay

Add delay to now value.

Gives extra time for data aggregation.

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

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

Item

Description

Comment

Name

Name of the variable.

Label

Display label in dashboard.

Type

Type of variable.

Hide

Display elements to hide.

Label/Variable

Constant Options

Item

Description

Comment

Value

Constant value to use.

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

Item

Description

Comment

Name

Name of the variable.

Label

Display label in dashboard.

Type

Type of variable.

Hide

Display elements to hide.

Label/Variable

Custom Options

Item

Description

Comment

Values

Values to use.

Comma-separated list.

Selection Options

Item

Description

Comment

Multi-value

Allow selection of multiple values in the dropdown.

Include All Option

Add All option to dropdown.

Will include all values in a combined query expression.

Custom All Value

Query expression to use as All value.

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

Item

Description

Comment

Name

Name of the variable.

Label

Display label in dashboard.

Type

Type of variable.

Hide

Display elements to hide.

Label/Variable

Interval Options

Item

Description

Comment

Values

Time values to include in the list.

Auto Option

Generate the list automatically based on the current time span.

Step Count

Number times to divide the current time span.

Min Interval

Lowest value in the list.

Preview

List of values that will be displayed in the dropdown.

Query

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

View

Variable

Item

Description

Comment

Name

Name of the variable.

Label

Display label in dashboard.

Type

Type of variable.

Hide

Display elements to hide.

Label/Variable

Query Options

Item

Description

Comment

Data source

The Data Source used by the query.

Refresh

Controls when to update the variable option list.

Never/ On Dashboard Load / On Time Range Change

Query

Query expression.

Each data source has a specific query.

Regex

Optional Regular Expression for filtering of query results.

Sort

Sort order to use instead of the one returned by the query.

Disabled / Alphabetical (ascending or descending) / Numerical(ascending or descending) .

Selection Options

Item

Description

Comment

Multi-value

Allow selection of multiple values in the dropdown.

Include All Option

Add All option to dropdown.

Will include all values in a combined query expression.

Custom All Value

Query expression to use as All value.

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

Item

Description

Comment

Name

Name of the variable.

Label

Display label in dashboard.

Type

Type of variable.

Hide

Display elements to hide.

Label/Variable

Data Source Options

Item

Description

Comment

Data source

The Data Source type to display.

Instance Name Filter

Optional Regular Expression for filtering of data source instances.

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

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

Item

Description

Comment

Current Time Range

Time Time Range.

Template Variables

Templating Templates.

Theme

Display UI Theme.

current/dark/light

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

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.

Item

Description

From

Start time period.

End time period.

Refreshing every

Reload the dashboard at this frequency.

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:

Units

Description

now

Current time at viewing.

s

Seconds

m

Minutes

h

Hours

d

Days

w

Weeks

M

Months

y

Years

/$unit

Adds the time period unit.

-

Relative from now.

Examples

From:

To:

Meaning

now-5m

now

Last 5 minutes

now/d

now

The day so far

now/w

This week

now/w

now

Week to date

now-1M/M

Previous Month

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

Item

Description

Override Relative Time

Start time period.

Add Time Shift

End time period.

Hide Time Override Info

Hides override info text shown in the upper right of a widget.

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

Part

Description

https://wpm.apicasystem.com/Account/Login

Base access URL.

?returnUrl=

The returnUrl property name.

{returnUrl}

URL encoded link to the Panel.

&authToken=

The authToken property name.

{authToken}

Base64 and url encoded access token.

&onAuth=setApicaDashboardToken

Instructions to server to use the token.

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

Dashboard URL - returnURL

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

String

URL Encoding

https://panels.apicasystem.com/dashboard/db/asm?orgId=27

https%3A%2F%2Fpanels.apicasystem.com%2Fdashboard%2Fdb%2Fasm%3ForgId%3D27

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:

Password

String

Base64

URL encoded

login

password

login:password

bG9naW46cGFzc3dvcmQ=

bG9naW46cGFzc3dvcmQ%3D

username@domain

t_!as7

username@domain:t_!as7

dXNlcm5hbWVAZG9tYWluOnRfIWFzNw

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

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

Item

Description

Name

Display name for the account.

User login password.

Not editable in Apica Panels.

Username

User login user name.

Not editable in Apica Panels.

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

Item

Description

Comment

UI Theme

UI UI Theme to use for the account.

Home Dashboard

Primary Apica Panels Dashboards for the account.

The list can be populated by Starring dashboards.

Timezone

Timezone to use in dashboards.

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.

Button

Action

Play previous dashboard.

Stop playback.

Play next dashboard.

PreviousUnderstanding the ASM Imported Dashboards NextUnderstanding ASM Check Host Locations

Was this helpful?