Frontend Dashboard Architecture

Purpose

Developer documentation for the frontend dashboard architecture, including page structure, runtime behavior, state handling, widget composition, and telemetry-aware rendering.

Overview

The dashboard frontend is organized around dashboard pages, widget rendering, shared runtime state, configuration-driven layout, and telemetry-aware update flows.

Main Responsibilities

• Load dashboard configuration and metadata.
• Resolve dashboard state and selected context.
• Render widget layout from dashboard configuration.
• Feed widgets with current and historical telemetry.
• React to live telemetry and runtime status updates.
• Support edit flows such as adding widgets and saving changes.

Core Frontend Areas

• features/dashboards contains dashboard pages, runtime views, editing flows, and feature-specific logic.
• widgets contains widget implementations and widget configuration components.
• stores contains shared state and derived runtime data used by dashboard flows.
• hooks contains data loading and telemetry access patterns used across dashboard runtime.
• Shared UI and utility areas support reusable rendering and interaction patterns.

Dashboard Runtime Model

• Dashboard pages are configuration-driven and render based on the active dashboard definition.
• Runtime behavior depends on selected state, active entity context, toolbar controls, and widget requirements.
• Widgets may operate in live or historical mode depending on runtime context and selected time window.
• Edit-mode behavior adds composition actions such as add widget, configure widget, and save dashboard.

Widget Composition

• Widgets are rendered from dashboard configuration rather than being hardcoded into the page.
• Widget configuration shape determines what data a widget resolves and how it is displayed.
• Shared widget configuration flow allows common runtime settings while widget-specific configuration extends per widget type.

State and Context Handling

• Dashboard state selection can alter which page or logical dashboard state is active.
• Entity context selection influences how widgets resolve aliases, entities, and telemetry keys.
• Toolbar controls act as runtime inputs that change rendering and data resolution behavior.

Telemetry-Aware Rendering

• Widgets consume current values, historical series, or live updates depending on runtime mode.
• Hooks and stores normalize access to telemetry so widgets do not independently reinvent the same resolution flow.
• Realtime handlers merge incoming updates into the state consumed by runtime views and widgets.

Developer Notes

• This document should explain how the frontend dashboard system is organized, not just what the user sees.
• Per-widget details belong in the dashboard widgets developer docs, while live runtime behavior belongs in the dashboard realtime and telemetry flow docs.