Skip to content

Manager Package

The foundation of the Standard Device Manager is the Manager package. This core component provides essential services necessary for browser-based management applications.

The Manager package is a VueJS/Vuetify extension that provides structure for your device management application. It provide the essential authentication, routing and data management services to manage one or more devices.

The Manager package provides the following features:

  • Setup and configuration of VueJS and Vuetify frameworks
  • Application structure with navigation bars, data display panels, dashboards and widgets and data editing forms
  • User authentication, login and access control
  • Dashboards and data and graphical widgets with dynamic live updating
  • Data property editor to view and modify device data
  • User navigation and request routing
  • Collection of core VueJS UI components for management applications
  • Device claim, release and management
  • Ability to connect to local HTTP device agents or cloud services

Using the Manager as a foundation, you can elimiate countless months of developer time in creating a device management solution.

Initializing the Manager

The manager package is initialized in the app's main routine via the createManager API. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import {createManager} from 'manager'

async function main() {
    const manager = await createManager({
        display: Display,               //  UI Display definition
        schema: Schema,                 //  Database schema
        widgets: {graph: GraphWidget},  //  Additional dashboard widgets
        router,                         //  VueJS router
        vue,                            //  Vue instance
        vuetify,                        //  Vuetify instance
    }, {
        api: '/api',                    //  Backend URL prefix
        profile: Ioto.profile,          //  Execution profile
        name: Display.name,             //  App name
        title: Display.title,           //  App display title
        version: Display.version,       //  App version (x.y.z)
    })
main()

The createManager API accepts configured VueJS, Vuetify and Vue Router instances. You can configure these as you wish, but a typical setup would look like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import Display from 'display.json5'

async main() {
    let vue = createApp(Main)
    let router = createRouter({
        history: createWebHashHistory(),
        routes: [],
    })
    let vuetify = createVuetify(
        vuetifyProps({
            components: components,
            directives: directives,
            themes: Display.theme.themes,
        })
    )
    vue.use(vuetify)

The Manager is created with arguments that define the UI display, VueJS components and other configuration options. Here is a table of the createManager first parameter arguments.

Property Description
components A map of VueJS components
display The display.json5 UI route definition file
schema The device database schema
models A map of REST data models
widgets A map of additional dashboard widgets
router A configured VueJS router instance
vue A configured VueJS instance
vuetify A configured Vuetify instance

The Manager constructor also takes an "options" argument that supplies essential app configuration information.

The following properties should be provided via the options:

Property Description
api Backend API URL prefix. Use "/api" for local and Connect.js when cloud-based.
name App name. Short one word product name.
title App display title. Short multi-word display product title.
profile Operational profile (dev, prod)
version App version (x.y.z)
build Build version number. Single number build version.

API Endpoint

When a Manager app is hosted by the cloud, the Ioto service adds a Connect.js configuration file to the app site that can be imported from the top level of your app. The Connect.js script provides the api endpoint address and the AWS Cognito user authentication endpoint configuration. Both are required for cloud-based device managers.

Here is a sample Connect.js:

1
2
3
4
5
6
7
8
{
    "api": "https://xxxxxxxxxx.execute-api.ap-southeast-1.amazonaws.com",
    "builder": "https://api.admin.embedthis.com",
    "cognito": {
        "userPoolId": "ap-southeast-2_xxxxxxxxx",
        "clientId": "xxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
}

This file should be imported and the "api" and "cognito" properties used in the Manager options. For example:

1
2
3
4
5
6
7
await createManager({
    ...
}, {
    ...
    api: Connect.api,                   //  Backend cloud service API
    cognito: Connect.cognito,           //  Cognito config
})

Samples

The Ioto agent distribution contains a suite of management app samples that demonstrate constructing the Manager class. Each app has a ui/main.js file that constructs the Manager.

Package Exports

The Manager package exports a suite of configured service objects and support functions.

Service Objects

Name Description
Auth Primary authentication service
Feedback User UI informational feedback service
Progress User activity progress bar service
Rest REST HTTP service
Routes Navigational routes service
Rules Input valiation rules
State Global application state service

Support Functions

Name Signature Description
can can(role) Can the logged in user perform the given role
createManager createManager(params, options) Create and initialiate a manager instance
getVue getVue() Return the initialized Vue instance
getModel getModel(model) Return the schema data model definition
getModels getModels() Return a list of the schema data models
getRoute getRoute() Return the Vue Router object for the current UI page
getRoutePath getRoutePath() Return the current Vue router URL
getRouter getRouter() Return the Vue router instance
navigate navigate(url, query) Navigate the UI to the given URL
vuetifyProps vuetifyProps(params) Convert the given params to Vuetify constructor args