Skip to content

Manager Display Properties

Here is a subset example of a Display.json5 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
{
    version: '1.0.0',
    title: 'My Device Manager',
    description: 'Display for Kickstart',
    theme: {
        themes: {
            dark: { ... },
            light: { ... },
        }
    },
    views: [
        { name: 'home', path: '' },
        { name: 'Login', path: '/auth/login', component: 'Login' },
        {
            name: 'devices',
            path: 'devices',
            icon: 'devices',
            sidebar: true,
            component: 'GenericTable',
            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/tables' }
                ],
                actions: {
                    add: { count: 0, launch: 'claim' },
                    release: { count: 2, invoke: 'DeviceRelease', confirm: true, }
                }
            },
            panels: [
                {
                    name: 'claim',
                    component: 'DeviceClaim',
                    button: 'Claim Device',
                }
            ]
        }
    ]
}

Manager Properties

description

Name description
Description Textual description of the device.
Synopsis description: 'Short, one sentence description'

Example

1
description: 'Display for the Acme Rocket device'

features

Name features
Description Enable features for the display UI
Synopsis features: { properties }

Example

1
2
3
4
5
6
7
8
9
features: {
    cookies: false,
    dataWidgets: true,
    fleet: 'smart',
    navbar: true,
    sidebar: true,
    tabbar: true,
    login: true,
}

modules

Name modules
Description Declare the VueJS components exported by extension components.
Synopsis modules: { path: [components...] }
Notes This property defines the exported components in an extension component file. Extension components can be defined via the Builder Cloud / Edit panel. For the components file, a corresponding value provides an array of exported VueJS components in that file.

Example

1
2
3
modules: {
    './extend/Components.js': ['Fleet']
}

redirect

Name redirect
Description Redirect the browser to a new location
Synopsis redirect: 'URL'
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context.

Example

The :deviceId will be replaced with the selected device ID from the device list.

1
redirect: '/devices/:deviceId/overview'

theme

Name theme
Description Define the display theme configuration
Synopsis theme: { properties ... }

Example

1
2
3
theme: {
    themes: { ... }
}

theme.themes

Name theme.themes
Description Set of colors to use for the dark and light UI themes.
Synopsis `themes: { dark: {...}, light: {...}}
Notes The themes collection should provide a "dark" and "light" mode set of colors. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
theme: {
    themes: {
        dark: {
            primary: '#3F51B5',
            secondary: '#707070',
            accent: '#82B1FF',    
            error: '#fb6d6d',
            info: '#2196F3',
            success: '#4CAF50',
            warning: '#FB8C00',
            extra: '#00cdcd',
            anchor: '#1976D2',
            nav: '#3f51b5',
        },
        light: { ...}
    }
}

timeouts

Name timeouts
Description Define timeout periods for various manager refresh tasks.
Synopsis timeouts: { dashboard: seconds }
Note The dashboard time governs how frequently dashboard widgets are updated. You can provide a numeric value in seconds or a textual value such as 3secs.

Example

1
2
3
timeouts: {
    dashboard: '10secs'
}

title

Name theme.title
Description The device title displayed in the navigation bar.
Synopsis title: 'Few word title' 
1
title: 'Acme Rocket Manager'

version

Name version
Description The version number of your Display.json file (SemVer).
Synopsis version: 'SemVer compatible version'

Example

1
version: '1.2.3'

views

Name views
Description Array of UI pages to define
Synopsis views: [ { view }, ...]
Note Views may also be nested under a view. Such nested views are presented as tabbed views under a common parent view.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
    name: 'fleet',
    title: 'Fleet Overview',
    enable: 'fleet',
    path: '/fleet',
    icon: 'mdi-gauge',
    component: 'Fleet',
    role: 'user',
    sidebar: true,
    period: 10
    views: [
        { /* Tabbed sub-views */ },
    ]
},

view.component

Name view.component
Description VueJS component to display for the view
Synopsis component: 'ComponentName'
Note The component can be an inbuilt Ioto Manager component or it can be a component provided by the extension components defined via the modules property.

The inbuilt components are listed below.

Example

1
2
3
{
    component: 'Generic',
},

Inbuilt VueJS Components

These components can be referenced in the Display.json file.

  • AccountSettings
  • Dashboard
  • GenericTable
  • GenericEdit
  • DeviceClaim
  • DeviceRelease
  • Forgot
  • Login
  • UserPassword
  • UserList
  • UserProfile

view.enble

Name view.enble
Description Enable or disable the view
Synopsis enable: true | false
Note This is useful when developing to disable partially developed views. Views are enabled by default.

Example

1
2
3
{
    enable: false,
},

view.icon

Name view.icon
Description Icon to display in menus
Synopsis icon: 'mdi-NAME'
Note The icon name is the name of a Material Design. You should use the icon name with an "mdi-" prefix.

Example

1
2
3
{
    icon: 'mdi-gauge'.
},

view.name

Name view.name
Description Name of the view
Synopsis name: 'One-word-name'
Note This name is used in several places including as a page title and VueJS route name.

Example

1
2
3
{
    name: 'fleet',
},

view.panels

Name view.panels
Description Array of slide in panels that overlay the view.
Synopsis panels: [ { panel }, ...]
Note Panels are defined inside a parent view. Panels are invoked via buttons defined in the panel properties that are displayed in the parent view. A typical use case is a parent view list of device components and a panel to edit a selected component. For example: from a parent view of device fans, a fan could be selected and an edit panel could modify the fan's operational properties.

Example

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

view.panel.button

Name view.panel.button
Description Button text to display in the parent view's table.
Synopsis role: 'User-role'
Notes The button will be automatically displayed by panel view parents that use the GenericTable component. If you are using a custom view parent component, you will need to manage the buttons display in that component.

Example

1
2
3
{
    button: 'admin',
},

view.panel.component

Name view.panel.component
Description VueJS component to display for the panel
Synopsis component: 'ComponentName'
Note The component can be an inbuilt Ioto Manager component or it can be a component provided by the extension components defined via the modules property.

The inbuilt components are listed below.

Example

1
2
3
{
    component: 'TempPanel',
},

view.panel.fields

Name view.panel.fields
Description Array of fields to edit
Synopsis fields: [ {field definition}, ...]
Note This defines an array of fields to edit when using the GenericEdit component. Input fields have a defined "type" which determines the HTML component used to edit the field value. Supported field types include: checkbox, combo, date, label, password, radio, select, slider, switch, text and textarea.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
    panels: [
        {
            name: 'edit',
            component: 'GenericEdit',
            role: 'admin',
            fields: [
                {
                    name: 'name',
                    type: 'label',
                    role: 'user',
                    props: {'max': 100},
                    width: 6,
                },
            ]
        }
    ]
},

view.panel.fields.label

Name view.panel.fields.label
Description Field displayed label
Synopsis label: 'fieldLabel'
Note The field label is displayed before the input field. If not provided, the field name is converted to PascalCase and used by default.

Example

1
2
3
{
    label: 'Speed',
}

view.panel.fields.name

Name view.panel.fields.name
Description Field name
Synopsis name: 'oneWordName'
Note If a field title is not provided, the field name is converted to PascalCase and is used as the input field title.

Example

1
2
3
{
    name: 'speed',
}

view.panel.fields.role

Name view.panel.fields.role
Description Required user role to display the field
Synopsis role: 'User-role'
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    role: 'admin',
},

view.panel.fields.select

Name view.panel.fields.select
Description Selectable options for switch fields.
Synopsis select: {options, ...}

Example

1
2
3
{
    select: {online: true, offline: false}
},

view.panel.fields.type

Name view.panel.fields.type
Description Field's input UI display type
Synopsis type: 'Type'
Note If the type is not provided, the Manager attempts to sleuth the type based on the data value provided to edit.

Example

1
2
3
4
5
6
{
    name: 'status',
    type: 'switch',
    select: {online: true, offline: false},
    width: 6
}

The supported panel field data types are:

  • checkbox
  • combo
  • date
  • label
  • password
  • radio
  • select
  • slider
  • switch
  • text
  • textarea

view.panel.fields.width

Name view.panel.fields.width
Description Number of columns the input field should occupy.
Synopsis width: '1-12'
Note The width is expressed as a number of columns between 1 and 12. The GenericEdit component uses a layout grid of 12 columns. GenericEdit will pack fields to fill a row, before starting a new display row.

Example

1
2
3
4
5
6
{
    name: 'User Password',
    type: 'password',
    select: {online: true, offline: false},
    width: 6
}

view.panel.name

Name view.panel.name
Description Unique panel name
Synopsis name: 'Name'

Example

1
2
3
{
    name: 'TempEdit',
},

view.panel.role

Name view.panel.role
Description Required user role to allow access
Synopsis role: 'User-role'
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    role: 'admin',
},

view.panel.title

Name view.panel.title
Description Panel Title
Synopsis title: 'Title'
Notes If the panel title is not provided, a title is created using the name of the model defined in the parent view table property. The model name is prefixed with 'Create' or 'Modify' as appropriate. For example, if the model was "Port" and an existing port item was selected in the table, the panel title would be "Modify Port".

Example

1
2
3
{
    title: 'Temperature Settings',
},

view.panel.width

Name view.panel.width
Description Display width of the panel
Synopsis width: 'NNpx'
Notes The width may be epxressed in pixesl via 'px' or as a percentage of the browser width. The default panel width is 700px.

Example

1
2
3
{
    width: '500px',
},

view.path

Name view.path
Description URL path for the view
Synopsis path: '/URL/PATH'
Note The URL path is used by VueJS when constructing the app routes and at runtime for navigating the views. The view path is relative to the view path of the parent view.

Example

1
2
3
{
    path: '/device/list',
},

view.role

Name view.role
Description Required user role to allow access
Synopsis role: 'User-role'
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    role: 'user',
},

view.sidebar

Name view.sidebar
Description Display the view's icon in the sidebar menu
Synopsis sidebar: true | false

Example

1
2
3
{
    sidebar: true,
},

view.table

Name view.table
Description View data table definition
Synopsis table: {table-properties}
Note The GenericTable component displays database model items as a table. The table can be extensively customized by table properties.

Background

The table is displayed by retrieving items from the table.model database model type. The columns of the table are defined via the table.fields and are displayed in order. Table action menu options are derived from the table.actions collection with buttons from any relevant view panels.

Data Table Data Table

Example

This example formats the image above:

 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
{
    table: {
        model: 'Event',
        fields: [
            {name: 'edit', icon: 'mdi-pencil'},
            {name: 'timestamp', width: '5%'},
            {
                name: 'severity',
                width: '5%',
                icon: {
                    info: {name: 'mdi-information-outline', color: 'green'},
                    warn: {name: 'mdi-alert-circle-outline', color: 'orange'},
                    error: {name: 'mdi-alert-circle-outline', color: 'red'},
                    critical: {name: 'mdi-flash', color: 'red'}
                }
            },
            {name: 'source'},
            {name: 'subject', align: 'left'},
            {name: 'message},
            {name: '*', launch: 'edit'}
        ],
        actions: {
            edit: {count: 1, launch: 'edit'},
            delete: {count: 2, confirm: true}
        }
    }
}

view.table.actions

Name view.table.actions
Description Actions that can be performed on selected table items.
Synopsis actions: { action, ...}
Notes The action collection has one or more action definitions. Each definition is a set of properties that scopes how many items can be manipulated (count), the view panel to display (panel), if user confirmation is required before taking the action (confirm) and whether a launch button should be displayed (launch).

Example

1
2
3
4
5
6
7
8
{
    table: {
        actions: {
            edit: {count: 1, launch: 'edit'},
            delete: {count: 2, confirm: true}
        }
    }
}

view.table.actions.confirm

Name view.table.actions.confirm
Description Display a dialog requesting user confirmation before invoking the action.
Synopsis confirm: true | false

Example

1
2
3
4
5
6
7
{
    table: {
        actions: {
            delete: {count: 2, confirm true}
        }
    }
}

view.table.actions.count

Name view.table.actions.count
Description Number of selected items the action supports.
Synopsis count: Number
Notes Set count to 0 for "add" actions that require no selected items. Set count to 1 for actions that can operate on only 1 item at a time. Set count to 2 for actions that can operation on multiple selected items.

Example

1
2
3
4
5
6
7
{
    table: {
        actions: {
            delete: {count: 2, confirm: true}
        }
    }
}

view.table.actions.invoke

Name view.table.actions.invoke
Description Panel name to display or URL to navigate to when the action is invoked
Synopsis invoke: 'ComponentName'
Notes The invoke property defines a VueJS component that will be invoked when the action is triggered. The component will be passed properties containing the data item (item) and the data model (model).

Example

1
2
3
4
5
6
7
{
    table: {
        actions: {
            restart: {count: 2, launch: 'NetRestart'}
        }
    }
}

view.table.actions.launch

Name view.table.actions.launch
Description Panel name to display or URL to navigate to when the action is invoked
Synopsis launch: 'PanelName' | 'URL'
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context.

Example

1
2
3
4
5
6
7
{
    table: {
        actions: {
            add: {count: 0, launch: 'claim'}
        }
    }
}

view.table.actions.panel

Name view.table.actions.panel
Description Panel to display when the action is invoked
Synopsis panel: 'PanelName'
Notes Panels can only be used for actions of count 0 or 1.

Example

1
2
3
4
5
6
7
{
    table: {
        actions: {
            edit: {count: 1, launch: 'edit'}
        }
    }
}

view.table.fields

Name view.table.fields
Description Define the table fields (columns) to display.
Synopsis fields: [ {field-definitions}, ...]
Notes The fields define each column in the displayed table. A field definition includes the data items name, with display formatting options.

A pseudo field with the name "*" may be defined to specify a launch action that will be invoked as a default when a row/column combination is click.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    table: {
        model: 'Port',
        fields: [
            {name: 'edit', icon: 'mdi-pencil', width: '5%'},
            {name: 'name', align: 'center'},
            {
                name: 'status',
                align: 'center',
                icon: {
                    online: {name: 'mdi-check-circle-outline', color: 'green'},
                    offline: 'mdi-flash-circle'
                }
            },
            {name: 'negotiate', align: 'center', icon: 'check'},
            {name: 'duplex', align: 'center', icon: 'check'},
            {name: 'flowControl', align: 'center', icon: 'check'},
            {name: 'jumbo', align: 'center', icon: 'check'},
            {name: 'speed', align: 'center'},
            {name: '*', launch: 'edit'}
        ]
    }
}

view.table.fields.align

Name view.table.fields.align
Description Align the table column
Synopsis align: 'center | left | right' 
1
2
3
{
    align: 'center'
}

view.table.fields.css

Name view.table.fields.css
Description CSS style name
Synopsis style: 'RuleName'
Note CSS rule to apply to the displayed field cells. The CSS rule must exist in a custom component. 
1
2
3
{
    css: 'unit-status'
}

view.table.fields.icon

Name view.table.fields.icon
Description Display an icon representing the field value
Synopsis icon: 'iconName' | {value-map}
Notes When set to a map value, the field value is used as an index into the map. If the index is not found, the "default" index is used. The map value may be either an icon name or a map containing a "name" property that specifies the icon name and a color property that specifies the color to use for the icon. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    icon: 'mdi-pencil'

    // or
    icon: {
        online: {name: 'mdi-check-circle-outline', color: 'green'},
        offline: 'mdi-flash-circle',
        default: 'mdi-flash-circle'
    }
}

view.table.fields.launch

Name view.table.fields.launch
Description Panel to launch or URL to navigate to
Synopsis launch: 'PanelName' | 'URL'
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context. 
1
2
3
{
    launch: 'edit'
}

view.table.fields.name

Name view.table.fields.name
Description Name of the data item field to display
Synopsis name: 'fieldName'
Note If a field.title property is not specified, the name is converted to PascalCase and used as the title. 
1
2
3
{
    name: 'id'
}

view.table.fields.style

Name view.table.fields.style
Description CSS style to apply to column cells
Synopsis style: 'CSS properties; ...' 
1
2
3
{
    style: 'max-width: 400px; text-overflow: ellipsis;'
}

view.table.fields.title

Name view.table.fields.title
Description Column title to display for the field
Synopsis title: 'Column Title' 
1
2
3
{
    title: 'Current Temperature'
}

view.table.fields.width

Name view.table.fields.width
Description Set the preferred width of the column.
Synopsis width: 'NNpx' | 'NN%'
Note This will set the initial preferred width of the column. 
1
2
3
{
    width: '5%'
}

view.table.sort

Name view.table.sort
Description How to sort the rows of the table
Synopsis sort: 'column:asc|desc'

Example

This will sort the table based on an ascending order of the "name" column.

1
2
3
4
5
{
    table: {
        sort: 'name:asc',
    }
}

view.table.model

Name view.table.model
Description Database model name to retrieve for table data
Synopsis model: 'ModelName'

Example

1
2
3
4
5
{
    table: {
        model: 'Event',
    }
}

view.widgets

Name view.widgets
Description Set of widgets to display when using the Dashboard component.
Synopsis widgets: [ {widget}, ...]
Note The widgets property defines an ordered set of widgets to be displayed by the Dashboard component. The enclosing view must set the component property to "Dashboard".

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
    views: [ {
        name: 'Overview',
        component: 'Dashboard',
        widgets: [
            {
                type: 'gauge',
                title: 'Network IO',
                min: 0,
                max: 10000,
                data: { 
                    model: 'Stats', 
                    field: 'io',
                    filter: {field: value},
                }
            }
        ]
    }
}

Supported Widget Types

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

view.widget.axes

Name view.widget.axes
Description Axes labels for "graph" and "time" widgets.
Synopsis axes: {x: 'text', y: 'Text'}

Example

1
2
3
{
    axes: {x: 'Time', y: 'KB'},
}

view.widget.data

Name view.widget.data
Description Map specifying the widget data source from the database.
Synopsis data: {model: 'Model', field: 'FieldName', filter: {key: 'value'}}
Note This property collection selects items or items from the database for display. Use either filter or where to select the database table item. See also view.widget.metric for metric data sources.

Example

1
2
3
4
5
6
7
8
{
    data: {
        model: 'Stats',
        field: 'io',
        filter: {key: 'value'},
        where: '${key} = {cpu}',
    },
}

view.widget.data.model

Name view.widget.data.model
Description Specify the database table entity (model) to select.
Synopsis data: {model: 'Store'}
Notes The Ioto cloud database stores multiple entity types in a single database table. Select the desired entity via the model property.

Example 

1
2
3
4
5
{
    data: {
        model: 'Stats',
    },
}

view.widget.data.field

Name view.widget.data.field
Description Select the desired database entity field.
Synopsis data: {field: 'value'}
Notes The field property defines which item field (column) to select.

Example 

1
2
3
4
5
{
    data: {
        field: 'io',
    },
}

view.widget.data.filter

Name view.widget.data.filter
Description Select the desired database item.
Synopsis data: {filter: {key:value, key2:value2, ...'}
Notes The filter property defines a selection criteria to select the desired database items (rows). You can specify multiple key/value properties in the filter map. The properties are joined using a logical AND. i.e. all properties must match. Alternatively, you can use the where property for more complex filter expressions involving logical OR operations.

Example 

1
2
3
4
5
{
    data: {
        filter: {key: cpu},
    },
}

view.widget.data.where

Name view.widget.data.where
Description Select the desired database item.
Synopsis data: {where: 'where-expression'
Notes The where property defines a selection expression to select the desired database items (rows). Where clauses permit more complex item filtering expressions. A where expression can use parenthesis to group terms and join subexpressions with "and" and "or". Values are wrapped in "{}" and database columns names are wrapped in "${}".

Example 

1
2
3
4
5
{
    data: {
        where: '(${key} = {cpu} and ${type} = {number})',
    },
}

view.widget.footer

Name view.widget.footer
Description Widget footer text
Synopsis `footer: 'Footer Text'
Note Footer text is only used by the "progress" widget.

Example

1
2
3
{
    footer: 'Active Ports'
}

view.widget.max

Name view.widget.max
Description Maximum data value
Synopsis max: Value
Note This defines the maximum value the data field may take. It is used to scale the widget display. The default is to set the maximum field value observed.

Example

1
2
3
{
    max: 100
}

view.widget.min

Name view.widget.min
Description Minimum data value
Synopsis min: Value
Note This defines the minimum value the data field may take. It is used to scale the widget display. The default is set to the minimum field value observed.

Example

1
2
3
{
    max: 100
}

view.widget.metric

Name view.widget.metric
Description Map specifying the widget data source from a metric.
Synopsis metric: {namespace, name, filter, period, statistic}
Notes Metrics are computed by Ioto if specified in the database schema. Widgets can also take their data source directly from the database via the view.widget.data property map.

Example

1
2
3
4
5
6
7
8
9
{
    metric: {
        namespace: 'Embedthis/Device',
        name: 'CPU',
        filter: {Device: ':deviceId'},
        period: 300,
        statistic: 'avg'
    }
}

view.widget.metric.filter

Name view.widget.metric.filter
Description Metric filter to select the desired metric instance (dimension).
Synopsis metric: {filter: {Device: ':deviceId'}}
Notes Metrics may be omitted for multiple instances of a resource. The filter property selects the appropriate metric instance. The filter property takes a map of properties that must all match the desired metric instance. You can use a tokenized :field value that is prefixed with a colon. This will be expanded at runtime. Supported tokens include: ":deviceId".

Example

1
2
3
4
5
{
    metric: {
        filter: {Device: ':deviceId'}
    }
}

view.widget.metric.name

Name view.widget.metric.name
Description Metric name.
Synopsis metric: {name: 'PowerCycles'}

Example

1
2
3
4
5
{
    metric: {
        name: 'PowerCycles',
    }
}

view.widget.metric.namespace

Name view.widget.metric.namespace
Description Metric namespace.
Synopsis metric: {namespace: 'Embedthis/Device'}
Notes The Embedthis/Device is the default namespace. You can specify namespaces in your device schema. Namespaces should be unique to your company / project. You should not create new metrics in the Embedthis/Device namespace as this may clash with future metrics emitted by Ioto.

Example

1
2
3
4
5
{
    metric: {
        namespace: 'Embedthis/Device',
    }
}

view.widget.metric.period

Name view.widget.metric.period
Description Metric period to query
Synopsis metric: {period: 300}
Notes For each metric, Ioto stores the metric value for the last 5 mins, 1hr, 24hrs, 7days, 28days and 1 year. The period property selects one of these metric samples. The sample selected is the first sample that is equal or greater than the requested period. The default period is 5mins. If expressed as a number, it is the number of seconds. Alternatively, you can express as a string with a units suffix. e.g. '5min'. The suffixes are min, hour, day, week, month and year.

Example

1
2
3
4
5
6
7
{
    metric: {
        period: 300,
or
        period: '1hour',
    }
}

view.widget.metric.statistic

Name view.widget.metric.statistic
Description Metric statistic to query.
Synopsis metric: {statistic: 'avg'}
Notes Ioto will compute metric values for the avg (average), max, min, sum (total) and count of samples.

Example

1
2
3
4
5
{
    metric: {
        statistic: 'max'
    }
}

view.widget.ticks

Name view.widget.ticks
Description The number of data items on the x axis
Synopsis ticks: Number

Example

1
2
3
{
    ticks: 12
}

view.widget.timespan

Name view.widget.timespan
Description The timespan for data displayed
Synopsis timespan: Seconds

Example

1
2
3
{
    timespan: 3600
}

view.widget.title

Name view.widget.title
Description Widget title to display
Synopsis title: 'Title'
Note See also widget.footer

Example

1
2
3
{
    title: 'Network IO',
}

view.widget.to

Name view.widget.to
Description URL to navigate to when the widget is clicked
Synopsis to: 'URL'

Example

1
2
3
{
    to: '/ports',
}

view.widget.type

Name view.widget.type
Description Type of widget
Synopsis widgets: [ {widget}, ...]
Note The widget type must be set to one of: event, gauge, graph, led, numeric, progress, text, time.

Example

1
2
3
4
{
    type: 'gauge',
    title: 'Network IO',
}