Skip to main content

Dashboards & Widgets

note

The widget catalog below reflects the widgets currently shipping in ORO. More widget types are added regularly.

OpenRobOps provides a customizable dashboard system for monitoring your robot fleet. Dashboards are composed of widgets — self-contained UI components that display specific data.

Dashboard Types

Fleet Dashboard

The fleet dashboard shows an overview of all connected robots. It includes fleet-level widgets that aggregate data across the fleet.

Robot Dashboard

Clicking on a robot opens its detail dashboard, showing robot-specific widgets with live telemetry, vitals, and controls.

Available Widgets

Fleet Widgets

WidgetConfig API typeDescription
Fleet StatusfleetStatusFleet-wide status grid with configurable attribute columns and color coding
Fleet ControlfleetControlFilter, sort, and group robots by status or attribute
IncidentTimelineincidentTimelineCalendar timeline of incidents across robots (uses react-calendar-timeline)
IncidentListincidentListSortable list of active and recent incidents
Fleet Log (Audit)auditLogFleetFleet-wide audit log of action executions and events
TexttextMarkdown panel (config.text) used for welcome pages and informational content; added via Config API only

The type value is what DashboardDefinition widgets reference — see Config API Kinds.

Robot Widgets

WidgetConfig API typeDescription
VitalsvitalsReal-time system vitals: CPU, memory, disk, network RTT
Timeline (Timeseries)chartLine/area chart of any attribute over time; config: chartType (areachart/linechart, required), min/max, per-source op (avg / min / max / sum / count / last), precision, scale
ROS DiagnosticsdiagnosticsHardware diagnostic statuses by component, with severity filtering
Key-value SourceskeyValuesTable of key-value pairs from a configured data source
Log files (Text)customDataTextText-file content published by the agent
Custom ImagecustomDataImageImages published by the agent
CameracameraWidgetLive camera feed (see note below on cameraId)
ActionsactionsWidgetRobot action buttons; can be embedded inline or shown as a dedicated widget (with expanded, bigButtons, and actionIds config)
Robot Control BarrobotControlBarStrip of common controls (search, restart agent, update agent, lock/unlock, robot info)
Robot Log (Audit)auditLogPer-robot audit log of action executions and events
Maps

The 2D map view (robot pose, costmap, laser scans, paths) currently renders only inside the Navigation dashboard's Navigation Detail widget; a standalone map widget for robot dashboards is not currently enabled.

The Camera widget's cameraId is the camera slot key into the agent's cameras_config map ("0", "1", …; default "0"), from which the ROS topic is derived — it is not a topic name.

The Navigation dashboard layers teleoperation on top of the standard map view:

WidgetConfig API typeDescription
Navigation DetailnavigationCombined view with map, teleop controls, teleop gauges, and a camera grid
Navigation Control BarnavigationControlBarRobot selection and navigation-specific actions
Camera GridMulti-camera layout (sub-component of Navigation Detail)
Teleop ControlsJoystick and velocity command interface (sub-component)
Teleop GaugesSpeed and rotation feedback gauges (sub-component)

The speed/rotation gauges are fed by odometry ingestion (mqtt.odometryEnabled, on by default) — see Robot Telemetry.

Defined but not enabled

These widget type ids exist in the schema but their renderers are currently disabled — dashboards referencing them show "Unknown widget type": localization (standalone map), dataBags, logsWidget, image, robotSearch, history, missionTracker, fleetMissionTracker, missionControlBar.

Widget Toolbars

Most widgets render inside a toolbar wrapper that hosts widget-specific controls — for example a time-range and aggregation picker for the Timeline widget (TimelineFilter), severity and component filters for the Incident widgets (IncidentsFilter, IncidentTimelineFilter), and severity filters for ROS Diagnostics (ROSDiagnosticsFilter). Several filters include a shared Live / History toggle (LiveButton).

Widget Data Flow

Each widget receives data through React context and Meteor's reactive pub/sub system:

  1. Telemetry arrives via MQTT and is processed by the ingest service.
  2. MongoDB stores the processed data in appropriate collections.
  3. Meteor publications reactively push data changes to subscribed clients.
  4. Widget components render the data using React 18 and Material UI.

Widgets use the WidgetDataContext for shared robot data and the useCustomWidgetData() hook for retrieving custom data sources.

Custom Data Widgets

Custom data is displayed by three distinct widget types, all rendered by one underlying component and selected by the widget's config.mapping.source:

Widget typeMapping sourceDescription
Key-value Sources (keyValues)key-valueNamed key-value pairs in a table
Log files (customDataText)file-textText-file content
Custom Image (customDataImage)file-imageImages published by the agent

The mapping.sourceId selects which configured data source to display. Note these widgets' config cannot currently be set through the Config API — their dashboard converters accept no configuration.

Layout

Widgets are rendered within a DashboardWidgetWrapper component that provides consistent styling and layout. The dashboard uses a responsive grid layout built on Material UI.

Configuring Dashboards

Dashboard content is driven by the data sources and status definitions configured through the ConfigAPI. To customize what appears on dashboards:

  1. Define DataSourceDefinitions to map telemetry fields to widget data
  2. Define StatusDefinitions to control status indicators and thresholds
  3. Widgets automatically pick up configuration changes

See Custom Widgets to learn how to build new widget types.