Widget-Referenz¶
Diese Seite ist die vollständige Referenz aller Custom-Dashboard-Widgets. Jeder Widget-Typ ist in einer zentralen Registry hinterlegt — Icon, Standardgröße, Standard-Datenquelle und Standard-Optionen sind pro Typ fest definiert und werden beim Platzieren als Ausgangspunkt übernommen.
Datenquelle — gemeinsame Felder¶
Die meisten Widgets teilen sich dieselbe Datenquellen-Struktur:
| Feld | Bedeutung |
|---|---|
tenant_ids |
Immer Mehrfachauswahl — auch wenn nur ein Tenant gewählt ist. Leer = alle zugänglichen Tenants |
service_ids |
konkrete Checks |
host_ids |
konkrete Hosts (alle deren Checks) |
check_types |
Filter nach Check-Typ (z. B. agent_disk, ping) |
host_group_ids |
Filter nach Profil (technisch: Profile-IDs) |
exclude_service_ids |
Checks explizit ausschließen (z. B. eine verrauschte Telemetrie aus einer Gruppen-Abfrage rausnehmen) |
aggregation |
avg / min / max / last / sum |
reduce |
mehrere Serien zu einer zusammenfassen: avg / min / max / sum |
field |
bei stat: welches Summary-Feld (total_hosts, ok, warning, critical, …) |
Variablen ($host, $tenant, …) lassen sich überall einsetzen, wo eine ID-Liste erwartet wird — siehe Custom Dashboards → Variablen.
Status & Übersicht¶
Status-Übersicht (status_overview)¶
Zusammenfassung OK/Warning/Critical/Unknown/No Data über die gewählte Auswahl.
| Option | Bedeutung |
|---|---|
layout |
Darstellung (Standard: Karten) |
showFields |
welche Status-Felder gezeigt werden (Default: alle fünf) |
showTotal |
Gesamtzahl mit anzeigen |
showPercent |
Prozentanteile statt/zusätzlich zu absoluten Zahlen |
Sinnvoll als Kopf-Kachel eines Dashboards.
Aktuelle Probleme (problems)¶
Liste der aktuell alarmierenden Checks.
| Option | Bedeutung |
|---|---|
maxItems |
Default 20 |
showAcknowledged |
auch „In Arbeit"-Probleme (ACK) mitzeigen |
Host-Übersicht (host_grid)¶
Hosts als Kacheln mit Status-Balken, schlimmste zuerst.
| Option | Bedeutung |
|---|---|
maxItems |
Default 12 |
onlyProblems |
nur Hosts mit offenen Problemen zeigen |
Global Log (system_log)¶
Ein Log-Tab mit allen seinen Filtern als eingebettetes Live-Widget.
| Option | Bedeutung |
|---|---|
maxItems |
Default 15 |
savedFilterId |
einen gespeicherten Filter aus dem Diagnose-Log referenzieren |
severity, category |
zusätzliche Vorfilter |
Log Stream (log_stream)¶
Live-Log-Anzeige mit Severity-Filter (aus logs, unabhängig vom Diagnose-Log).
| Option | Bedeutung |
|---|---|
maxItems |
Default 50 |
severityMin |
minimale Severity-Stufe |
Charts¶
Alle Chart-Widgets (Liniendiagramm, Balken, Kreis, Heatmap, Gauge) sind lazy-loaded (eigener ECharts-Chunk, wird erst bei Bedarf nachgeladen).
Liniendiagramm (line_chart)¶
Zeitreihen-Plot.
| Option | Bedeutung |
|---|---|
| Datenquelle | query, Standard-Aggregation avg |
fill |
Fläche unter der Linie füllen |
stacked |
mehrere Serien gestapelt |
Beispiel: CPU-Last über 24 h für eine Host-Auswahl.
Balkendiagramm (bar_chart)¶
Aggregierte Werte als Balken.
| Option | Bedeutung |
|---|---|
horizontal |
horizontale statt vertikale Balken (Default an) |
limit |
Top N (Default 10) |
sortDir |
asc / desc (Default desc) |
Beispiel: Top 10 Hosts nach Disk-Usage.
Top-N Liste (top_n)¶
Rangliste nach höchsten/niedrigsten Werten, tabellarisch statt als Balkendiagramm.
| Option | Bedeutung |
|---|---|
limit |
Default 10 |
sortDir |
asc / desc |
Statusverteilung (pie_chart)¶
Kreisdiagramm der Status-Verteilung über die gewählte Auswahl.
| Option | Bedeutung |
|---|---|
donut |
Donut- statt Vollkreis-Darstellung (Default an) |
Gauge (gauge)¶
Tachometer mit Schwellwert-Markern für einen einzelnen Wert.
| Option | Bedeutung |
|---|---|
min / max |
Skala (Default 0–100) |
unit |
Einheit (Default %) |
decimals |
Nachkommastellen |
thresholds |
Liste aus {value, color} — Default: Gelb ab 70, Rot ab 90 |
Heatmap (heatmap)¶
Farbmatrix, z. B. CPU pro Host über Zeit.
| Option | Bedeutung |
|---|---|
| Datenquelle | query, Standard-Aggregation avg |
Sinnvoll für „welcher Host hatte wann Probleme?".
Status-Timeline (status_timeline)¶
Zeitleiste mit farbigen Status-Balken pro Check, auf Basis der Check-Historie.
| Option | Bedeutung |
|---|---|
| Datenquelle | check_history, group_by (Default 1h), status_agg (worst/last) |
Check-Historie (check_history)¶
Tabellarischer Verlauf mit Status-Aggregation über Zeit-Buckets.
| Option | Bedeutung |
|---|---|
history_service_ids |
welche Checks |
group_by |
raw / 5m / 15m / 30m / 1h / 6h / 12h / 1d / 7d / 1M |
status_agg |
worst (schlechtester Status im Bucket) oder last |
Einzelwert & Kapazität¶
Einzelwert (stat)¶
Großer Zahl-Tile für einen Metrik-Wert.
| Option | Bedeutung |
|---|---|
decimals |
Nachkommastellen (Default 1) |
showSparkline |
kleiner Verlauf unter der Zahl (Default an) |
color, unit, thresholds |
wie bei Gauge |
Der Default-Dashboard-Startsatz jedes Tenants besteht aus vier stat-Kacheln (Hosts Total, OK, Warning, Critical).
Anomalien (anomaly_list)¶
Liste aktueller Anomalie-Ereignisse (Z-Score-Ausreißer gegen die 28-Tage-Baseline).
Kapazitätsprognosen (prediction_list)¶
Sortierte Liste der Capacity-Predictions — welcher Check erreicht zuerst seinen Schwellwert (lineare Regression, Tage bis „voll").
Inhalt & Navigation¶
Text / Notiz (text)¶
Markdown-Block für Doku, Kontakte, Links.
| Option | Bedeutung |
|---|---|
content |
Markdown-Inhalt |
fontSize |
Schriftgröße |
textAlign |
Ausrichtung |
bgColor |
Hintergrundfarbe |
verticalCenter |
vertikal zentrieren |
icon |
optionales Icon |
Inline-CSS, kein Tailwind
Beim Text-Widget werden Schriftgröße, Ausrichtung und vertikale Zentrierung als Inline-Style gesetzt — Tailwind-Klassen würden von den gerenderten Markdown-Kind-Elementen überschrieben. Vertikale Zentrierung läuft über CSS Grid (display: grid; place-items: center), nicht Flexbox.
Link-Button (link_button)¶
Navigations-Button zu einer Vesana-Seite oder einer externen URL.
| Option | Bedeutung |
|---|---|
label |
Beschriftung |
targetType |
page (interne Route), host, dashboard oder externe URL |
hostId / dashboardId |
Ziel-ID (überlebt Umbenennung — anders als ein fest verlinkter Pfad) |
href |
Ziel-URL bzw. -Route |
description |
optionaler Hilfetext |
Tabelle¶
Tabelle (table)¶
Tabellarische Daten (Hosts, Status). Nutzt auch die Check-Historie-Ansicht, wenn die Datenquelle auf check_history steht.
| Option | Bedeutung |
|---|---|
columns |
konfigurierbare Spaltenliste (Default: host, service, status, value, last_check) |
Widget-Architektur (intern)¶
| Datei | Zweck |
|---|---|
frontend/src/components/widgets/registry.tsx |
Registry — registerWidget() für neue Typen, Standardgröße/-optionen |
frontend/src/components/widgets/WidgetRenderer.tsx |
Query-Orchestrierung, Variable-Auflösung |
frontend/src/types/index.ts |
WidgetDataSource, WidgetDisplayOptions |
Neuen Widget-Typ hinzufügen: Komponente erstellen → in der Registry registrieren → ggf. den Konfigurations-Dialog erweitern.
Anschluss¶
- Custom Dashboards — wo Widgets platziert werden
- Variablen — wie
$host& Co. funktionieren