Widget definitions

Plugins can define new widget to use at dashboards. They are in essence very similar to screens. In this section it is assumed that the developer is already familiar with screens.

Manifest YAML definition

id: widget
type: widget
name: Prometheus graph
params:
  - label: Prometheus service
    name: service
    type: service
    traits: prometheus
    placeholder: If left empty means its at http://localhost:9090
  - label: Prometheus expression
    name: expr
    type: textarea
    description: |
      Check the [Prometheus documentation](https://prometheus.io/docs/querying/basics/)
      for more information.
    placeholder: "scrape_duration_seconds"

The widget will load the static/[widgetid].html and static/[widgetid].js files.

The params are used to configure the widget using Generic Forms.

HTML file

The HTML file will be loaded inside the widget if present.

JS file

The JS file should use IIFE, and register a callback for the set up of the plugin using Serverboards.add_widget(widget_id, function(el, props, context){}).

The el have the data-pluginid and data-componentid attributes.

props are the configuration of the widget as required in the params yaml definition. If it has any field of service type, it will be automatically resolved with the service data, including a config field with the service config.

context is an object that have context dependant functions and data:

  • setTitle – Sets the widget title
  • plugin_id – The plugin id
  • component_id – The widget component_id
  • widget_id – The full widget id (plugin_id/component_id)

As with screens, the developer can use React to create the plugins.