Widget reference¶
This page is the complete reference for all custom-dashboard widgets. Every widget type is registered in a central registry — icon, default size, default data source and default options are fixed per type and used as the starting point when you place it.
Data source — shared fields¶
Most widgets share the same data-source structure:
| Field | Meaning |
|---|---|
tenant_ids |
always multi-select — even with a single tenant chosen. Empty = all accessible tenants |
service_ids |
specific checks |
host_ids |
specific hosts (all their checks) |
check_types |
filter by check type (e.g. agent_disk, ping) |
host_group_ids |
filter by profile (technically: profile IDs) |
exclude_service_ids |
exclude checks explicitly (e.g. drop a noisy telemetry check from a group query) |
aggregation |
avg / min / max / last / sum |
reduce |
collapse several series into one: avg / min / max / sum |
field |
for stat: which summary field (total_hosts, ok, warning, critical, …) |
Variables ($host, $tenant, …) can be used anywhere an ID list is expected — see Custom dashboards → Variables.
Status & overview¶
Status overview (status_overview)¶
Summary of OK/Warning/Critical/Unknown/No Data over the chosen scope.
| Option | Meaning |
|---|---|
layout |
display style (default: cards) |
showFields |
which status fields are shown (default: all five) |
showTotal |
also show the total count |
showPercent |
show percentages instead of/in addition to absolute counts |
Useful as a header tile on a dashboard.
Current problems (problems)¶
List of currently alerting checks.
| Option | Meaning |
|---|---|
maxItems |
default 20 |
showAcknowledged |
also show "in progress" problems (ACK) |
Host grid (host_grid)¶
Hosts as tiles with a status bar, worst first.
| Option | Meaning |
|---|---|
maxItems |
default 12 |
onlyProblems |
show only hosts with open problems |
Global log (system_log)¶
An embedded, live version of a log tab, with all its filters.
| Option | Meaning |
|---|---|
maxItems |
default 15 |
savedFilterId |
reference a saved filter from the diagnostic log |
severity, category |
additional pre-filters |
Log stream (log_stream)¶
Live log display with severity filter (from logs, independent of the diagnostic log).
| Option | Meaning |
|---|---|
maxItems |
default 50 |
severityMin |
minimum severity level |
Charts¶
All chart widgets (line, bar, pie, heatmap, gauge) are lazy-loaded (their own ECharts chunk, only fetched on demand).
Line chart (line_chart)¶
Time-series plot.
| Option | Meaning |
|---|---|
| Data source | query, default aggregation avg |
fill |
fill the area under the line |
stacked |
stack multiple series |
Example: CPU load over 24 h for a host selection.
Bar chart (bar_chart)¶
Aggregated values as bars.
| Option | Meaning |
|---|---|
horizontal |
horizontal instead of vertical bars (default on) |
limit |
top N (default 10) |
sortDir |
asc / desc (default desc) |
Example: top 10 hosts by disk usage.
Top-N list (top_n)¶
Ranked list of highest/lowest values, tabular instead of a bar chart.
| Option | Meaning |
|---|---|
limit |
default 10 |
sortDir |
asc / desc |
Status distribution (pie_chart)¶
Pie chart of the status distribution over the chosen scope.
| Option | Meaning |
|---|---|
donut |
donut instead of full-circle display (default on) |
Gauge (gauge)¶
Speedometer with threshold markers for a single value.
| Option | Meaning |
|---|---|
min / max |
scale (default 0–100) |
unit |
unit (default %) |
decimals |
decimal places |
thresholds |
list of {value, color} — default: yellow from 70, red from 90 |
Heatmap (heatmap)¶
Color matrix, e.g. CPU per host over time.
| Option | Meaning |
|---|---|
| Data source | query, default aggregation avg |
Useful for "which host had problems, and when?".
Status timeline (status_timeline)¶
Timeline with colored status bars per check, based on check history.
| Option | Meaning |
|---|---|
| Data source | check_history, group_by (default 1h), status_agg (worst/last) |
Check history (check_history)¶
Tabular history with status aggregation over time buckets.
| Option | Meaning |
|---|---|
history_service_ids |
which checks |
group_by |
raw / 5m / 15m / 30m / 1h / 6h / 12h / 1d / 7d / 1M |
status_agg |
worst (worst status in the bucket) or last |
Single value & capacity¶
Single value (stat)¶
Large number tile for a metric value.
| Option | Meaning |
|---|---|
decimals |
decimal places (default 1) |
showSparkline |
small trend line under the number (default on) |
color, unit, thresholds |
as with gauge |
Every tenant's default dashboard starts with four stat tiles (Hosts Total, OK, Warning, Critical).
Anomalies (anomaly_list)¶
List of current anomaly events (Z-score outliers against the 28-day baseline).
Capacity predictions (prediction_list)¶
Sorted list of capacity predictions — which check reaches its threshold first (linear regression, days until "full").
Content & navigation¶
Text / note (text)¶
Markdown block for documentation, contacts, links.
| Option | Meaning |
|---|---|
content |
Markdown content |
fontSize |
font size |
textAlign |
alignment |
bgColor |
background color |
verticalCenter |
center vertically |
icon |
optional icon |
Inline CSS, no Tailwind
The text widget sets font size, alignment and vertical centering as inline styles — Tailwind classes would be overridden by the rendered Markdown child elements. Vertical centering uses CSS Grid (display: grid; place-items: center), not flexbox.
Link button (link_button)¶
Navigation button to a Vesana page or an external URL.
| Option | Meaning |
|---|---|
label |
caption |
targetType |
page (internal route), host, dashboard, or an external URL |
hostId / dashboardId |
target ID (survives renames — unlike a hard-coded path) |
href |
target URL or route |
description |
optional help text |
Table¶
Table (table)¶
Tabular data (hosts, status). Also renders the check-history view when the data source is set to check_history.
| Option | Meaning |
|---|---|
columns |
configurable column list (default: host, service, status, value, last_check) |
Widget architecture (internal)¶
| File | Purpose |
|---|---|
frontend/src/components/widgets/registry.tsx |
registry — registerWidget() for new types, default size/options |
frontend/src/components/widgets/WidgetRenderer.tsx |
query orchestration, variable resolution |
frontend/src/types/index.ts |
WidgetDataSource, WidgetDisplayOptions |
Adding a new widget type: create the component → register it in the registry → extend the config dialog if needed.
Next¶
- Custom dashboards — where widgets are placed
- Variables — how
$host& friends work