Skip to content

Widget reference

Complete reference of all custom-dashboard widgets. Per widget: what it's for, what data, what options.

Status & overview

Status summary

Counts OK / WARN / CRIT / NO_DATA / UNKNOWN over the chosen scope.

Option Meaning
Scope Tenant, host filter, tag filter
Display Pills or stacked bar

Useful as a dashboard header.

Active problems

List of currently HARD CRIT/WARN services.

Option Meaning
Max items Default 20
Sort by severity / by duration
Action buttons inline acknowledge

Active downtimes

Table of currently active downtimes with remaining time.

Recent alerts

Last N alert notifications with severity, host, service, time.

Charts

All chart widgets use ECharts (lazy-loaded).

Line chart

Time-series plot.

Option Meaning
Source service or multi-service
Metric value, perfdata.<key>
Aggregation min, max, avg, p95, p99
Bucket auto / 1m / 5m / 1h
Y-axis linear / log / fixed scale

Example: CPU load over 24 h for host selection.

Bar chart

Aggregated values as bars.

Option Meaning
Group-by host / tenant / tag / profile
Metric same aggregate set
Sort asc / desc
Limit top N

Example: top 10 hosts by disk usage.

Pie chart

Status distribution as pie.

Option Meaning
Scope tenant / tag filter
Slice definition status / profile / tag

Gauge

Single value with scale.

Option Meaning
Service concrete service
Min / Max scale
Threshold markers warn/crit lines

Example: current CPU of a server, 0–100 with threshold markers.

Heatmap

Values over time × dimension (e.g. CPU per host per hour).

Option Meaning
Y-axis hosts / services
X-axis time in buckets
Color scale linear / log

Useful for „which host had problems when?".

Anomaly & predictions

Anomaly events

List of all anomaly events in the period, with sensitivity, z-score, service.

Predictions

Sorted list of capacity predictions: which service hits its threshold first?

Option Meaning
Filter tenant / profile / tag
Min confidence R² threshold
Max days ahead only predictions in the next X days

Content & navigation

Text / note

Markdown block for docs, contacts, links.

Option Meaning
Content Markdown
Font size sm / md / lg / xl
Alignment left / centered
Background transparent / subtle tint

Inline CSS, not Tailwind

Text widget styles font size, text-align, vertical centering as inline style — Tailwind classes are overridden by Markdown child elements. Vertical centering uses CSS Grid (display: grid; place-items: center), not Flexbox.

Image

Static image via URL or upload.

Option Meaning
Source URL or upload
Click action optional link
Fit contain / cover

Predefined links as buttons (wiki articles, external tools, public status pages).

Tables

Service table

Tabular service list with status, value, last check, host.

Option Meaning
Columns configurable
Filter status / tag / profile
Sort per column
Max items pagination beyond N

Host table

Same for hosts with aggregated status.

Special widgets

iframe

Embedded external content.

Option Meaning
URL any
Height px

CSP only allows same-origin or public origins listed in system_settings.iframe_allowlist.

Stat tile

Big number tile with optional trend indicator.

Option Meaning
Source service value or aggregation
Trend compare vs. 7d / 24h / 1h ago

Map (geo)

Hosts on a map based on geo tags.

Option Meaning
Tile source OpenStreetMap (default)
Marker color by status

Widget architecture (internal)

File Purpose
frontend/src/components/widgets/registry.tsx Registry — registerWidget() for new types
frontend/src/components/widgets/WidgetRenderer.tsx Query orchestration, variable resolution
frontend/src/components/widgets/WidgetConfigDialog.tsx Settings per widget type
frontend/src/types/index.ts WidgetDataSource, WidgetDisplayOptions

Adding a new widget type: build component → register → extend config dialog if needed. PR against frontend/.

Next