Widgets

The Kaa Web Dashboard (WD) is pre-shipped with a collection of widgets that receive data from other Kaa services and display them in different visual layouts. The table below summarizes the current collection of Kaa widgets. It describes each widget’s purpose, type, and the Kaa services involved in the widget operation.

Widget name Purpose Services
Endpoint list Create and view endpoints EPR
Software list Create and view software updates and their details OTAO, EPR
Software version details View and modify software updates and their details OTAO, EPR
Endpoint metadata View, add, edit and delete endpoint metadata EPR
Configuration View and edit endpoint configuration ECR
Map View location of one or more endpoints EPR, EPTS
Multi series chart View time series data in the graphical format EPTS
Time series table View time series data in the table format EPTS
Gauge View the last value in time series EPTS
Raw HTML Render custom HTML EPR
Endpoint label Display a custom image with labels that represent data EPR, EPTS
Command execution Execute remote commands via a switch EPTS, EPR, CEX
Filter list View endpoint filters and their details EPR
Filter details View and modify details of a specific filter EPR
Endpoint token status Create, activate, suspend and revoke the endpoint token CM
Binary blobs list Displays uploaded blobs for individual applications or endpoints BCX
Endpoint orientation Displays device orientation in space EPTS
Luminance Displays light level EPTS
Basic client credentials View, add and modify users credentials (username/password) CCM
TLS certificates View, add and modify users credentials (TLS certificate) CCM
Dashboard controls Set dashboard context which may be used by the dashboard widgets  

Endpoint list

The Endpoint list widget is primarily used to display a list of the available devices for the user.

eplist-view

The second important feature of this widget is enabling the user to create new endpoints.

eplist-view

The widget also supports displaying filtered endpoints.

eplist-view

You can also configure interoperation between this widget and the Map widget to control which endpoint locations are displayed on the map.

eplist-view

This feature may be enabled by selecting the Should rows be selectable? option in the Endpoint list widget settings

eplist-view

as well as the corresponding configuration option in the map widget. You can find more information in the Map widget section.

You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.

The Endpoint list widget supports the following interfaces:

Endpoint list interfaces diagram

Filter list

The Filter list widget is used to display a list of the available filters for the user.

filterlist-view

It also enables the user to create new filters as well as delete them:

filterlist-view

You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.

The Filter list widget supports the following interfaces:

Filter list interfaces diagram

Software list

The Software list widget is used to display a list of the available software versions for the user.

softwarelist-view

It also enables the user to create new software versions.

You can configure the widget to enable the direct link between entities in the table and their dashboards. To learn more, click here.

The Software list widget supports the following interfaces:

Software list interfaces diagram

Endpoint token status

The Endpoint token status widget is used to manage the status of the [endpoint token][endpoint token]. The user can create, activate, suspend and revoke the endpoint token.

ep_token_status

The Endpoint token status widget supports the following interfaces:

Endpoint token status interfaces diagram

Configuration

The Configuration widget is used to view and edit configuration of the endpoint or the endpoint group.

configuration-sample

The widget enables the user to:

  1. Display a single integer value and change it.

configuration-sample

  1. Display several endpoint configuration parameters and change them.

configuration-sample

  1. Display configuration as JSON in the text editor area and modify it.

configuration-sample

The Configuration widget supports the following interfaces:

Configuration interfaces diagram

Command execution

The Command execution widget is used to execute commands on an endpoint.

Command execution widget

The Configuration widget supports the following interfaces:

Command execution interfaces diagram

Endpoint label

The Endpoint label widget is used to display endpoint dynamic data over a custom image.

example

The Endpoint label widget supports the following interfaces:

Endpoint label interfaces diagram

Filter details

The Filter details widget is used to view and edit filter details.

filterDetails

It supports the following interfaces:

filterDetails interfaces diagram

Gauge

The Gauge widget is used to display the last time series data for an endpoint. This widget has different representations depending on its type. Here are some of the gauge layouts available in WD.

gauge-sample

It supports the following interfaces:

filterDetails interfaces diagram

Endpoint metadata

The widget is used to monitor the endpoint metadata information stored in the EPR service.

example

It supports the following interfaces:

metadata interfaces diagram

Multi series chart

The Multi series chart widget is used to display a chart that shows time series data for one or more endpoints. Below is an example of a line chart.

icon

Multi series chart widget supports display of data as a bar chart as well.

icon

Moreover, it is possible to configure output of different data series in all available modes at once: line, bar and step.

icon

The Multi series chart widget supports the following interfaces:

 interfaces diagram

Raw HTML

The Raw HTML widget is used to embed custom HTML into the dashboards. This widget supports totally static HTML content

-screenshot-static-html

as well as dynamic endpoint data stored in the EPR service.

-screenshot-epr-response

There are two ways to embed an image into the HTML content: encoding it into Base64 or referencing it from the WD external static resources.

The Raw HTML widget is capable to handle with following advanced templates:

Conditional rendering:

${ @if (number < 0) }
	'number' is less than 0
${ #elif (number > 0) }
	'number' is bigger than 0
${ #else }
	'number' is 0
${ /if }

Iterating over an array:

${ @each(someArray) => val, index }
	The current array item is ${val}, the current index is ${index}
${ /each }

Iterating over an object:

${ @foreach(someObject) => key, val } 
	The current object key is ${key}, and the value is ${val}
${ /foreach }

try…catch structures:

${ @try }
	This won't work: ${unknownVariable}
${ #catch => err }
	Uh-oh, error! Message: "${err.message}"
${ /try }

There is also support for pipe expressions to manipulate the value.

For example with given json assigned to metadata variable in the widget configuration:

{
  "name": "Device 1",
  "sensors": [
    {"name": "Sensor 1"},
    {"name": "Sensor 2"}
  ] 
}

json(spacing?): output json string. Optionally accepts white space counter for better readability.

<!-- Output json string. Useful for debugging -->
<pre>${metadata | json}</pre>
<!-- renders -->
<pre>{ "name": "Device 1", "sensors": [ {"name": "Sensor 1"}, {"name": "Sensor 2"} ] }</pre>

<!-- json pipe accepts optional number of spaces to prettify json   -->
<pre>${it | json('2')}</pre>

mapBy(key): creates array iterating by each element and returns the value of key during iteration

<!-- Map values by specified key -->
<span>${metadata.sensors | mapBy('name')}</span>
<!-- renders -->
<span>Sensor 1,Sensor 2</span>

join(separator?): joins array with given separator

<!-- Join array by optional separator  -->
<span>${metadata.sensors | mapBy('name') | join('=')}</span>
<!-- renders -->
<span>Sensor 1=Sensor 2</span>

formatDate(format?): converts the date according to current timezone, to specific format. By default format is YYYY-MM-DD HH:mm:ss

<!-- With default format  -->
<span>${createdDate | formatDate}</span>
<!-- renders -->
<span>2023-01-20 10:00:00</span>

<!-- With specific format Day Month name, Year -->
<span>${createdDate | formatDate('DD MMMM, YYYY')}</span>
<!-- renders -->
<span>20 January, 2023</span>

translate(variables?): translates given string. Optionally accepts the variables as JSON string.

<!-- Suppose we have translation defined as { "custom": { "Temperature": "Temperature EN" } } -->
<span>${'custom.Temperature' | translate}</span>
<!-- renders -->
<span>Temperature EN</span>

<!-- Suppose we have translation with dynamic variable defined as { "custom": { "Temperature value": "Temperature is " } } -->
<span>${'custom.Temperature value' | translate('{"value": 30 }')}</span>
<!-- renders -->
<span>Temperature is 30</span>

The Raw HTML widget supports the following interfaces:

Raw HTML interfaces diagram

Also the widget supports applying UI theme colors in the widget contents. You can find the available colors listing on the Branding page. To use these colors, you need to refer to the variable uiTheme, select a color category from the branding section, write the desired category and color in the form of a camelCase. For example, if you want to set the secondary color for some text in the widget, the configuration would look like this:

<span style="color: ${uiTheme.textColors.colorSecondary};">some text</span>

Some more examples of the theme color variables:

Branding - Text colors - Color-primary-variant => ${uiTheme.textColors.colorPrimaryVariant}

Branding - Element colors - Color-surface-1 => ${uiTheme.elementColors.colorSurface1}

Time series table

The Time series table widget is used to display endpoint time series data in real time.

Time series table example

The Time series table widget supports the following interfaces:

Raw HTML interfaces diagram

Software version details

The Software version details widget is used to view and edit software version details.

Software version details

The widget supports the following interfaces:

Software version details

Map

A map widget is used to display the current location of one or multiple endpoints. It also allows tracking the endpoints movement over the specified period of time.

map-sample

It is also possible to reflect the endpoint status on the map.

map-sample

In our example configuration, the green marker indicates that the enpoint is active and the yellow one that the endpoint is stalled.

This widget may interoperate with the Map widget in terms of selection which locations to display on map. This can be enabled by selecting the Show only selected endpoints option in the Mapwidget settings.

map-sample

You can find more information here.

The Map widget supports the following interfaces:

Map interfaces diagram

Binary blobs list

The Binary blobs list widget displays a list of the blobs uploaded from your devices with Binary data Collection Extension service.

binary-blobs-sample

Endpoint orientation

The Endpoint orientation widget displays device orientation in space. You can set URL to your custom 3D model in widget configuration.

ep-orientation-sample

Luminance

The Luminance widget displays light level.

luminance-sample

Basic client credentials

The Basic client credentials widget is used to display, add and modify users credentials. It interacts with Client Credentials Management service.

client-creds-sample

TLS certificates

The TLS certificates widget is used to display, add and modify users credentials. It interacts with Client Credentials Management service.

x509-sample

Dashboard controls

The Dashboard controls widget is used to set the shared dashboard context which may be used by the widgets placed on it. The shared context includes time and date range as well as any static value. Currently, Multi series chart and Gauge support usage of the shared dashboard context.

You can configure the table widget to enable the direct link between entities in the table and their dashboards. In this case, you can click on an entity record in the table and get redirected to the entity dashboard.

The configuration flow:

  1. Create an entity dashboard, to which you would like to setup the redirects. It can be an endpoint, filter or software dashboard depending on the entity type of widget you are setuping (see Endpoint list, Filter list and Software list widgets details).

  2. Select the target dashboard in widget settings:

eplist-view

Here’s an example with the endpoint list widget.

  1. Click on a row in the list.

eplist-view

  1. Immediately get redirected to the corresponding entity dashboard.

eplist-view