duck.etc.blueprints.dashboard.ui.components.system_metrics_panel

SystemMetricsPanel component — renders live OS-level system metrics.

Displays CPU, memory, concurrency, open files, network I/O, and storage as individual metric cards inside a single panel. Each card handles its own unavailability gracefully — if a metric fails to collect, the card shows a clear error placeholder instead of breaking the panel.

Module Contents

Classes

SystemMetricsPanel

Renders a grid of system-level metric cards.

API

class duck.etc.blueprints.dashboard.ui.components.system_metrics_panel.SystemMetricsPanel(element: Optional[str] = None, properties: Optional[Dict[str, str]] = None, props: Optional[Dict[str, str]] = None, style: Optional[Dict[str, str]] = None, inner_html: Optional[Union[str, str, float]] = None, children: Optional[List[duck.html.components.HtmlComponent]] = None, **kwargs)[source]

Bases: duck.html.components.InnerComponent

Renders a grid of system-level metric cards.

Each card corresponds to one OS metric (CPU, memory, etc.) and renders either a live value with a visual gauge, or an error placeholder if the metric was unavailable at collection time.

Props: data (dict): Output of system_metrics.get_system_metrics().

Initialization

Initialize an HTML component.

Parameters:

  • element – The HTML element tag name (e.g., textarea, input, button). Can be None, but make sure element is returned by get_element method.

  • accept_inner_html – Whether the HTML component accepts an inner body (e.g., inner-body-here).

  • inner_html – Inner html to add to the HTML component. Defaults to None.

  • properties – Dictionary for properties to initialize the component with.

  • props – Just same as properties argument (added for simplicity).

  • style – Dictionary for style to initialize the component with.

  • **kwargs – Extra keyword arguments

Raises:

HtmlComponentError – If ‘element’ is not a string or ‘inner_html’ is set but ‘accept_inner_html’ is False.

_build_concurrency_card(d: dict) → str[source]

Returns HTML for the concurrency (active threads) card.

Parameters:

d – Concurrency metrics dict.

Returns:

HTML string for the concurrency metric card.

_build_cpu_card(d: dict) → str[source]

Returns HTML for the CPU utilisation card.

Parameters:

d – CPU metrics dict from system_metrics.get_cpu_metrics().

Returns:

HTML string for the CPU metric card.

_build_memory_card(d: dict) → str[source]

Returns HTML for the memory usage card.

Parameters:

d – Memory metrics dict from system_metrics.get_memory_metrics().

Returns:

HTML string for the memory metric card.

_build_network_card(d: dict) → str[source]

Returns HTML for the network I/O card.

Parameters:

d – Network metrics dict.

Returns:

HTML string for the network I/O metric card.

_build_open_files_card(d: dict) → str[source]

Returns HTML for the open file descriptors card.

Parameters:

d – Open files metrics dict.

Returns:

HTML string for the open files metric card.

_build_storage_card(d: dict) → str[source]

Returns HTML for the disk storage card.

Parameters:

d – Storage metrics dict.

Returns:

HTML string for the storage metric card.

_error_card(title: str, error_msg: str) → str[source]

Returns an error placeholder card for an unavailable metric.

Parameters:

  • title – The metric name that failed.

  • error_msg – The error message or description string.

Returns:

HTML string for the error placeholder card.

_gauge_card(title: str, pct: float, unit: str, color: str, details: list) → str[source]

Returns a metric card with a horizontal gauge bar and detail rows.

Parameters:

  • title – Card heading.

  • pct – Percentage fill (0–100) for the gauge.

  • unit – Unit label shown next to the value.

  • color – CSS color string for the gauge fill and value.

  • details – List of (key, value) tuples for the detail rows.

Returns:

HTML string for the gauge card.

_gauge_color(pct: float) → str[source]

Returns a CSS color string based on the utilisation percentage.

Parameters:

pct – Utilisation percentage (0–100).

Returns:

A CSS color string from the Theme palette.

_value_card(title: str, value: str, unit: str, color: str, details: list) → str[source]

Returns a metric card with a large value and detail rows, no gauge.

Parameters:

  • title – Card heading.

  • value – Primary metric value string.

  • unit – Unit label shown below the value.

  • color – CSS color for the primary value.

  • details – List of (key, value) tuples for the detail rows.

Returns:

HTML string for the value card.

build_body(data: dict) → duck.html.components.container.Container[source]

Returns the metrics grid containing all six metric cards.

Parameters:

data – The system metrics snapshot dict.

Returns:

A Container wrapping the six metric cards in a grid.

build_header() → duck.html.components.container.Container[source]

Returns the panel header with title and OS badge.

Returns:

A Container with the header markup.

get_element() → str[source]
Returns:

The HTML element tag for this component.

on_create() → None[source]

Builds the panel header and system metrics grid.