Skip to content

Manager Display

The Ioto solution provides an Ioto Device Manager so you can manage your devices centrally from the cloud.

The Manager makes it easy to create a basic, appealing device interface that can be used in early development of an IoT solution or in in production when you have simpler device management needs.

Manager

The Manager can manage one or more devices and highly configurable to adapt to your specific device management requirements.

The Manager is extremely flexible, however, there are limits, and you may want to create your own dedicated manager that uses the Ioto APIs to provide a bespoke management experience for your devices.

Configuring the Manager

The Ioto Manager is controlled by a JSON configuration file called Display.json that can be modified to suit your specific needs.

The Display.json file defines the following items:

  • Displayed Name
  • Display color theme including dark and light modes
  • Menu items and options
  • UI pages
  • Data tables and fields
  • Device data edit property panels
  • Dashboard data and widgets to display

Here is a subset example of a Display.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
    "version": "1.0.0",
    "description": "Display for Kickstart",
    "theme": {
        "title": "Device Manager",
        "logo": "/images/ioto-logo.png",
        "themes": {
            "dark": { ... },
            "light": { ... },
        }
    },
    "views": [
        { "path": "/", "name": "home" },
        { "name": "Login", "path": "/auth", "component": "Login" },
        {
            "name": "devices",
            "path": "/devices",
            "icon": "devices",
            "sidebar": true,
            "component": "GenericList",
            "table": {
                "model": "Device",
                "subtitle": "Click on a device to explore",
                "fields": [
                    {"name": "product"},
                    {"name": "description"},
                    {"name": "model"},
                    {"name": "id", "title": "Device ID"},
                    {"name": "*", "launch": "/devices/:id/overview"}
                ],
                "actions": {
                    "add": { "count": 0, "launch": "claim" },
                    "release": { "count": 2,
                        "invoke": "DeviceRelease", "confirm": true }
                }
            },
            "panels": [
                {
                    "name": "claim",
                    "component": "DeviceClaim",
                    "button": "Claim Device"
                }
            ]
        },
    ]
}

A full copy of the default display can be found here: EvalDisplay.json5.

Quick tour

A minimal Display.json will consist of some top level properties, and a set of views.

For Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "version": "1.0.0",
    "description": "Display for MyManager",
    "title": "My Manager",
    "views": [
        { "name": "Home", "path": "/", "redirect": "/dashboard" },
        { "name": "Login", "path": "/auth", "component": "Login" },
        {
            "name": "Fleet",
            "path": "/fleet",
            "icon": "mdi-gauge",
            "sidebar": true,
            "component": "Fleet",
        },
    ],
}

The title is used as the application title in the navigation bar. The version and description are for documentation.

The views define one or more views. If a view has sidebar set to true, the Manager sidebar will display the view icon to launch the view.

The manager provides two axes of navigation:

  • Side bar for top-level items
  • Horizontal tabs below the navigation bar

Manager

The sidebar is populated with items that have "sidebar" set to true. The horizontal tab menu is built from child views under the parent view.

In the example image above, the sidebar has the "Fleet", "Device" and "Account" menu options. With the selected "Device" sidebar item, the horizontal tab menu displays: "Overview", "Ports", "Events" and "Vlans".

Views

The Manager defines UI pages based on the declared views. Each view is a displayable page for a specific browser URL.

The view defines a name, navigation path and typically a rendering component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "views": [
        { "name": "Home", "path": "/", "redirect": "/dashboard" },
        {
            "name": "Fleet",
            "path": "/fleet",
            "component": "Fleet",
        }
    ]
}

If a view defines child views under a "views" property, those child views are presented as tabbed menu options under the parent view.

Views may define a redirect property to redirect the browser to another target view.

Table Views

The Manager provides a GenericList component that can be used to display device data as a table.

Table

The Manager table component is a powerful VueJS component that can:

  • Display data in pages
  • Select data items for operations
  • Select data via a search box
  • Resize columns
  • Reorder columns with drag and drop

Table views present data items that can be selected via checkboxes or by clicking on table cells. Display.json table definitions can specify how to respond to item selection and cell clicks via actions.

An actions definition will specify which panels to launch or components to run when the relevant action is invoked.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
    "table": {
        "model": "Device",
        "fields": [
            {"name": "product"},
            {"name": "id", "title": "Device ID"},
            {"name": "*", "launch": "/devices/:id/overview"}
        ],
        "actions": {
            "add": { "count": 0, "launch": "claim" },
            "release": { "count": 2, "invoke": "DeviceRelease" }
        }
    }
}

In this example: when a row in the table is clicked, the wild-card field definition ("*") will cause the browser will be redirected to the /devices/ID/overview page.

If table items are selected, depending on the count of items selected, the appropriate action will cause a panel to be "launched" or component to be "invoked" as required.

Custom Views

Instead of using the GenericList component for a tabular view, you can create custom VueJS components to extend the Manager. You can upload a custom components package using the Builder Cloud/Edit panel.

Custom views can be any VueJS page of your design -- the sky's the limit.

Panels

To facilitate editing the properties of a data item, the Manager defines UI Panels.

A parent view may define zero or more panels that can be invoked to operate up selected data items from the parent view.

Panel

The panel will animate and slide out from the right side of the screen when launched by a view action or button.

Panels are defined under a views panels property.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "panels": [
        {
            "name": "claim",
            "component": "DeviceClaim",
            "button": "Claim Device",
            "width": "500px"
        }
    ]
}

A panels has a name and a component to render and operate the panel. It may specify a button which will be added to the parent view table to launch the panel.

Alternatively, panels may be launched via view table actions.

Dashboards

The Manager has a Dashboard component that can be used in any view to provide a graphical display of relevant device data.

The Dashboard displays a set of widgets, each of which presents a facet of device data you wish to display.

The supported widget types are:

  • event
  • gauge
  • graph
  • led
  • numeric
  • progress
  • text
  • time

Widgets on the dashboard can be rearranged by the user using drag-n-drop and will be persisted in that order for their browser.

Authorizing Access

It is frequently required to only display or allow the ability to modify certain parts of a management application. For example, you may only want administrators to be able to delete certain resources.

The Manager allows the visibility of views, panels, table columns and panel fields to be controlled depending on the user's authorized role.

By specifying a role property, you can require that the user have at least this capability to access the designated element.

For example, to only allow access to a view by adminstrators:

1
2
3
4
5
{
    "name": "fleet",
    "component": "Fleet",
    "role": "admin",
},

References